[AMB-32] refactor: QA updates

Dockerfile

@@ -35,20 +35,12 @@ WORKDIR /app
 ENV NODE_ENV production
 ENV NEXT_TELEMETRY_DISABLED 1
 
-# RUN addgroup --system --gid 1001 nodejs
-# RUN adduser --system --uid 1001 nextjs
-
 COPY --from=builder /app/public ./public
 
 RUN mkdir .next
-# RUN chown nextjs:nodejs .next
 
 COPY --from=builder /app/.next/standalone ./
 COPY --from=builder /app/.next/static ./.next/static
-# COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
-# COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
-
-# USER nextjs
 
 EXPOSE 3000
 

components.json

@@ -11,7 +11,6 @@
     "prefix": ""
   },
   "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils"
+    "components": "@/components"
   }
 }

global.d.ts

@@ -3,6 +3,5 @@ import en from './messages/en.json';
 type Messages = typeof en;
 
 declare global {
-  // Use type safe message keys with `next-intl`
   interface IntlMessages extends Messages {}
 }

next.config.mjs

@@ -29,7 +29,6 @@ const nextConfig = {
       config.resolve.fallback.fs = false;
     }
 
-    // // Perform customizations to webpack config
     config.plugins.push(
       new webpack.IgnorePlugin({ resourceRegExp: /\/__tests__\// })
     );
@@ -39,7 +38,6 @@ const nextConfig = {
       layers: true,
     };
 
-    // Important: return the modified config
     return config;
   },
 };

src/app/(app)/(layout)/layout.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import { AppLayout } from '@/components/layout/AppLayout';
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return <AppLayout>{children}</AppLayout>;
+}

src/app/app/wallet/[walletId]/account/[accountId]/send/page.tsx → src/app/(app)/(layout)/wallet/[walletId]/account/[accountId]/send/page.tsx

