Merge pull request #246 from CityOfZion/CU-86a5q81n8

CU-86a5q81n8-NEON3 - Add list validation in based Ethereum chains tha…
CityOfZion · Dec 2, 2024 · 5ca274b · 5ca274b
2 parents ef55a32 + 302d8c5
commit 5ca274b
Show file tree

Hide file tree

Showing 5 changed files with 132 additions and 62 deletions.
diff --git a/src/renderer/src/components/NftGallery.tsx b/src/renderer/src/components/NftGallery.tsx
@@ -26,17 +26,27 @@ export const NftGallery = ({ account, nfts }: TProps) => {
     [nfts]
   )
 
-  const handleClick = (nft: NftResponse) => {
+  const getExplorerUrl = (nft: NftResponse) => {
     const service = bsAggregator.blockchainServicesByName[account.blockchain]
+
     if (!hasExplorerService(service)) return
 
-    window.open(
-      service.explorerService.buildNftUrl({
+    let explorerUrl
+
+    try {
+      explorerUrl = service.explorerService.buildNftUrl({
         contractHash: nft.contractHash,
         tokenId: nft.id,
-      }),
-      '_blank'
-    )
+      })
+    } catch (error) {
+      console.error(error)
+    }
+
+    return explorerUrl
+  }
+
+  const handleClick = (explorerUrl: string) => {
+    window.open(explorerUrl, '_blank')
   }
 
   return (
@@ -50,30 +60,36 @@ export const NftGallery = ({ account, nfts }: TProps) => {
           {children}
         </div>
       )}
-      renderPhoto={({ photo, renderDefaultPhoto }) => (
-        <div
-          className="p-2.5 cursor-pointer bg-gray-300/15 flex flex-col rounded-md hover:bg-gray-300/30 transition-colors gap-2"
-          onClick={handleClick.bind(null, photo.nft)}
-        >
-          <div className="rounded overflow-hidden bg-gray-300/30">{renderDefaultPhoto({ wrapped: true })}</div>
+      renderPhoto={({ photo, renderDefaultPhoto }) => {
+        const explorerUrl = getExplorerUrl(photo.nft)
 
-          <div className="flex gap-2.5 items-center">
-            <BlockchainIcon blockchain={account.blockchain} type="gray" className="opacity-60 w-3 h-3 ml-0.5" />
+        return (
+          <div
+            className={StyleHelper.mergeStyles('p-2.5 bg-gray-300/15 flex flex-col rounded-md gap-2', {
+              'cursor-pointer hover:bg-gray-300/30 transition-colors': !!explorerUrl,
+            })}
+            onClick={explorerUrl ? handleClick.bind(null, explorerUrl) : undefined}
+          >
+            <div className="rounded overflow-hidden bg-gray-300/30">{renderDefaultPhoto({ wrapped: true })}</div>
 
-            <span className="text-xs capitalize truncate w-20 2xl:w-36">{photo.title}</span>
-          </div>
+            <div className="flex gap-2.5 items-center">
+              <BlockchainIcon blockchain={account.blockchain} type="gray" className="opacity-60 w-3 h-3 ml-0.5" />
+
+              <span className="text-xs capitalize truncate w-20 2xl:w-36">{photo.title}</span>
+            </div>
 
-          <div className="flex gap-2 items-center">
-            {photo.nft.collectionImage && (
-              <div className="min-w-[1rem] w-[1rem] min-h-[1rem] h-[1rem] bg-gray-300/30 rounded-full overflow-hidden">
-                <img className="w-full h-full object-cover" src={photo.nft.collectionImage} />
-              </div>
-            )}
+            <div className="flex gap-2 items-center">
+              {photo.nft.collectionImage && (
+                <div className="min-w-[1rem] w-[1rem] min-h-[1rem] h-[1rem] bg-gray-300/30 rounded-full overflow-hidden">
+                  <img className="w-full h-full object-cover" src={photo.nft.collectionImage} />
+                </div>
+              )}
 
-            <span className="text-xs capitalize text-blue truncate w-20 2xl:w-32">{photo.nft.id}</span>
+              <span className="text-xs capitalize text-blue truncate w-20 2xl:w-32">{photo.nft.id}</span>
+            </div>
           </div>
-        </div>
-      )}
+        )
+      }}
     />
   )
 }
