diff --git a/craco.config.js b/craco.config.js index 471a251..74f2e4c 100644 --- a/craco.config.js +++ b/craco.config.js @@ -1,8 +1,9 @@ // Copyright (c) 2020-2021 Drew Lemmy // This file is part of KristWeb 2 under GPL-3.0. // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt +const path = require("path"); const CracoAlias = require("craco-alias"); -const CracoLessPlugin = require("craco-less"); +const CracoLessPlugin = require("@lemmmy/craco-less"); const AntdDayjsWebpackPlugin = require("antd-dayjs-webpack-plugin"); const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); const WebpackBar = require("webpackbar"); @@ -10,7 +11,7 @@ const { DefinePlugin } = require("webpack"); const gitRevisionPlugin = new GitRevisionPlugin({ - // Include the '-dirty' suffix if the local tree has been modified, and + // Include the "-dirty" suffix if the local tree has been modified, and // include non-annotated tags. versionCommand: "describe --always --tags --dirty" }); @@ -45,9 +46,13 @@ }, lessLoaderOptions: { + webpackImporter: false, + implementation: require("less"), + lessOptions: { relativeUrls: false, - javascriptEnabled: true + javascriptEnabled: true, + paths: [path.resolve(__dirname, "node_modules")] } } } diff --git a/package.json b/package.json index 2b6bd5c..81ae191 100644 --- a/package.json +++ b/package.json @@ -85,6 +85,7 @@ }, "devDependencies": { "@craco/craco": "^6.1.1", + "@lemmmy/craco-less": "1.18.0", "@types/classnames": "^2.2.11", "@types/debug": "^4.1.5", "@types/file-saver": "^2.0.1", @@ -106,12 +107,13 @@ "antd-dayjs-webpack-plugin": "^1.0.6", "babel-plugin-lodash": "^3.3.4", "craco-alias": "^2.2.0", - "craco-less": "^1.17.1", "eslint": "^7.21.0", "eslint-plugin-react": "^7.22.0", "eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-tsdoc": "^0.2.11", "git-revision-webpack-plugin": "^3.0.6", + "less": "4.1.1", + "less-loader": "7.3.0", "react-refresh": "^0.9.0", "react-scripts": "^4.0.3", "redux-devtools-extension": "^2.13.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e97392d..9ee79b2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,6 +44,7 @@ workbox-strategies: 6.1.1 devDependencies: '@craco/craco': 6.1.1_react-scripts@4.0.3 + '@lemmmy/craco-less': 1.18.0_077094f002a207b28261f7f7ea13418e '@types/classnames': 2.2.11 '@types/debug': 4.1.5 '@types/file-saver': 2.0.1 @@ -65,12 +66,13 @@ antd-dayjs-webpack-plugin: 1.0.6_dayjs@1.10.4 babel-plugin-lodash: 3.3.4 craco-alias: 2.2.0 - craco-less: 1.17.1_077094f002a207b28261f7f7ea13418e eslint: 7.21.0 eslint-plugin-react: 7.22.0_eslint@7.21.0 eslint-plugin-react-hooks: 4.2.0_eslint@7.21.0 eslint-plugin-tsdoc: 0.2.11 git-revision-webpack-plugin: 3.0.6 + less: 4.1.1 + less-loader: 7.3.0_less@4.1.1 react-refresh: 0.9.0 react-scripts: 4.0.3_react@17.0.1+typescript@4.1.5 redux-devtools-extension: 2.13.8_redux@4.0.5 @@ -1683,6 +1685,18 @@ node: '>= 10.14.2' resolution: integrity: sha512-fC6QCp7Sc5sX6g8Tvbmj4XUTbyrik0akgRy03yjXbQaBWWNWGE7SGtJk98m0N8nzegD/7SggrUlivxo5ax4KWQ== + /@lemmmy/craco-less/1.18.0_077094f002a207b28261f7f7ea13418e: + dependencies: + '@craco/craco': 6.1.1_react-scripts@4.0.3 + less: 4.1.1 + less-loader: 7.3.0_less@4.1.1 + react-scripts: 4.0.3_react@17.0.1+typescript@4.1.5 + dev: true + peerDependencies: + '@craco/craco': ^5.5.0 + react-scripts: ^3.3.0 || ^4.0.0 + resolution: + integrity: sha512-ZHc+NXqvul3J55YcnTPWs7NbZoHHhW7BKc+4krUE9VG96RyvWu7UgRdJODFGi9QulrdQRlsjavPYnvyZ0wan/A== /@microsoft/tsdoc-config/0.14.0: dependencies: '@microsoft/tsdoc': 0.13.0 @@ -4007,12 +4021,6 @@ dev: true resolution: integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ== - /clone/2.1.2: - dev: true - engines: - node: '>=0.8' - resolution: - integrity: sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18= /co/4.6.0: dev: true engines: @@ -4320,18 +4328,6 @@ dev: true resolution: integrity: sha512-FLSRaCWI/CKLUO+Cb/GH9ljSYWdrlzkYf3N373Kuof0hckJ1tj+wPN0XyToR8KPUggoIB5+IDkGs1uKUBuGUiA== - /craco-less/1.17.1_077094f002a207b28261f7f7ea13418e: - dependencies: - '@craco/craco': 6.1.1_react-scripts@4.0.3 - less: 3.13.1 - less-loader: 6.2.0 - react-scripts: 4.0.3_react@17.0.1+typescript@4.1.5 - dev: true - peerDependencies: - '@craco/craco': ^5.5.0 - react-scripts: ^3.3.0 || ^4.0.0 - resolution: - integrity: sha512-T6V1aF3+eQZ22gUigHInX/i+ExPbWrnmdAhtuEXc4mOyhneDifmEzZFseq/BdRy1aUEs9s4z26jTxP+1I6P//g== /create-ecdh/4.0.4: dependencies: bn.js: 4.12.0 @@ -7979,22 +7975,24 @@ dev: true resolution: integrity: sha512-7KI2l2GIZa9p2spzPIVZBYyNKkN+e/SQPpnjlTiPhdbDW3F86tdKKELxKpzJ5sgU19wQWsACULZmpTPYHeWO5w== - /less-loader/6.2.0: + /less-loader/7.3.0_less@4.1.1: dependencies: - clone: 2.1.2 - less: 3.13.1 + klona: 2.0.4 + less: 4.1.1 loader-utils: 2.0.0 - schema-utils: 2.7.1 + schema-utils: 3.0.0 dev: true engines: node: '>= 10.13.0' peerDependencies: + less: ^3.5.0 || ^4.0.0 webpack: ^4.0.0 || ^5.0.0 resolution: - integrity: sha512-Cl5h95/Pz/PWub/tCBgT1oNMFeH1WTD33piG80jn5jr12T4XbxZcjThwNXDQ7AG649WEynuIzO4b0+2Tn9Qolg== - /less/3.13.1: + integrity: sha512-Mi8915g7NMaLlgi77mgTTQvK022xKRQBIVDSyfl3ErTuBhmZBQab0mjeJjNNqGbdR+qrfTleKXqbGI4uEFavxg== + /less/4.1.1: dependencies: copy-anything: 2.0.3 + parse-node-version: 1.0.1 tslib: 1.14.1 dev: true engines: @@ -8006,10 +8004,10 @@ image-size: 0.5.5 make-dir: 2.1.0 mime: 1.6.0 - native-request: 1.0.8 + needle: 2.6.0 source-map: 0.6.1 resolution: - integrity: sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw== + integrity: sha512-w09o8tZFPThBscl5d0Ggp3RcrKIouBoQscnOMgFH3n5V3kN/CXGHNfCkRPtxJk6nKryDXaV9aHLK55RXuH4sAw== /leven/3.1.0: dev: true engines: @@ -8583,11 +8581,6 @@ node: '>=0.10.0' resolution: integrity: sha512-fpoe2T0RbHwBTBUOftAfBPaDEi06ufaUai0mE6Yn1kacc3SnTErfb/h+X94VXzI64rKFHYImXSvdwGGCmwOqCA== - /native-request/1.0.8: - dev: true - optional: true - resolution: - integrity: sha512-vU2JojJVelUGp6jRcLwToPoWGxSx23z/0iX+I77J3Ht17rf2INGjrhOoQnjVo60nQd8wVsgzKkPfRXBiVdD2ag== /native-url/0.2.6: dependencies: querystring: 0.2.1 @@ -8598,6 +8591,18 @@ dev: true resolution: integrity: sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= + /needle/2.6.0: + dependencies: + debug: 3.2.7 + iconv-lite: 0.4.24 + sax: 1.2.4 + dev: true + engines: + node: '>= 4.4.x' + hasBin: true + optional: true + resolution: + integrity: sha512-KKYdza4heMsEfSWD7VPUIz3zX2XDwOyX2d+geb4vrERZMT5RMU6ujjaD+I5Yr54uZxQ2w6XRTAhHBbSCyovZBg== /negotiator/0.6.2: dev: true engines: @@ -9129,6 +9134,12 @@ node: '>=8' resolution: integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg== + /parse-node-version/1.0.1: + dev: true + engines: + node: '>= 0.10' + resolution: + integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA== /parse5/5.1.1: dev: true resolution: @@ -13834,6 +13845,7 @@ specifiers: '@ant-design/icons': ^4.5.0 '@craco/craco': ^6.1.1 + '@lemmmy/craco-less': 1.18.0 '@testing-library/jest-dom': ^5.11.9 '@testing-library/react': ^11.2.5 '@testing-library/user-event': ^12.8.1 @@ -13864,7 +13876,6 @@ chart.js: ^2.9.4 classnames: ^2.2.6 craco-alias: ^2.2.0 - craco-less: ^1.17.1 csv-stringify: ^5.6.2 dayjs: ^1.10.4 debug: ^4.3.1 @@ -13878,6 +13889,8 @@ i18next-browser-languagedetector: ^6.0.1 i18next-http-backend: ^1.1.1 json5: ^2.2.0 + less: 4.1.1 + less-loader: 7.3.0 lodash-es: ^4.17.21 lru-cache: ^6.0.0 rc-menu: ^8.10.6 diff --git a/src/App.less b/src/App.less index 47833d4..3ceb6a0 100644 --- a/src/App.less +++ b/src/App.less @@ -1,6 +1,6 @@ // Copyright (c) 2020-2021 Drew Lemmy // This file is part of KristWeb 2 under GPL-3.0. // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt -@import "~antd/dist/antd.dark.less"; +@import "antd/dist/antd.dark.less"; @import "./style/theme.less"; @import "./style/components.less"; diff --git a/src/pages/transactions/send/SendTransactionForm.tsx b/src/pages/transactions/send/SendTransactionForm.tsx index f42928e..826eb08 100644 --- a/src/pages/transactions/send/SendTransactionForm.tsx +++ b/src/pages/transactions/send/SendTransactionForm.tsx @@ -1,15 +1,18 @@ // Copyright (c) 2020-2021 Drew Lemmy // This file is part of KristWeb 2 under GPL-3.0. // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt -import { useState } from "react"; -import { Form, FormInstance } from "antd"; +import React, { useState } from "react"; +import { Form, FormInstance, Input, InputNumber, Button } from "antd"; import { useTranslation } from "react-i18next"; import { useWallets } from "@wallets"; +import { useCurrency } from "@utils/currency"; import { AddressPicker } from "@comp/addresses/picker/AddressPicker"; +import { KristSymbol } from "@comp/krist/KristSymbol"; + export interface FormValues { from: string; to: string; @@ -30,12 +33,15 @@ // Used to get the initial wallet to show for the 'from' field // TODO: Remember this value? - const { addressList } = useWallets(); + const { addressList, walletAddressMap } = useWallets(); const initialFrom = addressList[0] || ""; // TODO: initialFrom here should never be an empty string, so need to add a // modal that says "You currently don't have any saved wallets" etc, // and prevents opening the sendTX modal/rendering the page + // Used to format the 'amount' field + const { currency_symbol } = useCurrency(); + const [from, setFrom] = useState(initialFrom); const [to, setTo] = useState(""); @@ -79,6 +85,32 @@ value={to} otherPickerValue={from === undefined ? initialFrom : from} /> + + {/* Amount */} + + + {/* Prepend the Krist symbol if possible. Note that ant's InputNumber + * doesn't support addons, so this has to be done manually. */} + {(currency_symbol || "KST") === "KST" && ( + + )} + + {/* Value/amount number input */} + + + + + {/* Max value button */} + + + ; } diff --git a/src/style/components.less b/src/style/components.less index ec2a363..73b1c93 100644 --- a/src/style/components.less +++ b/src/style/components.less @@ -82,6 +82,11 @@ font-size: @font-size-sm; } +.ant-input-number { + border: none; + height: 32px; +} + .input-monospace { font-family: monospace; } diff --git a/src/style/theme.less b/src/style/theme.less index e3fa9a8..52332c8 100644 --- a/src/style/theme.less +++ b/src/style/theme.less @@ -79,6 +79,12 @@ @input-color: @text-color; @input-placeholder-color: @text-color-secondary; +@input-number-handler-bg: lighten(@kw-lighter, 5%); +@input-number-handler-hover-bg: @kw-text; +@input-number-handler-border-color: @kw-light; + +@input-addon-bg: @kw-slighter; + @kw-input-readonly-bg: @kw-slighter; @btn-default-color: @text-color; diff --git a/src/utils/currency.ts b/src/utils/currency.ts index 8e3ca78..68c817b 100644 --- a/src/utils/currency.ts +++ b/src/utils/currency.ts @@ -4,6 +4,8 @@ import { useSelector } from "react-redux"; import { RootState } from "@store"; +import { KristCurrency } from "@api/types"; + import { memoize, escapeRegExp, truncate, toString } from "lodash-es"; // ----------------------------------------------------------------------------- @@ -145,3 +147,7 @@ /** Hook to get the name suffix. */ export const useNameSuffix = (): string => useSelector((s: RootState) => s.node.currency.name_suffix); + +/** Hook to get all the currency values. */ +export const useCurrency = (): KristCurrency => + useSelector((s: RootState) => s.node.currency);