explorer: display wormhole bridge details (#15833)

* feat: display wormhole bridge details

* fix: add rel noopener noreferrer

* fix: extract eth address properly

* feat: copyable bridge contract address

explorer/src/components/account/TokenAccountSection.tsx

@@ -16,6 +16,7 @@ import { addressLabel } from "utils/tx";
 import { reportError } from "utils/sentry";
 import { useTokenRegistry } from "providers/mints/token-registry";
 import { BigNumber } from "bignumber.js";
+import { Copyable } from "components/common/Copyable";
 
 export function TokenAccountSection({
   account,
@@ -60,6 +61,18 @@ function MintAccountCard({
   const refresh = () => fetchInfo(account.pubkey);
 
   const tokenInfo = tokenRegistry.get(mintAddress);
+
+  let bridgeContractAddress = tokenInfo?.extensions?.address;
+  if (tokenInfo?.extensions?.bridgeContract && !bridgeContractAddress) {
+    const extractEth = tokenInfo.extensions.bridgeContract.match(
+      /0x[a-fA-F0-9]{40,64}/
+    );
+
+    if (extractEth) {
+      bridgeContractAddress = extractEth[0];
+    }
+  }
+
   return (
     <div className="card">
       <div className="card-header">
@@ -130,6 +143,22 @@ function MintAccountCard({
             <td className="text-lg-right">Uninitialized</td>
           </tr>
         )}
+        {tokenInfo?.extensions?.bridgeContract && bridgeContractAddress && (
+          <tr>
+            <td>Wormhole Bridge Contract</td>
+            <td className="text-lg-right">
+              <Copyable text={bridgeContractAddress}>
+                <a
+                  href={tokenInfo.extensions.bridgeContract}
+                  target="_blank"
+                  rel="noreferrer"
+                >
+                  {bridgeContractAddress}
+                </a>
+              </Copyable>
+            </td>
+          </tr>
+        )}
       </TableCardBody>
     </div>
   );