diff --git a/src/renderer/src/components/NftList.tsx b/src/renderer/src/components/NftList.tsx
@@ -31,14 +31,10 @@ export const NftList = ({ account, nfts }: TProps) => {
 
   return (
     <ul className="flex flex-col gap-1 min-w-0">
-      {nfts.map(nft => (
-        <li key={`${nft.contractHash}-${nft.id}`} className="w-full">
-          <a
-            href={getHref(nft)}
-            target="_blank"
-            className="flex p-2.5 gap-5 bg-gray-700/60 rounded-md text-sm items-center cursor-pointer hover:bg-gray-300/30 w-full transition-colors min-w-0"
-            rel="noreferrer"
-          >
+      {nfts.map(nft => {
+        const link = getHref(nft)
+        const content = (
+          <>
             <div className="min-w-[5rem] w-[5rem] h-[3.5rem] mi-h-[3.5rem] rounded bg-gray-300/30 overflow-hidden">
               <img className="w-full h-full object-cover" src={nft.image} />
             </div>
@@ -69,11 +65,30 @@ export const NftList = ({ account, nfts }: TProps) => {
                 </div>
               </div>
 
-              <TbChevronRight className="w-6 h-6 text-gray-300" />
+              {link && <TbChevronRight className="w-6 h-6 text-gray-300" />}
             </div>
-          </a>
-        </li>
-      ))}
+          </>
+        )
+
+        return (
+          <li key={`${nft.contractHash}-${nft.id}`} className="w-full">
+            {link ? (
+              <a
+                href={link}
+                target="_blank"
+                className="flex p-2.5 gap-5 bg-gray-700/60 rounded-md text-sm items-center cursor-pointer hover:bg-gray-300/30 w-full transition-colors min-w-0"
+                rel="noreferrer"
+              >
+                {content}
+              </a>
+            ) : (
+              <div className="flex p-2.5 gap-5 bg-gray-700/60 rounded-md text-sm items-center w-full min-w-0">
+                {content}
+              </div>
+            )}
+          </li>
+        )
+      })}
     </ul>
   )
 }
diff --git a/src/renderer/src/components/TransactionsTable.tsx b/src/renderer/src/components/TransactionsTable.tsx
@@ -95,6 +95,7 @@ export const TransactionsTable = forwardRef<HTMLDivElement, TTransactionListProp
         columnHelper.display({
           id: 'actions',
           cell: info => {
+            const explorerUrl = getExplorerUrl(info.row.original)
             const swapRecord = swapRecords.find(
               swapRecord =>
                 swapRecord.txFrom &&
@@ -115,7 +116,10 @@ export const TransactionsTable = forwardRef<HTMLDivElement, TTransactionListProp
                     }}
                   />
                 )}
-                <TbChevronRight className="w-4 h-4 my-2 text-gray-300" />
+                <TbChevronRight
+                  style={{ visibility: explorerUrl ? 'visible' : 'hidden' }}
+                  className="w-4 h-4 my-2 text-gray-300"
+                />
               </div>
             )
           },
@@ -139,12 +143,26 @@ export const TransactionsTable = forwardRef<HTMLDivElement, TTransactionListProp
       getCoreRowModel: getCoreRowModel(),
     })
 
-    const handleClick = (row: TUseTransactionsTransfer) => {
+    const getExplorerUrl = (row: TUseTransactionsTransfer) => {
       if (row.isPending) return
+
       const service = bsAggregator.blockchainServicesByName[row.account.blockchain]
+
       if (!hasExplorerService(service)) return
 
-      window.open(service.explorerService.buildTransactionUrl(row.hash))
+      let explorerUrl
+
+      try {
+        explorerUrl = service.explorerService.buildTransactionUrl(row.hash)
+      } catch (error) {
+        console.error(error)
+      }
+
+      return explorerUrl
+    }
+
+    const openExplorerUrl = (explorerUrl: string) => {
+      window.open(explorerUrl)
     }
 
     useImperativeHandle(ref, () => scrollRef.current!, [scrollRef])
@@ -182,17 +200,22 @@ export const TransactionsTable = forwardRef<HTMLDivElement, TTransactionListProp
                   hoverable={!row.original.isPending}
                   className={StyleHelper.mergeStyles('truncate', { 'animate-pulse': row.original.isPending })}
                 >
-                  {row.getVisibleCells().map(cell => (
-                    <Table.Cell
-                      className={StyleHelper.mergeStyles('truncate cursor-pointer', {
-                        'cursor-not-allowed': row.original.isPending,
-                      })}
-                      key={cell.id}
-                      onClick={handleClick.bind(null, row.original)}
-                    >
-                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                    </Table.Cell>
-                  ))}
+                  {row.getVisibleCells().map(cell => {
+                    const explorerUrl = getExplorerUrl(row.original)
+
+                    return (
+                      <Table.Cell
+                        className={StyleHelper.mergeStyles('truncate ', {
+                          'cursor-pointer': !!explorerUrl && !row.original.isPending,
+                          'cursor-not-allowed': row.original.isPending,
+                        })}
+                        key={cell.id}
+                        onClick={explorerUrl ? openExplorerUrl.bind(null, explorerUrl) : undefined}
+                      >
+                        {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                      </Table.Cell>
+                    )
+                  })}
                 </Table.BodyRow>
               ))}
             </Table.Body>

