From 28022d05e0ea7b68d05929e56a509d1f0d4ec4dc Mon Sep 17 00:00:00 2001
From: Nelito Junior <ngvjqp@gmail.com>
Date: Wed, 9 Oct 2024 05:10:15 -0300
Subject: [PATCH] feat: add explorer link FE-713 (#364)

---
 examples/react-app/src/components/account.tsx | 50 ++++++++++++-------
 1 file changed, 33 insertions(+), 17 deletions(-)

diff --git a/examples/react-app/src/components/account.tsx b/examples/react-app/src/components/account.tsx
index 6cec4859..f70d8b36 100644
--- a/examples/react-app/src/components/account.tsx
+++ b/examples/react-app/src/components/account.tsx
@@ -1,4 +1,5 @@
 import { useConnect, useDisconnect } from '@fuels/react';
+import { EXPLORER_URL } from '../config';
 import { useWallet } from '../hooks/useWallet';
 import { Copyable } from './Copyable';
 import Button from './button';
@@ -14,6 +15,8 @@ export default function ConnectedAccount({ isSigning }: Props) {
   const { connect } = useConnect();
   const { disconnect } = useDisconnect();
 
+  const explorerAccountUrl = `${EXPLORER_URL}/account/${account}/assets`;
+
   if (!account && isConnected) {
     return (
       <Feature title="Your Fuel Address">
@@ -31,24 +34,37 @@ export default function ConnectedAccount({ isSigning }: Props) {
   if (!account) return null;
 
   return (
-    <Feature title="Your Fuel Address">
-      <div className="flex items-center space-between" style={{ gap: '10px' }}>
-        <code className="block md:hidden">
-          {truncAddressMiddle(account, 4)}
-        </code>
-        <code className="hidden md:block">
-          {truncAddressMiddle(account, 8)}
-        </code>
-        <Copyable value={account} />
-      </div>
-      <Button
-        onClick={() => disconnect()}
-        loadingText="Disconnecting..."
-        disabled={isSigning}
+    <div>
+      <Feature title="Your Fuel Address">
+        <div
+          className="flex items-center space-between"
+          style={{ gap: '10px' }}
+        >
+          <code className="block md:hidden">
+            {truncAddressMiddle(account, 4)}
+          </code>
+          <code className="hidden md:block">
+            {truncAddressMiddle(account, 8)}
+          </code>
+          <Copyable value={account} />
+        </div>
+        <Button
+          onClick={() => disconnect()}
+          loadingText="Disconnecting..."
+          disabled={isSigning}
+        >
+          Disconnect
+        </Button>
+      </Feature>
+      <a
+        href={explorerAccountUrl}
+        target="_blank"
+        className="underline text-end text-sm text-zinc-300/70"
+        rel="noreferrer"
       >
-        Disconnect
-      </Button>
-    </Feature>
+        View on Explorer
+      </a>
+    </div>
   );
 }