From 6f5646e4e54e9a4463c209a97c89d0eb9381ce15 Mon Sep 17 00:00:00 2001 From: Nathan Seva Date: Wed, 5 Jun 2024 12:03:06 -0500 Subject: [PATCH] front: update FT icons --- wails-frontend/package-lock.json | 34 +++++++++---------- web-frontend/package-lock.json | 34 +++++++++---------- web-frontend/src/pages/Assets/AssetsList.tsx | 14 ++------ .../ReceiveCoins/GenerateLink.tsx | 18 ++-------- .../TransferCoins/SendCoins/AssetSelector.tsx | 18 ++-------- .../SendCoins/SendConfirmation.tsx | 13 ++----- web-frontend/src/utils/tokenIcon.ts | 15 +++----- 7 files changed, 48 insertions(+), 98 deletions(-) diff --git a/wails-frontend/package-lock.json b/wails-frontend/package-lock.json index 561ff47de..f2ba2b281 100644 --- a/wails-frontend/package-lock.json +++ b/wails-frontend/package-lock.json @@ -1957,12 +1957,12 @@ } }, "node_modules/@massalabs/massa-web3": { - "version": "4.0.2-dev.20240410152026", - "resolved": "https://registry.npmjs.org/@massalabs/massa-web3/-/massa-web3-4.0.2-dev.20240410152026.tgz", - "integrity": "sha512-SGsXbxICvdwOnRThh2MSswvzA/k5OfrlJSujZBgNA2CoATXGBar11YcDEIgVttHRRqQSJG39EQcMOs3eRC0irA==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@massalabs/massa-web3/-/massa-web3-4.0.3.tgz", + "integrity": "sha512-W1TtxMrTiqLfUgvIqO641M/2do6Z2Kvvq44JYhiUbteXI5S+VvCJ+HaRtIZ23r9k2wTSlSikE6j6U5bkKDMABA==", "dependencies": { "@massalabs/wallet-provider": "^2.0.0", - "@massalabs/web3-utils": "^1.4.9", + "@massalabs/web3-utils": "^1.4.11", "@noble/ed25519": "^1.7.3", "@noble/hashes": "^1.2.0", "@types/ws": "^8.5.4", @@ -2022,14 +2022,13 @@ } }, "node_modules/@massalabs/react-ui-kit": { - "version": "0.0.5-dev.20240517003813", - "resolved": "https://registry.npmjs.org/@massalabs/react-ui-kit/-/react-ui-kit-0.0.5-dev.20240517003813.tgz", - "integrity": "sha512-i0KfrxIBsF6qe4z4nTjAu/qrsFsut1/Bv3XIdPUsgpDvhG9hAONg2gIEbHbjDm3sNa66Bn+/NnEVzf4EUr33Sg==", + "version": "0.0.5-dev.20240605165214", + "resolved": "https://registry.npmjs.org/@massalabs/react-ui-kit/-/react-ui-kit-0.0.5-dev.20240605165214.tgz", + "integrity": "sha512-WCxW6+DiegpOWzXZPfOKOM5qk6n72LdW5VbLoftJnVo5kVwK2xTLaOw3YrQZ6mfSxOVRpBq/+/hNlqQ9r7Br8A==", "dependencies": { "@headlessui/react": "^1.7.15", "copy-to-clipboard": "^3.3.3", "currency.js": "^2.0.4", - "dot-object": "^2.1.5", "minidenticons": "^4.2.1", "react": "^18.2.0", "react-currency-input-field": "^3.6.11", @@ -2043,8 +2042,10 @@ "zustand": "^4.5.2" }, "peerDependencies": { - "@massalabs/massa-web3": "^4.0.2-dev", - "@massalabs/wallet-provider": "^2.0.1-dev" + "@massalabs/massa-web3": "^4.0.3-dev", + "@massalabs/wallet-provider": "^2.0.1-dev", + "@types/dot-object": "^2.1.6", + "dot-object": "^2.1.5" } }, "node_modules/@massalabs/react-ui-kit/node_modules/abitype": { @@ -2129,9 +2130,9 @@ } }, "node_modules/@massalabs/web3-utils": { - "version": "1.4.9", - "resolved": "https://registry.npmjs.org/@massalabs/web3-utils/-/web3-utils-1.4.9.tgz", - "integrity": "sha512-8G91gs6HqpPpR860QDUOzugr81WJTGkBgXQS1gq/oXqt16fPkw2xlsq4c2CFHDjRF9/ftE/JaybiNZ4ilcbEyg==", + "version": "1.4.11", + "resolved": "https://registry.npmjs.org/@massalabs/web3-utils/-/web3-utils-1.4.11.tgz", + "integrity": "sha512-9iUoSc9OZxrvx8UbDor934z0cetenEU3PlDqTa9Hsh3EuZJ9jalcEU8Q9Z+hjLn2S9Ojmqu2ldcOAxVzYeNCbw==", "dependencies": { "bignumber.js": "^9.1.2", "buffer": "^6.0.3", @@ -3008,10 +3009,9 @@ } }, "node_modules/@types/dot-object": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@types/dot-object/-/dot-object-2.1.2.tgz", - "integrity": "sha512-mARrpJofLNe6yhlukeBcznBe8ssZo5ZJ/CJWc3JKmG9L9151s0OHK+mealnkqSgO6cSn1219vND2wgL67Cuqiw==", - "dev": true + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@types/dot-object/-/dot-object-2.1.6.tgz", + "integrity": "sha512-G1e4SNPOuO72ZXv7wz/W2x29CzQtpxko3G9hBiHqGg/AvFIKoArCs2nbc/WPXnnUkO+1dmvX9WQCyj5gIlAzZg==" }, "node_modules/@types/estree": { "version": "1.0.1", diff --git a/web-frontend/package-lock.json b/web-frontend/package-lock.json index e6e77d2c3..3e48a9984 100644 --- a/web-frontend/package-lock.json +++ b/web-frontend/package-lock.json @@ -3280,12 +3280,12 @@ } }, "node_modules/@massalabs/massa-web3": { - "version": "4.0.2-dev.20240410152026", - "resolved": "https://registry.npmjs.org/@massalabs/massa-web3/-/massa-web3-4.0.2-dev.20240410152026.tgz", - "integrity": "sha512-SGsXbxICvdwOnRThh2MSswvzA/k5OfrlJSujZBgNA2CoATXGBar11YcDEIgVttHRRqQSJG39EQcMOs3eRC0irA==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/@massalabs/massa-web3/-/massa-web3-4.0.3.tgz", + "integrity": "sha512-W1TtxMrTiqLfUgvIqO641M/2do6Z2Kvvq44JYhiUbteXI5S+VvCJ+HaRtIZ23r9k2wTSlSikE6j6U5bkKDMABA==", "dependencies": { "@massalabs/wallet-provider": "^2.0.0", - "@massalabs/web3-utils": "^1.4.9", + "@massalabs/web3-utils": "^1.4.11", "@noble/ed25519": "^1.7.3", "@noble/hashes": "^1.2.0", "@types/ws": "^8.5.4", @@ -3353,14 +3353,13 @@ } }, "node_modules/@massalabs/react-ui-kit": { - "version": "0.0.5-dev.20240522140200", - "resolved": "https://registry.npmjs.org/@massalabs/react-ui-kit/-/react-ui-kit-0.0.5-dev.20240522140200.tgz", - "integrity": "sha512-NQF2P4nOMiWxzHhxkxb8hbIGjcG3xiXLlvTSFSAICWBvRl6BI3q69jrazjD33de6bwHF3C6B3/xUyoKFDvPV1A==", + "version": "0.0.5-dev.20240605165214", + "resolved": "https://registry.npmjs.org/@massalabs/react-ui-kit/-/react-ui-kit-0.0.5-dev.20240605165214.tgz", + "integrity": "sha512-WCxW6+DiegpOWzXZPfOKOM5qk6n72LdW5VbLoftJnVo5kVwK2xTLaOw3YrQZ6mfSxOVRpBq/+/hNlqQ9r7Br8A==", "dependencies": { "@headlessui/react": "^1.7.15", "copy-to-clipboard": "^3.3.3", "currency.js": "^2.0.4", - "dot-object": "^2.1.5", "minidenticons": "^4.2.1", "react": "^18.2.0", "react-currency-input-field": "^3.6.11", @@ -3374,8 +3373,10 @@ "zustand": "^4.5.2" }, "peerDependencies": { - "@massalabs/massa-web3": "^4.0.2-dev", - "@massalabs/wallet-provider": "^2.0.1-dev" + "@massalabs/massa-web3": "^4.0.3-dev", + "@massalabs/wallet-provider": "^2.0.1-dev", + "@types/dot-object": "^2.1.6", + "dot-object": "^2.1.5" } }, "node_modules/@massalabs/wallet-provider": { @@ -3406,9 +3407,9 @@ } }, "node_modules/@massalabs/web3-utils": { - "version": "1.4.9", - "resolved": "https://registry.npmjs.org/@massalabs/web3-utils/-/web3-utils-1.4.9.tgz", - "integrity": "sha512-8G91gs6HqpPpR860QDUOzugr81WJTGkBgXQS1gq/oXqt16fPkw2xlsq4c2CFHDjRF9/ftE/JaybiNZ4ilcbEyg==", + "version": "1.4.11", + "resolved": "https://registry.npmjs.org/@massalabs/web3-utils/-/web3-utils-1.4.11.tgz", + "integrity": "sha512-9iUoSc9OZxrvx8UbDor934z0cetenEU3PlDqTa9Hsh3EuZJ9jalcEU8Q9Z+hjLn2S9Ojmqu2ldcOAxVzYeNCbw==", "dependencies": { "bignumber.js": "^9.1.2", "buffer": "^6.0.3", @@ -4053,10 +4054,9 @@ } }, "node_modules/@types/dot-object": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@types/dot-object/-/dot-object-2.1.2.tgz", - "integrity": "sha512-mARrpJofLNe6yhlukeBcznBe8ssZo5ZJ/CJWc3JKmG9L9151s0OHK+mealnkqSgO6cSn1219vND2wgL67Cuqiw==", - "dev": true + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/@types/dot-object/-/dot-object-2.1.6.tgz", + "integrity": "sha512-G1e4SNPOuO72ZXv7wz/W2x29CzQtpxko3G9hBiHqGg/AvFIKoArCs2nbc/WPXnnUkO+1dmvX9WQCyj5gIlAzZg==" }, "node_modules/@types/eslint": { "version": "8.37.0", diff --git a/web-frontend/src/pages/Assets/AssetsList.tsx b/web-frontend/src/pages/Assets/AssetsList.tsx index 499a3448b..d67d1ccea 100644 --- a/web-frontend/src/pages/Assets/AssetsList.tsx +++ b/web-frontend/src/pages/Assets/AssetsList.tsx @@ -1,12 +1,11 @@ import { useState } from 'react'; -import { Token, getAssetIcons } from '@massalabs/react-ui-kit'; +import { Token } from '@massalabs/react-ui-kit'; -import { useFTTransfer } from '@/custom/smart-contract/useFTTransfer'; import Intl from '@/i18n/i18n'; import { Asset } from '@/models/AssetModel'; import { DeleteAssetModal } from '@/pages/Assets/DeleteAssets'; -import { symbolDict } from '@/utils/tokenIcon'; +import { tokenIcon } from '@/utils/tokenIcon'; interface AssetsListProps { assets: Asset[] | undefined; @@ -23,20 +22,13 @@ export function AssetsList(props: AssetsListProps) { setModal(true); } - const { isMainnet } = useFTTransfer(); - return ( <> {assets ?.filter((a) => a.balance !== undefined && a.balance !== '') .map((token: Asset, index: number) => ( (''); const [link, setLink] = useState(''); const [error, setError] = useState(null); @@ -121,17 +117,7 @@ function GenerateLink(props: GenerateLinkProps) { preIcon={} content={account.nickname} amount={formattedBalance} - posIcon={ - getAssetIcons( - symbolDict[ - selectedAsset?.symbol as keyof typeof symbolDict - ], - true, - isMainnet, - 24, - 'mr-3', - ) as JSX.Element - } + posIcon={tokenIcon(selectedAsset?.symbol || '', 24)} variant="secondary" /> diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/AssetSelector.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/AssetSelector.tsx index 420c93916..6089b0e2b 100644 --- a/web-frontend/src/pages/TransferCoins/SendCoins/AssetSelector.tsx +++ b/web-frontend/src/pages/TransferCoins/SendCoins/AssetSelector.tsx @@ -1,18 +1,12 @@ import { useEffect } from 'react'; -import { - Dropdown, - formatAmount, - getAssetIcons, - IOption, -} from '@massalabs/react-ui-kit'; +import { Dropdown, formatAmount, IOption } from '@massalabs/react-ui-kit'; import { useParams } from 'react-router-dom'; import { useResource } from '@/custom/api'; -import { useFTTransfer } from '@/custom/smart-contract/useFTTransfer'; import Intl from '@/i18n/i18n'; import { Asset } from '@/models/AssetModel'; -import { symbolDict } from '@/utils/tokenIcon'; +import { tokenIcon } from '@/utils/tokenIcon'; interface AssetSelectorProps { selectedAsset: Asset | undefined; @@ -23,7 +17,6 @@ interface AssetSelectorProps { export function AssetSelector(props: AssetSelectorProps) { const { selectedAsset, setSelectedAsset, selectSymbol } = props; const { nickname } = useParams(); - const { isMainnet } = useFTTransfer(); const { data: assets, isLoading: isAssetsLoading } = useResource( `accounts/${nickname}/assets`, @@ -60,12 +53,7 @@ export function AssetSelector(props: AssetSelectorProps) {

), - icon: getAssetIcons( - symbolDict[asset.symbol as keyof typeof symbolDict], - true, - isMainnet, - 28, - ), + icon: tokenIcon(asset.symbol, 28), onClick: () => setSelectedAsset(asset), }; }); diff --git a/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx b/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx index 66ea14804..9df388684 100644 --- a/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx +++ b/web-frontend/src/pages/TransferCoins/SendCoins/SendConfirmation.tsx @@ -3,7 +3,6 @@ import { Button, Tooltip, formatFTAmount, - getAssetIcons, parseAmount, Clipboard, Mns, @@ -14,8 +13,7 @@ import { FiChevronLeft } from 'react-icons/fi'; import { PRESET_HIGH, PRESET_LOW, PRESET_STANDARD } from './Advanced'; import Intl from '@/i18n/i18n'; import { Asset } from '@/models/AssetModel'; -import { useMassaWeb3Store } from '@/store/store'; -import { symbolDict } from '@/utils/tokenIcon'; +import { tokenIcon } from '@/utils/tokenIcon'; export interface SendConfirmationData { amount: string; @@ -33,7 +31,6 @@ interface SendConfirmationProps { export function SendConfirmation(props: SendConfirmationProps) { const { data, handleConfirm, isLoading } = props; - const { isMainnet } = useMassaWeb3Store(); const { amount, asset, fees, recipientAddress, recipientDomainName } = data; const { symbol, decimals } = asset; @@ -106,13 +103,7 @@ export function SendConfirmation(props: SendConfirmationProps) { customClass="p-0 bg-transparent" amount={formattedAmount} symbol={symbol} - icon={getAssetIcons( - symbolDict[symbol as keyof typeof symbolDict], - true, - isMainnet, - 32, - 'mr-3', - )} + icon={tokenIcon(symbol, 28)} />
diff --git a/web-frontend/src/utils/tokenIcon.ts b/web-frontend/src/utils/tokenIcon.ts index fe12e370a..68b5be27e 100644 --- a/web-frontend/src/utils/tokenIcon.ts +++ b/web-frontend/src/utils/tokenIcon.ts @@ -1,12 +1,5 @@ -import { MAS } from '@/const/assets/assets'; +import { getAssetIcons } from '@massalabs/react-ui-kit'; -export const symbolDict = { - MAS: MAS, - WMAS: 'WMAS', - 'WETH.e': 'WETH', - 'WETH.s': 'WETH', - 'USDC.e': 'USDC', - 'USDC.s': 'USDC', - 'DAI.e': 'DAI', - 'tDAI.s': 'DAI', -}; +export function tokenIcon(symbol: string, size: number) { + return getAssetIcons(symbol, undefined, false, size) as JSX.Element; +}