fix: UI and wallets improvements (#33)

FuelLabs · Apr 4, 2024 · 7fffdc2 · 7fffdc2
1 parent a7d59c5
commit 7fffdc2
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 36 deletions.
diff --git a/examples/react-app/src/components/contract-link.tsx b/examples/react-app/src/components/contract-link.tsx
@@ -0,0 +1,14 @@
+import { COUNTER_CONTRACT_ID } from './counter';
+
+export default function ContractLink() {
+  return (
+    <a
+      href={`https://app.fuel.network/contract/${COUNTER_CONTRACT_ID}`}
+      target="_blank"
+      rel="noopener noreferrer"
+      className="underline text-end text-sm text-zinc-300/70"
+    >
+      See Contract
+    </a>
+  );
+}
diff --git a/examples/react-app/src/components/counter.tsx b/examples/react-app/src/components/counter.tsx
@@ -5,6 +5,7 @@ import { useWallet } from '../hooks/useWallet';
 import type { CustomError } from '../utils/customError';
 import { DEFAULT_AMOUNT } from './balance';
 import Button from './button';
+import ContractLink from './contract-link';
 import Feature from './feature';
 import Notification, { type Props as NotificationProps } from './notification';
 
@@ -32,31 +33,26 @@ export default function ContractCounter() {
   }, [wallet]);
 
   return (
-    <Feature title="Counter Contract">
-      <code>{counter}</code>
-      <div className="space-x-2">
-        <Button
-          color="secondary"
-          onClick={() =>
-            alert(`The counter contract is deployed at ${COUNTER_CONTRACT_ID}`)
-          }
-        >
-          See Address
-        </Button>
-        <Button
-          onClick={increment}
-          disabled={isLoading || !hasBalance}
-          loading={isLoading}
-          loadingText="Incrementing..."
-        >
-          Increment
-        </Button>
-        <Notification
-          setOpen={() => setToast({ ...toast, open: false })}
-          {...toast}
-        />
-      </div>
-    </Feature>
+    <div>
+      <Feature title="Counter Contract">
+        <code>{counter}</code>
+        <div className="space-x-2">
+          <Button
+            onClick={increment}
+            disabled={isLoading || !hasBalance}
+            loading={isLoading}
+            loadingText="Incrementing..."
+          >
+            Increment
+          </Button>
+          <Notification
+            setOpen={() => setToast({ ...toast, open: false })}
+            {...toast}
+          />
+        </div>
+      </Feature>
+      <ContractLink />
+    </div>
   );
 
   async function increment() {

diff --git a/examples/react-app/src/components/transfer.tsx b/examples/react-app/src/components/transfer.tsx
@@ -35,15 +35,20 @@ export default function Transfer() {
         },
       );
 
-      await resp?.waitForResult();
+      const result = await resp?.waitForResult();
 
       setToast({
         open: true,
         type: 'success',
         children: (
           <p>
             Transfer successful! View it on the{' '}
-            <a href="#link-to-block-explorer" className="underline">
+            <a
+              href={`https://app.fuel.network/tx/${result?.id}`}
+              className="underline"
+              target="_blank"
+              rel="noreferrer"
+            >
               block explorer
             </a>
           </p>

diff --git a/examples/react-app/src/hooks/useWallet.ts b/examples/react-app/src/hooks/useWallet.ts
@@ -13,6 +13,11 @@ interface ICurrentConnector {
   title: string;
 }
 
+const DEFAULT_CONNECTOR: ICurrentConnector = {
+  logo: '',
+  title: 'Wallet Demo',
+};
+
 export const useWallet = () => {
   const { fuel } = useFuel();
   const { connect, isConnecting } = useConnectUI();
@@ -32,24 +37,22 @@ export const useWallet = () => {
     isFetching: isFetchingBalance,
   } = useBalance({ address });
 
-  const [currentConnector, setCurrentConnector] = useState<ICurrentConnector>({
-    logo: '',
-    title: 'Fuel Wallet',
-  });
+  const [currentConnector, setCurrentConnector] =
+    useState<ICurrentConnector>(DEFAULT_CONNECTOR);
 
   useEffect(() => {
     refetchConnected();
   }, [refetchConnected]);
 
   useEffect(() => {
     if (!isConnected) {
-      setCurrentConnector({ logo: '', title: 'Fuel Wallet' });
+      setCurrentConnector(DEFAULT_CONNECTOR);
       return;
     }
 
     const currentConnector = fuel.currentConnector();
 
-    const title = currentConnector?.name ?? 'Fuel Wallet';
+    const title = currentConnector?.name ?? DEFAULT_CONNECTOR.title;
 
     const logo =
       currentConnector && typeof currentConnector.metadata?.image === 'object'

diff --git a/packages/evm-connector/src/EvmWalletConnector.ts b/packages/evm-connector/src/EvmWalletConnector.ts
@@ -28,13 +28,13 @@ import { createPredicate, getPredicateAddress } from './utils/predicate';
 import { predicates } from './utils/predicateResources';
 
 export class EVMWalletConnector extends FuelConnector {
-  name = 'EVM wallet connector';
+  name = 'Metamask';
   metadata: ConnectorMetadata = {
     image: METAMASK_ICON,
     install: {
       action: 'Install',
-      description: 'Install a ethereum Wallet to connect to Fuel',
-      link: 'https://ethereum.org/en/wallets/find-wallet/',
+      description: 'Install Metamask Wallet to connect to Fuel',
+      link: 'https://metamask.io/download/',
     },
   };