From abcbdbef03eda73eb60533a95573857471e36402 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Dan?= <sebastien.dan@gmail.com>
Date: Fri, 13 Oct 2023 09:47:08 +0200
Subject: [PATCH] feat: display token addresses

---
 .../frontend/src/components/MultiStepForm.tsx | 12 +++++--
 .../frontend/src/components/steps/Step1.tsx   | 32 ++++++++++++++++++-
 packages/frontend/src/utils/index.ts          |  2 +-
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MultiStepForm.tsx b/packages/frontend/src/components/MultiStepForm.tsx
index 4228936..5c5b989 100644
--- a/packages/frontend/src/components/MultiStepForm.tsx
+++ b/packages/frontend/src/components/MultiStepForm.tsx
@@ -121,7 +121,11 @@ const MultiStepForm = () => {
           value={{ transactionType, setTransactionType }}
         >
           <Col
-            span={currentStep > 0 ? 3 : 1}
+            xs={currentStep > 0 ? 8 : 1}
+            sm={currentStep > 0 ? 8 : 1}
+            md={currentStep > 0 ? 6 : 1}
+            lg={currentStep > 0 ? 3 : 1}
+            xl={currentStep > 0 ? 3 : 1}
             style={{
               opacity: currentStep > 0 ? 1 : 0,
               transition: 'all 0.4s ease 0.1s, opacity 0.4s ease 0.2s',
@@ -133,7 +137,11 @@ const MultiStepForm = () => {
             </Space>
           </Col>
           <Col
-            span={6}
+            xs={12}
+            sm={12}
+            md={8}
+            lg={6}
+            xl={6}
             style={{
               transition: 'all 0.4s ease 0.1s',
             }}
diff --git a/packages/frontend/src/components/steps/Step1.tsx b/packages/frontend/src/components/steps/Step1.tsx
index bfb7df5..6f307fb 100644
--- a/packages/frontend/src/components/steps/Step1.tsx
+++ b/packages/frontend/src/components/steps/Step1.tsx
@@ -8,6 +8,9 @@ import {
   Segmented,
   Select,
   Space,
+  Tag,
+  Tooltip,
+  message,
 } from 'antd'
 import { SegmentedValue } from 'antd/lib/segmented'
 import { ethers } from 'ethers'
@@ -26,6 +29,8 @@ import SubnetSelect from '../SubnetSelect'
 import useCheckTokenOnSubnet from '../../hooks/useCheckTokenOnReceivingSubnet'
 import useTokenBalance from '../../hooks/useTokenBalance'
 import { ERROR } from '../../constants/wordings'
+import { CopyOutlined } from '@ant-design/icons'
+import { shortenAddress } from '../../utils'
 
 const TransactionTypeSelector = styled(Segmented)`
   margin-bottom: 1rem;
@@ -68,6 +73,11 @@ const Step1 = ({ onFinish, onPrev }: StepProps) => {
     [setTransactionType]
   )
 
+  const copyTokenAddress = useCallback(() => {
+    navigator.clipboard.writeText(token?.addr || '')
+    message.info(`${token?.symbol} token address copied to clipboard!`)
+  }, [token])
+
   const { balance } = useTokenBalance(sendingSubnet, token)
 
   useEffect(() => {
@@ -128,7 +138,27 @@ const Step1 = ({ onFinish, onPrev }: StepProps) => {
         <Form.Item
           label="Token"
           name="token"
-          extra={balance !== undefined ? `${balance} ${token?.symbol}` : null}
+          extra={
+            balance !== undefined ? (
+              <div style={{ marginTop: '0.4rem' }}>
+                <Tag color="gold">
+                  {balance} {token?.symbol}
+                </Tag>
+                (<Tag>{token?.symbol}</Tag>:{' '}
+                <Tooltip title={token?.addr}>
+                  {shortenAddress(token?.addr || '')}
+                </Tooltip>{' '}
+                <Button
+                  type="text"
+                  size="small"
+                  shape="circle"
+                  icon={<CopyOutlined />}
+                  onClick={copyTokenAddress}
+                />
+                )
+              </div>
+            ) : null
+          }
           rules={[
             {
               required: true,
diff --git a/packages/frontend/src/utils/index.ts b/packages/frontend/src/utils/index.ts
index e7eb02e..0d2c8c8 100644
--- a/packages/frontend/src/utils/index.ts
+++ b/packages/frontend/src/utils/index.ts
@@ -2,7 +2,7 @@ export function shortenAddress(
   address: string,
   prefixSuffixLength: number = 5
 ) {
-  return `${address.slice(0, prefixSuffixLength)}...${address.slice(
+  return `${address.slice(0, prefixSuffixLength + 2)}...${address.slice(
     address.length - prefixSuffixLength
   )}`
 }