From 8da9504934e674f8abd6918715d91ef14bf0fa0c Mon Sep 17 00:00:00 2001 From: Corban Riley Date: Fri, 10 May 2024 10:44:26 -0400 Subject: [PATCH 1/4] Adding viem as a peer dependency to wallet and checkout --- packages/checkout/package.json | 3 ++- packages/wallet/package.json | 3 ++- pnpm-lock.yaml | 10 ++++++++-- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/checkout/package.json b/packages/checkout/package.json index ccbcf505..ba51b3f2 100644 --- a/packages/checkout/package.json +++ b/packages/checkout/package.json @@ -29,7 +29,8 @@ "framer-motion": ">=8.5.2", "react": ">=17", "react-dom": ">=17", - "wagmi": ">=2.0.0" + "wagmi": ">=2.0.0", + "viem": ">=2.0.0" }, "devDependencies": { "@0xsequence/design-system": "^1.6.0", diff --git a/packages/wallet/package.json b/packages/wallet/package.json index 5746fe62..435b2393 100644 --- a/packages/wallet/package.json +++ b/packages/wallet/package.json @@ -33,7 +33,8 @@ "framer-motion": ">=8.5.2", "react": ">=17", "react-dom": ">=17", - "wagmi": ">=2.5.0" + "wagmi": ">=2.5.0", + "viem": ">=2.0.0" }, "devDependencies": { "@0xsequence/design-system": "^1.6.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 36e1406c..c4c34463 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -305,6 +305,9 @@ importers: react-copy-to-clipboard: specifier: ^5.1.0 version: 5.1.0(react@18.3.1) + viem: + specifier: '>=2.0.0' + version: 2.10.2(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@6.0.3)(zod@3.23.7) devDependencies: '@0xsequence/design-system': specifier: ^1.6.0 @@ -491,6 +494,9 @@ importers: react-copy-to-clipboard: specifier: ^5.1.0 version: 5.1.0(react@18.3.1) + viem: + specifier: '>=2.0.0' + version: 2.10.2(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@6.0.3)(zod@3.23.7) devDependencies: '@0xsequence/design-system': specifier: ^1.6.0 @@ -11166,7 +11172,7 @@ snapshots: '@scure/bip32@1.3.2': dependencies: '@noble/curves': 1.2.0 - '@noble/hashes': 1.3.2 + '@noble/hashes': 1.3.3 '@scure/base': 1.1.6 '@scure/bip32@1.3.3': @@ -11177,7 +11183,7 @@ snapshots: '@scure/bip39@1.2.1': dependencies: - '@noble/hashes': 1.3.2 + '@noble/hashes': 1.3.3 '@scure/base': 1.1.6 '@scure/bip39@1.2.2': From 00690500f365c580370ff3af7cae73adacdaf08f Mon Sep 17 00:00:00 2001 From: Corban Riley Date: Fri, 10 May 2024 14:38:09 -0400 Subject: [PATCH 2/4] Updating design-system to v1.7.0 --- examples/next/package.json | 2 +- examples/react/package.json | 2 +- packages/checkout/package.json | 4 ++-- packages/kit/package.json | 2 +- packages/wallet/package.json | 4 ++-- pnpm-lock.yaml | 26 +++++++++++++------------- 6 files changed, 20 insertions(+), 20 deletions(-) diff --git a/examples/next/package.json b/examples/next/package.json index 67b41b57..abc23617 100644 --- a/examples/next/package.json +++ b/examples/next/package.json @@ -9,7 +9,7 @@ "lint": "next lint" }, "dependencies": { - "@0xsequence/design-system": "^1.6.0", + "@0xsequence/design-system": "^1.7.0", "@0xsequence/kit": "workspace:*", "@0xsequence/kit-checkout": "workspace:*", "@0xsequence/kit-connectors": "workspace:*", diff --git a/examples/react/package.json b/examples/react/package.json index a31291fb..f34a3fce 100644 --- a/examples/react/package.json +++ b/examples/react/package.json @@ -12,7 +12,7 @@ "typecheck": "tsc --noEmit" }, "dependencies": { - "@0xsequence/design-system": "^1.6.0", + "@0xsequence/design-system": "^1.7.0", "@0xsequence/kit": "workspace:*", "@0xsequence/kit-checkout": "workspace:*", "@0xsequence/kit-connectors": "workspace:*", diff --git a/packages/checkout/package.json b/packages/checkout/package.json index ba51b3f2..a0a9207b 100644 --- a/packages/checkout/package.json +++ b/packages/checkout/package.json @@ -23,7 +23,7 @@ "react-copy-to-clipboard": "^5.1.0" }, "peerDependencies": { - "@0xsequence/design-system": ">=1.6.0", + "@0xsequence/design-system": ">=1.7.0", "@0xsequence/kit": "workspace:*", "ethers": ">=5.7.2", "framer-motion": ">=8.5.2", @@ -33,7 +33,7 @@ "viem": ">=2.0.0" }, "devDependencies": { - "@0xsequence/design-system": "^1.6.0", + "@0xsequence/design-system": "^1.7.0", "@0xsequence/kit": "workspace:*", "@types/react-copy-to-clipboard": "^5.0.4", "babel-plugin-module-resolver": "^5.0.2", diff --git a/packages/kit/package.json b/packages/kit/package.json index d0b2f8b6..f677192f 100644 --- a/packages/kit/package.json +++ b/packages/kit/package.json @@ -21,7 +21,7 @@ "@0xsequence/api": "^1.9.26", "@0xsequence/auth": "^1.9.26", "@0xsequence/core": "^1.9.26", - "@0xsequence/design-system": "^1.6.0", + "@0xsequence/design-system": "^1.7.0", "@0xsequence/ethauth": "^0.8.1", "@0xsequence/indexer": "^1.9.26", "@0xsequence/kit-connectors": "workspace:*", diff --git a/packages/wallet/package.json b/packages/wallet/package.json index 435b2393..98f46f91 100644 --- a/packages/wallet/package.json +++ b/packages/wallet/package.json @@ -27,7 +27,7 @@ "react-copy-to-clipboard": "^5.1.0" }, "peerDependencies": { - "@0xsequence/design-system": ">=1.6.0", + "@0xsequence/design-system": ">=1.7.0", "@0xsequence/kit": "workspace:*", "ethers": ">=5.7.2", "framer-motion": ">=8.5.2", @@ -37,7 +37,7 @@ "viem": ">=2.0.0" }, "devDependencies": { - "@0xsequence/design-system": "^1.6.0", + "@0xsequence/design-system": "^1.7.0", "@0xsequence/kit": "workspace:*", "@types/react-copy-to-clipboard": "^5.0.4", "babel-plugin-module-resolver": "^5.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c4c34463..2f1fdc23 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -99,8 +99,8 @@ importers: examples/next: dependencies: '@0xsequence/design-system': - specifier: ^1.6.0 - version: 1.6.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(framer-motion@8.5.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.7.0 + version: 1.7.0(@types/react-dom@18.3.0)(@types/react@18.3.1)(framer-motion@8.5.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@0xsequence/kit': specifier: workspace:* version: link:../../packages/kit @@ -160,8 +160,8 @@ importers: examples/react: dependencies: '@0xsequence/design-system': - specifier: ^1.6.0 - version: 1.6.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(framer-motion@8.5.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.7.0 + version: 1.7.0(@types/react-dom@18.3.0)(@types/react@18.3.1)(framer-motion@8.5.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@0xsequence/kit': specifier: workspace:* version: link:../../packages/kit @@ -310,8 +310,8 @@ importers: version: 2.10.2(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@6.0.3)(zod@3.23.7) devDependencies: '@0xsequence/design-system': - specifier: ^1.6.0 - version: 1.6.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(framer-motion@8.5.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.7.0 + version: 1.7.0(@types/react-dom@18.3.0)(@types/react@18.3.1)(framer-motion@8.5.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@0xsequence/kit': specifier: workspace:* version: link:../kit @@ -398,8 +398,8 @@ importers: specifier: ^1.9.26 version: 1.9.26(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3)) '@0xsequence/design-system': - specifier: ^1.6.0 - version: 1.6.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(framer-motion@8.5.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.7.0 + version: 1.7.0(@types/react-dom@18.3.0)(@types/react@18.3.1)(framer-motion@8.5.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@0xsequence/ethauth': specifier: ^0.8.1 version: 0.8.1(ethers@5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3)) @@ -499,8 +499,8 @@ importers: version: 2.10.2(bufferutil@4.0.8)(typescript@5.4.5)(utf-8-validate@6.0.3)(zod@3.23.7) devDependencies: '@0xsequence/design-system': - specifier: ^1.6.0 - version: 1.6.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(framer-motion@8.5.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + specifier: ^1.7.0 + version: 1.7.0(@types/react-dom@18.3.0)(@types/react@18.3.1)(framer-motion@8.5.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@0xsequence/kit': specifier: workspace:* version: link:../kit @@ -552,8 +552,8 @@ packages: peerDependencies: ethers: '>=5.5' - '@0xsequence/design-system@1.6.3': - resolution: {integrity: sha512-to1Gpo/ilOi1Xa+O1oRx4faXBWmqhzGedkVbWHRar5PWNp+RjBaG8bm0qI2j6S7vpTVgK3pLHoiF6/0JdwMcmA==} + '@0xsequence/design-system@1.7.0': + resolution: {integrity: sha512-NgPHWbANqzL0O6zmBg4KmkX65DlDY7t2ZaDF4LgWrXzKc7UhGWShrkS+feFdsL4NAV2xYpABRAnFgT3kC99/Jg==} peerDependencies: framer-motion: '>=6' react: '>=17' @@ -7624,7 +7624,7 @@ snapshots: '@0xsequence/abi': 1.9.26 ethers: 5.7.2(bufferutil@4.0.8)(utf-8-validate@6.0.3) - '@0xsequence/design-system@1.6.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(framer-motion@8.5.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + '@0xsequence/design-system@1.7.0(@types/react-dom@18.3.0)(@types/react@18.3.1)(framer-motion@8.5.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: '@radix-ui/react-aspect-ratio': 1.0.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-checkbox': 1.0.4(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) From 21dea8804d0bc20324cb5ea2d1857fb2b8742939 Mon Sep 17 00:00:00 2001 From: Corban Riley Date: Fri, 10 May 2024 15:06:12 -0400 Subject: [PATCH 3/4] Replacing CoinIcon with TokenImage and NetworkImage from design-system --- .../checkout/src/shared/components/CoinIcon.tsx | 17 ----------------- .../component/OrderSummaryItem.tsx | 7 +++---- .../src/views/CheckoutSelection/index.tsx | 10 +++++----- packages/wallet/src/shared/CoinIcon.tsx | 17 ----------------- packages/wallet/src/shared/CoinRow.tsx | 5 ++--- packages/wallet/src/shared/SendItemInfo.tsx | 9 +++------ packages/wallet/src/shared/index.ts | 1 - .../src/views/CollectionDetails/index.tsx | 5 ++--- .../AssetSummary/CoinTile/CoinTileContent.tsx | 13 ++++++------- .../components/AssetSummary/CoinTile/index.tsx | 4 ++-- .../src/views/Search/components/BalanceItem.tsx | 6 +++--- .../src/views/TransactionDetails/index.tsx | 16 +++++++++++++--- 12 files changed, 39 insertions(+), 71 deletions(-) delete mode 100644 packages/checkout/src/shared/components/CoinIcon.tsx delete mode 100644 packages/wallet/src/shared/CoinIcon.tsx diff --git a/packages/checkout/src/shared/components/CoinIcon.tsx b/packages/checkout/src/shared/components/CoinIcon.tsx deleted file mode 100644 index 6529f7b2..00000000 --- a/packages/checkout/src/shared/components/CoinIcon.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import { Image } from '@0xsequence/design-system' - -import { DefaultIcon } from './DefaultIcon' - -interface CoinIconProps { - imageUrl?: string - size?: number -} - -export const CoinIcon = ({ imageUrl, size = 30 }: CoinIconProps) => { - if (imageUrl) { - return - } - - return -} diff --git a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx index 218f5e05..07fc7b86 100644 --- a/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx +++ b/packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx @@ -1,9 +1,8 @@ import React from 'react' import { ethers } from 'ethers' import { useConfig } from 'wagmi' -import { Box, Card, Image, Text, Skeleton } from '@0xsequence/design-system' +import { Box, Card, Image, Text, Skeleton, TokenImage, NetworkImage } from '@0xsequence/design-system' import { getNativeTokenInfoByChainId, useContractInfo, useTokenMetadata } from '@0xsequence/kit' -import { CoinIcon } from '../../../shared/components/CoinIcon' import { formatDisplay } from '../../../utils' @@ -39,11 +38,11 @@ export const OrderSummaryItem = ({ contractAddress, tokenId, quantityRaw, chainI - + {collectionName} - + { ) : ( - + {`${formatDisplay(requestAmount)} ${coinSymbol}`} @@ -193,7 +193,7 @@ export const CheckoutSelection = () => { height: '56px' }} width="full" - leftIcon={() => } + leftIcon={() => } variant="primary" label={`Pay with ${coinSymbol}`} rightIcon={ChevronRightIcon} @@ -207,7 +207,7 @@ export const CheckoutSelection = () => { variant="glass" label={ - + Insufficient ${coinSymbol} } diff --git a/packages/wallet/src/shared/CoinIcon.tsx b/packages/wallet/src/shared/CoinIcon.tsx deleted file mode 100644 index 864a5f0a..00000000 --- a/packages/wallet/src/shared/CoinIcon.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import React from 'react' -import { Image } from '@0xsequence/design-system' - -import { DefaultIcon } from '../shared/DefaultIcon' - -interface CoinIconProps { - imageUrl?: string - size?: number -} - -export const CoinIcon = ({ imageUrl, size = 30 }: CoinIconProps) => { - if (imageUrl) { - return - } - - return -} diff --git a/packages/wallet/src/shared/CoinRow.tsx b/packages/wallet/src/shared/CoinRow.tsx index 519b574d..a50b0fb4 100644 --- a/packages/wallet/src/shared/CoinRow.tsx +++ b/packages/wallet/src/shared/CoinRow.tsx @@ -1,8 +1,7 @@ import React from 'react' import { ethers } from 'ethers' -import { Box, Skeleton, Text } from '@0xsequence/design-system' +import { Box, Skeleton, Text, TokenImage } from '@0xsequence/design-system' -import { CoinIcon } from './CoinIcon' import { formatDisplay, getPercentageColor } from '../utils' interface CoinRowProps { @@ -56,7 +55,7 @@ export const CoinRow = ({ imageUrl, name, decimals, balance, symbol, fiatValue, paddingX="3" > - + {name} diff --git a/packages/wallet/src/shared/SendItemInfo.tsx b/packages/wallet/src/shared/SendItemInfo.tsx index eaf9c6c7..13f755b0 100644 --- a/packages/wallet/src/shared/SendItemInfo.tsx +++ b/packages/wallet/src/shared/SendItemInfo.tsx @@ -1,10 +1,8 @@ import React from 'react' import { ethers } from 'ethers' import { useConfig } from 'wagmi' -import { Box, Skeleton, Text } from '@0xsequence/design-system' -import { getNativeTokenInfoByChainId } from '@0xsequence/kit' +import { Box, NetworkImage, Skeleton, Text, TokenImage } from '@0xsequence/design-system' -import { CoinIcon } from './CoinIcon' import { formatDisplay } from '../utils' import { useSettings } from '../hooks' import { CollectibleTileImage } from '../shared/CollectibleTileImage' @@ -52,7 +50,6 @@ export const SendItemInfo = ({ const { fiatCurrency } = useSettings() const formattedBalance = ethers.utils.formatUnits(balance, decimals) const balanceDisplayed = formatDisplay(formattedBalance) - const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains) return ( @@ -62,14 +59,14 @@ export const SendItemInfo = ({ ) : ( - + )} {name} - + {' '} diff --git a/packages/wallet/src/shared/index.ts b/packages/wallet/src/shared/index.ts index 7a9486d5..d0fabe5e 100644 --- a/packages/wallet/src/shared/index.ts +++ b/packages/wallet/src/shared/index.ts @@ -1,6 +1,5 @@ export * from './KitWalletProvider' export { CollectibleTileImage } from './CollectibleTileImage' -export { CoinIcon } from './CoinIcon' export { formatDisplay } from '../utils' export { useSettings } from '../hooks' export { NetworkBadge } from './NetworkBadge' diff --git a/packages/wallet/src/views/CollectionDetails/index.tsx b/packages/wallet/src/views/CollectionDetails/index.tsx index bee2ecba..c3ee73cc 100644 --- a/packages/wallet/src/views/CollectionDetails/index.tsx +++ b/packages/wallet/src/views/CollectionDetails/index.tsx @@ -1,14 +1,13 @@ import React from 'react' import { TokenBalance } from '@0xsequence/indexer' import { ethers } from 'ethers' -import { Box, Image, Text, vars } from '@0xsequence/design-system' +import { Box, Image, Text, TokenImage, vars } from '@0xsequence/design-system' import { useCollectionBalance } from '@0xsequence/kit' import { useAccount } from 'wagmi' import { CollectionDetailsSkeleton } from './Skeleton' import { NetworkBadge } from '../../shared/NetworkBadge' -import { CoinIcon } from '../../shared/CoinIcon' import { useNavigation } from '../../hooks' import { formatDisplay } from '../../utils' @@ -60,7 +59,7 @@ export const CollectionDetails = ({ chainId, contractAddress }: CollectionDetail gap="10" > - + {contractInfo?.name || 'Unknown'} diff --git a/packages/wallet/src/views/Home/components/AssetSummary/CoinTile/CoinTileContent.tsx b/packages/wallet/src/views/Home/components/AssetSummary/CoinTile/CoinTileContent.tsx index e6d98190..f0ef6b8d 100644 --- a/packages/wallet/src/views/Home/components/AssetSummary/CoinTile/CoinTileContent.tsx +++ b/packages/wallet/src/views/Home/components/AssetSummary/CoinTile/CoinTileContent.tsx @@ -1,28 +1,27 @@ import React from 'react' -import { Box, Text } from '@0xsequence/design-system' +import { Box, NetworkIcon, NetworkImage, Text, TokenImage } from '@0xsequence/design-system' import { getPercentageColor } from '../../../../../utils' -import { CoinIcon } from '../../../../../shared/CoinIcon' import { useSettings } from '../../../../../hooks' interface CoinTileContentProps { - networkLogoUrl: string logoUrl?: string tokenName: string balance: string balanceFiat: string priceChangePercentage: number symbol: string + chainId: number } export const CoinTileContent = ({ - networkLogoUrl, logoUrl, tokenName, balance, balanceFiat, priceChangePercentage, - symbol + symbol, + chainId }: CoinTileContentProps) => { const { fiatCurrency } = useSettings() const priceChangeSymbol = priceChangePercentage > 0 ? '+' : '' @@ -40,7 +39,7 @@ export const CoinTileContent = ({ gap="1" > - + @@ -52,7 +51,7 @@ export const CoinTileContent = ({ > {tokenName} - + { return ( { return ( { const nativeTokenInfo = getNativeTokenInfoByChainId(balance.chainId, chains) const logoURI = isNativeToken ? nativeTokenInfo.logoURI : balance?.contractInfo?.logoURI const tokenName = isNativeToken ? nativeTokenInfo.name : balance?.contractInfo?.name || 'Unknown' + const symbol = isNativeToken ? nativeTokenInfo.symbol : balance?.contractInfo?.symbol const getQuantity = () => { if (balance.contractType === 'ERC721' || balance.contractType === 'ERC1155') { @@ -67,7 +67,7 @@ export const BalanceItem = ({ balance }: BalanceItemProps) => { opacity={{ hover: '80' }} > - + { padding="2" style={{ flexBasis: '100%' }} > - + {`${balanceDisplayed} ${symbol}`} From 31a38cef2b0de74c14fc9455df633a0ede671231 Mon Sep 17 00:00:00 2001 From: Corban Riley Date: Fri, 10 May 2024 15:44:19 -0400 Subject: [PATCH 4/4] Ensuring all network icons are using NetworkImage component --- packages/kit/src/components/KitProvider/NetworkBadge.tsx | 4 ++-- packages/wallet/src/shared/NetworkBadge.tsx | 4 ++-- .../TransactionHistoryList/TransactionHistoryItem.tsx | 4 ++-- packages/wallet/src/views/CollectibleDetails/index.tsx | 4 ++-- packages/wallet/src/views/Search/components/BalanceItem.tsx | 6 +++--- packages/wallet/src/views/TransactionDetails/index.tsx | 4 ++-- 6 files changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/kit/src/components/KitProvider/NetworkBadge.tsx b/packages/kit/src/components/KitProvider/NetworkBadge.tsx index ee797e1c..42c258ec 100644 --- a/packages/kit/src/components/KitProvider/NetworkBadge.tsx +++ b/packages/kit/src/components/KitProvider/NetworkBadge.tsx @@ -1,5 +1,5 @@ import React from 'react' -import { Box, Image, Text } from '@0xsequence/design-system' +import { Box, NetworkImage, Text } from '@0xsequence/design-system' import { getNativeTokenInfoByChainId, getNetwork, getNetworkColor, getNetworkBackgroundColor } from '@0xsequence/kit' import { useConfig } from 'wagmi' @@ -32,7 +32,7 @@ export const NetworkBadge = ({ chainId }: NetworkBadgeProps) => { alignItems="center" width="fit" > - + { alignItems="center" width="fit" > - + {getTansactionLabelByType(transfer.transferType)} - + {isFirstItem && ( diff --git a/packages/wallet/src/views/CollectibleDetails/index.tsx b/packages/wallet/src/views/CollectibleDetails/index.tsx index 85fd683c..adc87fde 100644 --- a/packages/wallet/src/views/CollectibleDetails/index.tsx +++ b/packages/wallet/src/views/CollectibleDetails/index.tsx @@ -1,7 +1,7 @@ import React from 'react' import { ethers } from 'ethers' import { useAccount, useConfig } from 'wagmi' -import { Box, Button, Image, SendIcon, Text } from '@0xsequence/design-system' +import { Box, Button, Image, NetworkImage, SendIcon, Text } from '@0xsequence/design-system' import { getNativeTokenInfoByChainId, useExchangeRate, @@ -128,7 +128,7 @@ export const CollectibleDetails = ({ contractAddress, chainId, tokenId }: Collec {collectionName} - collection logo + diff --git a/packages/wallet/src/views/Search/components/BalanceItem.tsx b/packages/wallet/src/views/Search/components/BalanceItem.tsx index 8a11ad7f..3442bf7e 100644 --- a/packages/wallet/src/views/Search/components/BalanceItem.tsx +++ b/packages/wallet/src/views/Search/components/BalanceItem.tsx @@ -1,7 +1,7 @@ import React from 'react' import { ethers } from 'ethers' import { useConfig } from 'wagmi' -import { Box, Image, Text, ChevronRightIcon, TokenImage } from '@0xsequence/design-system' +import { Box, Image, Text, ChevronRightIcon, TokenImage, NetworkImage } from '@0xsequence/design-system' import { TokenBalance } from '@0xsequence/indexer' import { getNativeTokenInfoByChainId } from '@0xsequence/kit' @@ -67,7 +67,7 @@ export const BalanceItem = ({ balance }: BalanceItemProps) => { opacity={{ hover: '80' }} > - + { > {tokenName} - network logo + diff --git a/packages/wallet/src/views/TransactionDetails/index.tsx b/packages/wallet/src/views/TransactionDetails/index.tsx index 26cbae32..d634185a 100644 --- a/packages/wallet/src/views/TransactionDetails/index.tsx +++ b/packages/wallet/src/views/TransactionDetails/index.tsx @@ -8,8 +8,8 @@ import { Button, Divider, GradientAvatar, - Image, LinkIcon, + NetworkImage, Skeleton, Text, TokenImage @@ -197,7 +197,7 @@ export const TransactionDetails = ({ transaction }: TransactionDetailProps) => { Transfer - network logo + {transaction.transfers?.map((transfer, index) => (