chore: cleaning + tx status

njajkes · njajkes · commit 4815299e99a3 · 2023-03-25T17:34:31.000+03:00
diff --git a/app/src/api/bridge.js b/app/src/api/bridge.js
@@ -76,6 +76,37 @@ try {
   console.log(e);
 }
 
+export const BridgesStates = {
+  'approving': {
+    type: 'pending',
+    text: '🕒 Approving'
+  },
+  'approved': {
+    type: 'success',
+    text: '✔️ Approved'
+  },
+  'not_approved': {
+    type: 'error',
+    text: '❌ Approve Error'
+  },
+  'transferring': {
+    type: 'pending',
+    text: '🕒 Transferring'
+  },
+  'mined': {
+    type: 'success',
+    text: '✔️ Mined'
+  },
+  'transfer_error': {
+    type: 'error',
+    text: '❌ Transfer Error'
+  },
+  'fulfilled': {
+    type: 'success',
+    text: '✔️ Fulfilled'
+  }
+}
+
 export async function bridgeToken(
   fromChainId,
   toChainId,
@@ -99,15 +130,15 @@ export async function bridgeToken(
       const approve = await Token.approve(BridgeAddress, tokenId, {
         from: signerAddress,
       });
-      setTransactionStatus(`Approving`);
+      setTransactionStatus(BridgesStates.approving);
       setTxLink(approve.hash);
       await approve.wait();
-      setTransactionStatus(`Approved`);
+      setTransactionStatus(BridgesStates.approved);
       setTxLink(approve.hash);
     } catch (error) {
       setError(error);
       setPending(false);
-      setTransactionStatus(`Not approved`);
+      setTransactionStatus(BridgesStates.not_approved);
       return;
     }
   }
@@ -118,10 +149,10 @@ export async function bridgeToken(
       //   `${networks[fromChainId].brigingPrice[toChainId].value}`,
       // ),
     });
-    setTransactionStatus(`Transfer`);
+    setTransactionStatus(BridgesStates.transferring);
     setTxLink(transfer.hash);
     await transfer.wait();
-    setTransactionStatus(`Mined`);
+    setTransactionStatus(BridgesStates.mined);
     setTxLink(transfer.hash);
     setIsLoading(true);
     setPending(false);
