From 99de6a91552c54b5d7114f128bdc565bc38b516b Mon Sep 17 00:00:00 2001 From: Corban Brook Date: Thu, 9 May 2024 13:40:28 -0400 Subject: [PATCH] Remove kit-wallet dependency from kit (#40) --- packages/kit/package.json | 1 - .../KitProvider/CollectibleTileImage.tsx | 22 +++++++ .../components/KitProvider/NetworkBadge.tsx | 47 +++++++++++++ .../kit/src/components/KitProvider/index.tsx | 2 +- .../kit/src/components/TxnDetails/index.tsx | 20 ++---- packages/kit/src/utils/helpers.ts | 66 +++++++++++++++++++ packages/kit/src/utils/index.ts | 1 + packages/kit/src/utils/string.ts | 3 + packages/wallet/src/shared/NetworkBadge.tsx | 1 - pnpm-lock.yaml | 3 - 10 files changed, 146 insertions(+), 20 deletions(-) create mode 100644 packages/kit/src/components/KitProvider/CollectibleTileImage.tsx create mode 100644 packages/kit/src/components/KitProvider/NetworkBadge.tsx create mode 100644 packages/kit/src/utils/string.ts diff --git a/packages/kit/package.json b/packages/kit/package.json index 728877e4..9798ac34 100644 --- a/packages/kit/package.json +++ b/packages/kit/package.json @@ -25,7 +25,6 @@ "@0xsequence/ethauth": "^0.8.1", "@0xsequence/indexer": "^1.9.26", "@0xsequence/kit-connectors": "workspace:*", - "@0xsequence/kit-wallet": "workspace:*", "@0xsequence/metadata": "^1.9.26", "@0xsequence/network": "^1.9.26", "@0xsequence/provider": "^1.9.26", diff --git a/packages/kit/src/components/KitProvider/CollectibleTileImage.tsx b/packages/kit/src/components/KitProvider/CollectibleTileImage.tsx new file mode 100644 index 00000000..6041f8bc --- /dev/null +++ b/packages/kit/src/components/KitProvider/CollectibleTileImage.tsx @@ -0,0 +1,22 @@ +import React from 'react' +import { Card, Image } from '@0xsequence/design-system' + +interface CollectibleTileImageProps { + imageUrl?: string +} + +export const CollectibleTileImage = ({ imageUrl }: CollectibleTileImageProps) => { + return ( + + + + ) +} diff --git a/packages/kit/src/components/KitProvider/NetworkBadge.tsx b/packages/kit/src/components/KitProvider/NetworkBadge.tsx new file mode 100644 index 00000000..ee797e1c --- /dev/null +++ b/packages/kit/src/components/KitProvider/NetworkBadge.tsx @@ -0,0 +1,47 @@ +import React from 'react' +import { Box, Image, Text } from '@0xsequence/design-system' +import { getNativeTokenInfoByChainId, getNetwork, getNetworkColor, getNetworkBackgroundColor } from '@0xsequence/kit' +import { useConfig } from 'wagmi' + +import { capitalize } from '../../utils/string' + +interface NetworkBadgeProps { + chainId: number +} + +export const NetworkBadge = ({ chainId }: NetworkBadgeProps) => { + const { chains } = useConfig() + const network = getNetwork(chainId) + const nativeTokenInfo = getNativeTokenInfoByChainId(chainId, chains) + const chainColor = getNetworkColor(chainId) + const chainBGColor = getNetworkBackgroundColor(chainId) + + return ( + + + + {capitalize(network.title ?? network.name)} + + + ) +} diff --git a/packages/kit/src/components/KitProvider/index.tsx b/packages/kit/src/components/KitProvider/index.tsx index 3ff7133e..a5622e5f 100644 --- a/packages/kit/src/components/KitProvider/index.tsx +++ b/packages/kit/src/components/KitProvider/index.tsx @@ -24,8 +24,8 @@ import { ExtendedConnector, ModalPosition, getModalPositionCss } from '../../uti import { useWaasConfirmationHandler } from '../../hooks/useWaasConfirmationHandler' import { TxnDetails } from '../TxnDetails' -import { NetworkBadge } from '@0xsequence/kit-wallet' import { setStorageItem } from '../../utils/storage' +import { NetworkBadge } from './NetworkBadge' export declare const THEME: readonly ['dark', 'light'] export declare type Theme = Exclude['theme'], undefined> diff --git a/packages/kit/src/components/TxnDetails/index.tsx b/packages/kit/src/components/TxnDetails/index.tsx index a4fb7414..08459b01 100644 --- a/packages/kit/src/components/TxnDetails/index.tsx +++ b/packages/kit/src/components/TxnDetails/index.tsx @@ -1,4 +1,4 @@ -import { Box, Card, GradientAvatar, Skeleton, Text } from '@0xsequence/design-system' +import { Box, Card, GradientAvatar, Skeleton, Text, TokenImage } from '@0xsequence/design-system' import React, { useEffect, useState } from 'react' @@ -6,13 +6,12 @@ import { ethers } from 'ethers' import { useConfig } from 'wagmi' import { useTokenMetadata, useBalances } from '@0xsequence/kit' -import { CollectibleTileImage, CoinIcon, formatDisplay } from '@0xsequence/kit-wallet' -import { compareAddress, getNativeTokenInfoByChainId } from '../../utils' +import { capitalize, compareAddress, getNativeTokenInfoByChainId } from '../../utils' import { commons } from '@0xsequence/core' import { DecodingType, TransferProps, AwardItemProps, decodeTransactions } from '../../utils/txnDecoding' import { ContractType } from '@0xsequence/indexer' -import { getAddress } from 'ethers/lib/utils' import { useAPIClient } from '../../hooks' +import { CollectibleTileImage } from '../KitProvider/CollectibleTileImage' interface TxnDetailsProps { address: string @@ -108,9 +107,7 @@ const TransferItemInfo = ({ address, transferProps, chainId }: TransferItemInfoP transferProps[0]?.tokenIds ?? [] ) - const tokenBalance = contractAddress - ? balances.find(b => getAddress(b.contractAddress) === getAddress(contractAddress)) - : undefined + const tokenBalance = contractAddress ? balances.find(b => compareAddress(b.contractAddress, contractAddress)) : undefined const decimals = isNativeCoin ? nativeTokenInfo.decimals : tokenBalance?.contractInfo?.decimals || 18 const imageUrl = isNativeCoin @@ -122,7 +119,6 @@ const TransferItemInfo = ({ address, transferProps, chainId }: TransferItemInfoP const symbol = isNativeCoin ? nativeTokenInfo.symbol : isNFT ? '' : tokenBalance?.contractInfo?.symbol || '' const formattedBalance = tokenBalance !== undefined ? ethers.utils.formatUnits(tokenBalance.balance, decimals) : '' - const balanceDisplayed = formatDisplay(formattedBalance) const amountSending = transferProps[0]?.amounts?.[0] ?? transferProps[0]?.value @@ -131,7 +127,7 @@ const TransferItemInfo = ({ address, transferProps, chainId }: TransferItemInfoP - {capitalizeFirstLetter(transferProps[0]?.type ?? '')} + {capitalize(transferProps[0]?.type ?? '')} @@ -142,7 +138,7 @@ const TransferItemInfo = ({ address, transferProps, chainId }: TransferItemInfoP ) : ( - + )} @@ -250,10 +246,6 @@ const AwardItemInfo = ({ awardItemProps }: AwardItemInfoProps) => { ) } -const capitalizeFirstLetter = (str: string) => { - return str.charAt(0).toUpperCase() + str.slice(1) -} - const truncateAtMiddle = (text: string, truncateAt: number) => { let finalText = text diff --git a/packages/kit/src/utils/helpers.ts b/packages/kit/src/utils/helpers.ts index 51bfe9fe..7a7118b9 100644 --- a/packages/kit/src/utils/helpers.ts +++ b/packages/kit/src/utils/helpers.ts @@ -5,3 +5,69 @@ export const isEmailValid = (email: string) => { export const compareAddress = (a: string, b: string) => { return a.toLowerCase() === b.toLowerCase() } + +enum ValueType { + VERY_LARGE, + FRACTION, + VERY_TINY, + MIXED +} + +export const formatDisplay = (_val: number | string): string => { + if (isNaN(Number(_val))) { + console.error(`display format error ${_val} is not a number`) + return 'NaN' + } + + const val = Number(_val) + + if (val === 0) { + return '0' + } + + let valMode: ValueType + + if (val > 100000000) { + valMode = ValueType.VERY_LARGE + } else if (val < 0.0000000001) { + valMode = ValueType.VERY_TINY + } else if (val < 1) { + valMode = ValueType.FRACTION + } else { + valMode = ValueType.MIXED + } + + let notation: Intl.NumberFormatOptions['notation'] = undefined + let config: Pick + + switch (valMode) { + case ValueType.VERY_LARGE: + notation = 'compact' + config = { + maximumFractionDigits: 4 + } + break + case ValueType.VERY_TINY: + notation = 'scientific' + config = { + maximumFractionDigits: 4 + } + break + case ValueType.FRACTION: + notation = 'standard' + config = { + maximumSignificantDigits: 4 + } + break + default: + notation = 'standard' + config = { + maximumFractionDigits: 2 + } + } + + return Intl.NumberFormat('en-US', { + notation, + ...config + }).format(val) +} diff --git a/packages/kit/src/utils/index.ts b/packages/kit/src/utils/index.ts index 60b274e3..bb8ec778 100644 --- a/packages/kit/src/utils/index.ts +++ b/packages/kit/src/utils/index.ts @@ -6,3 +6,4 @@ export * from './styling' export * from './networks' export * from './adapters' export * from './ethAuth' +export * from './string' diff --git a/packages/kit/src/utils/string.ts b/packages/kit/src/utils/string.ts new file mode 100644 index 00000000..7d36fd56 --- /dev/null +++ b/packages/kit/src/utils/string.ts @@ -0,0 +1,3 @@ +export const capitalize = (word: string) => { + return word.charAt(0).toUpperCase() + word.slice(1) +} diff --git a/packages/wallet/src/shared/NetworkBadge.tsx b/packages/wallet/src/shared/NetworkBadge.tsx index e76138f3..0893ad96 100644 --- a/packages/wallet/src/shared/NetworkBadge.tsx +++ b/packages/wallet/src/shared/NetworkBadge.tsx @@ -4,7 +4,6 @@ import { getNativeTokenInfoByChainId, getNetwork, getNetworkColor, getNetworkBac import { useConfig } from 'wagmi' import { capitalize } from '../utils' -import { networks } from '@0xsequence/network' interface NetworkBadgeProps { chainId: number diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5aacc098..36e1406c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -406,9 +406,6 @@ importers: '@0xsequence/kit-connectors': specifier: workspace:* version: link:../connectors - '@0xsequence/kit-wallet': - specifier: workspace:* - version: link:../wallet '@0xsequence/metadata': specifier: ^1.9.26 version: 1.9.26