From 0e46fd696e052e0d27e81b5ed7b9b2d6399f08e8 Mon Sep 17 00:00:00 2001 From: Gamaliel Padillo Date: Fri, 15 Nov 2024 12:45:21 -0800 Subject: [PATCH 1/4] fix: custom token spacing, and overflow --- .../network-assets/components/custom-evm-token.vue | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/extension/src/ui/action/views/network-assets/components/custom-evm-token.vue b/packages/extension/src/ui/action/views/network-assets/components/custom-evm-token.vue index a1219e480..f1e8453cb 100644 --- a/packages/extension/src/ui/action/views/network-assets/components/custom-evm-token.vue +++ b/packages/extension/src/ui/action/views/network-assets/components/custom-evm-token.vue @@ -47,7 +47,14 @@ ).value : '~' }} - {{ tokenInfo.symbol }} + {{ + tokenInfo.symbol + }} + {{ + `${tokenInfo.symbol.slice(0, 12)}...` + }}

@@ -279,7 +286,7 @@ const addToken = async () => { .add-custom-token { width: 460px; - height: 568px; + height: 385px; box-sizing: border-box; position: relative; border-radius: 12px; @@ -422,10 +429,11 @@ const addToken = async () => { letter-spacing: 0.5px; color: @secondaryLabel; margin: 0; - width: 128px; + display: flex; span { font-variant: small-caps; + font-size: 12px; } } } From fd6b474924d77ed95f070e190fc565bbbab34764 Mon Sep 17 00:00:00 2001 From: Gamaliel Padillo Date: Tue, 19 Nov 2024 14:03:22 -0800 Subject: [PATCH 2/4] feat: add delete custom token and label warning --- .../extension/src/libs/tokens-state/index.ts | 40 ++++++++++++++- .../providers/ethereum/types/evm-network.ts | 5 +- .../action/views/asset-detail-view/index.vue | 26 +++++++++- .../components/network-assets-item.vue | 49 ++++++++++++++++++- .../ui/action/views/network-assets/index.vue | 5 ++ 5 files changed, 119 insertions(+), 6 deletions(-) diff --git a/packages/extension/src/libs/tokens-state/index.ts b/packages/extension/src/libs/tokens-state/index.ts index 919e28fed..52ad239e4 100644 --- a/packages/extension/src/libs/tokens-state/index.ts +++ b/packages/extension/src/libs/tokens-state/index.ts @@ -35,7 +35,7 @@ export class TokensState { if ( t.type === TokenType.ERC20 && (t as CustomErc20Token).address.toLowerCase() === - token.address.toLowerCase() + token.address.toLowerCase() ) { return false; } @@ -54,6 +54,44 @@ export class TokensState { return true; } + /** + * Remove a custom ERC20 token from a given network. + * Returns `true` if the token was removed and false otherwise. + * @param {NetworkNames} chainName - The name of the network the token is being removed from. + * @param {string} address - The address of the token being removed. + */ + async removeErc20Token( + chainName: NetworkNames, + address: string, + ): Promise { + const state: IState | null = await this.storage.get(StorageKeys.customTokens); + + if (state && state[chainName]) { + const tokens = state[chainName]; + + for (let i = 0; i < tokens!.length; i++) { + const token = tokens![i]; + + if ( + token.type === TokenType.ERC20 && + (token as CustomErc20Token).address.toLowerCase() === + address.toLowerCase() + ) { + tokens!.splice(i, 1); + + if (tokens!.length === 0) { + delete state[chainName]; + } + + this.storage.set(StorageKeys.customTokens, state); + return true; + } + } + } + + return false; + } + async getTokensByNetwork(chainName: NetworkNames): Promise { const state: IState | null = await this.storage.get( StorageKeys.customTokens, diff --git a/packages/extension/src/providers/ethereum/types/evm-network.ts b/packages/extension/src/providers/ethereum/types/evm-network.ts index c4897a4e3..10a4158f2 100644 --- a/packages/extension/src/providers/ethereum/types/evm-network.ts +++ b/packages/extension/src/providers/ethereum/types/evm-network.ts @@ -157,7 +157,7 @@ export class EvmNetwork extends BaseNetwork { decimals: this.decimals, sparkline: nativeMarketData ? new Sparkline(nativeMarketData.sparkline_in_24h.price, 25) - .dataValues + .dataValues : '', priceChangePercentage: nativeMarketData?.price_change_percentage_24h_in_currency ?? 0, @@ -197,7 +197,6 @@ export class EvmNetwork extends BaseNetwork { assets = [nativeAsset, ...assetInfos]; } - const customTokens = await tokensState .getTokensByNetwork(this.name) .then(tokens => { @@ -211,7 +210,7 @@ export class EvmNetwork extends BaseNetwork { a.contract && (token as CustomErc20Token).address && a.contract.toLowerCase() === - (token as CustomErc20Token).address.toLowerCase() + (token as CustomErc20Token).address.toLowerCase() ) { return false; } diff --git a/packages/extension/src/ui/action/views/asset-detail-view/index.vue b/packages/extension/src/ui/action/views/asset-detail-view/index.vue index 20c6aa868..1e484a44b 100644 --- a/packages/extension/src/ui/action/views/asset-detail-view/index.vue +++ b/packages/extension/src/ui/action/views/asset-detail-view/index.vue @@ -52,12 +52,24 @@

${{ token.balanceUSDf }}

+
+
+ + *Deleting custom token deletes it for the whole network. +
From a030dc6023a7f645c664af4d57314770714f089c Mon Sep 17 00:00:00 2001 From: Gamaliel Padillo Date: Wed, 20 Nov 2024 10:42:14 -0800 Subject: [PATCH 3/4] devop: add code rabbit suggestions --- .../components/network-assets-item.vue | 15 ++++++++++----- .../src/ui/action/views/network-assets/index.vue | 6 ++---- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue b/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue index 8365fd959..a23da895c 100644 --- a/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue +++ b/packages/extension/src/ui/action/views/network-assets/components/network-assets-item.vue @@ -134,11 +134,15 @@ const customTokens = ref([]); const tokenState = new TokensState(); const fetchCustomTokens = async () => { - return await tokenState.getTokensByNetwork(props.network.name).then(res => { - customTokens.value = res.filter( - (token): token is CustomErc20Token => 'address' in token, - ); - }); + try { + return await tokenState.getTokensByNetwork(props.network.name).then(res => { + customTokens.value = res.filter( + (token): token is CustomErc20Token => 'address' in token, + ); + }); + } catch { + customTokens.value = []; + } }; onMounted(async () => { @@ -146,6 +150,7 @@ onMounted(async () => { }); const isCustomToken = computed(() => { + if (!props.token.contract) return false; return customTokens.value.some( token => token.address.toLowerCase() === props.token.contract?.toLowerCase(), diff --git a/packages/extension/src/ui/action/views/network-assets/index.vue b/packages/extension/src/ui/action/views/network-assets/index.vue index 4aad72e73..87811e70c 100644 --- a/packages/extension/src/ui/action/views/network-assets/index.vue +++ b/packages/extension/src/ui/action/views/network-assets/index.vue @@ -147,11 +147,9 @@ const addCustomAsset = (asset: AssetsType) => { }); if (!existingAsset) { - assets.value = [...assets.value, asset]; + // refetches assets to update the custom token + updateAssets(); } - - // refetches assets to update the custom token - updateAssets(); }; From 7e6b3b09e14beaf8069313a63906f6ecacac1328 Mon Sep 17 00:00:00 2001 From: Gamaliel Padillo Date: Tue, 26 Nov 2024 11:49:55 -0800 Subject: [PATCH 4/4] fix: comment --- packages/extension/src/libs/tokens-state/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/extension/src/libs/tokens-state/index.ts b/packages/extension/src/libs/tokens-state/index.ts index 52ad239e4..f62e84d4f 100644 --- a/packages/extension/src/libs/tokens-state/index.ts +++ b/packages/extension/src/libs/tokens-state/index.ts @@ -83,7 +83,7 @@ export class TokensState { delete state[chainName]; } - this.storage.set(StorageKeys.customTokens, state); + await this.storage.set(StorageKeys.customTokens, state); return true; } }