feat: display token addresses

packages/frontend/cypress/e2e/step1.cy.ts

@@ -250,7 +250,7 @@ describe('Multistep form step-1 with Incal', () => {
     it('should have default balance with newly registered token', () => {
       cy.get('#token_extra')
         .should('exist')
-        .and('have.text', `${DEFAULT_TOKEN_SUPPLY}.0 TST`)
+        .and('include.text', `${DEFAULT_TOKEN_SUPPLY}.0 TST`)
     })
 
     it('should invalidate form if other fields are empty', () => {

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',
             }}

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,

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
   )}`
 }