add identi icon (#133)

* add identi icon

* refactor address input

src/components/Elements/Address/index.tsx

@@ -0,0 +1,41 @@
+import { IconButton, Stack } from '@mui/material';
+import Identicon from '@polkadot/react-identicon';
+
+import { truncateAddres, writeToClipboard } from '@/utils/functions';
+
+import { useToast } from '@/contexts/toast';
+
+interface AddressProps {
+  value: string;
+  isShort?: boolean;
+  isCopy?: boolean;
+  size?: number;
+}
+
+export const Address = ({
+  value,
+  isShort,
+  isCopy,
+  size = 32,
+}: AddressProps) => {
+  const { toastInfo } = useToast();
+
+  const onCopy = () => {
+    if (!isCopy) return;
+
+    const asyncCopy = async () => {
+      await writeToClipboard(value);
+      toastInfo('Address copied');
+    };
+    asyncCopy();
+  };
+
+  return (
+    <Stack direction='row' gap='0.5rem' alignItems='center'>
+      <IconButton onClick={onCopy}>
+        <Identicon value={value} theme='polkadot' size={size} />
+      </IconButton>
+      <p>{isShort ? truncateAddres(value) : value}</p>
+    </Stack>
+  );
+};

src/components/Elements/Inputs/AddressInput/index.tsx

@@ -0,0 +1,71 @@
+import {
+  Box,
+  Button,
+  IconButton,
+  Input,
+  InputAdornment,
+  Typography,
+} from '@mui/material';
+import Identicon from '@polkadot/react-identicon';
+
+import { isValidAddress, writeToClipboard } from '@/utils/functions';
+
+import { useAccounts } from '@/contexts/account';
+import { useToast } from '@/contexts/toast';
+
+export interface AddressInputProps {
+  onChange: (_: string) => void;
+  address: string;
+}
+
+export const AddressInput = ({ onChange, address }: AddressInputProps) => {
+  const {
+    state: { activeAccount },
+  } = useAccounts();
+  const { toastInfo } = useToast();
+
+  const isValid = isValidAddress(address);
+
+  const onCopy = () => {
+    const asyncCopy = async () => {
+      await writeToClipboard(address);
+      toastInfo('Address copied');
+    };
+    asyncCopy();
+  };
+
+  return (
+    <Box>
+      <Typography>Recipient</Typography>
+      <Input
+        value={address}
+        onChange={(e) => onChange(e.target.value)}
+        fullWidth
+        type='text'
+        placeholder='Address of the recipient'
+        startAdornment={
+          isValid ? (
+            <IconButton onClick={onCopy}>
+              <Identicon value={address} theme='polkadot' size={24} />
+            </IconButton>
+          ) : (
+            <></>
+          )
+        }
+        endAdornment={
+          <InputAdornment position='end'>
+            <Button
+              variant='text'
+              color='info'
+              onClick={() => activeAccount && onChange(activeAccount.address)}
+            >
+              Me
+            </Button>
+          </InputAdornment>
+        }
+        sx={{ height: '3rem' }}
+        error={address.length > 0 && !isValid}
+      />
+    </Box>
+  );
+};

src/components/Elements/Inputs/index.ts

@@ -1,3 +1,3 @@
+export * from './AddressInput';
 export * from './AmountInput';
 export * from './FileInput';
-export * from './RecipientInput';

src/components/Elements/index.ts

@@ -1,3 +1,4 @@
+export * from './Address';
 export * from './Balance';
 export * from './Banner';
 export * from './Buttons';

src/components/Header/index.tsx

@@ -1,21 +1,18 @@
 import { ExpandMore } from '@mui/icons-material';
 import {
   Box,
-  Button,
   Collapse,
   Divider,
   List,
   ListItemButton,
   useTheme,
 } from '@mui/material';
-import Identicon from '@polkadot/react-identicon';
 import React, { useState } from 'react';
 
 import { KeyringState, useAccounts } from '@/contexts/account';
-import { useToast } from '@/contexts/toast';
 
 import styles from './index.module.scss';
-import { ProgressButton } from '../Elements';
+import { Address, ProgressButton } from '../Elements';
 import NetworkSelector from '../Elements/Selectors/NetworkSelector';
 
 export const Header = () => {
@@ -28,26 +25,12 @@ export const Header = () => {
   } = useAccounts();
 
   const [accountsOpen, openAccounts] = useState(false);
-  const { toastInfo } = useToast();
 
   const onDisconnect = () => {
     openAccounts(false);
     disconnectWallet();
   };
 
-  const truncateAddres = (address: string) => {
-    return (
-      address.substring(0, 6) + '...' + address.substring(address.length - 6)
-    );
-  };
-
-  const copyAddress = async () => {
-    if (!activeAccount) return;
-
-    await navigator.clipboard.writeText(activeAccount.address);
-    toastInfo('Address copied');
-  };
-
   return (
     <>
       <Box
@@ -60,16 +43,7 @@ export const Header = () => {
       >
         <Box className={styles.menu}>
           {activeAccount && (
-            <Box display='flex' alignItems='center' sx={{ margin: '1rem' }}>
-              <Button onClick={copyAddress}>
-                <Identicon
-                  value={activeAccount.address}
-                  theme='polkadot'
-                  size={32}
-                />
-              </Button>
-              <p>{truncateAddres(activeAccount.address)}</p>
-            </Box>
+            <Address value={activeAccount.address} isCopy isShort />
           )}
           <div>
             <NetworkSelector />

src/components/Modals/Regions/Sell/index.tsx

@@ -11,7 +11,7 @@ import {
 import { Region } from 'coretime-utils';
 import { useEffect, useState } from 'react';
 
-import { AmountInput, RecipientInput } from '@/components/Elements';
+import { AddressInput, AmountInput } from '@/components/Elements';
 import { RegionMetaCard } from '@/components/Regions';
 
 import { useAccounts } from '@/contexts/account';
@@ -123,10 +123,7 @@ export const SellModal = ({
             />
           </Stack>
           <Stack direction='column' gap={2}>
-            <RecipientInput
-              setRecipient={setSaleRecipient}
-              recipient={saleRecipient}
-            />
+            <AddressInput onChange={setSaleRecipient} address={saleRecipient} />
           </Stack>
         </Stack>
       </DialogContent>

src/pages/transfer.tsx

@@ -23,11 +23,11 @@ import {
 } from '@/utils/transfers/native';
 
 import {
+  AddressInput,
   AmountInput,
   Balance,
   ChainSelector,
   ProgressButton,
-  RecipientInput,
   RegionMetaCard,
   RegionSelector,
 } from '@/components';
@@ -435,7 +435,7 @@ const TransferPage = () => {
             >
               Transfer to:
             </Typography>
-            <RecipientInput recipient={newOwner} setRecipient={setNewOwner} />
+            <AddressInput address={newOwner} onChange={setNewOwner} />
           </Stack>
           {asset === AssetType.TOKEN &&
             originChain !== ChainType.NONE &&

src/utils/functions/common.ts

@@ -19,3 +19,13 @@ export const isValidAddress = (chainAddress: string, ss58Prefix = 42) => {
     return false;
   }
 };
+
+export const truncateAddres = (address: string) => {
+  return (
+    address.substring(0, 6) + '...' + address.substring(address.length - 6)
+  );
+};
+
+export const writeToClipboard = async (value: string) => {
+  await navigator.clipboard.writeText(value);
+};