improve transaction status ui

Author: juliancwirko

CHANGELOG.md

@@ -1,3 +1,7 @@
+### [0.14.3](https://github.com/xdevguild/buildo.dev/releases/tag/v0.14.3) (2024-07-06)
+- improve transaction status UI
+- update dependencies
+
 ### [0.14.2](https://github.com/xdevguild/buildo.dev/releases/tag/v0.14.2) (2024-06-21)
 - update useElven to support MultiversX Web wallet hub
 - update dependencies

components/elven-ui/ledger-accounts-list.tsx

@@ -1,6 +1,6 @@
 import { FC, useCallback, useState, useEffect, useRef } from 'react';
 import { useRouter } from 'next/navigation';
-import { LoginMethodsEnum, useLoginInfo } from '@useelven/core';
+import { LoginMethodsEnum } from '@useelven/core';
 import { Button } from '@/components/ui/button';
 import { shortenHash } from '@/lib/shorten-hash';
 import { errorParse } from '@/lib/error-parse';
@@ -29,8 +29,6 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
   const [error, setError] = useState<string>();
   const [chosenAddress, setAddress] = useState<string>();
 
-  const { loginToken } = useLoginInfo();
-
   const router = useRouter();
 
   const getAccounts = async (page: number) =>
@@ -151,12 +149,6 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
         <div className="mt-3 break-words text-center">
           <div className="font-bold">Address:</div> {chosenAddress}
         </div>
-        {loginToken && (
-          <div className="mt-3">
-            <div className="text-center font-bold">Login token:</div>
-            <div className="break-words text-center">{loginToken}</div>
-          </div>
-        )}
       </div>
     );
   }

components/header.tsx

@@ -1,10 +1,11 @@
-import { Github, Twitter } from 'lucide-react';
 import { LoginModalButton } from '@/components/elven-ui/login-modal-button';
 import { ModeToggle } from '@/components/mode-toggle';
 import Link from 'next/link';
 import { Separator } from '@/components/ui/separator';
 import { HeaderAddress } from '@/components/header-address';
 import { HeaderChainIndicator } from '@/components/header-chain-indicator';
+import GitHubIcon from '/public/github.svg';
+import XIcon from '/public/x.svg';
 import Image from 'next/image';
 
 export const Header = () => {
@@ -30,10 +31,21 @@ export const Header = () => {
                 target="_blank"
                 title="GitHub"
               >
-                <Github size={25} />
+                <Image
+                  src={GitHubIcon}
+                  width={20}
+                  height={20}
+                  alt="Buildo GitHub"
+                />
               </a>
               <a href="https://x.com/BuildoDev" target="_blank" title="Twitter">
-                <Twitter size={25} />
+                <Image
+                  src={XIcon}
+                  width={18}
+                  height={18}
+                  alt="Buildo X.com"
+                  className="mt-[2px]"
+                />
               </a>
             </div>
             <HeaderAddress />

hooks/use-tx-status.tsx

@@ -1,7 +1,8 @@
-import { useConfig } from '@useelven/core';
+import { useConfig, useLoggingIn, useLoginInfo } from '@useelven/core';
 import { ExternalToast, toast } from 'sonner';
 import { useEffect, useRef } from 'react';
 import { Spinner } from '@/components/ui/spinner';
+import { SquareArrowOutUpRight } from 'lucide-react';
 
 type TxStatusProps = {
   error: string;
@@ -17,33 +18,72 @@ export const useTxStatus = ({
   pending,
 }: TxStatusProps) => {
   const { explorerAddress } = useConfig();
+  const { loginMethod } = useLoginInfo();
+  const { loggedIn } = useLoggingIn();
 
   const toastId = useRef<string | number>();
 
   useEffect(() => {
+    if (!loggedIn) return;
+
+    const getLoginMethodName = () => {
+      switch (loginMethod) {
+        case 'ledger':
+          return 'Ledger wallet';
+        case 'walletconnect':
+          return 'xPortal wallet';
+        case 'extension':
+          return 'Browser extension wallet';
+        case 'xalias':
+          return 'xAlias';
+        case 'hub':
+          return 'Hub';
+        default:
+          return '';
+      }
+    };
     const toasterOptions: ExternalToast = {
       id: toastId?.current,
       position: 'top-right',
       ...(explorerAddress
         ? {
             action: (
               <a
-                className="flex items-center justify-between gap-2 text-xs underline"
+                className="flex flex-1 items-center justify-end gap-2 text-xs underline"
                 href={`${explorerAddress}/transactions/${pendingHash || successHash}`}
               >
-                {pending && <Spinner size={20} />}{' '}
-                <span>Check in the Explorer!</span>
+                {pending ? (
+                  <>
+                    <Spinner size={20} />
+                    {pendingHash && <SquareArrowOutUpRight size={20} />}
+                  </>
+                ) : (
+                  <span>Check in the Explorer!</span>
+                )}
               </a>
             ),
           }
         : {}),
     };
     if (pending) {
-      toastId.current = toast.info('Transaction is pending', toasterOptions);
+      toastId.current = toast.info(
+        !pendingHash
+          ? `Confirm with ${getLoginMethodName()}`
+          : 'Transaction is pending',
+        toasterOptions
+      );
     } else if (successHash) {
       toast.success('Transaction success', toasterOptions);
     } else if (error) {
       toast.error('Transaction error', toasterOptions);
     }
-  }, [successHash, pendingHash, error, explorerAddress, pending]);
+  }, [
+    successHash,
+    pendingHash,
+    error,
+    explorerAddress,
+    pending,
+    loginMethod,
+    loggedIn,
+  ]);
 };