@@ -17,9 +17,9 @@ export default function Page({
   return (
     <div className="mt-4 flex w-full flex-col items-center justify-center">
       <h1 className="text-lg font-bold">Payment Options</h1>
-      <div className="mt-4 flex justify-center gap-4">
+      <div className="mt-4 flex flex-col justify-center gap-4 md:flex-row">
         <Link
-          href={ROUTES.app.wallet.send.invoice(
+          href={ROUTES.wallet.send.invoice(
             params.walletId,
             params.accountId,
             assetId
@@ -36,7 +36,7 @@ export default function Page({
         </Link>
 
         <Link
-          href={ROUTES.app.wallet.send.address(
+          href={ROUTES.wallet.send.address(
             params.walletId,
             params.accountId,
             assetId

src/app/app/layout.tsx → src/app/(app)/layout.tsx

@@ -2,7 +2,6 @@
 
 import { redirect } from 'next/navigation';
 
-import { AppLayout } from '@/components/layout/AppLayout';
 import { useUserQuery } from '@/graphql/queries/__generated__/user.generated';
 import { ROUTES } from '@/utils/routes';
 
@@ -21,5 +20,5 @@ export default function Layout({
     redirect(ROUTES.login);
   }
 
-  return <AppLayout>{children}</AppLayout>;
+  return <>{children}</>;
 }

src/app/setup/wallet/page.tsx → src/app/(app)/setup/wallet/page.tsx

@@ -13,7 +13,7 @@ import { ROUTES } from '@/utils/routes';
 
 export default function Page() {
   return (
-    <div className="flex justify-center py-4">
+    <div className="flex justify-center p-4">
       <Card>
         <CardHeader>
           <CardTitle>Welcome to Banco.</CardTitle>

src/app/(public)/layout.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { redirect } from 'next/navigation';
+
+import { ExternalHeader } from '@/components/header/ExternalHeader';
+import { useUserQuery } from '@/graphql/queries/__generated__/user.generated';
+import { ROUTES } from '@/utils/routes';
+
+export default function Layout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const { data, loading } = useUserQuery();
+
+  if (loading) {
+    return null;
+  }
+
+  if (data?.user.id) {
+    redirect(ROUTES.dashboard);
+  }
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-start p-2">
+      <ExternalHeader />
+      <div className="flex w-full max-w-5xl items-center justify-center py-10">
+        {children}
+      </div>
+    </main>
+  );
+}

src/app/(public)/login/page.tsx

@@ -0,0 +1,5 @@
+import { LoginForm } from '@/components/form/LoginForm';
+
+export default function Page() {
+  return <LoginForm />;
+}

src/app/(public)/sign-up/page.tsx

@@ -0,0 +1,5 @@
+import { SignUpForm } from '@/components/form/SignUpForm';
+
+export default function Page() {
+  return <SignUpForm />;
+}

src/app/globals.css

@@ -3,6 +3,14 @@
 @tailwind utilities;
 
 @layer base {
+  * {
+    @apply border-border;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
   :root {
     --background: 0 0% 100%;
     --foreground: 224 71.4% 4.1%;
@@ -48,12 +56,3 @@
     --ring: 263.4 70% 50.4%;
   }
 }
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}

src/components/button/LogoutButton.tsx

@@ -8,13 +8,20 @@ import { ROUTES } from '@/utils/routes';
 
 import { Button } from '../ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+import { useToast } from '../ui/use-toast';
 
 export const LogoutButtonWithTooltip = () => {
+  const { toast } = useToast();
+
   const [logout] = useLogoutMutation({
     onCompleted: () => {
       window.location.href = ROUTES.home;
     },
-    onError: err => console.log('ERROR', err),
+    onError: () =>
+      toast({
+        variant: 'destructive',
+        title: 'Error logging out.',
+      }),
   });
 
   return (
@@ -38,12 +45,18 @@ export const LogoutButtonWithTooltip = () => {
 };
 
 export const LogoutButton = () => {
+  const { toast } = useToast();
+
   const [logout] = useLogoutMutation({
     onCompleted: () => {
       localStorage.removeItem(LOCALSTORAGE_KEYS.currentWalletId);
       window.location.href = ROUTES.home;
     },
-    onError: err => console.log('ERROR', err),
+    onError: () =>
+      toast({
+        variant: 'destructive',
+        title: 'Error logging out.',
+      }),
   });
 
   return (

src/components/button/RefreshWallet.tsx

@@ -6,16 +6,23 @@ import { FC } from 'react';
 import { useRefreshWalletMutation } from '@/graphql/mutations/__generated__/refreshWallet.generated';
 
 import { CommandItem } from '../ui/command';
+import { useToast } from '../ui/use-toast';
 
 export const RefreshWallet: FC<{
   title: string;
   walletId: string;
   fullScan: boolean;
 }> = ({ walletId, fullScan, title }) => {
+  const { toast } = useToast();
+
   const [refresh, { loading }] = useRefreshWalletMutation({
     variables: { input: { wallet_id: walletId, full_scan: fullScan } },
     refetchQueries: ['getWallet'],
-    onError: err => console.log('ERROR', err),
+    onError: () =>
+      toast({
+        variant: 'destructive',
+        title: 'Error refeshing wallet.',
+      }),
   });
 
   return (

src/components/button/VaultButton.tsx

@@ -8,8 +8,8 @@ import { z } from 'zod';
 
 import { useCheckPasswordMutation } from '@/graphql/mutations/__generated__/checkPassword.generated';
 import { useUserQuery } from '@/graphql/queries/__generated__/user.generated';
-import { cn } from '@/lib/utils';
 import { useKeyStore } from '@/stores/keys';
+import { cn } from '@/utils/cn';
 import { handleApolloError } from '@/utils/error';
 import { WorkerMessage, WorkerResponse } from '@/workers/account/types';
 
@@ -59,13 +59,9 @@ const UnlockDialogContent: FC<{ callback: () => void }> = ({ callback }) => {
   const { data } = useUserQuery({ errorPolicy: 'ignore' });
 
   const [checkPassword] = useCheckPasswordMutation({
-    onCompleted: data => {
-      if (!data.checkPassword) {
-        // TODO INVALID PASSWORD
-      } else {
-        setMasterKey(tempMasterKey);
-        callback();
-      }
+    onCompleted: () => {
+      setMasterKey(tempMasterKey);
+      callback();
     },
     onError: error => {
       const messages = handleApolloError(error);
@@ -139,7 +135,7 @@ const UnlockDialogContent: FC<{ callback: () => void }> = ({ callback }) => {
       <DialogHeader>
         <DialogTitle>Unlock your vault</DialogTitle>
         <DialogDescription>
-          This will allow you to encrypt and decrypt your private keys
+          This will allow you to send funds and messages.
         </DialogDescription>
       </DialogHeader>
       <Form {...form}>
@@ -235,7 +231,8 @@ export const VaultButton: FC<{
             <DialogHeader>
               <DialogTitle>Lock your vault</DialogTitle>
               <DialogDescription>
-                You will not be able to encrypt or decrypt your private keys
+                You will not be able to send funds or messages until the vault
+                is unlocked with your Master Password.
               </DialogDescription>
             </DialogHeader>
             <DialogFooter className="gap-2 sm:justify-center">

src/components/button/WalletButton.tsx

@@ -20,8 +20,8 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 import { useGetAllWalletsQuery } from '@/graphql/queries/__generated__/wallet.generated';
-import { cn } from '@/lib/utils';
 import { useChat, useContactStore } from '@/stores/contacts';
+import { cn } from '@/utils/cn';
 import { LOCALSTORAGE_KEYS } from '@/utils/constants';
 import { ROUTES } from '@/utils/routes';
 
@@ -50,7 +50,6 @@ export function WalletButton() {
   }, [value, data, setValue]);
 
   const wallets = useMemo(() => {
-    // return [];
     const walletData = data?.wallets.find_many || [];
 
     return walletData.map(w => {
@@ -94,7 +93,7 @@ export function WalletButton() {
                     value={w.value}
                     onSelect={currentValue => {
                       setValue(currentValue);
-                      push(ROUTES.app.home);
+                      push(ROUTES.dashboard);
                       setOpen(false);
                       setCurrentContact(undefined);
                       setCurrentPaymentOption(undefined);
@@ -131,7 +130,7 @@ export function WalletButton() {
                   }}
                 >
                   <Link
-                    href={ROUTES.app.wallet.settings(value)}
+                    href={ROUTES.wallet.settings(value)}
                     className="flex w-full items-center justify-between"
                   >
                     Settings