diff --git a/...rer/src/routes/modals/DappPermission/Neo3/ContractInvocationDappPermission/Invocation.tsx b/...rer/src/routes/modals/DappPermission/Neo3/ContractInvocationDappPermission/Invocation.tsx
@@ -21,12 +21,19 @@ export const Invocation = ({ invocation, session, blockchain }: TProps) => {
   const { data, isLoading } = useContract({ blockchain, hash: invocation.scriptHash })
   const { modalNavigateWrapper } = useModalNavigate()
   const { t } = useTranslation('modals', { keyPrefix: 'dappPermission.requests.neo3.contractInvocation' })
+  const service = bsAggregator.blockchainServicesByName[blockchain]
+  let explorerUrl
 
-  const handleHashClick = () => {
-    const service = bsAggregator.blockchainServicesByName[blockchain]
-    if (!hasExplorerService(service)) return
+  if (hasExplorerService(service)) {
+    try {
+      explorerUrl = service.explorerService.buildContractUrl(invocation.scriptHash)
+    } catch (error) {
+      console.error(error)
+    }
+  }
 
-    window.open(service.explorerService.buildContractUrl(invocation.scriptHash), '_blank')
+  const handleHashClick = () => {
+    window.open(explorerUrl, '_blank')
   }
 
   const showAmount =
@@ -66,7 +73,7 @@ export const Invocation = ({ invocation, session, blockchain }: TProps) => {
 
         <div className="flex justify-between pr-4 pl-5 bg-gray-700/60 py-2.5 rounded min-w-0 gap-3">
           <p className="truncate">{invocation.scriptHash}</p>
-          <IconButton icon={<MdLaunch className="text-neon" />} compacted onClick={handleHashClick} />
+          {explorerUrl && <IconButton icon={<MdLaunch className="text-neon" />} compacted onClick={handleHashClick} />}
         </div>
       </div>
       {showAmount && (

diff --git a/src/renderer/src/routes/modals/DappPermissionContractDetails/index.tsx b/src/renderer/src/routes/modals/DappPermissionContractDetails/index.tsx
@@ -92,8 +92,17 @@ export const DappPermissionContractDetailsModal = () => {
   const { data, isLoading } = useContract({ blockchain, hash })
   const { modalNavigate } = useModalNavigate()
   const { t } = useTranslation('modals', { keyPrefix: 'dappPermissionContractDetails' })
+  const service = bsAggregator.blockchainServicesByName[blockchain]
+  let explorerUrl
+
+  if (hasExplorerService(service)) {
+    try {
+      explorerUrl = service.explorerService.buildContractUrl(hash)
+    } catch (error) {
+      console.error(error)
+    }
+  }
 
-  const methodsInfo = data?.methods.find(method => method.name === operation)
   if (!methodsInfo) {
     ToastHelper.error({ message: t('methodNotFoundError') })
     modalNavigate(-1)
@@ -110,10 +119,7 @@ export const DappPermissionContractDetailsModal = () => {
   })
 
   const handleHashClick = () => {
-    const service = bsAggregator.blockchainServicesByName[blockchain]
-    if (!hasExplorerService(service)) return
-
-    window.open(service.explorerService.buildContractUrl(hash), '_blank')
+    window.open(explorerUrl, '_blank')
   }
 
   return (
@@ -147,7 +153,10 @@ export const DappPermissionContractDetailsModal = () => {
 
                   <div className="flex justify-between pr-4 pl-5 bg-gray-700/60 py-2.5 rounded min-w-0 gap-3">
                     <p className="truncate">{hash}</p>
-                    <IconButton icon={<MdLaunch className="text-neon" />} compacted onClick={handleHashClick} />
+
+                    {explorerUrl && (
+                      <IconButton icon={<MdLaunch className="text-neon" />} compacted onClick={handleHashClick} />
+                    )}
                   </div>
                 </div>
               </div>