- {!address ? (
-
- )
- }
- loadingState={No wallet selected
- ) : ( -
+ {!address ? (
+
+ )
+ }
+ loadingState={No wallet selected
+ ) : ( +
+
+ )}
+
)
}
diff --git a/apps/wallet/src/routes/portfolio/assets/$ticker.tsx b/apps/wallet/src/routes/portfolio/assets/$ticker.tsx
index afdd4404e..65a96e419 100644
--- a/apps/wallet/src/routes/portfolio/assets/$ticker.tsx
+++ b/apps/wallet/src/routes/portfolio/assets/$ticker.tsx
@@ -41,29 +41,25 @@ function Component() {
Empty state
- )
+
@@ -160,6 +175,7 @@ function AssetChart({
(DEFAULT_TIME_FRAME)
const { currentWallet } = useWallet()
+ const { addPendingTransaction } = usePendingTransactions()
const [gasInput, setGasInput] = useState<{
to: string
value: string
} | null>(null)
+ const gasEstimateTimeoutRef = useRef(null)
+
+ useEffect(() => {
+ setActiveDataType(DEFAULT_DATA_TYPE)
+ setActiveTimeFrame(DEFAULT_TIME_FRAME)
+ }, [ticker])
+
+ const toast = useToast()
- const { data } = useQuery({
+ const { data, isError: hasErrorFetchingAssets } = useQuery({
queryKey: ['assets', address],
queryFn: async () => {
const url = new URL(
@@ -112,14 +131,22 @@ const Token = (props: Props) => {
enabled: !!address,
staleTime: 15 * 1000,
gcTime: 60 * 60 * 1000,
- refetchOnMount: true,
- refetchOnWindowFocus: true,
- refetchOnReconnect: true,
})
+ // Show error toast if fetching assets fails
+ useEffect(() => {
+ if (hasErrorFetchingAssets) {
+ toast.negative(ERROR_MESSAGES.ASSETS_FETCH)
+ }
+ }, [hasErrorFetchingAssets, toast])
+
const asset = data?.assets?.find((a: AssetData) => matchesAsset(a, ticker))
- const { data: tokenDetail, isLoading: isTokenLoading } = useQuery({
+ const {
+ data: tokenDetail,
+ isLoading: isTokenLoading,
+ isError: hasErrorFetchingToken,
+ } = useQuery({
queryKey: ['token', ticker],
queryFn: async () => {
const endpoint = ticker.startsWith('0x')
@@ -158,11 +185,15 @@ const Token = (props: Props) => {
enabled: !!asset,
staleTime: 15 * 1000,
gcTime: 60 * 60 * 1000,
- refetchOnMount: true,
- refetchOnWindowFocus: true,
- refetchOnReconnect: true,
})
+ // Show error toast if fetching token detail fails
+ useEffect(() => {
+ if (hasErrorFetchingToken) {
+ toast.negative(ERROR_MESSAGES.TOKEN_INFO)
+ }
+ }, [hasErrorFetchingToken, toast])
+
const isLoading = !data?.assets || isTokenLoading || !tokenDetail
const needsEthBalance = tokenDetail?.summary.symbol !== 'ETH'
@@ -177,8 +208,35 @@ const Token = (props: Props) => {
const gasFeeQuery = useQuery({
queryKey: ['gas-fees', address, gasInput?.to, gasInput?.value],
queryFn: async ({ queryKey }) => {
+ const isNative = tokenDetail?.summary.symbol === 'ETH'
const [, from, to, value] = queryKey as [string, string, string, string]
+ let params
+
+ if (isNative) {
+ params = {
+ from,
+ to,
+ value,
+ }
+ } else {
+ const contract = tokenDetail?.summary.contracts.ethereum
+ if (!contract) {
+ throw new Error('Contract address not found')
+ }
+
+ const amount = BigInt(value)
+
+ const data = erc20.encodeFunctionData('transfer', [to, amount])
+
+ params = {
+ from,
+ to: contract,
+ value: '0x0',
+ data,
+ }
+ }
+
const url = new URL(
`${import.meta.env.WXT_STATUS_API_URL}/api/trpc/nodes.getFeeRate`,
)
@@ -188,7 +246,7 @@ const Token = (props: Props) => {
JSON.stringify({
json: {
network: 'ethereum',
- params: { from, to, value },
+ params,
},
}),
)
@@ -203,13 +261,31 @@ const Token = (props: Props) => {
const body = await response.json()
return body.result.data.json
},
- enabled: !!gasInput?.to && !!gasInput?.value && !!address,
- refetchOnMount: false,
- refetchOnWindowFocus: false,
+ enabled: !!gasInput?.to && !!gasInput?.value && !!address && !!tokenDetail,
})
+ // Show error toast if fetching gas fees fails
+ useEffect(() => {
+ if (gasFeeQuery.isError) {
+ toast.negative(ERROR_MESSAGES.GAS_FEES_FETCH)
+ }
+ }, [gasFeeQuery.isError, toast])
+
+ useEffect(() => {
+ return () => {
+ if (gasEstimateTimeoutRef.current) {
+ clearTimeout(gasEstimateTimeoutRef.current)
+ }
+ }
+ }, [])
const prepareGasEstimate = (to: string, value: string) => {
- setGasInput({ to, value })
+ if (gasEstimateTimeoutRef.current) {
+ clearTimeout(gasEstimateTimeoutRef.current)
+ }
+
+ gasEstimateTimeoutRef.current = setTimeout(() => {
+ setGasInput({ to, value })
+ }, 500)
}
const handleOpenTab = (url: string) => {
@@ -269,12 +345,13 @@ const Token = (props: Props) => {
symbol: tokenDetail.summary.symbol,
ethBalance,
network: (Object.keys(tokenDetail.assets)[0] ?? 'ethereum') as NetworkType,
+ decimals: asset.decimals ?? 18,
}
// Mock wallet data. Replace with actual wallet data from the user's account.
const account: Account = {
address,
- name: 'Account 1',
+ name: currentWallet?.name || 'Account 1',
emoji: '🍑',
color: 'magenta',
}
@@ -282,27 +359,117 @@ const Token = (props: Props) => {
const signTransaction = async (
formData: SendAssetsFormData & { password: string },
) => {
- const amountHex = BigInt(
- Math.floor(parseFloat(formData.amount) * 1e18),
- ).toString(16)
-
- const result = await apiClient.wallet.account.ethereum.send.mutate({
- amount: amountHex,
- toAddress: formData.to,
- fromAddress: address,
- password: formData.password,
- walletId: currentWallet?.id || '',
- gasLimit: gasFeeQuery.data.txParams.gasLimit.replace(/^0x/, ''),
- maxFeePerGas: gasFeeQuery.data.txParams.maxFeePerGas.replace(/^0x/, ''),
- maxInclusionFeePerGas:
- gasFeeQuery.data.txParams.maxPriorityFeePerGas.replace(/^0x/, ''),
- })
-
- if (!result.id || !result.id.txid) {
- throw new Error('Transaction failed')
- }
+ const isNative = tokenDetail?.summary.symbol === 'ETH'
+
+ if (isNative) {
+ const amountHex = parseUnits(formData.amount, 18).toString(16)
+ const params = {
+ amount: amountHex,
+ toAddress: formData.to,
+ fromAddress: address,
+ password: formData.password,
+ walletId: currentWallet?.id || '',
+ gasLimit: gasFeeQuery.data.txParams.gasLimit,
+ maxFeePerGas: gasFeeQuery.data.txParams.maxFeePerGas,
+ maxInclusionFeePerGas: gasFeeQuery.data.txParams.maxPriorityFeePerGas,
+ }
+
+ const result = await apiClient.wallet.account.ethereum.send.mutate(params)
+ if (!result.id || result.id.txid?.error) {
+ console.error(result.id.txid?.error)
+ toast.negative(ERROR_MESSAGES.TX_FAILED)
+ throw new Error('Transaction failed')
+ }
+
+ const txHash = typeof result.id === 'string' ? result.id : result.id.txid
+
+ if (!txHash) {
+ toast.negative(ERROR_MESSAGES.TX_FAILED)
+ throw new Error('Transaction hash not found')
+ }
- return result.id.txid
+ addPendingTransaction({
+ hash: txHash,
+ from: address,
+ to: formData.to,
+ value: parseFloat(formData.amount),
+ asset: tokenDetail.summary.symbol,
+ network: 'ethereum',
+ status: 'pending',
+ category: 'external',
+ blockNum: '0',
+ metadata: {
+ blockTimestamp: new Date().toISOString(),
+ },
+ rawContract: {
+ value: amountHex,
+ address: ticker.startsWith('0x') ? ticker : null,
+ decimal: '18',
+ },
+ eurRate: 0,
+ })
+ } else {
+ const tokenDecimals = asset.decimals ?? 18
+ const amount = parseUnits(formData.amount, tokenDecimals)
+ const amountHex = amount.toString(16)
+ const contractAddress = tokenDetail?.summary.contracts.ethereum
+
+ if (!contractAddress) {
+ throw new Error('Token contract address not found')
+ }
+
+ const data = erc20.encodeFunctionData('transfer', [formData.to, amount])
+
+ const params = {
+ amount: '0',
+ toAddress: contractAddress,
+ fromAddress: address,
+ password: formData.password,
+ walletId: currentWallet?.id || '',
+ gasLimit: gasFeeQuery.data.txParams.gasLimit,
+ maxFeePerGas: gasFeeQuery.data.txParams.maxFeePerGas,
+ maxInclusionFeePerGas: gasFeeQuery.data.txParams.maxPriorityFeePerGas,
+ data,
+ }
+
+ const result =
+ await apiClient.wallet.account.ethereum.sendErc20.mutate(params)
+
+ if (!result.id || result.id.txid?.error) {
+ console.error(result.id.txid?.error)
+ toast.negative(ERROR_MESSAGES.TX_FAILED)
+ throw new Error('Transaction failed')
+ }
+
+ const txHash = typeof result.id === 'string' ? result.id : result.id.txid
+
+ if (!txHash) {
+ toast.negative(ERROR_MESSAGES.TX_FAILED)
+ throw new Error('Transaction hash not found')
+ }
+
+ addPendingTransaction({
+ hash: txHash,
+ from: address,
+ to: formData.to,
+ value: parseFloat(formData.amount),
+ asset: tokenDetail.summary.symbol,
+ network: 'ethereum',
+ status: 'pending',
+ category: 'external',
+ blockNum: '0',
+ metadata: {
+ blockTimestamp: new Date().toISOString(),
+ },
+ rawContract: {
+ value: amountHex,
+ address: ticker.startsWith('0x') ? ticker : null,
+ decimal: asset.decimals?.toString() ?? '18',
+ },
+ eurRate: 0,
+ })
+ return result.id.txid
+ }
}
const verifyPassword = async (inputPassword: string): Promise => {
@@ -332,9 +499,13 @@ const Token = (props: Props) => {
}
rightSlot={
@@ -590,4 +771,21 @@ const Token = (props: Props) => {
)
}
+const OptionalTooltip = ({
+ content,
+ children,
+}: {
+ content?: React.ReactNode
+ children: React.ReactElement
+}) => {
+ if (!content) {
+ return children
+ }
+ return (
+
-
+
}>
- Buy {name}
+ Buy
@@ -358,7 +529,7 @@ const Token = (props: Props) => {
isLoadingFees={gasFeeQuery.isFetching}
onEstimateGas={prepareGasEstimate}
>
- }>
+ } variant="outline">
Send
@@ -381,9 +552,13 @@ const Token = (props: Props) => {
-
+
} variant="primary">
- Buy {name}
+ Buy
@@ -423,7 +598,7 @@ const Token = (props: Props) => {
onValueChange={value =>
setActiveDataType(value as ChartDataType)
}
- size="24"
+ size="32"
>
Price
@@ -431,6 +606,9 @@ const Token = (props: Props) => {
Balance
+ {/*
+ Value
+ */}
@@ -439,7 +617,7 @@ const Token = (props: Props) => {
onValueChange={value =>
setActiveTimeFrame(value as ChartTimeFrame)
}
- size="24"
+ size="32"
>
{TIME_FRAMES.map(frame => (
@@ -524,7 +702,7 @@ const Token = (props: Props) => {
tooltip: (
+
-
+
))}
{item.label}
@@ -577,7 +758,7 @@ const Token = (props: Props) => {
{item.value}
+
Loading collectible...}>
-
+
diff --git a/apps/wallet/src/routes/portfolio/collectibles/-components/card-detail.tsx b/apps/wallet/src/routes/portfolio/collectibles/-components/card-detail.tsx
new file mode 100644
index 000000000..583020e66
--- /dev/null
+++ b/apps/wallet/src/routes/portfolio/collectibles/-components/card-detail.tsx
@@ -0,0 +1,39 @@
+import { ExternalIcon } from '@status-im/icons/20'
+
+type Props = {
+ title: string
+ children: React.ReactNode
+ href?: string
+}
+
+const CardDetail = (props: Props) => {
+ const { title, children } = props
+
+ const isLink = Boolean(props.href)
+
+ const Element = isLink ? 'a' : 'div'
+ const elementProps = isLink
+ ? {
+ href: props.href,
+ target: '_blank',
+ rel: 'noopener noreferrer',
+ }
+ : {}
+
+ return (
+
+ {title}
+
+ {isLink && (
+
+
-
{
+
- {collectible.floor_price && collectible.price_eur && (
+ {/* {collectible.floor_price && collectible.price_eur && (
- )}
+ )} */}
{collectible.name}
@@ -113,7 +128,7 @@ const Collectible = (props: Props) => {
- }
aria-label="More options"
- />
+ /> */}
{collectible.about}
-
-
+
-
+
- {collectible.traits && (
-
-
+
+
+
{collectible.standard !== 'NOT_A_CONTRACT' && (
<>
-
+
+
+
)}
{collectible.collection.size && (
-
+
)}
+
+ {collectible.network}
+ {collectible.contract}
- {collectible.standard}
+
+ {truncateAddress(collectible.contract)}
+
+ {collectible.standard}
+ {collectible.collection.size}
+ {collectible.collection.size}
+
-
+ )}
)
}
export { Collectible }
+
+const truncateAddress = (address: string, chars = 5) =>
+ `${address.slice(0, chars)}...${address.slice(-chars)}`
diff --git a/apps/wallet/src/routes/portfolio/collectibles/index.tsx b/apps/wallet/src/routes/portfolio/collectibles/index.tsx
index dbb14f4f6..f5ffb8ffe 100644
--- a/apps/wallet/src/routes/portfolio/collectibles/index.tsx
+++ b/apps/wallet/src/routes/portfolio/collectibles/index.tsx
@@ -1,12 +1,14 @@
-import { useMemo } from 'react'
+import { useEffect, useMemo } from 'react'
+import { useToast } from '@status-im/components'
import {
CollectiblesGrid as CollectiblesList,
CollectiblesGridSkeleton,
EmptyState,
- FeedbackSection,
+ EmptyStateActions,
PinExtension,
} from '@status-im/wallet/components'
+import { ERROR_MESSAGES } from '@status-im/wallet/constants'
import { createFileRoute } from '@tanstack/react-router'
import SplittedLayout from '@/components/splitted-layout'
@@ -24,22 +26,53 @@ function Component() {
const { currentWallet, isLoading: isWalletLoading } = useWallet()
const { isPinExtension, handleClose } = usePinExtension()
+ const toast = useToast()
+
const searchParams = new URLSearchParams(window.location.search)
const search = searchParams.get('search') ?? undefined
const pathname = window.location.pathname
const address = currentWallet?.activeAccounts[0].address
- const { data, fetchNextPage, isFetchingNextPage, isLoading, hasNextPage } =
- useCollectibles({
- address,
- isWalletLoading,
- })
+ const {
+ data,
+ fetchNextPage,
+ isFetchingNextPage,
+ isLoading,
+ hasNextPage,
+ isError,
+ isFetchNextPageError,
+ isFetchPreviousPageError,
+ } = useCollectibles({
+ address,
+ isWalletLoading,
+ })
const collectibles = useMemo(() => {
return data?.pages.flatMap(page => page.collectibles ?? []) ?? []
}, [data?.pages])
+ // Show error toast if there is an error fetching collectibles
+ useEffect(() => {
+ if (isError) {
+ toast.negative(ERROR_MESSAGES.COLLECTIBLES)
+ }
+ }, [isError, toast])
+
+ // Show error toast if there is an error fetching next page of collectibles
+ useEffect(() => {
+ if (isFetchNextPageError) {
+ toast.negative(ERROR_MESSAGES.COLLECTIBLES_PARTIAL)
+ }
+ }, [isFetchNextPageError, toast])
+
+ // Show error toast if there is an error fetching previous page of collectibles
+ useEffect(() => {
+ if (isFetchPreviousPageError) {
+ toast.negative(ERROR_MESSAGES.COLLECTIBLES_PARTIAL)
+ }
+ }, [isFetchPreviousPageError, toast])
+
if (!currentWallet || !address) {
return null
}
@@ -69,11 +102,11 @@ function Component() {
)
}
loadingState={
- Traits
-
-
- {Object.entries(collectible.traits as Record).map(
- ([trait, value], index) => (
-
+
-
- )}
-
- {trait}
-
+ {collectible.traits && Object.keys(collectible.traits).length > 0 && (
+
+
+
+ )
+ })}
+ Traits
+
+
+ {Object.entries(collectible.traits as Record)
+ .filter(([, value]) => {
+ if (typeof value === 'object' && value !== null) {
+ const valueObj = value as Record
+ if ('parent' in valueObj && 'child' in valueObj) {
+ return false
+ }
+ }
+ return true
+ })
+ .map(([trait, value], index) => {
+ let displayValue: string
+
+ if (typeof value === 'object' && value !== null) {
+ displayValue = JSON.stringify(value)
+ } else {
+ displayValue = String(value)
+ }
+
+ return (
+
- ),
- )}
-
- {value}
+ {displayValue}
-
+
@@ -68,6 +81,7 @@ function Button(
diff --git a/packages/components/src/toast/toast-container.tsx b/packages/components/src/toast/toast-container.tsx
index ecf846d78..cbfa1559f 100644
--- a/packages/components/src/toast/toast-container.tsx
+++ b/packages/components/src/toast/toast-container.tsx
@@ -102,7 +102,7 @@ const useToast = () => {
custom: store.custom,
dismiss: store.dismiss,
}),
- [store],
+ [store.positive, store.negative, store.custom, store.dismiss],
)
}
diff --git a/packages/components/src/toast/toast.tsx b/packages/components/src/toast/toast.tsx
index 269addb59..2e44675fd 100644
--- a/packages/components/src/toast/toast.tsx
+++ b/packages/components/src/toast/toast.tsx
@@ -1,6 +1,7 @@
import { cloneElement, forwardRef } from 'react'
-import { Action, Description } from '@radix-ui/react-toast'
+import { Action, Close, Description } from '@radix-ui/react-toast'
+import { CloseIcon } from '@status-im/icons/16'
import { CorrectIcon, IncorrectIcon } from '@status-im/icons/20'
import { match, P } from 'ts-pattern'
@@ -20,9 +21,9 @@ const Toast = (props: Props, ref: React.Ref) => {
return (
-
+
+
)
}
diff --git a/packages/components/tailwind.config.ts b/packages/components/tailwind.config.ts
index d68e666e9..8f9785b26 100644
--- a/packages/components/tailwind.config.ts
+++ b/packages/components/tailwind.config.ts
@@ -144,9 +144,32 @@ export default {
'0%, 100%': { backgroundPosition: '0% 50%' },
'50%': { backgroundPosition: '100% 50%' },
},
+ 'toast-slide-in': {
+ from: {
+ transform: 'translateX(calc(100% + var(--viewport-padding)))',
+ },
+ to: {
+ transform: 'translateX(0)',
+ },
+ },
+ 'toast-hide': {
+ from: { opacity: '1' },
+ to: { opacity: '0' },
+ },
+ 'toast-swipe-out': {
+ from: {
+ transform: 'translateX(var(--radix-toast-swipe-end-x))',
+ },
+ to: {
+ transform: 'translateX(calc(100% + var(--viewport-padding)))',
+ },
+ },
},
animation: {
skeleton: 'skeleton 1.5s ease infinite',
+ 'toast-slide-in': 'toast-slide-in 300ms cubic-bezier(0.16,1,0.3,1)',
+ 'toast-hide': 'toast-hide 200ms ease-in',
+ 'toast-swipe-out': 'toast-swipe-out 200ms ease-out',
},
},
diff --git a/packages/components/tsconfig.json b/packages/components/tsconfig.json
index 58cea4156..e6f23dec6 100644
--- a/packages/components/tsconfig.json
+++ b/packages/components/tsconfig.json
@@ -2,8 +2,17 @@
"extends": "../../tsconfig.base",
"include": ["src", "tailwind.config.ts", ".storybook"],
"compilerOptions": {
+ "composite": true,
"jsx": "preserve",
- "outDir": "./dist"
+ "outDir": "./dist",
+ "noEmit": false
},
- "references": []
+ "references": [
+ {
+ "path": "../icons"
+ },
+ {
+ "path": "../colors"
+ }
+ ]
}
diff --git a/packages/components/vercel.json b/packages/components/vercel.json
index 4a3c21232..e2d4376e5 100644
--- a/packages/components/vercel.json
+++ b/packages/components/vercel.json
@@ -2,5 +2,5 @@
"$schema": "https://openapi.vercel.sh/vercel.json",
"ignoreCommand": "git diff --quiet HEAD^ HEAD ../../{patches,package.json,turbo.json} ../../packages/{colors,icons} ./",
"installCommand": "pnpm install --dir ../../ --frozen-lockfile",
- "buildCommand": "turbo run build --cwd ../../ --filter=components... && pnpm storybook:build"
+ "buildCommand": "turbo run build --cwd ../../ --filter=@status-im/components... && pnpm storybook:build"
}
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 6cce80d28..a3cd84d01 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -6,6 +6,10 @@
"dist",
"svg"
],
+ "main": "./dist/index.cjs.js",
+ "module": "./dist/index.es.js",
+ "types": "./dist/index.d.ts",
+ "source": "./index.js",
"exports": {
"./package.json": "./package.json",
".": {
@@ -13,27 +17,27 @@
"require": "./index.js"
},
"./12": {
- "types": "./dist/12/index.d.ts",
+ "types": "./dist/src/12/index.d.ts",
"import": "./dist/12/index.es.js",
"require": "./dist/12/index.cjs.js"
},
"./16": {
- "types": "./dist/16/index.d.ts",
+ "types": "./dist/src/16/index.d.ts",
"import": "./dist/16/index.es.js",
"require": "./dist/16/index.cjs.js"
},
"./20": {
- "types": "./dist/20/index.d.ts",
+ "types": "./dist/src/20/index.d.ts",
"import": "./dist/20/index.es.js",
"require": "./dist/20/index.cjs.js"
},
"./social": {
- "types": "./dist/social/index.d.ts",
+ "types": "./dist/src/social/index.d.ts",
"import": "./dist/social/index.es.js",
"require": "./dist/social/index.cjs.js"
},
"./reactions": {
- "types": "./dist/reactions/index.d.ts",
+ "types": "./dist/src/reactions/index.d.ts",
"import": "./dist/reactions/index.es.js",
"require": "./dist/reactions/index.cjs.js"
},
@@ -61,9 +65,8 @@
"sync": "vite-node scripts/sync.ts && prettier --parser=html --write 'svg/**/*.svg'",
"generate": "rimraf src && svgr --no-prettier svg --out-dir src && pnpm lint:fix && pnpm format",
"dev": "vite build --watch --mode development",
- "build": "vite build",
- "postbuild": "pnpm build:types",
- "build:types": "tsc src/**/index.ts --emitDeclarationOnly --declaration --jsx react-jsx --skipLibCheck --declarationDir ./dist",
+ "build": "vite build && pnpm build:types",
+ "build:types": "tsc --emitDeclarationOnly --declaration --jsx react-jsx --skipLibCheck --declarationDir ./dist",
"#test": "vitest",
"typecheck": "tsc",
"lint": "eslint src",
diff --git a/packages/icons/tsconfig.json b/packages/icons/tsconfig.json
index ce897777d..2c83d05c6 100644
--- a/packages/icons/tsconfig.json
+++ b/packages/icons/tsconfig.json
@@ -1,4 +1,13 @@
{
"extends": "../../tsconfig.base.json",
- "include": ["./src"]
+ "include": ["src/**/*"],
+ "compilerOptions": {
+ "composite": true,
+ "declaration": true,
+ "declarationDir": "./dist",
+ "emitDeclarationOnly": true,
+ "outDir": "./dist",
+ "noEmit": false
+ },
+ "references": []
}
diff --git a/packages/status-js/package.json b/packages/status-js/package.json
index 6913fc12d..2793baea7 100644
--- a/packages/status-js/package.json
+++ b/packages/status-js/package.json
@@ -48,8 +48,7 @@
"test": "vitest run",
"test:update": "vitest run --update",
"dev": "vite build --watch --mode development",
- "build": "vite build",
- "postbuild": "pnpm build:types",
+ "build": "vite build && pnpm build:types",
"build:types": "tsc --noEmit false --emitDeclarationOnly || true",
"lint": "eslint src",
"typecheck": "tsc",
diff --git a/packages/status-js/tsconfig.json b/packages/status-js/tsconfig.json
index 82d8c1a9c..a0e153b79 100644
--- a/packages/status-js/tsconfig.json
+++ b/packages/status-js/tsconfig.json
@@ -2,11 +2,14 @@
"extends": "../../tsconfig.base.json",
"include": ["src"],
"compilerOptions": {
+ "composite": true,
"outDir": "./dist",
"declarationDir": "./dist/types",
+ "noEmit": false,
// todo: turn on?
"noImplicitReturns": false,
"noPropertyAccessFromIndexSignature": false
- }
+ },
+ "references": []
}
diff --git a/packages/wallet/package.json b/packages/wallet/package.json
index 0b46f36a6..09554ef79 100644
--- a/packages/wallet/package.json
+++ b/packages/wallet/package.json
@@ -36,6 +36,11 @@
"types": "./dist/src/constants/index.d.ts",
"import": "./dist/constants/index.es.js",
"require": "./dist/constants/index.cjs.js"
+ },
+ "./utils": {
+ "types": "./dist/src/utils/index.d.ts",
+ "import": "./dist/utils/index.es.js",
+ "require": "./dist/utils/index.cjs.js"
}
},
"files": [
@@ -47,14 +52,13 @@
"scripts": {
"preinstall": "npx only-allow pnpm",
"dev": "vite build --watch --mode development",
- "build": "vite build",
- "postbuild": "pnpm build:types",
+ "build": "vite build && pnpm build:types",
"build:types": "tsc --noEmit false --emitDeclarationOnly",
"typecheck": "tsc",
"env:check": "node -r dotenv/config ./src/config/env.server.mjs dotenv_config_path=./.env && :",
"lint": "eslint src",
"format": "prettier --write .",
- "sync:cloudinary": "DOTENV_CONFIG_PATH='.env.local' node -r dotenv/config scripts/generate-cloudinary-type.mjs && prettier -w 'src/image/types.ts'",
+ "sync:cloudinary": "DOTENV_CONFIG_PATH='.env.local' node -r dotenv/config scripts/generate-cloudinary-type.mjs && prettier -w 'src/components/image/types.ts'",
"sync:tokens:erc20": "DOTENV_CONFIG_PATH='.env.local' node -r dotenv/config scripts/generate-erc20-token-list.mjs && prettier -w 'src/constants/erc20.json'",
"clean": "rimraf node_modules dist .turbo",
"prepack": "pnpm build"
diff --git a/packages/wallet/scripts/generate-cloudinary-type.mjs b/packages/wallet/scripts/generate-cloudinary-type.mjs
index 1a08f5a5b..767b4eaa3 100644
--- a/packages/wallet/scripts/generate-cloudinary-type.mjs
+++ b/packages/wallet/scripts/generate-cloudinary-type.mjs
@@ -60,7 +60,7 @@ const [images, videos, zipFiles] = await Promise.all(
)
fs.writeFile(
- 'src/image/types.ts',
+ 'src/components/image/types.ts',
`
export type ImageType =
${images
diff --git a/packages/wallet/scripts/generate-erc20-token-list.mjs b/packages/wallet/scripts/generate-erc20-token-list.mjs
index 5b7608903..a74e37a71 100644
--- a/packages/wallet/scripts/generate-erc20-token-list.mjs
+++ b/packages/wallet/scripts/generate-erc20-token-list.mjs
@@ -3,8 +3,7 @@
*/
import * as fs from 'fs/promises'
-import { keccak256 } from 'ethereum-cryptography/keccak'
-import { utf8ToBytes, bytesToHex } from 'ethereum-cryptography/utils'
+import { toChecksumAddress } from '../src/utils/to-checksum-address.ts'
const supportedNetworks = [
42161, // Arbitrum
@@ -61,22 +60,6 @@ const statusTokenLists = [
const outputFilePath = './src/constants/erc20.json'
-function toChecksumAddress(address) {
- address = address.toLowerCase().replace('0x', '')
- const hash = bytesToHex(keccak256(utf8ToBytes(address)))
- let checksumAddress = '0x'
-
- for (let i = 0; i < address.length; i++) {
- if (parseInt(hash[i], 16) >= 8) {
- checksumAddress += address[i].toUpperCase()
- } else {
- checksumAddress += address[i]
- }
- }
-
- return checksumAddress
-}
-
async function fetchStandardTokenList(url) {
try {
console.log(`Fetching token list from: ${url}`)
diff --git a/packages/wallet/src/components/activity-list/components/activity-item.tsx b/packages/wallet/src/components/activity-list/components/activity-item.tsx
index 20980da91..041a71430 100644
--- a/packages/wallet/src/components/activity-list/components/activity-item.tsx
+++ b/packages/wallet/src/components/activity-list/components/activity-item.tsx
@@ -2,6 +2,7 @@ import { ContextTag } from '@status-im/components'
import { ExternalIcon } from '@status-im/icons/20'
import { cx } from 'class-variance-authority'
+import { getTransactionHash } from '../../../utils/transaction-hash'
import { CurrencyAmount } from '../../currency-amount'
import { NetworkLogo } from '../../network-logo'
import { RelativeDate } from '../../relative-date'
@@ -42,6 +43,7 @@ function getTokenActivityLabel(activity: Activity): string {
const ActivityItem = (props: ActivityItemProps) => {
const { activity, userAddress } = props
+ const transactionHash = getTransactionHash(activity.hash)
const outgoingTransaction =
activity.from.toLowerCase() === userAddress.toLowerCase()
const assetSymbol =
@@ -50,7 +52,7 @@ const ActivityItem = (props: ActivityItemProps) => {
return (
diff --git a/packages/wallet/src/components/activity-list/index.tsx b/packages/wallet/src/components/activity-list/index.tsx
index 152e6e368..662d326a1 100644
--- a/packages/wallet/src/components/activity-list/index.tsx
+++ b/packages/wallet/src/components/activity-list/index.tsx
@@ -1,5 +1,7 @@
'use client'
+import { useEffect, useState } from 'react'
+
import { useInfiniteLoading } from '../../hooks/use-infinite-loading'
import { ActivityItem } from './components/activity-item'
@@ -13,11 +15,27 @@ export type ActivityListProps = {
onLoadMore: () => void
hasNextPage: boolean
isLoadingMore: boolean
+ pendingTransactions?: (Activity & { status: 'pending' })[]
+}
+
+const sortActivitiesByTime = (activities: Activity[]) => {
+ return activities.sort(
+ (a, b) =>
+ new Date(b.metadata.blockTimestamp).getTime() -
+ new Date(a.metadata.blockTimestamp).getTime(),
+ )
}
const ActivityList = (props: ActivityListProps) => {
- const { activities, userAddress, onLoadMore, hasNextPage, isLoadingMore } =
- props
+ const {
+ activities,
+ userAddress,
+ onLoadMore,
+ hasNextPage,
+ isLoadingMore,
+ pendingTransactions = [],
+ } = props
+ const [allActivities, setAllActivities] = useState([])
const { endOfPageRef, isLoading } = useInfiniteLoading({
rootMargin: '200px',
@@ -26,11 +44,16 @@ const ActivityList = (props: ActivityListProps) => {
hasNextPage: hasNextPage,
})
+ useEffect(() => {
+ const combined = [...pendingTransactions, ...activities]
+ setAllActivities(sortActivitiesByTime(combined))
+ }, [activities, pendingTransactions])
+
return (
- Assets
+ Tokens
Price
24H%
Balance
- Total
+ Value
{Array.from({ length: 12 }).map((_, index) => {
diff --git a/packages/wallet/src/components/assets-list/index.tsx b/packages/wallet/src/components/assets-list/index.tsx
index c5b535faf..2f39bd7ca 100644
--- a/packages/wallet/src/components/assets-list/index.tsx
+++ b/packages/wallet/src/components/assets-list/index.tsx
@@ -78,11 +78,11 @@ const AssetsList = (props: Props) => {
{filteredAssets.length !== 0 && (
- Assets
+ Tokens
Price
24H%
Balance
- Total
+ Value
{filteredAssets.map(asset => {
@@ -141,10 +141,10 @@ const AssetsList = (props: Props) => {
{filteredAssets.length === 0 && (
diff --git a/packages/wallet/src/components/buy-crypto-drawer/index.tsx b/packages/wallet/src/components/buy-crypto-drawer/index.tsx
index 1c047525b..98c299d80 100644
--- a/packages/wallet/src/components/buy-crypto-drawer/index.tsx
+++ b/packages/wallet/src/components/buy-crypto-drawer/index.tsx
@@ -6,8 +6,9 @@ import { Avatar, useToast } from '@status-im/components'
import { FeesIcon } from '@status-im/icons/12'
import { ExternalIcon } from '@status-im/icons/20'
+import { ERROR_MESSAGES } from '../../constants'
import * as Drawer from '../drawer'
-import { type ImageId } from '../image'
+import { Image, type ImageId } from '../image'
import type { Account } from '../address'
@@ -42,7 +43,7 @@ export type BuyCryptoDrawerProps = {
name: string
description: string
fee: string
- image: string
+ image: ImageId
}>
onProviderSelect?: (
provider: Provider,
@@ -50,6 +51,7 @@ export type BuyCryptoDrawerProps = {
asset?: string,
) => Promise<{ url: string }>
onOpenTab?: (url: string) => void | Promise
+ symbol?: string
}
type Props = BuyCryptoDrawerProps
@@ -61,29 +63,30 @@ export const BuyCryptoDrawer = (props: Props) => {
providers = [
{
name: 'mercuryo',
- description: 'Buy crypto within 15 seconds',
- fee: '4.5%',
- image: '/images/providers/mercuryo.png',
+ // description: 'Buy crypto within 15 seconds',
+ fee: '1% - 4.5%',
+ image: 'Wallet/Icons/Logos/mercuryo:64:64',
},
{
name: 'moonpay',
- description: 'The new standard for fiat to crypto',
+ // description: 'The new standard for fiat to crypto',
fee: '1% - 4.5%',
- image: '/images/providers/moonpay.png',
+ image: 'Wallet/Icons/Logos/moonpay:64:64',
},
],
onProviderSelect,
onOpenTab,
+ symbol,
} = props
const [open, setOpen] = useState(false)
const network: NetworkOptions[0] = NETWORKS[0]
const currency: Currency = {
contract_address: '',
- code: 'EUR',
- label: 'Euro',
+ code: symbol || 'ETH',
+ label: symbol || 'Ethereum',
network: 'ETHEREUM',
- imageUrl: '/images/tokens/eur.png',
+ imageUrl: '/images/tokens/usd.png',
}
const toast = useToast()
@@ -105,7 +108,7 @@ export const BuyCryptoDrawer = (props: Props) => {
url = providerUrls[provider]
if (!url) {
- toast.negative('Provider not supported')
+ toast.negative(ERROR_MESSAGES.PROVIDER_NOT_SUPPORTED)
return
}
}
@@ -116,15 +119,11 @@ export const BuyCryptoDrawer = (props: Props) => {
const newTab = window.open(url, '_blank', 'noopener,noreferrer')
if (!newTab) {
- toast.negative(
- 'Unable to open a new tab. Please check your browser settings.',
- )
+ toast.negative(ERROR_MESSAGES.NEW_TAB)
}
}
} catch {
- toast.negative(
- 'Unable to open a new tab. Please check your browser settings.',
- )
+ toast.negative(ERROR_MESSAGES.NEW_TAB)
}
}
@@ -140,7 +139,7 @@ export const BuyCryptoDrawer = (props: Props) => {
- Buy crypto
+ Ways to buy tokens
xScale: ScaleTime
- innerHeight: number
- innerWidth: number
pricesData: ChartDatum[]
+ currency?: string
}
const AnimatedAreaClosed = animated(AreaClosed)
@@ -25,9 +23,8 @@ const Content = (props: Props) => {
pricesData,
xScale,
yScale,
- innerHeight,
- innerWidth,
isPositive = true,
+ dataType = 'price',
} = props
const colors = isPositive ? positiveColors : negativeColors
@@ -43,8 +40,10 @@ const Content = (props: Props) => {
const tagX = xScale(lastData.date)
const tagY = yScale(lastData.value)
- const formattedValue = formatSmallNumber(lastData.value)
+ const formattedValue = formatChartValue(lastData.value, dataType)
const tagWidth = Math.min(40 + formattedValue.length * 4, 80)
+ const tagXOffset = Math.max(0, 20 - tagWidth / 2)
+ const textX = tagXOffset + tagWidth / 2
return (
@@ -62,20 +61,6 @@ const Content = (props: Props) => {
),
}}
/>
- {
{
rx={6}
/>
{
- const innerWidth = width - 60
+ const innerWidth = Math.max(100, width - 70)
const innerHeight = 256
const sortedData = useMemo(
@@ -50,7 +53,7 @@ const TokenChart = ({
nice: false,
})
- const { min, max, ticks } = calculateChartRange(sortedData)
+ const { min, max, ticks } = calculateChartRange(sortedData, 0.1, dataType)
const yScale = scaleLinear({
domain: [min, max],
range: [innerHeight, 0],
@@ -58,14 +61,20 @@ const TokenChart = ({
})
const priceData = useMemo(
- () => sortedData.map(d => ({ date: new Date(d.date), value: d.price })),
- [sortedData],
+ () =>
+ sortedData.map(d => ({
+ date: new Date(d.date),
+ value: getChartValue(d, dataType),
+ })),
+ [sortedData, dataType],
)
const isPositive = useMemo(() => {
if (dataType === 'balance') return true
if (sortedData.length === 0) return true
- return sortedData[sortedData.length - 1].price >= sortedData[0].price
+ const lastValue = getChartValue(sortedData[sortedData.length - 1], dataType)
+ const firstValue = getChartValue(sortedData[0], dataType)
+ return lastValue >= firstValue
}, [sortedData, dataType])
const { tooltipData, updateTooltip, hideTooltip, tooltipOpen } =
@@ -78,7 +87,7 @@ const TokenChart = ({
const circleSpring = useSpring({
x: xScale(new Date(tooltipData?.date)),
- y: yScale(tooltipData?.price),
+ y: yScale(tooltipData ? getChartValue(tooltipData, dataType) : 0),
config: config.gentle,
})
@@ -90,16 +99,12 @@ const TokenChart = ({
const tooltipAnimation = useSpring({
x: xScale(new Date(tooltipData?.date)),
- y: yScale(tooltipData?.price),
+ y: yScale(tooltipData ? getChartValue(tooltipData, dataType) : 0),
config: config.gentle,
})
if (!data.length) {
- return (
-
+
+ )
+ }
return (
-
-
+
)
}
+type TooltipWrapperProps = {
+ tooltipAnimation: { x: SpringValue; y: SpringValue }
+ opacityAnimation: { opacity: SpringValue }
+ children: React.ReactNode
+}
+
+const TooltipWrapper = ({
+ tooltipAnimation,
+ opacityAnimation,
+ children,
+}: TooltipWrapperProps) => (
+
+ {children}
+
+)
+
export { ChartTooltip }
diff --git a/packages/wallet/src/components/chart/components/x-axis.tsx b/packages/wallet/src/components/chart/components/x-axis.tsx
index 7ea962866..9ddf7fcf5 100644
--- a/packages/wallet/src/components/chart/components/x-axis.tsx
+++ b/packages/wallet/src/components/chart/components/x-axis.tsx
@@ -67,17 +67,18 @@ const XAxis = (props: Props) => {
))
@@ -96,7 +103,13 @@ const XAxis = (props: Props) => {
))
.with('bullet', () => (
-
{match(props)
.with({ type: 'positive' }, () => ) => {
)}
+
- {activities.map(activity => {
+ {allActivities.map(activity => {
return (
{
>
{isLoading ? (
diff --git a/packages/wallet/src/components/assets-list-loading/index.tsx b/packages/wallet/src/components/assets-list-loading/index.tsx
index b23a7d2e4..06bf3a4c7 100644
--- a/packages/wallet/src/components/assets-list-loading/index.tsx
+++ b/packages/wallet/src/components/assets-list-loading/index.tsx
@@ -6,16 +6,16 @@ const AssetsListLoading = () => {
return (
- Loading more activities...
+ Loading more history...
) : (
@@ -56,7 +79,7 @@ const ActivityList = (props: ActivityListProps) => {
{!hasNextPage && activities.length > 0 && (
- No more activities to load
+ No more history to load
)}
- No assets found + No tokens found
- We didn't find any assets that match your search + We didn't find any tokens that match your search
{
}
>
diff --git a/packages/wallet/src/components/chart/components/content.tsx b/packages/wallet/src/components/chart/components/content.tsx
index 9adf118a0..d48105ffa 100644
--- a/packages/wallet/src/components/chart/components/content.tsx
+++ b/packages/wallet/src/components/chart/components/content.tsx
@@ -1,10 +1,9 @@
import { animated, config, useSpring } from '@react-spring/web'
import { curveCatmullRom } from '@visx/curve'
-import { LinearGradient } from '@visx/gradient'
import { AreaClosed, LinePath } from '@visx/shape'
import { negativeColors, positiveColors } from '../constants'
-import { formatSmallNumber } from '../utils'
+import { formatChartValue } from '../utils'
import type { BaseChartProps, ChartDatum } from '../utils'
import type { ScaleLinear, ScaleTime } from 'd3-scale'
@@ -12,9 +11,8 @@ import type { ScaleLinear, ScaleTime } from 'd3-scale'
type Props = BaseChartProps & {
yScale: ScaleLinear
- 
@@ -189,9 +186,9 @@ export const BuyCryptoDrawer = (props: Props) => {
{provider.name}
-
+ {/*
*/}
{provider.description}
-
+
-
- )
+ return No data available
-{emptyState}
}
return (
@@ -118,9 +123,9 @@ const TokenChart = ({
pricesData={priceData}
xScale={xScale}
yScale={yScale}
- innerHeight={innerHeight}
- innerWidth={innerWidth}
isPositive={isPositive}
+ dataType={dataType}
+ currency={currency}
/>
{tooltipOpen && (
diff --git a/packages/wallet/src/components/chart/components/tooltip.tsx b/packages/wallet/src/components/chart/components/tooltip.tsx
index 6f8eb3c3a..109e1218d 100644
--- a/packages/wallet/src/components/chart/components/tooltip.tsx
+++ b/packages/wallet/src/components/chart/components/tooltip.tsx
@@ -1,6 +1,7 @@
import { animated } from '@react-spring/web'
import { defaultStyles, TooltipWithBounds } from '@visx/tooltip'
+import { formatTokenAmount } from '../../token-amount'
import { formatChartValue } from '../utils'
import type { TooltipData } from '../hooks/use-token-chart-tooltip'
@@ -19,33 +20,95 @@ const ChartTooltip = ({
tooltipData,
opacityAnimation,
tooltipAnimation,
- currency,
dataType = 'price',
}: Props) => {
- const formattedValue = formatChartValue(tooltipData.price, dataType, currency)
+ const getFormattedValue = () => {
+ switch (dataType) {
+ case 'price':
+ return formatChartValue(tooltipData.price, 'price')
+ case 'balance':
+ return formatChartValue(
+ tooltipData.balance ?? tooltipData.price,
+ 'balance',
+ )
+ case 'value':
+ return formatChartValue(tooltipData.value ?? tooltipData.price, 'value')
+ }
+ }
+
+ if (
+ dataType === 'value' &&
+ tooltipData.value !== undefined &&
+ tooltipData.balance !== undefined
+ ) {
+ return (
+
+
+ + {formatChartValue(tooltipData.value, 'value')} +
+
+
+ + Price: {formatChartValue(tooltipData.price, 'price')} +
++ Balance: {formatTokenAmount(tooltipData.balance, 'precise')} +
++ {tooltipData.formattedDate} +
+{formattedValue}
++ {getFormattedValue()} +
{tooltipData.formattedDate}
-
-
))
@@ -85,10 +86,16 @@ const XAxis = (props: Props) => {
- {activeRange === '7D' - ? format(new Date(d.date), 'MMM d') - : activeRange === 'All' && - previousDate && - new Date(d.date).getFullYear() !== - previousDate.getFullYear() - ? format(new Date(d.date), 'yyyy') - : format(new Date(d.date), 'MMM')} +
+ {activeRange === '7D' || activeRange === '1M' + ? format(new Date(d.date), 'd MMM') + : format(new Date(d.date), 'MMM yy')}
- {format(new Date(d.date), 'd')} + {format(new Date(d.date), 'd MMM')}
{format(new Date(d.date), 'HH:mm')} @@ -104,7 +117,13 @@ const XAxis = (props: Props) => {
+
))
diff --git a/packages/wallet/src/components/chart/constants.ts b/packages/wallet/src/components/chart/constants.ts
index 6debfdb85..08bda52c0 100644
--- a/packages/wallet/src/components/chart/constants.ts
+++ b/packages/wallet/src/components/chart/constants.ts
@@ -2,7 +2,7 @@ import { danger, success, white } from '@status-im/colors'
export const positiveColors = {
line: success[50],
- background: white[100],
+ background: 'transparent',
marker: success['50/30'],
fill: success['50/5'],
white: white[100],
@@ -10,7 +10,7 @@ export const positiveColors = {
export const negativeColors = {
line: danger[50],
- background: white[100],
+ background: 'transparent',
marker: danger['50/30'],
fill: danger['50/5'],
white: white[100],
diff --git a/packages/wallet/src/components/chart/hooks/use-token-chart-tooltip.ts b/packages/wallet/src/components/chart/hooks/use-token-chart-tooltip.ts
index 5aecf3155..43c619359 100644
--- a/packages/wallet/src/components/chart/hooks/use-token-chart-tooltip.ts
+++ b/packages/wallet/src/components/chart/hooks/use-token-chart-tooltip.ts
@@ -6,11 +6,11 @@ import { useTooltip } from '@visx/tooltip'
import { extent } from 'd3-array'
import { timeFormat } from 'd3-time-format'
-import type { ChartDataPoint as PriceType } from '../utils'
+import type { ChartDataPoint } from '../utils'
import type { EventType } from '@visx/event/lib/types'
type Props = {
- data: PriceType[]
+ data: ChartDataPoint[]
dates: Date[]
innerWidth: number
currency?: string
@@ -22,17 +22,13 @@ type Props = {
}
}
-type TooltipData = {
- date: string
- price: number
+type TooltipData = ChartDataPoint & {
formattedDate: string
}
// Eg. 'Jan 17th, 2024 - 14:45 '
const formatDate = timeFormat('%b %d, %Y - %H:%M')
-const getPrice = (d: PriceType) => d.price
-
const useTokenChartTooltip = (props: Props) => {
const { data, margin, dates, innerWidth } = props
@@ -42,13 +38,15 @@ const useTokenChartTooltip = (props: Props) => {
tooltipData: {
date: '',
price: 0,
+ balance: 0,
+ value: 0,
formattedDate: '',
},
})
const filteredDates = dates.filter(Boolean) // filters out undefined values
- const getDate = useCallback((d: PriceType) => new Date(d?.date), [])
+ const getDate = useCallback((d: ChartDataPoint) => new Date(d?.date), [])
const xDomain = extent(filteredDates) as [Date, Date]
const xScale = scaleTime({
@@ -74,13 +72,11 @@ const useTokenChartTooltip = (props: Props) => {
}
const d = data[closestIndex]
- const price = getPrice(d)
showTooltip({
tooltipData: {
- date: d?.date,
+ ...d,
formattedDate: formatDate(getDate(d)),
- price,
},
})
},
diff --git a/packages/wallet/src/components/chart/index.tsx b/packages/wallet/src/components/chart/index.tsx
index 424c42df4..641e933a3 100644
--- a/packages/wallet/src/components/chart/index.tsx
+++ b/packages/wallet/src/components/chart/index.tsx
@@ -1,7 +1,9 @@
'use client'
import { ParentSize } from '@visx/responsive'
+import { match } from 'ts-pattern'
+import { EmptyState } from '../empty-state'
import { ChartLoading, TokenChart } from './components'
import type { DataType, TimeFrame } from './utils'
@@ -12,6 +14,7 @@ type ChartProps = {
| ApiOutput['assets']['nativeTokenPriceChart']
| ApiOutput['assets']['tokenPriceChart']
balance: ApiOutput['assets']['tokenBalanceChart']
+ value: { date: string; price: number }[]
activeTimeFrame: TimeFrame
activeDataType: DataType
}
@@ -19,23 +22,33 @@ type ChartProps = {
const Chart = ({
price,
balance,
+ value,
activeTimeFrame,
activeDataType,
}: ChartProps) => {
- const currency = 'EUR'
+ const currency = 'USD'
return (
•
-
- {({ width }) => (
-
+ {({ width }) => {
+ const data = match(activeDataType)
+ .with('balance', () => balance)
+ .with('value', () => value)
+ .with('price', () => price)
+ .exhaustive()
+
+ return (
+
)
diff --git a/packages/wallet/src/components/chart/utils/index.ts b/packages/wallet/src/components/chart/utils/index.ts
index 365fe03c0..8c449b874 100644
--- a/packages/wallet/src/components/chart/utils/index.ts
+++ b/packages/wallet/src/components/chart/utils/index.ts
@@ -1,10 +1,15 @@
-import { differenceInCalendarMonths } from 'date-fns'
+import { match } from 'ts-pattern'
export const TIME_FRAMES = ['24H', '7D', '1M', '3M', '1Y', 'All'] as const
export type TimeFrame = (typeof TIME_FRAMES)[number]
-export type DataType = 'price' | 'balance'
-export type ChartDataPoint = { date: string; price: number }
+export type DataType = 'price' | 'balance' | 'value'
+export type ChartDataPoint = {
+ date: string
+ price: number
+ balance?: number
+ value?: number
+}
export type ChartDatum = { date: Date; value: number }
export const DEFAULT_TIME_FRAME: TimeFrame = TIME_FRAMES[0]
@@ -31,8 +36,6 @@ export const checkDateOutput = (
): 'bullet' | 'month' | 'day' | 'hour' | 'empty' => {
const {
date,
- previousDate,
- firstDate,
index,
variant,
totalDataPoints = 0,
@@ -49,8 +52,6 @@ export const checkDateOutput = (
return Math.max(1, Math.ceil(totalDataPoints / maxLabels))
}
- const isFirstDataPoint = index === 0
-
if (variant === '24H') {
const hourInterval = getSafeInterval(60)
if (index % hourInterval === 0) {
@@ -60,22 +61,20 @@ export const checkDateOutput = (
}
if (variant === '7D') {
- const currentDay = date.getDate()
- const previousDay = previousDate ? previousDate.getDate() : -1
- const isDayTransition = currentDay !== previousDay
+ const dayInterval = getSafeInterval(70)
- if (isFirstDataPoint || isDayTransition) {
+ if (index % dayInterval === 0) {
return 'month'
}
return 'empty'
}
if (variant === '1M') {
- const interval = getSafeInterval(40)
+ const interval = getSafeInterval(60)
if (index % interval === 0) {
const currentDayOfMonth = date.getDate()
- if (isFirstDataPoint || currentDayOfMonth === 1) {
+ if (currentDayOfMonth === 1) {
return 'month'
}
return 'day'
@@ -85,14 +84,6 @@ export const checkDateOutput = (
}
if (variant === '3M') {
- const currentMonth = date.getMonth()
- const previousMonth = previousDate ? previousDate.getMonth() : -1
- const isMonthTransition = currentMonth !== previousMonth
-
- if (isFirstDataPoint || isMonthTransition) {
- return 'month'
- }
-
const dayInterval = Math.max(10, getSafeInterval(60))
if (index % dayInterval === 0) {
return 'day'
@@ -102,11 +93,9 @@ export const checkDateOutput = (
}
if (variant === '1Y') {
- const currentMonth = date.getMonth()
- const previousMonth = previousDate ? previousDate.getMonth() : -1
- const isMonthTransition = currentMonth !== previousMonth
+ const monthInterval = getSafeInterval(50)
- if (isFirstDataPoint || isMonthTransition) {
+ if (index > 0 && index % monthInterval === 0) {
return 'month'
}
@@ -114,104 +103,108 @@ export const checkDateOutput = (
}
if (variant === 'All') {
- if (isFirstDataPoint) {
- return 'month'
- }
+ const yearInterval = getSafeInterval(50)
- const currentYear = date.getFullYear()
- const previousYear = previousDate ? previousDate.getFullYear() : -1
- const isYearTransition = currentYear !== previousYear
-
- if (isYearTransition) {
+ if (index > 0 && index % yearInterval === 0) {
return 'month'
}
- const monthInterval = Math.max(6, getSafeInterval(60))
- const monthsFromReference = differenceInCalendarMonths(date, firstDate)
-
- return monthsFromReference % monthInterval === 0 ? 'month' : 'empty'
+ return 'empty'
}
return 'bullet'
}
-export const formatChartValue = (
- value: number,
- dataType: 'price' | 'balance',
- currency?: string,
-): string => {
- const fractionalDigits = value.toString().split('.')[1]?.length || 0
-
- if (dataType === 'balance') {
- return value.toLocaleString('en-US', {
- minimumFractionDigits: fractionalDigits,
- maximumFractionDigits: fractionalDigits,
- })
- }
-
- return value.toLocaleString('en-US', {
- style: 'currency',
- currency: currency || 'USD',
- minimumFractionDigits: fractionalDigits,
- maximumFractionDigits: fractionalDigits,
- })
+const priceFormatter = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ notation: 'standard',
+ currency: 'USD',
+ minimumSignificantDigits: 4,
+ maximumSignificantDigits: 4,
+ roundingPriority: 'morePrecision',
+})
+
+const balanceFormatter = new Intl.NumberFormat('en-US', {
+ style: 'decimal',
+ notation: 'standard',
+ minimumFractionDigits: 0,
+ maximumFractionDigits: 2,
+ minimumSignificantDigits: 1,
+ maximumSignificantDigits: 4,
+ roundingPriority: 'morePrecision',
+})
+
+const valueFormatter = new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency: 'USD',
+ notation: 'standard',
+ minimumFractionDigits: 2,
+ maximumFractionDigits: 2,
+})
+
+export const formatChartValue = (value: number, dataType: DataType): string => {
+ return match(dataType)
+ .with('balance', () => balanceFormatter.format(value))
+ .with('price', () => priceFormatter.format(value))
+ .with('value', () => valueFormatter.format(value))
+ .exhaustive()
}
-export const formatSmallNumber = (value: number): string => {
- if (value === 0) return '0'
-
- if (value < 0.01) {
- const str = value.toString()
- const match = str.match(/0\.0*/)
- if (match) {
- const leadingZeros = match[0].length - 2
- const decimalPlaces = leadingZeros + 2
- return value.toLocaleString('en-US', {
- minimumFractionDigits: decimalPlaces,
- maximumFractionDigits: Math.min(decimalPlaces, 8),
- })
- }
- }
+export const getChartValue = (
+ point: ChartDataPoint,
+ dataType: DataType,
+): number => {
+ return match(dataType)
+ .with('price', () => point.price)
+ .with('balance', () => point.balance ?? point.price)
+ .with('value', () => point.value ?? point.price)
+ .exhaustive()
+}
- return value.toLocaleString('en-US', {
- minimumFractionDigits: 0,
- maximumFractionDigits: 2,
- })
+export const createChartDataPoint = (
+ date: string,
+ value: number,
+ dataType: DataType,
+ additionalData?: { price?: number; balance?: number },
+): ChartDataPoint => {
+ return match(dataType)
+ .with('price', () => ({ date, price: value }))
+ .with('balance', () => ({ date, price: value, balance: value }))
+ .with('value', () => ({
+ date,
+ price: additionalData?.price ?? 0,
+ balance: additionalData?.balance ?? 0,
+ value,
+ }))
+ .exhaustive()
}
export const calculateChartRange = (
- data: Array<{ price: number }>,
+ data: ChartDataPoint[],
marginFactor = 0.1,
+ dataType: DataType = 'price',
) => {
if (data.length === 0) return { min: 0, max: 1, ticks: [] }
- const prices = data.map(d => d.price)
- const maxPrice = Math.max(...prices)
- const minPrice = Math.min(...prices)
+ const values = data.map(d => getChartValue(d, dataType))
+ const maxPrice = Math.max(...values)
+ const minPrice = Math.min(...values)
const priceRange = maxPrice - minPrice
const adjustedMin = minPrice - priceRange * marginFactor
const adjustedMax = maxPrice + priceRange * marginFactor
- const finalMin = minPrice > 0 && adjustedMin < 0 ? 0 : adjustedMin
+ const finalMin = Math.max(0, adjustedMin)
const finalMax = adjustedMax
// Generate ticks
const tickCount = 7
const tickInterval = (finalMax - finalMin) / (tickCount - 1)
- const maxDecimals = Math.min(
- Math.max(
- ...data.map(d =>
- d.price % 1 !== 0 ? d.price.toString().split('.')[1]?.length || 0 : 0,
- ),
- ),
- 4,
- )
const ticks = Array.from({ length: tickCount }, (_, i) => {
const tickValue = finalMin + i * tickInterval
- if (maxDecimals === 0) return Math.round(tickValue).toString()
- return tickValue.toFixed(tickValue === 0 ? 0 : maxDecimals)
+
+ return formatChartValue(tickValue, dataType)
})
return { min: finalMin, max: finalMax, ticks }
diff --git a/packages/wallet/src/components/create-password-form/index.tsx b/packages/wallet/src/components/create-password-form/index.tsx
index 682255e62..c9e41bf45 100644
--- a/packages/wallet/src/components/create-password-form/index.tsx
+++ b/packages/wallet/src/components/create-password-form/index.tsx
@@ -175,7 +175,8 @@ const CreatePasswordForm = ({
!isPasswordValid ||
!doPasswordsMatch ||
!!form.formState.errors.password ||
- !!form.formState.errors.confirmPassword
+ !!form.formState.errors.confirmPassword ||
+ loading
}
>
{loading ? (
diff --git a/packages/wallet/src/components/currency-amount/index.tsx b/packages/wallet/src/components/currency-amount/index.tsx
index 55a5f9f5d..a6b47ffe4 100644
--- a/packages/wallet/src/components/currency-amount/index.tsx
+++ b/packages/wallet/src/components/currency-amount/index.tsx
@@ -15,7 +15,7 @@ type Props = {
}
// TODO: get this from the user's settings
-const SYMBOL: 'EUR' | 'USD' = 'EUR'
+const SYMBOL: 'EUR' | 'USD' = 'USD'
const MIN_VALUE = 0.01
export const CurrencyAmount = (props: Props) => {
diff --git a/packages/wallet/src/components/empty-state-actions/components/buy-tokens.tsx b/packages/wallet/src/components/empty-state-actions/components/buy-tokens.tsx
new file mode 100644
index 000000000..b96d40f3e
--- /dev/null
+++ b/packages/wallet/src/components/empty-state-actions/components/buy-tokens.tsx
@@ -0,0 +1,99 @@
+import { ExternalIcon } from '@status-im/icons/12'
+import { cx } from 'class-variance-authority'
+
+import { Image, type ImageId } from '../../image'
+
+type Props = {
+ address: string
+}
+
+const BuyTokens = (props: Props) => {
+ const { address } = props
+
+ const PROVIDERS: ProviderProps[] = [
+ {
+ name: 'MoonPay',
+ image: 'Wallet/Icons/Logos/moonpay-bigger:144:144',
+ list: [
+ 'Pay with Credit/Debit Card, Bank Transfer, Apple/Google Pay, SEPA, +9 more',
+ 'Fees: from 1%',
+ 'Supported Countries: 180',
+ ],
+ url: 'https://buy.moonpay.com/v2/buy?apiKey=pk_live_YQC6CQPA5qqDu0unEwHJyAYQyeIqFGR',
+ },
+ {
+ name: 'Mercuryo',
+ image: 'Wallet/Icons/Logos/mercuryo-bigger:144:144',
+ list: [
+ 'Pay with Credit/Debit Card, Bank Transfer, Apple/Google Pay, SEPA, +10 more',
+ 'Fees: from 1%',
+ 'Supported Countries: 135+',
+ ],
+ url: `https://exchange.mercuryo.io/?type=buy&network=ETHEREUM¤cy=ETH&address=${address}&hide_address=false&fix_address=true&widget_id=6a7eb330-2b09-49b7-8fd3-1c77cfb6cd47`,
+ },
+ ]
+
+ return (
+
+
+ )
+}
+
+type ProviderProps = {
+ name: string
+ image: ImageId
+ list: string[]
+ url: string
+}
+
+const Provider = (props: ProviderProps) => {
+ const { name, image, list, url } = props
+
+ return (
+
+ )
+}
+
+export { BuyTokens }
diff --git a/packages/wallet/src/components/empty-state-actions/components/deposit-tokens.tsx b/packages/wallet/src/components/empty-state-actions/components/deposit-tokens.tsx
new file mode 100644
index 000000000..f42d95ca1
--- /dev/null
+++ b/packages/wallet/src/components/empty-state-actions/components/deposit-tokens.tsx
@@ -0,0 +1,86 @@
+'use client'
+import { useEffect, useState } from 'react'
+
+import { IconButton, useToast } from '@status-im/components'
+import { CheckIcon, CopyIcon } from '@status-im/icons/20'
+import { QRCodeSVG } from 'qrcode.react'
+
+import { useCopyToClipboard } from '../../../hooks'
+import { NetworkLogo } from '../../network-logo'
+
+type Props = {
+ address: string
+}
+
+const DepositTokens = (props: Props) => {
+ const { address } = props
+ const [, copy] = useCopyToClipboard()
+ const [success, setSuccess] = useState(false)
+ const toast = useToast()
+
+ useEffect(() => {
+ const timer = setTimeout(() => setSuccess(false), 2000)
+
+ return () => {
+ clearTimeout(timer)
+ }
+ }, [success])
+
+ const handleCopy = () => {
+ try {
+ copy(address)
+ setSuccess(true)
+ } catch {
+ toast.negative('Failed to copy address.')
+ }
+ }
+
+ return (
+
+
+ Ways to buy tokens
+
+
+ + Credit card and bank transfer +
+
+ {PROVIDERS.map(provider => (
+
+
+
+ )
+}
+
+export { DepositTokens }
diff --git a/packages/wallet/src/components/empty-state-actions/index.tsx b/packages/wallet/src/components/empty-state-actions/index.tsx
new file mode 100644
index 000000000..a48dfe70c
--- /dev/null
+++ b/packages/wallet/src/components/empty-state-actions/index.tsx
@@ -0,0 +1,19 @@
+import { BuyTokens } from './components/buy-tokens'
+import { DepositTokens } from './components/deposit-tokens'
+
+type Props = {
+ address: string
+}
+
+const EmptyStateActions = (props: Props) => {
+ const { address } = props
+
+ return (
+
+
+ Deposit tokens
+
+
+ + Send ETH, tokens or collectibles (NFTs) to this address from another + wallet or exchange +
+
+
+
+
+ + {address} +
+
+
+
+
+
+
+ Supported network:
+
+
+
+
+
+ )
+}
+
+export { EmptyStateActions }
diff --git a/packages/wallet/src/components/empty-state/index.tsx b/packages/wallet/src/components/empty-state/index.tsx
index 23176b3d6..c23e47ada 100644
--- a/packages/wallet/src/components/empty-state/index.tsx
+++ b/packages/wallet/src/components/empty-state/index.tsx
@@ -1,11 +1,24 @@
+import { cva } from 'cva'
import { match } from 'ts-pattern'
import { Image } from '../image'
import type { ImageId } from '../image'
+const styles = cva({
+ variants: {
+ variant: {
+ activity: 'size-20',
+ collectible: 'size-20',
+ balance: 'h-[112px]',
+ price: 'h-[112px]',
+ value: 'h-[112px]',
+ },
+ },
+})
+
type Props = {
- variant: 'activity' | 'collectible'
+ variant: 'activity' | 'collectible' | 'balance' | 'price' | 'value'
}
const EmptyState = (props: Props) => {
@@ -14,8 +27,8 @@ const EmptyState = (props: Props) => {
const content = match(variant)
.with('activity', () => ({
imageId: 'admin/empty/devices:241:240' as ImageId,
- imageAlt: 'No activity',
- title: 'No Activity',
+ imageAlt: 'No history',
+ title: 'No history',
description: 'Transaction history will be visible on this page',
}))
.with('collectible', () => ({
@@ -24,11 +37,33 @@ const EmptyState = (props: Props) => {
title: 'No Collectibles',
description: 'Your collectibles will be visible on this page',
}))
+ .with('balance', () => ({
+ imageId: 'Portfolio/Empty States/No_Balance:750:232' as ImageId,
+ imageAlt: 'No balance',
+ title: 'No balance',
+ description: 'Hold this asset to view your balance history here',
+ }))
+ .with('price', () => ({
+ imageId: 'Portfolio/Empty States/No_Balance:750:232' as ImageId,
+ imageAlt: 'No prices',
+ title: 'No prices',
+ description: 'Prices will be visible on this page',
+ }))
+ .with('value', () => ({
+ imageId: 'Portfolio/Empty States/No_Balance:750:232' as ImageId,
+ imageAlt: 'No value',
+ title: 'No value',
+ description: 'Hold this asset to view your value history here',
+ }))
.exhaustive()
return (
-
diff --git a/packages/wallet/src/components/feedback/index.tsx b/packages/wallet/src/components/feedback/index.tsx
index 97b3ff88f..3d29dba61 100644
--- a/packages/wallet/src/components/feedback/index.tsx
+++ b/packages/wallet/src/components/feedback/index.tsx
@@ -62,7 +62,7 @@ const FeedbackPopover = () => {
const FeedbackSection = () => {
return (
{content.title}
{content.description}
-
+
I've backed up my recovery phrase and understand that clicking “Finish
- Backup” will completely and permanently delete it from this wallet
- interface.
+ Backup” will remove it from this wallet interface.
We're building with you.
@@ -74,7 +74,7 @@ const FeedbackSection = () => {
target="_blank"
className="flex justify-between px-2 py-[5px] text-15 font-500 text-neutral-100 hover:text-neutral-50"
>
- {label}
diff --git a/packages/wallet/src/components/image/types.ts b/packages/wallet/src/components/image/types.ts
index b9e11cbc9..7f8d24196 100644
--- a/packages/wallet/src/components/image/types.ts
+++ b/packages/wallet/src/components/image/types.ts
@@ -1,4 +1,14 @@
export type ImageType =
+ | { id: 'Portfolio/Empty States/No_Balance:750:232'; alt: '' }
+ | { id: 'Wallet/Icons/Logos/mercuryo-bigger:144:144'; alt: '' }
+ | { id: 'Wallet/Icons/Logos/moonpay-bigger:144:144'; alt: '' }
+ | { id: 'Wallet/Icons/Logos/mercuryo:64:64'; alt: '' }
+ | { id: 'Wallet/Icons/Logos/moonpay:64:64'; alt: '' }
+ | { id: 'Homepage/Screens/Extension Section/Extension_01:2127:2390'; alt: '' }
+ | {
+ id: 'Help/Documentation Screens/Wallet/1532/1532_1_Screen_Light:1872:1208'
+ alt: 'A diagram showing the relationship between wallet accounts, keys, and derivation paths'
+ }
| {
id: 'Help/Documentation Screens/Wallet/1512/1512_1_Screen:1480:1480'
alt: ''
diff --git a/packages/wallet/src/components/import-recovery-phrase-form/index.tsx b/packages/wallet/src/components/import-recovery-phrase-form/index.tsx
index 8391dacbe..9db1dad7a 100644
--- a/packages/wallet/src/components/import-recovery-phrase-form/index.tsx
+++ b/packages/wallet/src/components/import-recovery-phrase-form/index.tsx
@@ -12,7 +12,7 @@ const mnemonicSchema = z.object({
mnemonic: z
.string()
.trim()
- .refine(value => validateMnemonic(value, english), {
+ .refine(value => value === '' || validateMnemonic(value, english), {
message: 'Invalid phrase. Check word count and spelling.',
}),
})
@@ -38,8 +38,11 @@ const ImportRecoveryPhraseForm = ({
const {
formState: { errors },
+ watch,
} = form
+ const mnemonicValue = watch('mnemonic')
+
return (