improve ui

xdevguild · Feb 17, 2024 · b056211 · b056211
1 parent ffe60c0
commit b056211
Show file tree

Hide file tree

Showing 13 changed files with 1,057 additions and 710 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+### [9.5.1](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v9.5.1) (2024-02-17)
+- improve UI
+- update dependencies
+
 ### [9.5.0](https://github.com/xdevguild/nextjs-dapp-template/releases/tag/v9.5.0) (2024-01-11)
 - add ESDT transfer demo
 - update useElven and dependencies

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/app/layout.tsx b/app/layout.tsx
@@ -83,38 +83,22 @@ export default function RootLayout({
                 MultiversX NextJS Dapp Template (v{`${packageJson.version}`})
               </div>
               <div className="text-xs font-light">
-                All for free. Please support the project. Give it credit and
-                tell the world about it. Attribution is not required but
-                welcomed in the form of a backlink.
+                Support Our Project: While attribution isn&apos;t mandatory, we
+                deeply appreciate any form of recognition.
               </div>
               <div className="flex flex-row content-center text-xs font-bold mt-4">
                 <a href="https://github.com/xdevguild" target="_blank">
                   {'xDevGuild'}
                 </a>
                 <span className="font-thin mx-2"> | </span>
-                <a href="https://www.elven.tools" target="_blank">
-                  {'Elven Tools'}
-                </a>
-                <span className="font-thin mx-2"> | </span>
-                <a href="https://www.elvenjs.com" target="_blank">
-                  {'Elven.js'}
-                </a>
-                <span className="font-thin mx-2"> | </span>
-                <a href="https://www.useElven.com" target="_blank">
-                  {'useElven'}
+                <a href="https://www.elven.family" target="_blank">
+                  {'Elven Family tools'}
                 </a>
                 <span className="font-thin mx-2"> | </span>
                 <a href="https://www.buildo.dev" target="_blank">
                   {'Buildo.dev'}
                 </a>
                 <span className="font-thin mx-2"> | </span>
-                <a
-                  href="https://github.com/xdevguild/buildo-begins"
-                  target="_blank"
-                >
-                  {'Buildo Begins'}
-                </a>
-                <span className="font-thin mx-2"> | </span>
                 <a href="https://www.julian.io" target="_blank">
                   {'julian.io'}
                 </a>

diff --git a/components/demo/sign-message-demo.tsx b/components/demo/sign-message-demo.tsx
@@ -22,7 +22,7 @@ export const SimpleSignMessageDemo = () => {
           <strong>Elven Family is awesome!</strong>{' '}
         </div>
         {signature && (
-          <div className="lg:max-w-lg w-full break-words white">
+          <div className="lg:max-w-[250px] xl:max-w-[330px] w-full break-words white">
             Your signature for that message:
             <br />
             <strong>{signature}</strong>

diff --git a/components/demo/simple-deploy-sc-demo.tsx b/components/demo/simple-deploy-sc-demo.tsx
@@ -9,6 +9,7 @@ import {
 import { Card, CardContent, CardFooter } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { ConnectWalletInfo } from '@/components/demo/connect-wallet-info';
+import { shortenHash } from '@/lib/shorten-hash';
 
 export const SimpleDeployScDemo = ({
   cb,
@@ -41,14 +42,24 @@ export const SimpleDeployScDemo = ({
           <div className="lg:max-w-lg w-full break-words white">
             Your deployed smart contract address:
             <br />
-            <strong>
+            <a
+              href={`${explorerAddress}/accounts/${scAddress}`}
+              target="_blank"
+              className="font-bold underline"
+            >
+              {shortenHash(scAddress, 12)}
+            </a>
+            <br />
+            <small>
+              To interact with it, check the{' '}
               <a
-                href={`${explorerAddress}/accounts/${scAddress}`}
+                href="https://piggy-bank-dapp.vercel.app/"
                 target="_blank"
+                className="underline"
               >
-                {scAddress}
+                Piggy Bank Dapp
               </a>
-            </strong>
+            </small>
           </div>
         )}
       </CardContent>

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-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',