Page MenuHomePhabricator
Files F13115091

D10824.diff
No OneTemporary
Actions

D10824.diff
View Options

diff --git a/web/cashtab/package-lock.json b/web/cashtab/package-lock.json
--- a/web/cashtab/package-lock.json
+++ b/web/cashtab/package-lock.json
@@ -25,6 +25,7 @@
"qrcode.react": "^1.0.0",
"react": "^17.0.1",
"react-app-polyfill": "^2.0.0",
+ "react-beautiful-dnd": "^13.1.0",
"react-copy-to-clipboard": "^5.0.3",
"react-dev-utils": "^11.0.4",
"react-device-detect": "^1.15.0",
@@ -1463,10 +1464,14 @@
}
},
"node_modules/@babel/runtime": {
- "version": "7.13.10",
- "license": "MIT",
+ "version": "7.16.5",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz",
+ "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==",
"dependencies": {
"regenerator-runtime": "^0.13.4"
+ },
+ "engines": {
+ "node": ">=6.9.0"
}
},
"node_modules/@babel/runtime-corejs3": {
@@ -2853,6 +2858,15 @@
"@types/node": "*"
}
},
+ "node_modules/@types/hoist-non-react-statics": {
+ "version": "3.3.1",
+ "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+ "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+ "dependencies": {
+ "@types/react": "*",
+ "hoist-non-react-statics": "^3.3.0"
+ }
+ },
"node_modules/@types/html-minifier-terser": {
"version": "5.1.1",
"dev": true,
@@ -2915,7 +2929,6 @@
},
"node_modules/@types/prop-types": {
"version": "15.7.3",
- "dev": true,
"license": "MIT"
},
"node_modules/@types/q": {
@@ -2925,7 +2938,6 @@
},
"node_modules/@types/react": {
"version": "17.0.3",
- "dev": true,
"license": "MIT",
"dependencies": {
"@types/prop-types": "*",
@@ -2933,6 +2945,17 @@
"csstype": "^3.0.2"
}
},
+ "node_modules/@types/react-redux": {
+ "version": "7.1.21",
+ "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.21.tgz",
+ "integrity": "sha512-bLdglUiBSQNzWVVbmNPKGYYjrzp3/YDPwfOH3nLEz99I4awLlaRAPWjo6bZ2POpxztFWtDDXIPxBLVykXqBt+w==",
+ "dependencies": {
+ "@types/hoist-non-react-statics": "^3.3.0",
+ "@types/react": "*",
+ "hoist-non-react-statics": "^3.3.0",
+ "redux": "^4.0.0"
+ }
+ },
"node_modules/@types/react-test-renderer": {
"version": "17.0.1",
"dev": true,
@@ -2943,7 +2966,6 @@
},
"node_modules/@types/scheduler": {
"version": "0.16.1",
- "dev": true,
"license": "MIT"
},
"node_modules/@types/source-list-map": {
@@ -6741,6 +6763,14 @@
"node": ">=6"
}
},
+ "node_modules/css-box-model": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+ "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+ "dependencies": {
+ "tiny-invariant": "^1.0.6"
+ }
+ },
"node_modules/css-color-keywords": {
"version": "1.0.0",
"license": "ISC",
@@ -7386,7 +7416,6 @@
},
"node_modules/csstype": {
"version": "3.0.7",
- "dev": true,
"license": "MIT"
},
"node_modules/cuid": {
@@ -21263,6 +21292,11 @@
"performance-now": "^2.1.0"
}
},
+ "node_modules/raf-schd": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+ "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+ },
"node_modules/random-bytes": {
"version": "1.0.0",
"license": "MIT",
@@ -21912,6 +21946,24 @@
"asap": "~2.0.6"
}
},
+ "node_modules/react-beautiful-dnd": {
+ "version": "13.1.0",
+ "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
+ "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
+ "dependencies": {
+ "@babel/runtime": "^7.9.2",
+ "css-box-model": "^1.2.0",
+ "memoize-one": "^5.1.1",
+ "raf-schd": "^4.0.2",
+ "react-redux": "^7.2.0",
+ "redux": "^4.0.4",
+ "use-memo-one": "^1.1.1"
+ },
+ "peerDependencies": {
+ "react": "^16.8.5 || ^17.0.0",
+ "react-dom": "^16.8.5 || ^17.0.0"
+ }
+ },
"node_modules/react-copy-to-clipboard": {
"version": "5.0.3",
"license": "MIT",
@@ -22078,9 +22130,33 @@
}
},
"node_modules/react-is": {
- "version": "17.0.1",
- "dev": true,
- "license": "MIT"
+ "version": "17.0.2",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+ },
+ "node_modules/react-redux": {
+ "version": "7.2.6",
+ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
+ "integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==",
+ "dependencies": {
+ "@babel/runtime": "^7.15.4",
+ "@types/react-redux": "^7.1.20",
+ "hoist-non-react-statics": "^3.3.2",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.7.2",
+ "react-is": "^17.0.2"
+ },
+ "peerDependencies": {
+ "react": "^16.8.3 || ^17"
+ },
+ "peerDependenciesMeta": {
+ "react-dom": {
+ "optional": true
+ },
+ "react-native": {
+ "optional": true
+ }
+ }
},
"node_modules/react-router": {
"version": "5.2.0",
@@ -22285,6 +22361,14 @@
"node": ">=0.10.0"
}
},
+ "node_modules/redux": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
+ "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
+ "dependencies": {
+ "@babel/runtime": "^7.9.2"
+ }
+ },
"node_modules/regenerate": {
"version": "1.4.2",
"dev": true,
@@ -26362,6 +26446,14 @@
"node": ">=0.10.0"
}
},
+ "node_modules/use-memo-one": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
+ "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==",
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0"
+ }
+ },
"node_modules/util-deprecate": {
"version": "1.0.2",
"license": "MIT"
@@ -29533,7 +29625,9 @@
}
},
"@babel/runtime": {
- "version": "7.13.10",
+ "version": "7.16.5",
+ "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz",
+ "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==",
"requires": {
"regenerator-runtime": "^0.13.4"
}
@@ -30466,6 +30560,15 @@
"@types/node": "*"
}
},
+ "@types/hoist-non-react-statics": {
+ "version": "3.3.1",
+ "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
+ "integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
+ "requires": {
+ "@types/react": "*",
+ "hoist-non-react-statics": "^3.3.0"
+ }
+ },
"@types/html-minifier-terser": {
"version": "5.1.1",
"dev": true
@@ -30516,8 +30619,7 @@
"dev": true
},
"@types/prop-types": {
- "version": "15.7.3",
- "dev": true
+ "version": "15.7.3"
},
"@types/q": {
"version": "1.5.4",
@@ -30525,13 +30627,23 @@
},
"@types/react": {
"version": "17.0.3",
- "dev": true,
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
"csstype": "^3.0.2"
}
},
+ "@types/react-redux": {
+ "version": "7.1.21",
+ "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.21.tgz",
+ "integrity": "sha512-bLdglUiBSQNzWVVbmNPKGYYjrzp3/YDPwfOH3nLEz99I4awLlaRAPWjo6bZ2POpxztFWtDDXIPxBLVykXqBt+w==",
+ "requires": {
+ "@types/hoist-non-react-statics": "^3.3.0",
+ "@types/react": "*",
+ "hoist-non-react-statics": "^3.3.0",
+ "redux": "^4.0.0"
+ }
+ },
"@types/react-test-renderer": {
"version": "17.0.1",
"dev": true,
@@ -30540,8 +30652,7 @@
}
},
"@types/scheduler": {
- "version": "0.16.1",
- "dev": true
+ "version": "0.16.1"
},
"@types/source-list-map": {
"version": "0.1.2",
@@ -33268,6 +33379,14 @@
}
}
},
+ "css-box-model": {
+ "version": "1.2.1",
+ "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+ "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+ "requires": {
+ "tiny-invariant": "^1.0.6"
+ }
+ },
"css-color-keywords": {
"version": "1.0.0"
},
@@ -33674,8 +33793,7 @@
}
},
"csstype": {
- "version": "3.0.7",
- "dev": true
+ "version": "3.0.7"
},
"cuid": {
"version": "2.1.8"
@@ -42942,6 +43060,11 @@
"performance-now": "^2.1.0"
}
},
+ "raf-schd": {
+ "version": "4.0.3",
+ "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+ "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ=="
+ },
"random-bytes": {
"version": "1.0.0"
},
@@ -43349,6 +43472,20 @@
}
}
},
+ "react-beautiful-dnd": {
+ "version": "13.1.0",
+ "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
+ "integrity": "sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA==",
+ "requires": {
+ "@babel/runtime": "^7.9.2",
+ "css-box-model": "^1.2.0",
+ "memoize-one": "^5.1.1",
+ "raf-schd": "^4.0.2",
+ "react-redux": "^7.2.0",
+ "redux": "^4.0.4",
+ "use-memo-one": "^1.1.1"
+ }
+ },
"react-copy-to-clipboard": {
"version": "5.0.3",
"requires": {
@@ -43461,8 +43598,22 @@
"requires": {}
},
"react-is": {
- "version": "17.0.1",
- "dev": true
+ "version": "17.0.2",
+ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
+ },
+ "react-redux": {
+ "version": "7.2.6",
+ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.6.tgz",
+ "integrity": "sha512-10RPdsz0UUrRL1NZE0ejTkucnclYSgXp5q+tB5SWx2qeG2ZJQJyymgAhwKy73yiL/13btfB6fPr+rgbMAaZIAQ==",
+ "requires": {
+ "@babel/runtime": "^7.15.4",
+ "@types/react-redux": "^7.1.20",
+ "hoist-non-react-statics": "^3.3.2",
+ "loose-envify": "^1.4.0",
+ "prop-types": "^15.7.2",
+ "react-is": "^17.0.2"
+ }
},
"react-router": {
"version": "5.2.0",
@@ -43600,6 +43751,14 @@
"minimatch": "3.0.4"
}
},
+ "redux": {
+ "version": "4.1.2",
+ "resolved": "https://registry.npmjs.org/redux/-/redux-4.1.2.tgz",
+ "integrity": "sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==",
+ "requires": {
+ "@babel/runtime": "^7.9.2"
+ }
+ },
"regenerate": {
"version": "1.4.2",
"dev": true
@@ -46404,6 +46563,12 @@
"use": {
"version": "3.1.1"
},
+ "use-memo-one": {
+ "version": "1.1.2",
+ "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
+ "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==",
+ "requires": {}
+ },
"util-deprecate": {
"version": "1.0.2"
},
diff --git a/web/cashtab/package.json b/web/cashtab/package.json
--- a/web/cashtab/package.json
+++ b/web/cashtab/package.json
@@ -21,6 +21,7 @@
"qrcode.react": "^1.0.0",
"react": "^17.0.1",
"react-app-polyfill": "^2.0.0",
+ "react-beautiful-dnd": "^13.1.0",
"react-copy-to-clipboard": "^5.0.3",
"react-dev-utils": "^11.0.4",
"react-device-detect": "^1.15.0",
diff --git a/web/cashtab/src/components/Wallet/TokenList.js b/web/cashtab/src/components/Wallet/TokenList.js
--- a/web/cashtab/src/components/Wallet/TokenList.js
+++ b/web/cashtab/src/components/Wallet/TokenList.js
@@ -1,22 +1,73 @@
-import React from 'react';
+import React, { useState } from 'react';
import PropTypes from 'prop-types';
import TokenListItem from './TokenListItem';
import { Link } from 'react-router-dom';
import { formatBalance } from '@utils/formatting';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
const TokenList = ({ tokens }) => {
+ const [sortedTokenList, setSortedTokenList] = useState([...tokens]);
+ // remaining steps are:
+ // set the latest sorted list with setLocalStorage to stringified list
+ // getLocalStorage and parse it
+ // if localDataArray exists, map it, if not use the default token list
+
+ const reorder = (list, startIndex, endIndex) => {
+ const result = Array.from(list);
+ const [removed] = result.splice(startIndex, 1);
+ result.splice(endIndex, 0, removed);
+ return result;
+ };
+
+ const handleDragEnd = result => {
+ setSortedTokenList(
+ reorder(
+ sortedTokenList,
+ result.source.index,
+ result.destination.index,
+ ),
+ );
+ console.log(sortedTokenList);
+ };
+
return (
- <div>
- {tokens.map(token => (
- <Link key={token.tokenId} to={`/send-token/${token.tokenId}`}>
- <TokenListItem
- ticker={token.info.tokenTicker}
- tokenId={token.tokenId}
- balance={formatBalance(token.balance)}
- />
- </Link>
- ))}
- </div>
+ <DragDropContext onDragEnd={handleDragEnd}>
+ <Droppable droppableId="droppable">
+ {(provided, snapshot) => (
+ <div ref={provided.innerRef}>
+ {sortedTokenList.map((token, index) => (
+ <Draggable
+ draggableId={token.tokenId}
+ key={token.tokenId}
+ index={index}
+ >
+ {(provided, snapshot) => (
+ <div
+ ref={provided.innerRef}
+ {...provided.draggableProps}
+ {...provided.dragHandleProps}
+ >
+ <Link
+ key={token.tokenId}
+ to={`/send-token/${token.tokenId}`}
+ >
+ <TokenListItem
+ ticker={token.info.tokenTicker}
+ tokenId={token.tokenId}
+ balance={formatBalance(
+ token.balance,
+ )}
+ />
+ </Link>
+ </div>
+ )}
+ </Draggable>
+ ))}
+ {provided.placeholder}
+ </div>
+ )}
+ </Droppable>
+ </DragDropContext>
);
};

File Metadata

Mime Type
text/plain
Expires
Sat, Mar 1, 09:42 (1 h, 40 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
5182001
Default Alt Text
D10824.diff (18 KB)

Event Timeline