From 98909aa9d44585e6a87cc213922ef28e913e90da Mon Sep 17 00:00:00 2001 From: yushi Date: Mon, 14 Oct 2024 19:37:25 +0800 Subject: [PATCH 01/35] change wallet syncing log level to debug in background --- .../chrome/extension/background/state/refreshScheduler.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/yoroi-extension/chrome/extension/background/state/refreshScheduler.js b/packages/yoroi-extension/chrome/extension/background/state/refreshScheduler.js index 16598d0faa..928feedf41 100644 --- a/packages/yoroi-extension/chrome/extension/background/state/refreshScheduler.js +++ b/packages/yoroi-extension/chrome/extension/background/state/refreshScheduler.js @@ -72,7 +72,7 @@ export async function syncWallet(publicDeriver: PublicDeriver<>, logInfo: string } async function _syncWallet(publicDeriver: PublicDeriver<>, logInfo: string): Promise { const publicDeriverId = publicDeriver.getPublicDeriverId(); - console.log( + console.debug( 'Syncing wallet ID %s name "%s" for %s.', publicDeriverId, (await publicDeriver.getParent().getFullConceptualWalletInfo()).Name, @@ -81,7 +81,7 @@ async function _syncWallet(publicDeriver: PublicDeriver<>, logInfo: string): Pro const lastSyncInfo = await publicDeriver.getLastSyncInfo(); if (Date.now() - (lastSyncInfo.Time?.valueOf() || 0) < environment.getWalletRefreshInterval()) { - console.log('last sync was %s, skip syncing', lastSyncInfo.Time); + console.debug('last sync was %s, skip syncing', lastSyncInfo.Time); return; } @@ -154,7 +154,7 @@ async function _syncWallet(publicDeriver: PublicDeriver<>, logInfo: string): Pro if (submittedTransactionsChanged) { persistSubmittedTransactions(submittedTransactions); } - console.log('Syncing wallet %s finished.', publicDeriverId); + console.debug('Syncing wallet %s finished.', publicDeriverId); emitUpdate( publicDeriverId, false, From 8961574ae5f481818ddd6d11f445778f888b9908 Mon Sep 17 00:00:00 2001 From: yushi Date: Wed, 16 Oct 2024 00:36:08 +0800 Subject: [PATCH 02/35] hard-code webpack dev server ports to avoid conflict --- packages/yoroi-extension/webpack/devConfig.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/yoroi-extension/webpack/devConfig.js b/packages/yoroi-extension/webpack/devConfig.js index 8c812a7426..76450f93ce 100644 --- a/packages/yoroi-extension/webpack/devConfig.js +++ b/packages/yoroi-extension/webpack/devConfig.js @@ -32,6 +32,7 @@ const baseDevConfig = ( ], }, devServer: { + port: 8080, devMiddleware: { publicPath: `js`, stats: { @@ -103,6 +104,7 @@ const backgroundServiceWorkerConfig = ( ], }, devServer: { + port: 8081, devMiddleware: { writeToDisk: true, }, From 9cef327c8fd3d1c9149b29e40c20e2d1e251c8fd Mon Sep 17 00:00:00 2001 From: yushi Date: Wed, 16 Oct 2024 00:36:47 +0800 Subject: [PATCH 03/35] add color to concurrently output prefix for easier visual parsing --- packages/yoroi-extension/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/yoroi-extension/package.json b/packages/yoroi-extension/package.json index 682694f57f..d50572404e 100644 --- a/packages/yoroi-extension/package.json +++ b/packages/yoroi-extension/package.json @@ -6,7 +6,7 @@ "dev-mv2": "rimraf dev/ && NODE_OPTIONS=--openssl-legacy-provider babel-node scripts-mv2/build --type=debug --env 'mainnet'", "dev:main": "NODE_OPTIONS=--openssl-legacy-provider babel-node scripts/dev main --env mainnet", "dev:background": "NODE_OPTIONS=--openssl-legacy-provider babel-node scripts/dev background --env mainnet", - "dev:stable": "rimraf dev/ && concurrently -n extension,background \"npm run dev:main\" \"npm run dev:background\"", + "dev:stable": "rimraf dev/ && concurrently -c auto -n extension,background \"npm run dev:main\" \"npm run dev:background\"", "dev:nightly": "rimraf dev/ && concurrently -n extension,background \"npm run dev:main --nightly\" \"npm run dev:background --nightly\" ", "prod:build-mv2": "rimraf build/ && NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production babel-node scripts-mv2/build --type=prod", "prod:build": "rimraf build/ && NODE_OPTIONS=--openssl-legacy-provider NODE_ENV=production babel-node scripts/build", From c8515562eea3f83dbd2b0ad83ca3c81078cfc5e7 Mon Sep 17 00:00:00 2001 From: vantuz-subhuman Date: Wed, 16 Oct 2024 00:26:08 +0300 Subject: [PATCH 04/35] update run-dev to use mv3 --- run-dev.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/run-dev.sh b/run-dev.sh index b7cd57e6bd..95483286cc 100644 --- a/run-dev.sh +++ b/run-dev.sh @@ -1 +1 @@ -nvm i && . install-all.sh && npm run dev-mv2 --prefix packages/yoroi-extension \ No newline at end of file +nvm i && . install-all.sh && npm run dev:stable --prefix packages/yoroi-extension \ No newline at end of file From f244b6b2d42eda92b55c555cdb623ca3a9324c60 Mon Sep 17 00:00:00 2001 From: yushi Date: Thu, 17 Oct 2024 19:54:34 +0800 Subject: [PATCH 05/35] fix downloading log --- packages/yoroi-extension/app/utils/logging.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/yoroi-extension/app/utils/logging.js b/packages/yoroi-extension/app/utils/logging.js index 8913ce4777..48967baa02 100644 --- a/packages/yoroi-extension/app/utils/logging.js +++ b/packages/yoroi-extension/app/utils/logging.js @@ -58,7 +58,7 @@ export const downloadLogs = (publicKey?: string) => { const blob = new Blob(errorLogs, { type: 'text/plain;charset=utf-8' }); import('file-saver').then(FileSaver => { - FileSaver.saveAs(blob, `${moment().format()}${logsFileSuffix}`); + FileSaver.default.saveAs(blob, `${moment().format()}${logsFileSuffix}`); return null; }).catch((error) => { Logger.error(`error when downloading error log ${error}`); From c28ee986d07e83a557f86841f314ad843461a178 Mon Sep 17 00:00:00 2001 From: Patriciu Nista Date: Tue, 15 Oct 2024 09:57:00 +0200 Subject: [PATCH 06/35] fix YOEXT-1407 bg gradient colors --- .../app/styles/themes/base-palettes/light-palette.js | 2 +- packages/yoroi-extension/app/styles/themes/dark-theme-base.js | 2 +- .../yoroi-extension/app/styles/themes/light-theme-base.js | 4 ++-- .../app/styles/themes/revamp/base-palettes/dark-palette.js | 2 +- .../app/styles/themes/revamp/base-palettes/light-palette.js | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/yoroi-extension/app/styles/themes/base-palettes/light-palette.js b/packages/yoroi-extension/app/styles/themes/base-palettes/light-palette.js index 7f63f8a334..322e7087d1 100644 --- a/packages/yoroi-extension/app/styles/themes/base-palettes/light-palette.js +++ b/packages/yoroi-extension/app/styles/themes/base-palettes/light-palette.js @@ -53,7 +53,7 @@ export const lightPalette = { bg_gradient_1: 'linear-gradient(312deg, #C6F7ED 0%, #E4E8F7 70.58%)', bg_gradient_2: 'linear-gradient(180deg, #93F5E1 0%, #C6F7ED 100%)', - bg_gradient_3: 'linear-gradient(30deg, #244ABF 0%, #4760FF 176.73%)', + bg_gradient_3: 'linear-gradient(30deg, #244ABF 0%, #4760FF 100%)', special_web_overlay: 'rgba(31, 35, 46, 0.80)', special_web_bg_sidebar: '#1F232ECC', }; diff --git a/packages/yoroi-extension/app/styles/themes/dark-theme-base.js b/packages/yoroi-extension/app/styles/themes/dark-theme-base.js index 98cb053cc7..d9885a1215 100644 --- a/packages/yoroi-extension/app/styles/themes/dark-theme-base.js +++ b/packages/yoroi-extension/app/styles/themes/dark-theme-base.js @@ -77,7 +77,7 @@ export const darkThemeBase: any = { bg_gradient_1: 'linear-gradient(195.39deg, rgba(26, 227, 187, 0.26) 0.57%, rgba(75, 109, 222, 0.1) 41.65%, rgba(75, 109, 222, 0.16) 100%)', bg_gradient_2: 'linear-gradient(205.51deg, rgba(11, 153, 125, 0.49) -10.43%, rgba(8, 194, 157, 0.08) 100%)', - bg_gradient_3: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 176.73%)', + bg_gradient_3: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 100%)', }, background: { bg_color_max: dark.gray_min, bg_color_medium: grayscale['100'] }, uitext: { diff --git a/packages/yoroi-extension/app/styles/themes/light-theme-base.js b/packages/yoroi-extension/app/styles/themes/light-theme-base.js index e3ea68aace..29ac14fccc 100644 --- a/packages/yoroi-extension/app/styles/themes/light-theme-base.js +++ b/packages/yoroi-extension/app/styles/themes/light-theme-base.js @@ -84,12 +84,12 @@ export const lightThemeBase: any = { gradients: { bg_gradient_1: 'linear-gradient(312.19deg, #C6F7ED 0%, #E4E8F7 100%)', bg_gradient_2: 'linear-gradient(180deg, #93F5E1 0%, #C6F7ED 100%)', - bg_gradient_3: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 176.73%)', + bg_gradient_3: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 100%)', // legacy ones 'blue-green-bg': 'linear-gradient(180deg, #E4E8F7 0%, #C6F7F7 100%)', 'blue-green-banner': 'linear-gradient(269.97deg, #E4E8F7 0%, #C6F7ED 100%)', green: 'linear-gradient(180deg, #93F5E1 0%, #C6F7ED 100%)', - blue: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 176.73%)', + blue: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 100%)', }, background: { bg_color_max: light.gray_min, diff --git a/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/dark-palette.js b/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/dark-palette.js index 36e3e8e604..ba7dc0878f 100644 --- a/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/dark-palette.js +++ b/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/dark-palette.js @@ -53,5 +53,5 @@ export const darkPalette = { bg_gradient_1: 'linear-gradient(195.39deg, rgba(26, 227, 187, 0.26) 0.57%, rgba(75, 109, 222, 0.1) 41.65%, rgba(75, 109, 222, 0.16) 100%)', bg_gradient_2: 'linear-gradient(205.51deg, rgba(11, 153, 125, 0.49) -10.43%, rgba(8, 194, 157, 0.08) 100%)', - bg_gradient_3: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 176.73%)', + bg_gradient_3: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 100%)', }; diff --git a/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/light-palette.js b/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/light-palette.js index d2a1605278..a9627175ef 100644 --- a/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/light-palette.js +++ b/packages/yoroi-extension/app/styles/themes/revamp/base-palettes/light-palette.js @@ -52,5 +52,5 @@ export const lightPalette = { bg_gradient_1: 'linear-gradient(312.19deg, #C6F7ED 0%, #E4E8F7 100%)', bg_gradient_2: 'linear-gradient(180deg, #93F5E1 0%, #C6F7ED 100%)', - bg_gradient_3: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 176.73%)', + bg_gradient_3: 'linear-gradient(30.09deg, #244ABF 0%, #4760FF 100%)', }; From 18b65cb5be44e24e0ac56365de6d4450a23abbc8 Mon Sep 17 00:00:00 2001 From: Patriciu Nista Date: Tue, 15 Oct 2024 10:03:24 +0200 Subject: [PATCH 07/35] fix color YOEXT-1406 --- .../wallet/send/WalletSendFormSteps/WalletSendPreviewStep.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStep.js b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStep.js index 52e9bc79e4..b80b102dd6 100644 --- a/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStep.js +++ b/packages/yoroi-extension/app/components/wallet/send/WalletSendFormSteps/WalletSendPreviewStep.js @@ -36,7 +36,7 @@ import { ReactComponent as AttentionIcon } from '../../../../assets/images/atten const SBox = styled(Box)(({ theme }) => ({ backgroundImage: theme.palette.ds.bg_gradient_3, - color: 'grayscale.min', + color: 'ds.gray_min', })); type Props = {| From 5dcd2e41f672bb3812910814096e5d27af9a6b02 Mon Sep 17 00:00:00 2001 From: Patriciu Nista Date: Tue, 15 Oct 2024 10:35:46 +0200 Subject: [PATCH 08/35] YOEXT-1403 fix layout on error page --- .../app/components/layout/TopBarLayout.js | 4 ++- .../app/components/topbar/NavBarRevamp.js | 8 +++--- .../app/containers/NavBarContainerRevamp.js | 4 ++- .../app/containers/swap/SwapPageContainer.js | 26 ++++++++++--------- 4 files changed, 25 insertions(+), 17 deletions(-) diff --git a/packages/yoroi-extension/app/components/layout/TopBarLayout.js b/packages/yoroi-extension/app/components/layout/TopBarLayout.js index c436fe9446..f4e254bbc4 100644 --- a/packages/yoroi-extension/app/components/layout/TopBarLayout.js +++ b/packages/yoroi-extension/app/components/layout/TopBarLayout.js @@ -19,6 +19,7 @@ type Props = {| +asModern?: boolean, +withPadding?: boolean, // default: true +bgcolor?: string, + +isErrorPage?: boolean, |}; type InjectedProps = {| isRevampLayout: boolean, currentTheme: string |}; @@ -40,6 +41,7 @@ function TopBarLayout({ asModern, withPadding, bgcolor, + isErrorPage, }: AllProps) { const isModern = currentTheme === THEMES.YOROI_MODERN; const isRevamp = isRevampLayout && asModern !== true && !isModern; @@ -79,7 +81,7 @@ function TopBarLayout({ { buyButton: void, menu: void, pageBanner: boolean, + isErrorPage: boolean |} = { children: undefined, goToNotifications: undefined, @@ -30,15 +31,16 @@ class NavBarRevamp extends Component { buyButton: undefined, menu: undefined, pageBanner: false, + pageBanner: false, }; render(): Node { - const { title, children, walletDetails, menu, buyButton, pageBanner } = this.props; + const { title, children, walletDetails, menu, buyButton, pageBanner, isErrorPage } = this.props; return ( @@ -73,7 +75,7 @@ class NavBarRevamp extends Component { )} - {menu != null ? {menu} : null} + {menu != null && !isErrorPage ? {menu} : null} diff --git a/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js b/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js index 1e6e1d3448..ec3aa44f0e 100644 --- a/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js +++ b/packages/yoroi-extension/app/containers/NavBarContainerRevamp.js @@ -22,6 +22,7 @@ type Props = {| title: Node, menu?: Node, pageBanner?: Node, + isErrorPage?: boolean, |}; @observer @@ -58,7 +59,7 @@ export default class NavBarContainerRevamp extends Component { }; render(): Node { - const { stores, pageBanner } = this.props; + const { stores, pageBanner, isErrorPage } = this.props; const { profile, wallets} = stores; const { selected, selectedWalletName } = wallets; @@ -104,6 +105,7 @@ export default class NavBarContainerRevamp extends Component { buyButton={ this.props.actions.dialogs.open.trigger({ dialog: BuySellDialog })} /> } + isErrorPage={isErrorPage} pageBanner={pageBanner} /> {pageBanner && pageBanner} diff --git a/packages/yoroi-extension/app/containers/swap/SwapPageContainer.js b/packages/yoroi-extension/app/containers/swap/SwapPageContainer.js index 777a82e203..2205c7a2f0 100644 --- a/packages/yoroi-extension/app/containers/swap/SwapPageContainer.js +++ b/packages/yoroi-extension/app/containers/swap/SwapPageContainer.js @@ -46,39 +46,41 @@ class SwapPageContainer extends Component { return false; }; + isErrorPage: boolean = () => { + const { location } = this.props.stores.router; + if (location) { + return location.pathname.endsWith('page-error'); + } + return false; + }; + render(): Node { const { children } = this.props; const { actions, stores } = this.props; const sidebarContainer = ; + const isErrorPage = this.isErrorPage(); - const menu = ( - actions.router.goToRoute.trigger({ route })} - isActiveItem={this.isActivePage} - /> - ); + const menu = actions.router.goToRoute.trigger({ route })} isActiveItem={this.isActivePage} />; return ( } sidebar={sidebarContainer} + isErrorPage={isErrorPage} navbar={ - } + title={} menu={menu} + isErrorPage={isErrorPage} /> } showInContainer showAsCard withPadding={false} > - - {children} - + {children} ); } From b239edbb363b6719a99de9182f67eea0edd6a70d Mon Sep 17 00:00:00 2001 From: Patriciu Nista Date: Wed, 16 Oct 2024 12:27:42 +0200 Subject: [PATCH 09/35] fix flow errors --- packages/yoroi-extension/app/components/topbar/NavBarRevamp.js | 3 ++- .../yoroi-extension/app/containers/swap/SwapPageContainer.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/yoroi-extension/app/components/topbar/NavBarRevamp.js b/packages/yoroi-extension/app/components/topbar/NavBarRevamp.js index d5a60dad8e..eae3d5f53e 100644 --- a/packages/yoroi-extension/app/components/topbar/NavBarRevamp.js +++ b/packages/yoroi-extension/app/components/topbar/NavBarRevamp.js @@ -12,6 +12,7 @@ type Props = {| +buyButton?: Node, +menu?: ?Node, +pageBanner?: ?Node, + +isErrorPage?: boolean, |}; @observer @@ -31,7 +32,7 @@ class NavBarRevamp extends Component { buyButton: undefined, menu: undefined, pageBanner: false, - pageBanner: false, + isErrorPage: false, }; render(): Node { diff --git a/packages/yoroi-extension/app/containers/swap/SwapPageContainer.js b/packages/yoroi-extension/app/containers/swap/SwapPageContainer.js index 2205c7a2f0..c34014fcc7 100644 --- a/packages/yoroi-extension/app/containers/swap/SwapPageContainer.js +++ b/packages/yoroi-extension/app/containers/swap/SwapPageContainer.js @@ -46,7 +46,7 @@ class SwapPageContainer extends Component { return false; }; - isErrorPage: boolean = () => { + isErrorPage: void => boolean = () => { const { location } = this.props.stores.router; if (location) { return location.pathname.endsWith('page-error'); From 8b718fcb2ac9bad93e5a3753151f234c3c0ddac5 Mon Sep 17 00:00:00 2001 From: Patriciu Nista Date: Wed, 16 Oct 2024 12:13:05 +0200 Subject: [PATCH 10/35] retry token-list retrival until it gets a successful response --- .../app/containers/swap/asset-swap/hooks.js | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/yoroi-extension/app/containers/swap/asset-swap/hooks.js b/packages/yoroi-extension/app/containers/swap/asset-swap/hooks.js index 7b0432e32a..9bdf1d98ed 100644 --- a/packages/yoroi-extension/app/containers/swap/asset-swap/hooks.js +++ b/packages/yoroi-extension/app/containers/swap/asset-swap/hooks.js @@ -1,18 +1,18 @@ +import type { AssetAmount } from '../../../components/swap/types'; import { useSwapTokensOnlyVerified } from '@yoroi/swap'; import { useMemo } from 'react'; import { comparatorByGetter } from '../../../coreUtils'; -import type { AssetAmount } from '../../../components/swap/types'; export function useSellVerifiedSwapTokens( - assets: Array, -): {| walletVerifiedAssets: Array, isLoading: boolean |} { - + assets: Array +): {| walletVerifiedAssets: Array, isLoading: boolean, error: boolean |} { + // maybe check `error` field from query and make it available for UI to do something const { onlyVerifiedTokens, isLoading } = useSwapTokensOnlyVerified({ useErrorBoundary: false, + retry: true, + retryDelay: 1000 }); - // maybe check `error` field from query and make it available for UI to do something - const swapFromVerifiedAssets = useMemo(() => { return assets .map(a => { @@ -23,20 +23,20 @@ export function useSellVerifiedSwapTokens( .sort(comparatorByGetter(a => a.name?.toLowerCase())); }, [onlyVerifiedTokens, assets]); - return { walletVerifiedAssets: swapFromVerifiedAssets, isLoading }; + return { walletVerifiedAssets: swapFromVerifiedAssets, isLoading, error: false }; } export function useBuyVerifiedSwapTokens( assets: Array, - sellTokenInfo: { id: string, ... }, -): {| walletVerifiedAssets: Array, isLoading: boolean |} { - + sellTokenInfo: { id: string, ... } +): {| walletVerifiedAssets: Array, isLoading: boolean, error: boolean |} { + // maybe check `error` field from query and make it available for UI to do something const { onlyVerifiedTokens, isLoading } = useSwapTokensOnlyVerified({ useErrorBoundary: false, + retry: true, + retryDelay: 1000 }); - // maybe check `error` field from query and make it available for UI to do something - const swapToVerifiedAssets = useMemo(() => { const isSellingPt = sellTokenInfo.id === ''; const pt = assets.find(a => a.id === ''); @@ -51,5 +51,5 @@ export function useBuyVerifiedSwapTokens( return [...(isSellingPt ? [] : [pt]), ...nonPtAssets]; }, [onlyVerifiedTokens, assets, sellTokenInfo]); - return { walletVerifiedAssets: swapToVerifiedAssets, isLoading }; + return { walletVerifiedAssets: swapToVerifiedAssets, isLoading, error: false }; } From 95eb6485b266cda6c46ed5797cb51f87dac10bf8 Mon Sep 17 00:00:00 2001 From: Patriciu Nista Date: Mon, 21 Oct 2024 12:55:35 +0200 Subject: [PATCH 11/35] YOEXT-1409 add query invalidate --- .../app/components/swap/SelectAssetDialog.js | 12 ++++---- .../edit-buy-amount/SelectBuyTokenFromList.js | 14 +++++---- .../SelectSellTokenFromList.js | 29 +++++++++++-------- .../app/containers/swap/asset-swap/hooks.js | 29 ++++++++++++------- 4 files changed, 51 insertions(+), 33 deletions(-) diff --git a/packages/yoroi-extension/app/components/swap/SelectAssetDialog.js b/packages/yoroi-extension/app/components/swap/SelectAssetDialog.js index 0dc60487f8..36e84eb1a1 100644 --- a/packages/yoroi-extension/app/components/swap/SelectAssetDialog.js +++ b/packages/yoroi-extension/app/components/swap/SelectAssetDialog.js @@ -118,7 +118,7 @@ export default function SelectAssetDialog({ } > - {(filteredAssets.length !== 0 && !assetsStillLoading) && ( + {filteredAssets.length !== 0 && !assetsStillLoading && ( ) : ( - + <> + + + {type === 'from' ? `No tokens found for “${searchTerm}”` : 'No asset was found to swap'} + + )} - - {type === 'from' ? `No tokens found for “${searchTerm}”` : 'No asset was found to swap'} - )} diff --git a/packages/yoroi-extension/app/containers/swap/asset-swap/edit-buy-amount/SelectBuyTokenFromList.js b/packages/yoroi-extension/app/containers/swap/asset-swap/edit-buy-amount/SelectBuyTokenFromList.js index e7b80a0472..f47132470c 100644 --- a/packages/yoroi-extension/app/containers/swap/asset-swap/edit-buy-amount/SelectBuyTokenFromList.js +++ b/packages/yoroi-extension/app/containers/swap/asset-swap/edit-buy-amount/SelectBuyTokenFromList.js @@ -1,13 +1,13 @@ //@flow -import { type Node } from 'react'; +import type { Node } from 'react'; +import type { RemoteTokenInfo } from '../../../../api/ada/lib/state-fetch/types'; import { useSwap } from '@yoroi/swap'; -import SelectAssetDialog from '../../../../components/swap/SelectAssetDialog'; import { useSwapForm } from '../../context/swap-form'; -import type { RemoteTokenInfo } from '../../../../api/ada/lib/state-fetch/types'; -import SwapStore from '../../../../stores/ada/SwapStore'; import { useBuyVerifiedSwapTokens } from '../hooks'; import { ampli } from '../../../../../ampli/index'; import { tokenInfoToAnalyticsToAsset } from '../../swapAnalytics'; +import SelectAssetDialog from '../../../../components/swap/SelectAssetDialog'; +import SwapStore from '../../../../stores/ada/SwapStore'; type Props = {| store: SwapStore, @@ -33,7 +33,9 @@ export default function SelectBuyTokenFromList({ switchTokens, } = useSwapForm(); - const { walletVerifiedAssets, isLoading } = useBuyVerifiedSwapTokens(store.assets, sellTokenInfo); + const { walletVerifiedAssets, isLoading, errored } = useBuyVerifiedSwapTokens(store.assets, sellTokenInfo); + + console.log('errored', errored); const { orderData, resetQuantities } = useSwap(); @@ -59,7 +61,7 @@ export default function SelectBuyTokenFromList({ return ( void, + onTokenInfoChanged: (*) => void, defaultTokenInfo: RemoteTokenInfo, - getTokenInfoBatch: Array => { [string]: Promise }, + getTokenInfoBatch: (Array) => { [string]: Promise }, |}; -export default function SelectSellTokenFromList({ store, onClose, onTokenInfoChanged, defaultTokenInfo, getTokenInfoBatch }: Props): Node { - const { walletVerifiedAssets, isLoading } = useSellVerifiedSwapTokens(store.assets) - +export default function SelectSellTokenFromList({ + store, + onClose, + onTokenInfoChanged, + defaultTokenInfo, + getTokenInfoBatch, +}: Props): Node { + const { walletVerifiedAssets, isLoading, errored } = useSellVerifiedSwapTokens(store.assets); + + console.log('errored', errored); + const { orderData, resetQuantities } = useSwap(); const { buyQuantity: { isTouched: isBuyTouched }, @@ -31,10 +39,7 @@ export default function SelectSellTokenFromList({ store, onClose, onTokenInfoCha const handleAssetSelected = token => { const { id, decimals } = token; - const shouldUpdateToken = - id !== orderData.amounts.sell.tokenId || - !isSellTouched || - decimals !== sellTokenInfo.decimals; + const shouldUpdateToken = id !== orderData.amounts.sell.tokenId || !isSellTouched || decimals !== sellTokenInfo.decimals; const shouldSwitchTokens = id === orderData.amounts.buy.tokenId && isBuyTouched; // useCase - switch tokens when selecting the same already selected token on the other side if (shouldSwitchTokens) { @@ -54,7 +59,7 @@ export default function SelectSellTokenFromList({ store, onClose, onTokenInfoCha return ( -): {| walletVerifiedAssets: Array, isLoading: boolean, error: boolean |} { +): {| walletVerifiedAssets: Array, isLoading: boolean, errored: boolean |} { + const queryClient = useQueryClient(); + // maybe check `error` field from query and make it available for UI to do something - const { onlyVerifiedTokens, isLoading } = useSwapTokensOnlyVerified({ + const { onlyVerifiedTokens, isLoading, isError } = useSwapTokensOnlyVerified({ useErrorBoundary: false, - retry: true, - retryDelay: 1000 }); + if (isError) { + queryClient.invalidateQueries({ queryKey: ['useSwapTokensOnlyVerified'] }); + } + const swapFromVerifiedAssets = useMemo(() => { return assets .map(a => { @@ -23,20 +28,24 @@ export function useSellVerifiedSwapTokens( .sort(comparatorByGetter(a => a.name?.toLowerCase())); }, [onlyVerifiedTokens, assets]); - return { walletVerifiedAssets: swapFromVerifiedAssets, isLoading, error: false }; + return { walletVerifiedAssets: swapFromVerifiedAssets, isLoading, errored: isError }; } export function useBuyVerifiedSwapTokens( assets: Array, sellTokenInfo: { id: string, ... } -): {| walletVerifiedAssets: Array, isLoading: boolean, error: boolean |} { +): {| walletVerifiedAssets: Array, isLoading: boolean, errored: boolean |} { + const queryClient = useQueryClient(); + // maybe check `error` field from query and make it available for UI to do something - const { onlyVerifiedTokens, isLoading } = useSwapTokensOnlyVerified({ + const { onlyVerifiedTokens, isLoading, isError } = useSwapTokensOnlyVerified({ useErrorBoundary: false, - retry: true, - retryDelay: 1000 }); + if (isError) { + queryClient.invalidateQueries({ queryKey: ['useSwapTokensOnlyVerified'] }); + } + const swapToVerifiedAssets = useMemo(() => { const isSellingPt = sellTokenInfo.id === ''; const pt = assets.find(a => a.id === ''); @@ -51,5 +60,5 @@ export function useBuyVerifiedSwapTokens( return [...(isSellingPt ? [] : [pt]), ...nonPtAssets]; }, [onlyVerifiedTokens, assets, sellTokenInfo]); - return { walletVerifiedAssets: swapToVerifiedAssets, isLoading, error: false }; + return { walletVerifiedAssets: swapToVerifiedAssets, isLoading, errored: isError }; } From edb8b15ff440c235dd7c8f3dfed578d7957f8041 Mon Sep 17 00:00:00 2001 From: Denis Nebytov Date: Mon, 14 Oct 2024 21:27:18 +0300 Subject: [PATCH 12/35] adding one source of truth --- .../app/components/topbar/WalletCard.js | 36 ++++++++++++++----- .../app/components/topbar/WalletCard.scss | 5 --- 2 files changed, 27 insertions(+), 14 deletions(-) diff --git a/packages/yoroi-extension/app/components/topbar/WalletCard.js b/packages/yoroi-extension/app/components/topbar/WalletCard.js index 775bf8dc60..23e4be3147 100644 --- a/packages/yoroi-extension/app/components/topbar/WalletCard.js +++ b/packages/yoroi-extension/app/components/topbar/WalletCard.js @@ -49,14 +49,32 @@ type State = {| +isActionsShow: boolean |}; export function constructPlate( plate: WalletChecksum, saturationFactor: number, - divClass: string + size: number, + scalePx: number, + iconSize: number, + borderRadius: number, ): [string, React$Element<'div'>] { - return [ - plate.TextPart, -
- -
, - ]; + return [plate.TextPart, ( + + + + )]; } @observer @@ -98,7 +116,7 @@ export default class WalletCard extends Component { const { shouldHideBalance, walletId, idx, unitOfAccountSetting, getCurrentPrice, id } = this.props; const { isActionsShow } = this.state; - const [, iconComponent] = this.props.plate ? constructPlate(this.props.plate, 0, styles.icon) : []; + const [, iconComponent] = this.props.plate ? constructPlate(this.props.plate, 0, 8, 5, 40, 4) : []; const typeText = [this.getType(this.props.type)] .filter(text => text != null) @@ -147,7 +165,7 @@ export default class WalletCard extends Component {
-
{iconComponent}
+ {iconComponent}
Date: Mon, 14 Oct 2024 21:28:29 +0300 Subject: [PATCH 13/35] using constructPlate where it is needed --- .../ConnectedWebsites/WalletRowRevamp.js | 8 +++---- .../app/components/topbar/NavPlate.js | 21 +++---------------- .../topbar/NavWalletDetailsRevamp.js | 16 +++++--------- .../components/topbar/WalletAccountIcon.js | 2 -- .../components/topbar/WalletAccountIcon.scss | 4 ---- 5 files changed, 11 insertions(+), 40 deletions(-) delete mode 100644 packages/yoroi-extension/app/components/topbar/WalletAccountIcon.scss diff --git a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRowRevamp.js b/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRowRevamp.js index f6d42556f5..7a83170eda 100644 --- a/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRowRevamp.js +++ b/packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/WalletRowRevamp.js @@ -13,7 +13,7 @@ import { ReactComponent as NoDappImage } from '../../../assets/images/dapp-conne import { intlShape } from 'react-intl'; import { splitAmount, truncateToken } from '../../../utils/formatters'; import { Box, Typography, styled } from '@mui/material'; -import { constructPlate } from '../../topbar/NavPlate'; +import { constructPlate } from '../../topbar/WalletCard'; import styles from './WalletRow.scss'; type Props = {| @@ -95,7 +95,7 @@ export default class WalletRowRevamp extends Component { } = this.props; const { showDeleteIcon } = this.state; - const [, plateIcon] = constructPlate(plate, 0, ''); + const [, plateIcon] = constructPlate(plate, 0, 8, 5, 40, 4); return ( { id={id} > - - {plateIcon} - + {plateIcon}
{walletName} diff --git a/packages/yoroi-extension/app/components/topbar/NavPlate.js b/packages/yoroi-extension/app/components/topbar/NavPlate.js index 58e68865a3..9461ff862b 100644 --- a/packages/yoroi-extension/app/components/topbar/NavPlate.js +++ b/packages/yoroi-extension/app/components/topbar/NavPlate.js @@ -8,12 +8,13 @@ import WalletAccountIcon from './WalletAccountIcon'; import { ReactComponent as ConceptualIcon } from '../../assets/images/wallet-nav/conceptual-wallet.inline.svg'; import { ReactComponent as TrezorIcon } from '../../assets/images/wallet-nav/trezor-wallet.inline.svg'; import { ReactComponent as LedgerIcon } from '../../assets/images/wallet-nav/ledger-wallet.inline.svg'; -import { Typography, Tooltip } from '@mui/material'; +import { Box, Typography, Tooltip } from '@mui/material'; import { truncateLongName, maxNameLengthBeforeTruncation } from '../../utils/formatters'; import type { WalletChecksum } from '@emurgo/cip4-js'; import type { $npm$ReactIntl$IntlFormat, $npm$ReactIntl$MessageDescriptor } from 'react-intl'; import globalMessages from '../../i18n/global-messages'; import type { WalletType } from '../../../chrome/extension/background/types'; +import { constructPlate } from './WalletCard'; type Props = {| +plate: null | WalletChecksum, @@ -21,22 +22,6 @@ type Props = {| +name: string, |}; -export function constructPlate( - plate: WalletChecksum, - saturationFactor: number, - divClass: string, -): [string, React$Element<'div'>] { - return [plate.TextPart, ( -
- -
- )]; -} - @observer export default class NavPlate extends Component { @@ -68,7 +53,7 @@ export default class NavPlate extends Component { const { intl } = this.context; const [accountPlateId, iconComponent] = (this.props.plate) ? - constructPlate(this.props.plate, 0, styles.icon) + constructPlate(this.props.plate, 0, 8, 5, 40, 4) : []; const TypeIcon = this.getIcon(this.props.walletType); diff --git a/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js b/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js index 6fbb3a4f62..8cafdeaea8 100644 --- a/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js +++ b/packages/yoroi-extension/app/components/topbar/NavWalletDetailsRevamp.js @@ -15,6 +15,7 @@ import { maybe } from '../../coreUtils'; import AmountDisplay from '../common/AmountDisplay'; import styles from './NavWalletDetailsRevamp.scss'; import WalletAccountIcon from './WalletAccountIcon'; +import { constructPlate } from './WalletCard'; import type { $npm$ReactIntl$IntlFormat } from 'react-intl'; import type { TokenLookupKey } from '../../api/common/lib/MultiToken'; import type { TokenRow } from '../../api/ada/lib/storage/database/primitives/tables'; @@ -47,15 +48,6 @@ type Props = {| +openWalletInfoDialog: () => void, |}; -function constructPlate(plate: WalletChecksum, saturationFactor: number, divClass: string): [string, React$Element<'div'>] { - return [ - plate.TextPart, -
- -
, - ]; -} - @observer export default class NavWalletDetailsRevamp extends Component { static defaultProps: {| @@ -87,7 +79,7 @@ export default class NavWalletDetailsRevamp extends Component { const totalAmount = this.getTotalAmount(); const showEyeIconSafe = showEyeIcon != null && showEyeIcon; - const [accountPlateId, iconComponent] = plate ? constructPlate(plate, 0, styles.icon) : []; + const [accountPlateId, iconComponent] = plate ? constructPlate(plate, 0, 8, 4, 32, 4) : []; const amountDisplayId = `topBar:selectedWallet`; return ( @@ -109,7 +101,9 @@ export default class NavWalletDetailsRevamp extends Component { >