feat: final banco redesign items (#98)

messages/en.json

@@ -85,6 +85,15 @@
         "tech-info": "Technical information about your wallet, helpful for advanced recovery.",
         "unlock": "Unlock to Decrypt"
       },
+      "Setup": {
+        "create": "Create New Wallet",
+        "input": "Input a 12 or 24 word mnemonic to restore the wallet.",
+        "no-sensitive": "The wallet will be created on your device. No sensitive information is stored on the server.",
+        "restore": "Restore",
+        "seed": "Mnemonic",
+        "start": "Setup your first wallet to start your journey.",
+        "welcome": "Welcome to BancoLibre!"
+      },
       "Transactions": {
         "all": "All",
         "amount": "Amount",
@@ -252,6 +261,10 @@
       "set": "Set a password",
       "submit": "Create Account"
     },
+    "Success": {
+      "waitlist-desc": "You're one step closer to experiencing BancoLibre. We'll notify you as soon as we're ready for you.",
+      "waitlist-title": "You're On the List!"
+    },
     "Waitlist": {
       "good-things": "Good things take time. We’d love for you to be the first to know when we’re live!",
       "join": "Join our waitlist",

messages/es.json

@@ -85,6 +85,15 @@
         "tech-info": "Información técnica sobre tu billetera, útil para recuperación avanzada.",
         "unlock": "Desbloquear para Desencriptar"
       },
+      "Setup": {
+        "create": "Crear nueva billetera",
+        "input": "Ingrese una frase mnemotécnica de 12 o 24 palabras para restaurar la billetera.",
+        "no-sensitive": "La billetera se creará en su dispositivo. No se almacena información sensible en el servidor.",
+        "restore": "Restaurar",
+        "seed": "Frase mnemotécnica",
+        "start": "Configure su primera billetera para comenzar su viaje.",
+        "welcome": "¡Bienvenido a BancoLibre!"
+      },
       "Transactions": {
         "all": "Todas",
         "amount": "Cantidad",
@@ -252,6 +261,10 @@
       "set": "Crea una contraseña",
       "submit": "Crea una cuenta"
     },
+    "Success": {
+      "waitlist-desc": "Estás un paso más cerca de experimentar BancoLibre. Te notificaremos tan pronto como estemos listos para ti.",
+      "waitlist-title": "¡Estás en la lista!"
+    },
     "Waitlist": {
       "good-things": "Las cosas buenas toman tiempo. Nos encantaría avisarte apenas estemos listos!",
       "join": "Uneté a nuestra lista de espera",

src/app/(events)/(access)/setup/wallet/layout.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { ExternalHeader } from '@/components/header/ExternalHeader';
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <>
+      <ExternalHeader showLang={false} />
+      {children}
+    </>
+  );
+}

src/app/(events)/(access)/setup/wallet/new/page.tsx

@@ -1,9 +1,5 @@
 import { NewWallet } from '@/views/wallet/NewWallet';
 
 export default function Page() {
-  return (
-    <div className="flex w-full items-center justify-center py-4">
-      <NewWallet />
-    </div>
-  );
+  return <NewWallet />;
 }

src/app/(events)/(access)/setup/wallet/page.tsx

@@ -1,7 +1,8 @@
-import { CircleEqual, PlusCircle } from 'lucide-react';
+import { Plus, PlusCircle } from 'lucide-react';
 import Link from 'next/link';
+import { useTranslations } from 'next-intl';
 
