Cleanup transaction modal and account card

owlprotocol · Sep 21, 2024 · 7314300 · 7314300
1 parent 0cffce4
commit 7314300
Show file tree

Hide file tree

Showing 3 changed files with 228 additions and 221 deletions.
diff --git a/packages/react-wallet-v2/src/components/AccountCard.tsx b/packages/react-wallet-v2/src/components/AccountCard.tsx
@@ -7,74 +7,80 @@ import { Avatar, Button, Text, Tooltip } from '@nextui-org/react'
 import Image from 'next/image'
 import { useState } from 'react'
 import { useSnapshot } from 'valtio'
+import { bscTestnet } from 'viem/chains'
 
 interface Props {
-  name: string
-  logo: string
-  rgb: string
-  address: string
-  chainId: string
+    name: string
+    logo: string
+    rgb: string
+    address: string
+    chainId: string
 }
 
 export default function AccountCard({ name, logo, rgb, address = '', chainId }: Props) {
-  const [copied, setCopied] = useState(false)
-  const { activeChainId, account } = useSnapshot(SettingsStore.state)
-  function onCopy() {
-    navigator?.clipboard?.writeText(address)
-    setCopied(true)
-    setTimeout(() => setCopied(false), 1500)
-  }
+    const [copied, setCopied] = useState(false)
+    const { activeChainId, account } = useSnapshot(SettingsStore.state)
+    function onCopy() {
+        navigator?.clipboard?.writeText(address)
+        setCopied(true)
+        setTimeout(() => setCopied(false), 1500)
+    }
 
-  async function onChainChanged(chainId: string, address: string) {
-    SettingsStore.setActiveChainId(chainId)
-    await updateSignClientChainId(chainId.toString(), address)
-  }
+    async function onChainChanged(chainId: string, address: string) {
+        SettingsStore.setActiveChainId(chainId)
+        await updateSignClientChainId(chainId.toString(), address)
+    }
 
-  return (
-    <ChainCard rgb={rgb} flexDirection="row" alignItems="center">
-      <Avatar src={logo} />
-      <div style={{ flex: 1 }}>
-        <Text h5 css={{ marginLeft: '$9' }}>
-          {name}
-        </Text>
-        <Text weight="light" size={13} css={{ marginLeft: '$9' }}>
-          {address ? truncate(address, 19) : '<no address available>'}
-        </Text>
-      </div>
+    const chainIdParsed = chainId.split(':')[1] ?? ''
+    const chainIdNum = parseInt(chainIdParsed)
 
-      <Tooltip content={copied ? 'Copied!' : 'Copy'} placement="left">
-        <Button
-          size="sm"
-          css={{ minWidth: 'auto', backgroundColor: 'rgba(255, 255, 255, 0.15)' }}
-          data-testid={'chain-copy-button' + chainId}
-          onClick={e => {
-            e.stopPropagation()
-            onCopy()
-          }}
-        >
-          <Image
-            src={copied ? '/icons/checkmark-icon.svg' : '/icons/copy-icon.svg'}
-            width={15}
-            height={15}
-            alt="copy icon"
-          />
-        </Button>
-      </Tooltip>
-      <Button
-        size="sm"
-        css={{
-          minWidth: 'auto',
-          backgroundColor: 'rgba(255, 255, 255, 0.15)',
-          marginLeft: '$5'
-        }}
-        data-testid={'chain-switch-button' + chainId}
-        onClick={e => {
-          e.stopPropagation()
-          onChainChanged(chainId, address)
-        }}
-      >
-        {activeChainId === chainId ? `✅` : `🔄`}
-      </Button>
-    </ChainCard>
-  )
+    return (
+        <ChainCard rgb={rgb} flexDirection="row" alignItems="center">
+            <Avatar src={logo} />
+            <div style={{ flex: 1 }}>
+                <Text h5 css={{ marginLeft: '$9' }}>
+                    {name}
+                </Text>
+                {chainIdNum === bscTestnet.id && (
+                    <Text weight="light" size={13} css={{ marginLeft: '$9' }}>
+                        {address ? truncate(address, 19) : '<no address available>'}
+                    </Text>
+                )}
+            </div>
+
+            <Tooltip content={copied ? 'Copied!' : 'Copy'} placement="left">
+                <Button
+                    size="sm"
+                    css={{ minWidth: 'auto', backgroundColor: 'rgba(255, 255, 255, 0.15)' }}
+                    data-testid={'chain-copy-button' + chainId}
+                    onClick={e => {
+                        e.stopPropagation()
+                        onCopy()
+                    }}
+                >
+                    <Image
+                        src={copied ? '/icons/checkmark-icon.svg' : '/icons/copy-icon.svg'}
+                        width={15}
+                        height={15}
+                        alt="copy icon"
+                    />
+                </Button>
+            </Tooltip>
+            <Button
+                size="sm"
+                css={{
+                    minWidth: 'auto',
+                    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+                    marginLeft: '$5'
+                }}
+                data-testid={'chain-switch-button' + chainId}
+                onClick={e => {
+                    e.stopPropagation()
+                    onChainChanged(chainId, address)
+                }}
+            >
+                {activeChainId === chainId ? `✅` : `🔄`}
+            </Button>
+        </ChainCard>
+    )
 }