feat: zustand boilerplate

package.json

@@ -29,7 +29,8 @@
     "react-icons": "^4.12.0",
     "react-router-dom": "^6.21.1",
     "react-virtuoso": "^4.6.2",
-    "viem": "^2.0.3"
+    "viem": "^2.0.3",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@types/inquirer": "^9.0.7",

src/constants/assets.ts

@@ -0,0 +1,138 @@
+import type { AssetId } from '@shapeshiftoss/caip'
+
+import type { Asset } from '../types/assets'
+
+// Chainflip-supported assets
+export const initialAssets: Asset[] = [
+  {
+    assetId: 'eip155:1/slip44:60',
+    chainId: 'eip155:1',
+    symbol: 'ETH',
+    name: 'Ethereum',
+    precision: 18,
+    color: '#5C6BC0',
+    icon: 'https://rawcdn.githack.com/trustwallet/assets/32e51d582a890b3dd3135fe3ee7c20c2fd699a6d/blockchains/ethereum/info/logo.png',
+    explorer: 'https://etherscan.io',
+    explorerAddressLink: 'https://etherscan.io/address/',
+    explorerTxLink: 'https://etherscan.io/tx/',
+    relatedAssetKey: 'eip155:1/slip44:60',
+    networkName: 'Ethereum',
+  },
+  {
+    assetId: 'eip155:1/erc20:0x826180541412d574cf1336d22c0c0a287822678a',
+    chainId: 'eip155:1',
+    symbol: 'FLIP',
+    name: 'Chainflip',
+    precision: 18,
+    color: '#040404',
+    icon: 'https://assets.coingecko.com/coins/images/25576/large/kdt_AgmT_400x400.png?1696524709',
+    explorer: 'https://etherscan.io',
+    explorerAddressLink: 'https://etherscan.io/address/',
+    explorerTxLink: 'https://etherscan.io/tx/',
+    relatedAssetKey: null,
+  },
+  {
+    assetId: 'eip155:1/erc20:0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+    chainId: 'eip155:1',
+    symbol: 'USDC',
+    name: 'USDC on Ethereum',
+    precision: 6,
+    color: '#2373CB',
+    icon: 'https://rawcdn.githack.com/trustwallet/assets/master/blockchains/ethereum/assets/0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48/logo.png',
+    explorer: 'https://etherscan.io',
+    explorerAddressLink: 'https://etherscan.io/address/',
+    explorerTxLink: 'https://etherscan.io/tx/',
+    relatedAssetKey: 'eip155:1/erc20:0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+  },
+  {
+    assetId: 'eip155:1/erc20:0xdac17f958d2ee523a2206206994597c13d831ec7',
+    chainId: 'eip155:1',
+    symbol: 'USDT',
+    name: 'Tether on Ethereum',
+    precision: 6,
+    color: '#24A37B',
+    icon: 'https://rawcdn.githack.com/trustwallet/assets/master/blockchains/ethereum/assets/0xdAC17F958D2ee523a2206206994597C13D831ec7/logo.png',
+    explorer: 'https://etherscan.io',
+    explorerAddressLink: 'https://etherscan.io/address/',
+    explorerTxLink: 'https://etherscan.io/tx/',
+    relatedAssetKey: 'eip155:1/erc20:0xdac17f958d2ee523a2206206994597c13d831ec7',
+  },
+  {
+    assetId: 'eip155:42161/slip44:60',
+    chainId: 'eip155:42161',
+    symbol: 'ETH',
+    name: 'Ethereum on Arbitrum One',
+    precision: 18,
+    color: '#5C6BC0',
+    icon: 'https://rawcdn.githack.com/trustwallet/assets/32e51d582a890b3dd3135fe3ee7c20c2fd699a6d/blockchains/ethereum/info/logo.png',
+    explorer: 'https://arbiscan.io',
+    explorerAddressLink: 'https://arbiscan.io/address/',
+    explorerTxLink: 'https://arbiscan.io/tx/',
+    relatedAssetKey: 'eip155:1/slip44:60',
+    networkName: 'Arbitrum One',
+    networkIcon:
+      'https://raw.githubusercontent.com/trustwallet/assets/b7a5f12d893fcf58e0eb1dd64478f076857b720b/blockchains/arbitrum/info/logo.png',
+    networkColor: '#213147',
+  },
+  {
+    assetId: 'eip155:42161/erc20:0xaf88d065e77c8cc2239327c5edb3a432268e5831',
+    chainId: 'eip155:42161',
+    symbol: 'USDC',
+    name: 'USDC on Arbitrum One',
+    precision: 6,
+    color: '#2E7ACD',
+    icon: 'https://assets.coingecko.com/coins/images/6319/large/usdc.png?1696506694',
+    explorer: 'https://arbiscan.io',
+    explorerAddressLink: 'https://arbiscan.io/address/',
+    explorerTxLink: 'https://arbiscan.io/tx/',
+    relatedAssetKey: 'eip155:1/erc20:0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+  },
+  {
+    assetId: 'bip122:000000000019d6689c085ae165831e93/slip44:0',
+    chainId: 'bip122:000000000019d6689c085ae165831e93',
+    symbol: 'BTC',
+    name: 'Bitcoin',
+    precision: 8,
+    color: '#FF9800',
+    icon: 'https://rawcdn.githack.com/trustwallet/assets/b7a5f12d893fcf58e0eb1dd64478f076857b720b/blockchains/bitcoin/info/logo.png',
+    explorer: 'https://live.blockcypher.com',
+    explorerAddressLink: 'https://live.blockcypher.com/btc/address/',
+    explorerTxLink: 'https://live.blockcypher.com/btc/tx/',
+    relatedAssetKey: null,
+    networkName: 'Bitcoin',
+  },
+  {
+    assetId: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/slip44:501',
+    chainId: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+    symbol: 'SOL',
+    name: 'Solana',
+    precision: 9,
+    color: '#9971d8',
+    icon: 'https://rawcdn.githack.com/trustwallet/assets/426526def2f327476e868ecb902c515ab17518af/blockchains/solana/info/logo.png',
+    explorer: 'https://explorer.solana.com',
+    explorerAddressLink: 'https://explorer.solana.com/address/',
+    explorerTxLink: 'https://explorer.solana.com/tx/',
+    relatedAssetKey: null,
+    networkName: 'Solana',
+    networkColor: '#9971d8',
+  },
+  {
+    assetId:
+      'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp/token:EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v',
+    chainId: 'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp',
+    symbol: 'USDC',
+    name: 'USDC on Solana',
+    precision: 6,
+    color: '#FFFFFF',
+    icon: 'https://assets.coingecko.com/coins/images/6319/large/usdc.png?1696506694',
+    explorer: 'https://explorer.solana.com',
+    explorerAddressLink: 'https://explorer.solana.com/address/',
+    explorerTxLink: 'https://explorer.solana.com/tx/',
+    relatedAssetKey: 'eip155:1/erc20:0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48',
+  },
+]
+
+export const initialAssetsById = initialAssets.reduce<Record<AssetId, Asset>>((acc, asset) => {
+  acc[asset.assetId] = asset
+  return acc
+}, {})

src/store/assets.ts

@@ -0,0 +1,25 @@
+import type { AssetId } from '@shapeshiftoss/caip'
+import { create } from 'zustand'
+
+import { initialAssetsById } from '../constants/assets'
+import type { Asset } from '../types/assets'
+
+interface AssetsState {
+  byId: Record<AssetId, Asset>
+  ids: AssetId[]
+  getAssetById: (assetId: AssetId) => Asset
+}
+
+export const useAssetsStore = create<AssetsState>((_set, get) => ({
+  byId: initialAssetsById,
+  ids: Object.keys(initialAssetsById),
+  getAssetById: (assetId: AssetId) => get().byId[assetId],
+}))
+
+export const useAssetById = (assetId: AssetId) => {
+  return useAssetsStore(state => state.byId[assetId])
+}
+
+export const useAllAssets = () => {
+  return useAssetsStore(state => state.ids.map(id => state.byId[id]))
+}

src/types/assets.ts

@@ -0,0 +1,18 @@
+import type { AssetId, ChainId } from '@shapeshiftoss/caip'
+
+export type Asset = {
+  assetId: AssetId
+  chainId: ChainId
+  symbol: string
+  name: string
+  precision: number
+  color: string
+  icon: string
+  explorer: string
+  explorerAddressLink: string
+  explorerTxLink: string
+  relatedAssetKey: AssetId | null
+  networkName?: string
+  networkIcon?: string
+  networkColor?: string
+}

yarn.lock

@@ -7377,6 +7377,7 @@ __metadata:
     vite: "npm:^5.0.8"
     vite-tsconfig-paths: "npm:^4.2.3"
     vitest: "npm:^1.1.3"
+    zustand: "npm:^5.0.3"
   languageName: unknown
   linkType: soft
 
@@ -8449,3 +8450,24 @@ __metadata:
   checksum: 10c0/856117aa15cf5103d2a2fb173f0ab4acb12b4b4d0ed3ab249fdbbf612e55d1cadfd27a6110940e24746fb0a78cf640b522cc8bca76f30a3b00b66e90cf82abe0
   languageName: node
   linkType: hard
+
+"zustand@npm:^5.0.3":
+  version: 5.0.3
+  resolution: "zustand@npm:5.0.3"
+  peerDependencies:
+    "@types/react": ">=18.0.0"
+    immer: ">=9.0.6"
+    react: ">=18.0.0"
+    use-sync-external-store: ">=1.2.0"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    immer:
+      optional: true
+    react:
+      optional: true
+    use-sync-external-store:
+      optional: true
+  checksum: 10c0/dad96c6c123fda088c583d5df6692e9245cd207583078dc15f93d255a67b0f346bad4535545c98852ecde93d254812a0c799579dfde2ab595016b99fbe20e4d5
+  languageName: node
+  linkType: hard