NFT bridge updates

components/Modal/ConfirmTeleportModal.tsx

@@ -94,12 +94,12 @@ export const ConfirmTeleportModal = (): JSX.Element => {
   const claimNFT = async () => {
     setIsLoading(true);
     if (ethToProton) {
-      const txPreHash = await claimNfts(
-        tokenContract,
-        tokenIds,
-        library.getSigner()
-      );
       try {
+        const txPreHash = await claimNfts(
+          tokenContract,
+          tokenIds,
+          library.getSigner()
+        );
         await txPreHash.wait();
         addToast('Claimed successfully!', {
           appearance: 'success',
@@ -108,8 +108,6 @@ export const ConfirmTeleportModal = (): JSX.Element => {
       } catch (err) {
         addToast('Claim failed.', { appearance: 'error', autoDismiss: true });
         console.log('claim error', err);
-        setIsLoading(false);
-        return;
       }
     } else {
       const claimbackRes = await protonSDK.claimbackTeleport({
@@ -148,7 +146,7 @@ export const ConfirmTeleportModal = (): JSX.Element => {
           </Section>
           <Description>Are you sure you will teleport NFTs?</Description>
           <Section>
-            <HalfButton onClick={claimNFT}>Claim</HalfButton>
+            <HalfButton color="#808080" onClick={claimNFT}>Cancel Teleport</HalfButton>
             <HalfButton onClick={teleportNFT}>Teleport</HalfButton>
           </Section>
         </ModalBox>

components/NftBridge/Nft.tsx

@@ -70,7 +70,7 @@ export const ProtonNft = (props: ProtonNftProps): JSX.Element => {
         }>
         <Image
           src={getImageUrl(
-            props.data.data ? (props.data.data as NFT_ATTR).image : ''
+            (props.data.data as NFT_ATTR).image || (props.data.data as NFT_ATTR).img || ''
           )}
           width="50"
           height="50"

components/NftBridge/NftBridge.styled.ts

@@ -49,7 +49,7 @@ export const Content = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  background-color: #fefefe;
+  // background-color: #fefefe;
   margin: 0 auto 20px;
 `;
 

components/NftBridge/TrackingTables.tsx

@@ -16,6 +16,7 @@ import {
   TableDataCell,
 } from './NftBridge.styled';
 import TableContentWrapper from '../TableContentWraper';
+import protonSDK from '../../services/proton';
 
 interface Props {
   selectedTab: NftType;
@@ -75,10 +76,10 @@ export const TrackingTables = (props: Props): JSX.Element => {
         library.getSigner()
       );
       await txPreHash.wait();
-      const temp = depositList.filter(
+      const list = depositList.filter(
         (el) => el.contract != contract && el.tokenId.toHexString() != tokenId
       );
-      setDepositList(temp);
+      setDepositList(list);
       addToast('Claimed successfully!', {
         appearance: 'success',
         autoDismiss: true,
@@ -93,6 +94,28 @@ export const TrackingTables = (props: Props): JSX.Element => {
     }
   };
 
+  const claimProton = async (assetId: string) => {
+    const claimbackRes = await protonSDK.claimbackTeleport({
+      asset_id: assetId,
+    });
+
+    if (!claimbackRes.success) {
+      addToast('Claim back failed.', {
+        appearance: 'error',
+        autoDismiss: true,
+      });
+      setIsLoading(false);
+      return;
+    } else {
+      const list = mintedList.filter(_ => _.asset_id != assetId);
+      setMintedList(list);
+      addToast('Claimed successfully!', {
+        appearance: 'success',
+        autoDismiss: true,
+      });
+    }
+  };
+
   return (
     <>
       {isLoading && <Spinner></Spinner>}
@@ -106,7 +129,7 @@ export const TrackingTables = (props: Props): JSX.Element => {
                 <TableHeaderCell width={25}>OWNER</TableHeaderCell>
                 <TableHeaderCell width={25}>COLLECTION</TableHeaderCell>
                 <TableHeaderCell width={25}>TOKEN ID</TableHeaderCell>
-                <TableHeaderCell width={20}>ACTIONS</TableHeaderCell>
+                <TableHeaderCell width={20}>ACTION</TableHeaderCell>
               </TableHeaderRow>
             </thead>
             <tbody>
@@ -134,7 +157,7 @@ export const TrackingTables = (props: Props): JSX.Element => {
                           onClick={() =>
                             claimEth(el.collection, el.tokenId.toHexString())
                           }>
-                          Claim
+                          Back to owner
                         </Button>
                       </TableDataCell>
                     </TableRow>
@@ -153,6 +176,7 @@ export const TrackingTables = (props: Props): JSX.Element => {
                 <TableHeaderCell width={5}>#</TableHeaderCell>
                 <TableHeaderCell width={25}>Asset ID</TableHeaderCell>
                 <TableHeaderCell width={25}>Owner</TableHeaderCell>
+                <TableHeaderCell ></TableHeaderCell>
               </TableHeaderRow>
             </thead>
             <tbody>
@@ -166,6 +190,15 @@ export const TrackingTables = (props: Props): JSX.Element => {
                       <TableDataCell>{mintedList.length - idx}</TableDataCell>
                       <TableDataCell>{el.asset_id}</TableDataCell>
                       <TableDataCell>{el.owner}</TableDataCell>
+                      <TableDataCell>
+                        <Button
+                          smallSize={true}
+                          onClick={() =>
+                            claimProton(el.asset_id)
+                          }>
+                          Claim
+                        </Button>
+                      </TableDataCell>
                     </TableRow>
                   ))}
               </TableContentWrapper>

components/NftBridge/index.tsx

@@ -502,12 +502,12 @@ const NftBridge = (): JSX.Element => {
             <span style={{ order: 1 }}>From</span>
             <ChainBtn isFrom={transDir === TRANSFER_DIR.ETH_TO_PROTON}>
               <Image
-                width="10px"
+                width="15px"
                 height="15px"
                 alt="swap_button"
-                src="/ethereum.png"
+                src="/polygon-matic-logo.png"
               />
-              <span>Ethereum</span>
+              <span>Polygon</span>
             </ChainBtn>
 
             <SwitchIcon
@@ -600,12 +600,12 @@ const NftBridge = (): JSX.Element => {
                         onClick={() => setNftType(NftType.ATOMIC)}>
                         Atomic Assets
                       </Tab>
-                      <Tab
+                      {/* <Tab
                         selected={nftType === NftType.MINTED_LIST}
                         onClick={() => setNftType(NftType.MINTED_LIST)}
                         align="right">
                         Minted List
-                      </Tab>
+                      </Tab> */}
                     </>
                   )}
                 </Tabs>
@@ -677,57 +677,6 @@ const NftBridge = (): JSX.Element => {
                       <PlusIcon>+</PlusIcon>
                       <span style={{ marginLeft: 10 }}>Add NFT</span>
                     </AddNFTBtn>
-
-                    {/* <InfoBox>
-                      <div
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          margin: '10px 0',
-                        }}>
-                        <span>Fee Balance: &nbsp;</span>
-                        <span
-                          style={
-                            checkFeesBalance() ? {} : { color: '#F94E6C' }
-                          }>
-                          {displayNumberAsAmount(
-                            feesBalance?.balance - feesBalance?.reserved,
-                            4,
-                            true
-                          )}{' '}
-                          XPR
-                        </span>
-                      </div>
-                      <div
-                        style={{
-                          display: 'flex',
-                          alignItems: 'center',
-                          margin: '10px 0',
-                        }}>
-                        <span>Fee: &nbsp;</span>
-                        {transDir == TRANSFER_DIR.ETH_TO_PROTON && (
-                          <span>
-                            {displayNumberAsAmount(
-                              filteredFees?.port_in_fee,
-                              4,
-                              true
-                            )}{' '}
-                            XPR
-                          </span>
-                        )}
-                        {transDir == TRANSFER_DIR.PROTON_TO_ETH && (
-                          <span>
-                            {displayNumberAsAmount(
-                              filteredFees?.port_out_fee,
-                              4,
-                              true
-                            )}{' '}
-                            XPR
-                          </span>
-                        )}
-                      </div>
-                    </InfoBox> */}
-
                     <TransferBtn onClick={handleTransfer}>
                       <span>Transfer</span>
                     </TransferBtn>

services/ethereum.ts

@@ -47,6 +47,7 @@ export type ETH_ASSET = {
 export type NFT_ATTR = {
   name: string;
   image: string;
+  img?: string;
   description: string;
 };
 
@@ -79,7 +80,7 @@ export const getNfts = async (owner: string): Promise<ETH_ASSET[]> => {
     } while (page);
 
     const reqs = ownedNfts.map(async (nft) => {
-      let attributes = {
+      let attributes: NFT_ATTR = {
         name: nft.metadata.name,
         description: nft.metadata.description,
         image: nft.metadata.image,
@@ -221,11 +222,9 @@ export const getDepositList = async (
     const res = await nftBridgeContract.tokensByUser(owner);
     return res;
   } catch (e) {
-    const message = e.message[0].toUpperCase() + e.message.slice(1);
-    return {
-      success: false,
-      error: message || 'An error has occurred while trying to teleport.',
-    };
+    console.log(e)
+    // const message = e.message[0].toUpperCase() + e.message.slice(1);
+    return [];
   }
 };
 
@@ -243,10 +242,7 @@ export const approvedNFT = async (
     const res = await nftBridgeContract.approvedNFT(contract);
     return res;
   } catch (e) {
-    const message = e.message[0].toUpperCase() + e.message.slice(1);
-    return {
-      success: false,
-      error: message || 'An error has occurred while calling approvedNFT.',
-    };
+    console.log(e)
+    return false;
   }
 };