@@ -132,7 +163,7 @@ export async function bridgeToken(
         if (token && token.chainId !== fromChainId) {
           setIsLoading(false);
           setConfirmed(true);
-          setTransactionStatus(`Fulfilled`);
+          setTransactionStatus(BridgesStates.fulfilled);
           return 'Fulfilled';
         } else {
           console.log('try again');
@@ -148,6 +179,6 @@ export async function bridgeToken(
     setPending(false);
     setIsLoading(false);
     setError(error);
-    setTransactionStatus(`Transfer error`);
+    setTransactionStatus(BridgesStates.transfer_error);
   }
 }
diff --git a/app/src/components/BridgeModal.js b/app/src/components/BridgeModal.js
@@ -3,6 +3,7 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Dialog from '@mui/material/Dialog';
 import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
 import {
   FormControl,
   MenuItem,
@@ -11,6 +12,7 @@ import {
   DialogTitle,
   IconButton,
   Divider,
+  Link,
 } from '@mui/material';
 import { Typography } from '@mui/material';
 import TokenCard from './TokenCard';
@@ -20,6 +22,7 @@ import { networksLogos } from '../constants';
 import networks from '../networks.json';
 import { styled } from '@mui/material/styles';
 import { bridgeToken } from '../api';
+import { shortenAddress } from '../utils';
 
 /**
  * @param {string} fromId Chain Id of current item
@@ -42,7 +45,7 @@ const getAvaibleChains = (chainId) => {
     : [];
 };
 
-function BridgeModal({ isOpen, toggle, currentItem, chainId, switchNetwork }) {
+function BridgeModal({ isOpen, toggle, currentItem, chainId, switchNetwork, userAddress }) {
   const descriptionElementRef = React.useRef(null);
   const [currentChain, setCurrentChain] = React.useState('');
   const [pending, setPending] = React.useState(false);
@@ -72,7 +75,7 @@ function BridgeModal({ isOpen, toggle, currentItem, chainId, switchNetwork }) {
 
   const bridgePrice = getBridgePrice(currentItem.chainId, currentChain);
   const isSameNetwork = currentItem.chainId === Number(chainId);
-  const bridge = async () => {
+  const bridge = userAddress === currentItem.owner ? async () => {
     if (isSameNetwork) {
       // toggle()
       await bridgeToken(
@@ -90,15 +93,15 @@ function BridgeModal({ isOpen, toggle, currentItem, chainId, switchNetwork }) {
     }
 
     switchNetwork(currentItem.chainId);
-  };
+  } : undefined;
 
   return (
     <BridgeModal.Layout isOpen={isOpen} toggle={toggle}>
       <Box padding='40px'>
         <TokenCard {...currentItem} />
       </Box>
       <Divider variant='middle' orientation='vertical' flexItem />
-      <DialogContent
+      <DialogContentText
         id='scroll-dialog-description'
         ref={descriptionElementRef}
         tabIndex={-1}
@@ -119,16 +122,66 @@ function BridgeModal({ isOpen, toggle, currentItem, chainId, switchNetwork }) {
             currectChainId={currentChain}
             setChain={(e) => setCurrentChain(e.target.value)}
           />
-          <Typography
-            align='left'
-            fontWeight='400'
-            fontSize='12px'
-            lineHeight='140%'
-            color='rgba(27, 28, 30, 1)'
+          { txStatus 
+          ? <TxStatus txStatus={txStatus} txLink={txLink} txError={error} fromChainId={currentItem.chainId}/>
+          : <Info bridgePrice={bridgePrice}/> }
+          <MuiButton
+            onClick={bridge}
+            variant='contained'
+            fullWidth
+            size='large'
+            disabled={!bridgePrice || pending || loading || userAddress !== currentItem.owner}
           >
-            The stages of bridging will be shown here.
-          </Typography>
-          <BridgePrice bridgePrice={bridgePrice} />
+            {isSameNetwork ? 'bridge' : 'Switch network'}
+          </MuiButton>
+        </BridgeModal.Body>
+      </DialogContentText>
+    </BridgeModal.Layout>
+  );
+}
+
+
+const TxStatus = ({txStatus, txLink, txError, fromChainId }) => {
+  return (
+    <Box display='flex' flexDirection='column' mt='5px'>
+      <Typography variant='subtitle1' fontWeight={500}>
+        Status:{` `}
+        <Typography 
+          component='span' 
+          color={txStatus.type === 'success' ? '#28a745' : txStatus.type === 'pending' ? '#ffc107' : '#dc3545'}
+          fontWeight={700}
+        >
+          {txStatus.text}
+        </Typography>
+        
+      </Typography>
+      <Typography variant='body1'>
+        Transaction hash:{' '}
+        <Link 
+          href={`${networks[fromChainId].blockExplorer}/tx/${txLink}`} 
+          target='_blank' 
+          fontSize={'14px'}
+        >
+          {shortenAddress(txLink)}
+        </Link>
+      </Typography>
+    </Box>
+  )
+}
+
+const Info = ({bridgePrice}) => {
+  return (
+    <>
+      <Typography
+        align='left'
+        fontWeight='400'
+        fontSize='12px'
+        lineHeight='140%'
+        color='rgba(27, 28, 30, 1)'
+      >
+        The stages of bridging will be shown here.
+      </Typography>
+      <BridgePrice bridgePrice={bridgePrice} />
           <Typography
             align='left'
             fontWeight='400'
@@ -140,42 +193,8 @@ function BridgeModal({ isOpen, toggle, currentItem, chainId, switchNetwork }) {
             {bridgePrice + ' '}
             or the transaction will be rolled back
           </Typography>
-          <MuiButton
-            onClick={bridge}
-            variant='contained'
-            fullWidth
-            size='large'
-            disabled={!bridgePrice || pending || loading}
-          >
-            {isSameNetwork ? 'bridge' : 'Switch network'}
-          </MuiButton>
-
-          {txStatus && (
-            <Box display='flex' flexDirection='column'>
-              <Typography>{pending}</Typography>
-              <Typography>{txStatus}</Typography>
-              <Typography>
-                <a
-                  href={
-                    networks[currentItem.chainId].blockExplorer +
-                    '/tx/' +
-                    txLink
-                  }
-                  target='_blank'
-                  rel='noreferrer'
-                >
-                  link
-                </a>
-              </Typography>
-              <Typography>{confirmed}</Typography>
-              <Typography>{loading}</Typography>
-              {error && <Typography>{`Some error occured`}</Typography>}
-            </Box>
-          )}
-        </BridgeModal.Body>
-      </DialogContent>
-    </BridgeModal.Layout>
-  );
+    </>
+  )
 }
 
 BridgeModal.Layout = ({ children, isOpen, toggle }) => {
diff --git a/app/src/components/TokenCard.js b/app/src/components/TokenCard.js
@@ -43,6 +43,7 @@ function TokenCard({
   setCurrentItem,
   toggleModal,
   hasButton,
+  userAddress
 }) {
   return (
     <Card
@@ -96,7 +97,8 @@ function TokenCard({
             variant='contained'
             sx={{ margin: '25px 18px 32px 18px' }}
             fullWidth
-            onClick={() => {
+            disabled={userAddress !== owner}
+            onClick={userAddress !== owner ? undefined : () => {
               setCurrentItem({
                 tokenId,
                 owner,
diff --git a/app/src/components/TokensList.js b/app/src/components/TokensList.js
@@ -10,58 +10,6 @@ const onlyMyTokens = (accountId) => (tokens) => {
   const account = accountId.toLowerCase();
   return tokens.filter((token) => token.owner.toLowerCase().includes(account));
 };
-/*
-const tokens = [
-  {
-    tokenId: 0,
-    owner: '0x0000000000000000000000000000000000000000',
-    image:
-      'https://cs12.pikabu.ru/post_img/big/2022/03/02/12/1646253355177860649.jpg',
-    chainId: 534353,
-    skill: 0,
-  },
-  {
-    tokenId: 5,
-    owner: '0x0000000000000000000000000000000000000000',
-    image:
-      'https://cs12.pikabu.ru/post_img/big/2022/03/02/12/1646253355177860649.jpg',
-    chainId: 534353,
-    skill: 0,
-  },
-  {
-    tokenId: 6,
-    owner: '0x0000000000000000000000000000000000000000',
-    image:
-      'https://cs12.pikabu.ru/post_img/big/2022/03/02/12/1646253355177860649.jpg',
-    chainId: 534353,
-    skill: 0,
-  },
-  {
-    tokenId: 10,
-    owner: '0x3A93BF9fCD41564E2213f021eF5A7C03907ECa77',
-    image:
-      'https://cs12.pikabu.ru/post_img/big/2022/03/02/12/1646253355177860649.jpg',
-    chainId: 5,
-    skill: 0,
-  },
-  {
-    tokenId: 1,
-    owner: '0x0000000000000000000000000000000000000000',
-    image:
-      'https://cs12.pikabu.ru/post_img/big/2022/03/02/12/1646253355177860649.jpg',
-    chainId: 1442,
-    skill: 10,
-  },
-  {
-    tokenId: 2,
-    owner: '0x0000000000000000000000000000000000000000',
-    image:
-      'https://cs12.pikabu.ru/post_img/big/2022/03/02/12/1646253355177860649.jpg',
-    chainId: 5,
-    skill: 999,
-  },
-];
-*/
 
 function TokensList({ chainId, switchNetwork, userAddress }) {
   const [currentItem, setCurrentItem] = useState({
@@ -73,8 +21,7 @@ function TokensList({ chainId, switchNetwork, userAddress }) {
     image: '',
   });
   const { isOpen, toggle } = useModal();
-  // @todo: add error handling of loading
-  const { asyncTokens, asyncTokensError, asyncTokensLoading } = useTokens();
+  const { asyncTokens, asyncTokensLoading } = useTokens();
   const [filters, setFilters] = React.useState([]);
   const filteredTokens = React.useMemo(() => {
     if (!asyncTokens) return null;
@@ -114,7 +61,7 @@ function TokensList({ chainId, switchNetwork, userAddress }) {
               image,
               chain_id,
               skill,
-              json_metadata /* @TODO: add metadata handling */,
+              json_metadata,
             }) => (
               <Grid item key={token_id}>
                 <TokenCard
@@ -127,6 +74,7 @@ function TokensList({ chainId, switchNetwork, userAddress }) {
                   setCurrentItem={setCurrentItem}
                   toggleModal={toggle}
                   hasButton
+                  userAddress={userAddress}
                 />
               </Grid>
             )
@@ -137,6 +85,7 @@ function TokensList({ chainId, switchNetwork, userAddress }) {
           currentItem={currentItem}
           chainId={chainId}
           switchNetwork={switchNetwork}
+          userAddress={userAddress}
         />
       </Grid>
     </Box>
