feat: move TransactionDetails and child components to elements + use …

…Circle SDK types

packages/circle-demo-webapp/app/components/ChainSelect/ChainSelect.tsx

@@ -1,22 +1,22 @@
+import { Blockchain } from '@circle-fin/developer-controlled-wallets';
+import { ChainIcon } from '@circle-libs/circle-react-elements';
 import { SelectProps } from '@radix-ui/react-select';
 
-import { ChainIcon } from '~/components/ChainIcon';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from '~/components/ui/select';
-import { Blockchain } from '~/lib/constants';
 
 const BLOCKCHAIN_LABELS: Record<string, string> = {
-  [Blockchain.Arb]: 'Arbitrum',
-  [Blockchain.Avax]: 'Avalanche',
-  [Blockchain.Eth]: 'Ethereum',
-  [Blockchain.Matic]: 'Polygon',
-  [Blockchain.Near]: 'NEAR',
-  [Blockchain.Sol]: 'Solana',
+  ARB: 'Arbitrum',
+  AVAX: 'Avalanche',
+  ETH: 'Ethereum',
+  MATIC: 'Polygon',
+  NEAR: 'NEAR',
+  SOL: 'Solana',
 };
 
 export type ChainSelectProps = Omit<SelectProps, 'children'> & { placeholder?: string };
