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 ccbcf505..a0a9207b 100644 --- a/packages/checkout/package.json +++ b/packages/checkout/package.json @@ -23,16 +23,17 @@ "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", "react": ">=17", "react-dom": ">=17", - "wagmi": ">=2.0.0" + "wagmi": ">=2.0.0", + "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/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/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/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" > - + =1.6.0", + "@0xsequence/design-system": ">=1.7.0", "@0xsequence/kit": "workspace:*", "ethers": ">=5.7.2", "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", + "@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/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/NetworkBadge.tsx b/packages/wallet/src/shared/NetworkBadge.tsx index 0893ad96..0a2f9c3c 100644 --- a/packages/wallet/src/shared/NetworkBadge.tsx +++ b/packages/wallet/src/shared/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" > - + @@ -62,14 +59,14 @@ export const SendItemInfo = ({ ) : ( - + )} {name} - + {' '} diff --git a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx index 9e80fec9..0a60886d 100644 --- a/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx +++ b/packages/wallet/src/shared/TransactionHistoryList/TransactionHistoryItem.tsx @@ -3,7 +3,7 @@ import { TokenPrice } from '@0xsequence/api' import { ethers } from 'ethers' import { Transaction, TxnTransfer, TxnTransferType } from '@0xsequence/indexer' import { getNativeTokenInfoByChainId, useCoinPrices, useExchangeRate } from '@0xsequence/kit' -import { ArrowRightIcon, Box, Text, Image, TransactionIcon, vars, Skeleton } from '@0xsequence/design-system' +import { ArrowRightIcon, Box, Text, Image, TransactionIcon, vars, Skeleton, NetworkImage } from '@0xsequence/design-system' import dayjs from 'dayjs' import { useConfig } from 'wagmi' @@ -124,7 +124,7 @@ export const TransactionHistoryItem = ({ transaction }: TransactionHistoryItemPr {getTansactionLabelByType(transfer.transferType)} - + {isFirstItem && ( 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/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/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' }} > - + { > {tokenName} - network logo + diff --git a/packages/wallet/src/views/TransactionDetails/index.tsx b/packages/wallet/src/views/TransactionDetails/index.tsx index 00cecf03..d634185a 100644 --- a/packages/wallet/src/views/TransactionDetails/index.tsx +++ b/packages/wallet/src/views/TransactionDetails/index.tsx @@ -2,12 +2,22 @@ import React from 'react' import { ethers } from 'ethers' import { Token } from '@0xsequence/api' import { Transaction, TxnTransfer } from '@0xsequence/indexer' -import { ArrowRightIcon, Box, Button, Divider, GradientAvatar, Image, LinkIcon, Skeleton, Text } from '@0xsequence/design-system' +import { + ArrowRightIcon, + Box, + Button, + Divider, + GradientAvatar, + LinkIcon, + NetworkImage, + Skeleton, + Text, + TokenImage +} from '@0xsequence/design-system' import { getNativeTokenInfoByChainId, useExchangeRate, useCoinPrices, useCollectiblePrices } from '@0xsequence/kit' import dayjs from 'dayjs' import { useConfig } from 'wagmi' -import { CoinIcon } from '../../shared/CoinIcon' import { CopyButton } from '../../shared/CopyButton' import { NetworkBadge } from '../../shared/NetworkBadge' import { compareAddress, formatDisplay } from '../../utils' @@ -124,7 +134,7 @@ export const TransactionDetails = ({ transaction }: TransactionDetailProps) => { padding="2" style={{ flexBasis: '100%' }} > - + {`${balanceDisplayed} ${symbol}`} @@ -187,7 +197,7 @@ export const TransactionDetails = ({ transaction }: TransactionDetailProps) => { Transfer - network logo + {transaction.transfers?.map((transfer, index) => ( diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 36e1406c..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 @@ -305,10 +305,13 @@ 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 - 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 @@ -395,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)) @@ -491,10 +494,13 @@ 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 - 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 @@ -546,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' @@ -7618,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) @@ -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':