updates and ui improvements

xdevguild · Mar 2, 2024 · 36ab96f · 36ab96f
1 parent 1b30386
commit 36ab96f
Show file tree

Hide file tree

Showing 10 changed files with 1,492 additions and 1,001 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### [1.0.2](https://github.com/xdevguild/piggy-bank-dapp/releases/tag/v1.0.2) (2024-02-28)
+- update dependencies
+- ui improvements
+
 ### [1.0.1](https://github.com/xdevguild/piggy-bank-dapp/releases/tag/v1.0.1) (2023-12-29)
 - fix a bug - wrong smart contract was shown after deployment
 

diff --git a/app/globals.css b/app/globals.css
@@ -52,6 +52,7 @@
 @layer base {
   * {
     @apply border-border;
+    scrollbar-width: thin;
   }
   body {
     @apply bg-background text-foreground;

diff --git a/components/elven-ui/ledger-accounts-list.tsx b/components/elven-ui/ledger-accounts-list.tsx
@@ -134,7 +134,7 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
 
   if (error) {
     return (
-      <div className="text-center ml-auto mr-auto mt-6">
+      <div className="text-center m-auto mt-6">
         <div>{error}</div>
         <Button className="mt-4" onClick={handleRefresh}>
           Refresh
@@ -145,7 +145,7 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
 
   if (chosenAddress) {
     return (
-      <div className="flex flex-col justify-center items-center mt-6 break-all">
+      <div className="flex flex-col justify-center items-center mt-6 break-all w-full sm:w-3/4 m-auto">
         <Spinner />
         <div className="mt-3">Confirm on the Ledger device:</div>
         <div className="mt-3 break-words text-center">
@@ -154,7 +154,7 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
         {loginToken && (
           <div className="mt-3">
             <div className="font-bold text-center">Login token:</div>
-            <div className="break-words">{loginToken}</div>
+            <div className="break-words text-center">{loginToken}</div>
           </div>
         )}
       </div>
@@ -164,20 +164,22 @@ export const LedgerAccountsList: FC<LedgerAccountsListProps> = ({
   if (!accounts) return null;
 
   return (
-    <div className="ml-auto mr-auto mt-6">
+    <div className="m-auto mt-6 w-full sm:w-3/4">
       <div className="font-semibold text-center mb-2">Choose address:</div>
       {accounts?.map((account: string, index: number) => (
         <div
           key={account}
-          className="mb-0.5 p-2 cursor-pointer border border-transparent border-solid rounded-md hover:border-dotted hover:border-white transition duration-200"
+          className="flex items-center gap-3 mb-0.5 p-2 cursor-pointer border border-transparent border-solid rounded-md hover:border-dotted hover:bg-accent transition duration-200"
           onClick={login(index, account)}
         >
           <span className="inline-block text-center min-w-4">
-            {index + currentPage.current * ADDRESSES_PER_PAGE}
+            {index + currentPage.current * ADDRESSES_PER_PAGE}:
           </span>
-          :
-          <span className="inline-block ml-4 text-center">
-            {shortenHash(account, 11)}
+          <span className="hidden md:inline-block text-center flex-1">
+            {shortenHash(account, 14)}
+          </span>
+          <span className="inline-block md:hidden text-center flex-1">
+            {shortenHash(account, 10)}
           </span>
         </div>
       ))}

diff --git a/components/elven-ui/login-component.tsx b/components/elven-ui/login-component.tsx
@@ -55,48 +55,50 @@ export const LoginComponent = memo(() => {
         <div className="flex inset-0 z-50 items-center justify-center min-h-[200px]">
           <div>
             {ledgerOrPortalName ? (
-              <>
-                <div className="text-lg">Confirmation required</div>
-                <div className="text-sm">Approve on {ledgerOrPortalName}</div>
-              </>
+              <div className="mb-4">
+                <div className="text-lg text-center">Confirmation required</div>
+                <div className="text-sm text-center">
+                  Approve on {ledgerOrPortalName}
+                </div>
+              </div>
             ) : null}
             <div className="flex items-center justify-center">
-              <Spinner size="40" />
+              <Spinner size="26" />
             </div>
           </div>
         </div>
       ) : (
-        <div className="flex flex-col gap-4 items-center px-8">
+        <div className="flex flex-col gap-3 items-center lg:px-8">
           <Button
-            className="w-full select-none h-auto"
+            className="w-full select-none h-auto py-3"
             variant="outline"
             onClick={handleLogin(LoginMethodsEnum.walletconnect)}
           >
             xPortal Mobile App
           </Button>
           <Button
-            className="w-full select-none h-auto"
+            className="w-full select-none h-auto py-3"
             variant="outline"
             onClick={handleLogin(LoginMethodsEnum.extension)}
           >
             MultiversX Browser Extension
           </Button>
           <Button
-            className="w-full select-none h-auto"
+            className="w-full select-none h-auto py-3"
             variant="outline"
             onClick={handleLogin(LoginMethodsEnum.wallet)}
           >
             MultiversX Web Wallet
           </Button>
           <Button
-            className="w-full select-none h-auto"
+            className="w-full select-none h-auto py-3"
             variant="outline"
             onClick={handleLedgerAccountsList}
           >
             Ledger
           </Button>
           <Button
-            className="w-full select-none h-auto"
+            className="w-full select-none h-auto py-3"
             variant="outline"
             onClick={handleLogin(LoginMethodsEnum.xalias)}
           >

diff --git a/components/elven-ui/login-modal-button.tsx b/components/elven-ui/login-modal-button.tsx
@@ -62,7 +62,7 @@ export const LoginModalButton: FC<LoginModalButtonProps> = ({
         <DialogHeader className="px-6 pt-6">
           <DialogTitle>Connect your wallet</DialogTitle>
         </DialogHeader>
-        <div className="grid gap-4 overflow-y-auto max-h-[calc(100vh-160px)] p-6 pb-8">
+        <div className="grid gap-4 overflow-y-auto max-h-[calc(100vh-160px)] px-6 pb-12 pt-6">
           <LoginComponent />
         </div>
       </DialogContent>

diff --git a/components/elven-ui/walletconnect-pairings.tsx b/components/elven-ui/walletconnect-pairings.tsx
@@ -27,13 +27,13 @@ export const WalletConnectPairings: FC<WalletConnectPairingsProps> = ({
 
   return (
     <div className="flex flex-row justify-center">
-      <div className="w-4/5">
+      <div className="w-full sm:w-4/5">
         {pairings?.length > 0 && (
           <div className="text-base mt-4">Existing pairings:</div>
         )}
         {pairings.map((pairing) => (
           <div
-            className="bg-white dark:bg-zinc-800 my-3 py-2 px-4 pr-8 rounded-md cursor-pointer select-none relative"
+            className="bg-white dark:bg-zinc-800 my-3 py-2 px-4 pr-8 rounded-md cursor-pointer select-none relative border border-solid border-zinc-300 dark:border-0"
             key={pairing.topic}
             onClick={handleLogin(pairing.topic)}
           >

diff --git a/components/elven-ui/walletconnect-qr-code.tsx b/components/elven-ui/walletconnect-qr-code.tsx
@@ -17,7 +17,6 @@ export const WalletConnectQRCode: FunctionComponent<
   useEffect(() => {
     const generateQRCode = async () => {
       if (!uri) {
-        setQrCodeSvg('<div>dupa</div>');
         return;
       }
 
@@ -51,9 +50,9 @@ export const WalletConnectQRCode: FunctionComponent<
       ) : null}
       <div
         className="[&>svg]:rounded-xl [&>svg]:max-w-xs [&>svg]:mx-auto [&>svg]:border [&>svg]:border-solid [&>svg]:border-zinc-300 dark:[&>svg]:border-0"
-        dangerouslySetInnerHTML={{
-          __html: qrCodeSvg,
-        }}
+        {...(qrCodeSvg
+          ? { dangerouslySetInnerHTML: { __html: qrCodeSvg } }
+          : {})}
       />
     </div>
   );

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline:
-          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+          'border border-input border-zinc-300 dark:border-zinc-700 bg-background hover:bg-zinc-100 dark:hover:bg-zinc-900 hover:text-accent-foreground',
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',