@@ -33,7 +33,7 @@ export function ChainSelect({ ...props }: ChainSelectProps) {
         {Object.keys(BLOCKCHAIN_LABELS).map((blockchain) => (
           <SelectItem key={blockchain} value={blockchain}>
             <div className="text-sm text-muted-foreground flex items-center space-x-2 pr-4">
-              <ChainIcon blockchain={blockchain} />
+              <ChainIcon blockchain={blockchain as Blockchain} />
               <span>{BLOCKCHAIN_LABELS[blockchain]}</span>
             </div>
           </SelectItem>

packages/circle-demo-webapp/app/components/SendTransactionForm/SendTransactionForm.stories.ts

@@ -1,8 +1,8 @@
 import type { CreateTransactionInput } from '@circle-fin/developer-controlled-wallets';
+import { Transaction } from '@circle-fin/developer-controlled-wallets/dist/types/clients/developer-controlled-wallets';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Blockchain } from '~/lib/constants';
-import { Transaction } from '~/lib/types';
 
 import { SendTransactionForm } from './SendTransactionForm';
 

packages/circle-demo-webapp/app/components/SendTransactionForm/SendTransactionForm.tsx

@@ -2,6 +2,10 @@ import {
   Balance,
   CreateTransactionInput,
 } from '@circle-fin/developer-controlled-wallets';
+import {
+  Transaction,
+  Wallet,
+} from '@circle-fin/developer-controlled-wallets/dist/types/clients/developer-controlled-wallets';
 import { TokenSelect } from '@circle-libs/circle-react-elements';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { LoaderCircle } from 'lucide-react';
@@ -16,7 +20,6 @@ import { Input } from '~/components/ui/input';
 import { Textarea } from '~/components/ui/textarea';
 import { FeeLevel } from '~/lib/constants';
 import { CircleError, ErrorResponse } from '~/lib/responses';
-import { Transaction, Wallet } from '~/lib/types';
 import { isAddress, isNumber } from '~/lib/utils';
 
 export interface ScreenAddressResult {

packages/circle-demo-webapp/app/components/TestChainSelect/TestChainSelect.tsx

@@ -1,22 +1,22 @@
+import { Blockchain } from '@circle-fin/developer-controlled-wallets';
+import { ChainIcon } from '@circle-libs/circle-react-elements';
 import { SelectProps } from '@radix-ui/react-select';
 
-import { ChainIcon } from '~/components/ChainIcon';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
 } from '~/components/ui/select';
-import { Blockchain } from '~/lib/constants';
 
 const BLOCKCHAIN_LABELS: Record<string, string> = {
-  [Blockchain.ArbSepolia]: 'Arbitrum Sepolia',
-  [Blockchain.AvaxFuji]: 'Avalanche Fuji',
-  [Blockchain.EthSepolia]: 'Ethereum Sepolia',
-  [Blockchain.MaticAmoy]: 'Polygon Amoy',
-  [Blockchain.NearTestnet]: 'NEAR Testnet',
-  [Blockchain.SolDevnet]: 'Solana Devnet',
+  'ARB-SEPOLIA': 'Arbitrum Sepolia',
+  'AVAX-FUJI': 'Avalanche Fuji',
+  'ETH-SEPOLIA': 'Ethereum Sepolia',
+  'MATIC-AMOY': 'Polygon Amoy',
+  'NEAR-TESTNET': 'NEAR Testnet',
+  'SOL-DEVNET': 'Solana Devnet',
 };
 
 export type TestChainSelectProps = Omit<SelectProps, 'children'>;
@@ -32,7 +32,7 @@ export function TestChainSelect({ ...props }: TestChainSelectProps) {
         {Object.keys(BLOCKCHAIN_LABELS).map((blockchain) => (
           <SelectItem key={blockchain} value={blockchain}>
             <div className="text-sm text-muted-foreground flex items-center space-x-2 pr-4">
-              <ChainIcon blockchain={blockchain} />
+              <ChainIcon blockchain={blockchain as Blockchain} />
               <span>{BLOCKCHAIN_LABELS[blockchain]}</span>
             </div>
           </SelectItem>

packages/circle-demo-webapp/app/components/TransactionTableRow/TransactionTableRow.stories.ts

@@ -28,14 +28,14 @@ export const Default: Story = {
       state: 'COMPLETE',
       transactionScreeningEvaluation: { screeningDate: '2024-12-10T13:52:57Z' },
       amounts: ['30'],
-      nfts: null,
+      nfts: undefined,
       txHash: '0x1aac3dd232d02797fb6c340cbda7d118fce0561aa7f78049f32ba167b0eaf225',
       blockHash: '0x3bd9054deae68d0d5087da188f119eab2160c12c8a255668e6190c60ffed9ff6',
       blockHeight: 15439404,
       networkFee: '0.005164650002582325',
       firstConfirmDate: '2024-12-10T13:52:57Z',
       operation: 'TRANSFER',
-      abiParameters: null,
+      abiParameters: undefined,
       createDate: '2024-12-10T13:52:57Z',
       updateDate: '2024-12-10T13:54:43Z',
     },

packages/circle-demo-webapp/app/components/TransactionTableRow/TransactionTableRow.tsx

@@ -1,5 +1,5 @@
-import { TokenItem } from '~/components/TokenItem';
-import { TransactionStateText } from '~/components/TransactionStatusText';
+import { TokenItem, TransactionStateText } from '@circle-libs/circle-react-elements';
+
 import { TransactionType } from '~/lib/constants';
 import { formatDate, shortenAddress } from '~/lib/format';
 import { TransactionWithToken } from '~/lib/types';

packages/circle-demo-webapp/app/components/WalletDetails/WalletDetails.tsx

@@ -1,9 +1,9 @@
 import { AccountType } from '@circle-fin/developer-controlled-wallets';
+import { ChainLabel } from '@circle-libs/circle-react-elements';
 import makeBlockie from 'ethereum-blockies-base64';
 import { Copy } from 'lucide-react';
 import { useMemo } from 'react';
 
-import { ChainLabel } from '~/components/ChainLabel';
 import { Badge } from '~/components/ui/badge';
 import { Button } from '~/components/ui/button';
 import { shortenAddress } from '~/lib/format';

packages/circle-demo-webapp/app/components/WalletReceive/WalletReceive.stories.ts

@@ -25,7 +25,6 @@ export const Default: Story = {
       name: 'My Wallet',
       address: '0xc9758de68b17837dadf51616ac77d634bca848d5',
       blockchain: Blockchain.MaticAmoy,
-      accountType: 'EOA',
       updateDate: '2024-12-09T14:38:51Z',
       createDate: '2024-12-09T14:38:51Z',
     },

packages/circle-demo-webapp/app/components/WalletReceive/WalletReceive.tsx

@@ -1,10 +1,10 @@
+import { Wallet } from '@circle-fin/developer-controlled-wallets/dist/types/clients/developer-controlled-wallets';
+import { ChainLabel } from '@circle-libs/circle-react-elements';
 import { Copy } from 'lucide-react';
 import { QRCodeCanvas } from 'qrcode.react';
 import { useState } from 'react';
 
-import { ChainLabel } from '~/components/ChainLabel';
 import { Button } from '~/components/ui/button';
-import { Wallet } from '~/lib/types';
 
 export interface WalletReceiveProps {
   /** The wallet */

packages/circle-demo-webapp/app/lib/format.ts

@@ -1,8 +1,14 @@
-export function shortenAddress(address: string): string {
+export function shortenAddress(address: string | undefined): string {
+  if (typeof address !== 'string') {
+    return '';
+  }
   return `${address.slice(0, 6)}...${address.slice(-4)}`;
 }
 
-export function shortenHash(hash: string): string {
+export function shortenHash(hash: string | undefined): string {
+  if (typeof hash !== 'string') {
+    return '';
+  }
   return `${hash.slice(0, 10)}...${hash.slice(-10)}`;
 }
 

packages/circle-demo-webapp/app/lib/memcache.ts

@@ -1,5 +1,7 @@
+import { Token } from '@circle-fin/developer-controlled-wallets';
+
 import { sdk } from '~/lib/sdk';
-import { Token, WalletSet } from '~/lib/types';
+import { WalletSet } from '~/lib/types';
 
 class MemCache<ReturnType extends { id: string }> {
   private map: Map<string, ReturnType>;