-import { Button } from '@/components/ui/button';
+import { Button } from '@/components/ui/button-v2';
 import {
   Card,
   CardContent,
@@ -12,28 +13,41 @@ import {
 import { ROUTES } from '@/utils/routes';
 
 export default function Page() {
+  const t = useTranslations();
+
   return (
-    <div className="flex justify-center p-4">
+    <div className="flex h-[calc(100dvh-102px)] w-full items-center justify-center p-4 lg:h-[calc(100dvh-86px)]">
       <Card>
         <CardHeader>
-          <CardTitle>Welcome to BancoLibre.</CardTitle>
+          <CardTitle className="text-xl">
+            {t('App.Wallet.Setup.welcome')}
+          </CardTitle>
 
-          <CardDescription>
-            Setup your first wallet to start your journey.
+          <CardDescription className="text-base">
+            {t('App.Wallet.Setup.start')}
           </CardDescription>
         </CardHeader>
-        <CardContent>
-          <div className="flex items-center justify-center gap-2">
-            <Button asChild size={'sm'} className="w-full">
+
+        <CardContent className="pb-0">
+          <div className="flex flex-wrap items-center justify-center gap-2">
+            <Button
+              asChild
+              className="flex w-full items-center justify-center space-x-2"
+            >
               <Link href={ROUTES.setup.wallet.new}>
-                <PlusCircle className="mr-1 size-4" />
-                New Wallet
+                <PlusCircle size={16} />
+                <p>{t('Index.new-wallet')}</p>
               </Link>
             </Button>
-            <Button variant="secondary" asChild size={'sm'} className="w-full">
+
+            <Button
+              asChild
+              variant="secondary"
+              className="flex w-full items-center justify-center space-x-2"
+            >
               <Link href={ROUTES.setup.wallet.restore}>
-                <CircleEqual className="mr-1 size-4" />
-                Restore Wallet
+                <Plus size={16} />
+                <p>{t('Index.restore-wallet')}</p>
               </Link>
             </Button>
           </div>

src/app/(events)/(access)/setup/wallet/restore/page.tsx

@@ -1,9 +1,5 @@
 import { RestoreWallet } from '@/views/wallet/RestoreWallet';
 
 export default function Page() {
-  return (
-    <div className="flex w-full items-center justify-center py-4">
-      <RestoreWallet />
-    </div>
-  );
+  return <RestoreWallet />;
 }

src/app/success/page.tsx

@@ -2,6 +2,7 @@
 
 import { ChevronLeft } from 'lucide-react';
 import Link from 'next/link';
+import { useTranslations } from 'next-intl';
 import { ReactNode, useMemo } from 'react';
 import Confetti from 'react-confetti';
 import { useIsClient } from 'usehooks-ts';
@@ -16,6 +17,8 @@ export default function Page({
 }) {
   const isClient = useIsClient();
 
+  const t = useTranslations();
+
   const content = useMemo((): {
     title: string;
     description?: string;
@@ -24,36 +27,35 @@ export default function Page({
     switch (searchParams.variant) {
       case 'waitlist':
         return {
-          title: "You're On the List!",
-          description:
-            "You're one step closer to experiencing BancoLibre. We'll notify you as soon as we're ready for you.",
+          title: t('Public.Success.waitlist-title'),
+          description: t('Public.Success.waitlist-desc'),
           button: (
             <Link
               href={ROUTES.home}
               className="mb-2 flex text-muted-foreground hover:text-foreground"
             >
               <ChevronLeft className="size-4" />
-              <p className="text-xs">Home</p>
+              <p className="text-xs">{t('Index.home')}</p>
             </Link>
           ),
         };
 
       default:
         return { title: 'Success!' };
     }
-  }, [searchParams]);
+  }, [searchParams, t]);
 
   return (
-    <main className="flex h-screen w-full flex-col items-center justify-center">
+    <main className="flex h-dvh w-full flex-col items-center justify-center">
       {isClient ? <Confetti /> : null}
-      <div className="z-50 mx-4 md:mx-0">
+      <div className="z-50 m-4">
         {content.button || null}
-        <Card className="max-w-96 text-center">
-          <CardHeader>
+        <Card className="max-w-96 space-y-3 text-center">
+          <CardHeader className="pb-0">
             <CardTitle className="text-xl">{content.title}</CardTitle>
           </CardHeader>
           {content.description ? (
-            <CardContent>
+            <CardContent className="pb-0">
               <p className="text-muted-foreground">{content.description}</p>
             </CardContent>
           ) : null}

src/components/header/ExternalHeader.tsx

@@ -1,18 +1,21 @@
 import { X } from 'lucide-react';
 import Link from 'next/link';
+import { FC } from 'react';
 
 import { ROUTES } from '@/utils/routes';
 
 import { Logo } from '../Logo';
 import { LanguageToggle } from '../toggle/LanguageToggle';
 
-export const ExternalHeader = () => {
+export const ExternalHeader: FC<{ showLang?: boolean }> = ({
+  showLang = true,
+}) => {
   return (
     <header className="flex w-full items-center justify-between space-x-2 border-b border-neutral-800 p-4 lg:px-12 lg:py-2">
       <Logo className="w-40 fill-foreground lg:w-44" />
 
       <div className="flex items-center space-x-2">
-        <LanguageToggle />
+        {showLang ? <LanguageToggle /> : null}
 
         <Link
           href={ROUTES.home}

src/views/contacts/SendMessageBox.tsx

@@ -69,6 +69,8 @@ export const SendMessageBox: FC<{ contactsLoading: boolean }> = ({
         return t('App.Contacts.message');
     }
   }, [
+    contactLoading,
+    t,
     loading,
     error,
     data?.wallets.find_one.contacts.find_one.encryption_pubkey,