[AMB-161] refactor: app menus navigation and layout

messages/en.json

@@ -105,11 +105,23 @@
   },
   "Index": {
     "accounts": "Accounts",
+    "beta": "Beta - Limit funds and use at your own risk.",
     "contacts": "Contacts",
+    "create-wallet": "Create Wallet",
+    "full-refresh": "Full Refresh",
+    "help": "Help",
+    "home": "Home",
+    "loading": "Loading",
+    "logout": "Logout",
+    "new-wallet": "New Wallet",
+    "refresh": "Refresh",
+    "restore-wallet": "Restore Wallet",
+    "select-wallet": "Select Wallet",
     "settings": "Settings",
     "swaps": "Swaps",
     "transactions": "Transactions",
-    "wallet": "Wallet"
+    "wallet": "Wallet",
+    "wallets": "Wallets"
   },
   "Public": {
     "404": {

messages/es.json

@@ -105,11 +105,23 @@
   },
   "Index": {
     "accounts": "Cuentas",
+    "beta": "Beta - Limita la cantidad de fondos y usa bajo tu propio riesgo.",
     "contacts": "Contactos",
+    "create-wallet": "Crear Billetera",
+    "full-refresh": "Refrescar Balance",
+    "help": "Ayuda",
+    "home": "Casa",
+    "loading": "Cargando",
+    "logout": "Salir",
+    "new-wallet": "Nueva Billetera",
+    "refresh": "Refrescar",
+    "restore-wallet": "Restaurar Billetera",
+    "select-wallet": "Seleccionar Billetera",
     "settings": "Configuración",
     "swaps": "Intercambios",
     "transactions": "Transacciones",
-    "wallet": "Billetera"
+    "wallet": "Billetera",
+    "wallets": "Billeteras"
   },
   "Public": {
     "404": {

src/components/button/LogoutButton.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { LogOut } from 'lucide-react';
+import { useTranslations } from 'next-intl';
 
 import { useLogoutMutation } from '@/graphql/mutations/__generated__/logout.generated';
 import { useKeyStore } from '@/stores/keys';
@@ -12,6 +13,8 @@ import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 import { useToast } from '../ui/use-toast';
 
 export const LogoutButtonWithTooltip = () => {
+  const t = useTranslations('Index');
+
   const { toast } = useToast();
 
   const clearKeys = useKeyStore(s => s.clear);
@@ -35,21 +38,22 @@ export const LogoutButtonWithTooltip = () => {
         <Button
           variant="ghost"
           size="icon"
-          className="mt-auto rounded-lg"
           aria-label="Account"
           onClick={() => logout()}
         >
-          <LogOut className="size-5" />
+          <LogOut className="size-6" />
         </Button>
       </TooltipTrigger>
       <TooltipContent side="right" sideOffset={5}>
-        Logout
+        {t('logout')}
       </TooltipContent>
     </Tooltip>
   );
 };
 
 export const LogoutButton = () => {
+  const t = useTranslations('Index');
+
   const { toast } = useToast();
 
   const clearKeys = useKeyStore(s => s.clear);
@@ -68,14 +72,13 @@ export const LogoutButton = () => {
   });
 
   return (
-    <Button
-      variant="outline"
-      className="mt-auto w-full rounded-lg"
+    <button
+      className="flex w-full items-center space-x-3 px-2 font-semibold"
       aria-label="Logout"
       onClick={() => logout()}
     >
-      <LogOut className="mr-2 h-5 w-5" />
-      Logout
-    </Button>
+      <LogOut size={24} />
+      <p>{t('logout')}</p>
+    </button>
   );
 };

src/components/button/RefreshWallet.tsx

@@ -1,11 +1,12 @@
 'use client';
 
-import { Loader2, RefreshCcw } from 'lucide-react';
+import { RefreshCw, RotateCw } from 'lucide-react';
 import { FC } from 'react';
 
 import { useRefreshWalletMutation } from '@/graphql/mutations/__generated__/refreshWallet.generated';
+import { cn } from '@/utils/cn';
 
-import { CommandItem } from '../ui/command';
+import { DropdownMenuItem } from '../ui/dropdown-menu';
 import { useToast } from '../ui/use-toast';
 
 export const RefreshWallet: FC<{
@@ -26,13 +27,21 @@ export const RefreshWallet: FC<{
   });
 
   return (
-    <CommandItem onSelect={() => refresh()} className="cursor-pointer">
-      {title}
-      {loading ? (
-        <Loader2 className="ml-auto size-4 animate-spin" />
+    <DropdownMenuItem
+      onClick={e => {
+        e.preventDefault();
+        refresh();
+      }}
+    >
+      {fullScan ? (
+        <RefreshCw
+          size={16}
+          className={cn('mr-3', loading && 'animate-spin')}
+        />
       ) : (
-        <RefreshCcw className="ml-auto size-4" />
+        <RotateCw size={16} className={cn('mr-3', loading && 'animate-spin')} />
       )}
-    </CommandItem>
+      {title}
+    </DropdownMenuItem>
   );
 };

src/components/button/VaultButtonV2.tsx

@@ -236,7 +236,8 @@ const VaultPasswordButton: FC<{
   className?: string;
   variant?: Variants;
   size?: 'md';
-}> = ({ lockedTitle, className, variant, size }) => {
+  unstyled?: boolean;
+}> = ({ lockedTitle, className, variant, size, unstyled }) => {
   const t = useTranslations('App.Wallet.Vault');
 
   const keys = useKeyStore(s => s.keys);
@@ -257,17 +258,21 @@ const VaultPasswordButton: FC<{
           type="button"
           variant={variant}
           size={size}
-          className={cn('flex items-center justify-center', className)}
+          className={cn(
+            'flex items-center justify-center space-x-2',
+            className
+          )}
+          unstyled={unstyled}
         >
           {keys ? (
             <>
-              <Unlock className="mr-2" size={16} />
-              {t('unlocked')}
+              <Unlock size={16} />
+              <p>{t('unlocked')}</p>
             </>
           ) : (
             <>
-              <Lock className="mr-2" size={16} />
-              {lockedTitle}
+              <Lock size={16} />
+              <p>{lockedTitle}</p>
             </>
           )}
         </Button>
@@ -309,13 +314,15 @@ const PasskeyVaultButton: FC<{
   size?: 'md';
   protectedSymmetricKey: string;
   passkeyId: string;
+  unstyled?: boolean;
 }> = ({
   lockedTitle,
   className,
   variant,
   size,
   protectedSymmetricKey,
   passkeyId,
+  unstyled,
 }) => {
   const t = useTranslations('App.Wallet.Vault');
 
@@ -427,14 +434,15 @@ const PasskeyVaultButton: FC<{
         type="button"
         variant={variant}
         size={size}
-        className={cn('flex items-center justify-center', className)}
+        className={cn('flex items-center justify-center space-x-2', className)}
         disabled={loading || addLoading}
         onClick={() => {
           setup({ variables: { id: passkeyId } });
         }}
+        unstyled={unstyled}
       >
-        <Lock className="mr-2" size={16} />
-        {lockedTitle}
+        <Lock size={16} />
+        <p>{lockedTitle}</p>
       </Button>
     );
   }
@@ -444,13 +452,14 @@ const PasskeyVaultButton: FC<{
       type="button"
       variant={variant}
       size={size}
-      className={cn('flex items-center justify-center', className)}
+      className={cn('flex items-center justify-center space-x-2', className)}
       onClick={() => {
         clearKeys();
       }}
+      unstyled={unstyled}
     >
-      <Unlock className="mr-2" size={16} />
-      {t('unlocked')}
+      <Unlock size={16} />
+      <p>{t('unlocked')}</p>
     </Button>
   );
 };
@@ -460,7 +469,8 @@ export const VaultButton: FC<{
   className?: string;
   variant?: Variants;
   size?: 'md';
-}> = ({ lockedTitle, className, variant, size }) => {
+  unstyled?: boolean;
+}> = ({ lockedTitle, className, variant, size, unstyled }) => {
   const t = useTranslations();
 
   const lockedTitleFinal = lockedTitle || t('App.Wallet.Vault.locked');
@@ -473,11 +483,12 @@ export const VaultButton: FC<{
         type="button"
         variant={variant}
         size={size}
-        className={cn('flex items-center justify-center', className)}
+        className={cn('flex items-center justify-center space-x-2', className)}
         disabled
+        unstyled={unstyled}
       >
-        <Loader2 className="mr-2 animate-spin" size={16} />
-        {lockedTitleFinal}
+        <Loader2 className="animate-spin" size={16} />
+        <p>{lockedTitleFinal}</p>
       </Button>
     );
   }
@@ -488,11 +499,12 @@ export const VaultButton: FC<{
         type="button"
         variant={variant}
         size={size}
-        className={cn('flex items-center justify-center', className)}
+        className={cn('flex items-center justify-center space-x-2', className)}
         disabled
+        unstyled={unstyled}
       >
-        <X className="mr-2" size={16} />
-        {t('Common.error')}
+        <X size={16} />
+        <p>{t('Common.error')}</p>
       </Button>
     );
   }
@@ -506,6 +518,7 @@ export const VaultButton: FC<{
         size={size}
         protectedSymmetricKey={data.user.protected_symmetric_key}
         passkeyId={data.user.using_passkey_id}
+        unstyled={unstyled}
       />
     );
   }
@@ -516,6 +529,7 @@ export const VaultButton: FC<{
       className={className}
       variant={variant}
       size={size}
+      unstyled={unstyled}
     />
   );
 };