update: account menu and minor ui fixes (#59)

district-labs · Dec 6, 2024 · af90962 · af90962
1 parent 5b10981
commit af90962
Show file tree

Hide file tree

Showing 19 changed files with 600 additions and 395 deletions.
diff --git a/apps/api-delegations/src/routes/delegations.ts b/apps/api-delegations/src/routes/delegations.ts
@@ -1,6 +1,7 @@
 import { zValidator } from '@hono/zod-validator';
 import { Hono } from 'hono';
-import { isAddress, type Address, type Hex, isHex } from 'viem';
+import { isValidChain } from 'universal-data';
+import { type Address, type Hex, isAddress, isHex } from 'viem';
 import { z } from 'zod';
 import { getDelegationsByDelegateAndTypeDb } from '../db/actions/delegations/get-delegations-by-delegate-and-type-db.js';
 import { getDelegationsByDelegateDb } from '../db/actions/delegations/get-delegations-by-delegate-db.js';
@@ -10,7 +11,6 @@ import { getDelegationsDb } from '../db/actions/delegations/get-delegations-db.j
 import { insertDelegationDb } from '../db/actions/delegations/insert-delegation-db.js';
 import { invalidateDelegationDb } from '../db/actions/delegations/invalidate-delegation-db.js';
 import type { DelegationDb, SelectDelegationDb } from '../db/schema.js';
-import { isValidChain } from 'universal-data';
 
 const hexSchema = z
   .custom<Hex>()
@@ -145,7 +145,6 @@ const delegationsRouter = new Hono()
     zValidator('param', getDelegationByDelegatorOrDelegateWithTypeSchema),
     async (c) => {
       const { address, type, chainId } = c.req.valid('param');
-      console.log({ address, type, chainId });
       const delegations: DelegationDb[] | undefined =
         await getDelegationsByDelegateAndTypeDb({
           chainId,

diff --git a/apps/wallet/app/(site)/finance/credit/page.tsx b/apps/wallet/app/(site)/finance/credit/page.tsx
@@ -1,11 +1,10 @@
 'use client';
-import { ConnectUniversalWalletButton } from '@/components/onchain/connect-universal-wallet';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { defaultChain } from '@/lib/chains';
 import { CreditCard, TableProperties } from 'lucide-react';
 import { useAccount } from 'wagmi';
 import { ViewCreditCards } from './view-cards';
 import { ViewCreditTable } from './view-table';
-import { defaultChain } from '@/lib/chains';
 
 export default function FinanceCreditPage() {
   const { address } = useAccount();
@@ -31,12 +30,7 @@ export default function FinanceCreditPage() {
               <div className="container">
                 {!address && (
                   <div className="flex flex-col items-center justify-center">
-                    <ConnectUniversalWalletButton
-                      size="lg"
-                      className="rounded-full py-3 text-lg"
-                    >
-                      Connect Universal Wallet
-                    </ConnectUniversalWalletButton>
+                    Connect a wallet to view credit lines.
                   </div>
                 )}
                 {address && (
@@ -53,12 +47,7 @@ export default function FinanceCreditPage() {
               <div className="container">
                 {!address && (
                   <div className="flex flex-col items-center justify-center">
-                    <ConnectUniversalWalletButton
-                      size="lg"
-                      className="rounded-full py-3 text-lg"
-                    >
-                      Connect Universal Wallet
-                    </ConnectUniversalWalletButton>
+                    Connect a wallet to view credit lines.
                   </div>
                 )}
                 {address && <ViewCreditCards delegate={address} />}

diff --git a/apps/wallet/app/(site)/finance/redemptions/page.tsx b/apps/wallet/app/(site)/finance/redemptions/page.tsx
@@ -1,5 +1,4 @@
 'use client';
-import { ConnectUniversalWalletButton } from '@/components/onchain/connect-universal-wallet';
 import { useAccount } from 'wagmi';
 import { ViewCreditLines } from './view-credit-lines';
 
@@ -13,16 +12,11 @@ export default function CreditLinePage() {
           <h3 className="font-semibold text-lg lg:text-xl">Redemptions</h3>
         </div>
       </section>
-      <section className="mt-6 flex-1 bg-neutral-100/50 pb-4 md:pb-8">
+      <section className="mt-6 flex-1 pb-4 md:pb-8">
         <div className="container">
           {!address && (
             <div className="flex flex-col items-center justify-center">
-              <ConnectUniversalWalletButton
-                size="lg"
-                className="rounded-full py-3 text-lg"
-              >
-                Connect Universal Wallet
-              </ConnectUniversalWalletButton>
+              Connect a wallet to view redemptions.
             </div>
           )}
           {address && <ViewCreditLines delegate={address} />}

diff --git a/apps/wallet/app/(site)/identity/manage/view-credentials.tsx b/apps/wallet/app/(site)/identity/manage/view-credentials.tsx
@@ -1,6 +1,5 @@
 'use client';
 import { CredentialOAuth } from '@/components/identity/credential-oauth';
-import { ConnectUniversalWalletButton } from '@/components/onchain/connect-universal-wallet';
 import { IsWalletConnected } from '@/components/onchain/is-wallet-connected';
 import { IsWalletDisconnected } from '@/components/onchain/is-wallet-disconnected';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -35,13 +34,8 @@ export function ViewCredentials() {
   return (
     <div className="flex h-full flex-col">
       <IsWalletDisconnected>
-        <div className="flex flex-col items-center justify-center pt-6">
-          <ConnectUniversalWalletButton
-            size="lg"
-            className="rounded-full py-3 text-lg"
-          >
-            Connect Universal Wallet
-          </ConnectUniversalWalletButton>
+        <div className="flex flex-col items-center justify-center gap-y-3 pt-6">
+          Connect your wallet to view your credentials.
         </div>
       </IsWalletDisconnected>
       <IsWalletConnected>

diff --git a/apps/wallet/app/(site)/identity/manage/view-document.tsx b/apps/wallet/app/(site)/identity/manage/view-document.tsx
@@ -1,7 +1,7 @@
 'use client';
-import { ConnectUniversalWalletButton } from '@/components/onchain/connect-universal-wallet';
 import { IsWalletConnected } from '@/components/onchain/is-wallet-connected';
 import { IsWalletDisconnected } from '@/components/onchain/is-wallet-disconnected';
+import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 import { cn } from '@/lib/utils';
@@ -25,45 +25,33 @@ export default function ViewDocument() {
 
   return (
     <>
-      <section className="h-full max-w-[100vw] bg-neutral-100 px-6 py-6">
+      <section className="h-full max-w-[100vw] bg-neutral-100 ">
         <div className={cn('mx-auto')}>
           <div
             className={cn(
               'flex h-full w-full flex-col items-center justify-center',
             )}
           >
             <IsWalletDisconnected>
-              <div className="flex items-center justify-center">
-                <ConnectUniversalWalletButton
-                  size="lg"
-                  className="rounded-full py-3 text-lg"
-                >
-                  Connect Universal Wallet
-                </ConnectUniversalWalletButton>
+              <div className="flex flex-col items-center justify-center gap-y-3 pt-6">
+                Connect your wallet to view your credentials.
               </div>
             </IsWalletDisconnected>
             <IsWalletConnected>
               <>
                 {query.data && query.isSuccess && (
-                  <div className="flex h-full w-full max-w-full flex-1 flex-col items-center justify-center overflow-auto text-sm">
+                  <div className="flex h-full w-full max-w-full flex-1 flex-col items-center justify-center overflow-auto pt-6 text-sm">
                     <div className="container max-w-screen-lg">
                       <div className="mb-4 flex w-full flex-col items-center justify-between gap-2 md:flex-row">
-                        <h3 className="font-bold text-xl">
-                          <Image
-                            className="size-10"
-                            src="/images/qr-id-dark.png"
-                            alt="qr-id-dark"
-                            width={28}
-                            height={28}
-                          />
-                        </h3>
+                        <Image
+                          className="size-8"
+                          src="/images/qr-id-dark.png"
+                          alt="qr-id-dark"
+                          width={28}
+                          height={28}
+                        />
                         <div className="flex items-center gap-y-3">
-                          {query.data.status === 1 && (
-                            <h3 className="font-normal text-sm">
-                              Status:{' '}
-                              <span className="font-bold">Verified</span>
-                            </h3>
-                          )}
+                          {query.data.status === 1 && <Badge>Verified</Badge>}
 
                           {query.data.status !== 1 && (
                             <Button

diff --git a/apps/wallet/app/(site)/layout.tsx b/apps/wallet/app/(site)/layout.tsx
@@ -2,10 +2,9 @@
 import WalletConnect from '@/assets/brands/walletconnect.svg';
 import { CameraQrScanner } from '@/components/camera/camera-qr-scanner';
 import { QRCodeGeneratedDialog } from '@/components/core/qr-code-generated-dialog';
-import { AccountPopover } from '@/components/layout/account-popover';
+import { AccountMenu } from '@/components/layout/account-menu';
 import { AppSidebar } from '@/components/layout/app-sidebar';
 import { MobileMenu } from '@/components/layout/mobile-menu';
-import { ConnectButton } from '@/components/onchain/connect-button';
 import { ConnectUniversalWalletButton } from '@/components/onchain/connect-universal-wallet';
 import { IsWalletConnected } from '@/components/onchain/is-wallet-connected';
 import { IsWalletDisconnected } from '@/components/onchain/is-wallet-disconnected';
@@ -21,7 +20,7 @@ import { useIsUniversalConnected } from '@/lib/hooks/use-is-universal-connected'
 import { cn } from '@/lib/utils';
 import { useWcAccountsSync } from '@/lib/walletconnect/hooks/use-wc-accounts-sync';
 import { useWcEventsManager } from '@/lib/walletconnect/hooks/use-wc-events-manager';
-import { Circle, Wallet } from 'lucide-react';
+import { Circle } from 'lucide-react';
 import type { ReactNode } from 'react';
 import { SvgIcon } from 'universal-wallet-ui';
 
@@ -94,19 +93,18 @@ export default function RootLayout({ children }: RootLayoutProps) {
                       />
                       <QRCodeGeneratedDialog />
                     </div>
-                    <AccountPopover className="order-1 flex-1 md:order-2 md:flex-none" />
+                    <AccountMenu className="order-1 flex-1 md:order-2 md:flex-none" />
                   </div>
                 </IsWalletConnected>
                 <IsWalletDisconnected>
                   <div className="flex w-full items-center justify-between md:justify-end">
                     <Circle className="ml-0 size-6 text-emerald-600 md:hidden" />
                     <div className="flex items-center gap-x-2">
-                      <ConnectButton variant={'outline'} rounded={'full'}>
-                        <Wallet className="size-4" />
-                      </ConnectButton>
-                      <ConnectUniversalWalletButton variant={'emerald'}>
+                      <ConnectUniversalWalletButton
+                        variant={'emerald'}
+                        className="font-bold"
+                      >
                         Connect
-                        <Circle className="ml-0 hidden size-2 md:inline-block" />
                       </ConnectUniversalWalletButton>
                     </div>
                   </div>

diff --git a/apps/wallet/package.json b/apps/wallet/package.json
@@ -39,7 +39,6 @@
     "@walletconnect/core": "^2.17.2",
     "@walletconnect/utils": "^2.17.2",
     "@yudiel/react-qr-scanner": "^2.0.8",
-    "addreth": "^3.0.1",
     "class-variance-authority": "^0.7.0",
     "cmdk": "1.0.0",
     "ethereum-blockies-base64": "^1.0.2",
@@ -53,6 +52,7 @@
     "react-dom": "^18",
     "react-hook-form": "^7.53.1",
     "react-qr-reader-es6": "2.2.1-2",
+    "react-responsive": "^10.0.0",
     "universal-credential-sdk": "workspace:*",
     "universal-data": "workspace:*",
     "universal-delegations-sdk": "workspace:*",

diff --git a/apps/wallet/src/components/core/copy-icon-button.tsx b/apps/wallet/src/components/core/copy-icon-button.tsx
@@ -25,13 +25,13 @@ const CopyIconButton = ({ className, value }: CopyIconButton) => {
       });
   };
   return (
-    <div
-      className={cn('inline-block cursor-pointer p-1', className)}
+    <span
+      className={cn('cursor-pointer p-0', className)}
       onClick={() => handleCopy(value)}
     >
-      <Copy className="size-3 cursor-pointer" height={8} width={8} />
+      <Copy className="size-4 cursor-pointer" height={8} width={8} />
       <span className="sr-only">Copy</span>
-    </div>
+    </span>
   );
 };
 export { CopyIconButton };
diff --git a/apps/wallet/src/components/core/pwa-install-prompt.tsx b/apps/wallet/src/components/core/pwa-install-prompt.tsx
@@ -94,10 +94,8 @@ export const PWAInstallPrompt = ({ className, children }: PWAInstallPrompt) => {
             </p>
             <p className="text-sm">
               Visit{' '}
-              <span className="font-semibold text-blue-600">
-                wallet.districtlabs.com
-              </span>{' '}
-              on your smartphone to start.
+              <span className="font-semibold text-blue-600">univrsal.co</span>{' '}
+              on your smartphone.
             </p>
 
             <h3 className="font-bold text-lg">iOS</h3>

diff --git a/apps/wallet/src/components/core/qr-code-generated-dialog.tsx b/apps/wallet/src/components/core/qr-code-generated-dialog.tsx
@@ -9,9 +9,11 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 
 import { DialogTitle } from '@radix-ui/react-dialog';
 import { Fingerprint, QrCode, WalletMinimal } from 'lucide-react';
+import Image from 'next/image';
 import { universalDeployments } from 'universal-data';
 import { constructDidIdentifier } from 'universal-identity-sdk';
 import { useAccount } from 'wagmi';
+import { Badge } from '../ui/badge';
 import { Button } from '../ui/button';
 import { QRCodeGenerate } from './qr-code-generate';
 
@@ -42,6 +44,23 @@ const QRCodeGeneratedDialog = () => {
                 </DialogTitle>
               </DialogHeader>
               <div className="space-y-4">
+                <div className="">
+                  <div className="flex items-center justify-between">
+                    <span className="font-medium text-sm">Network</span>
+                    <div className="flex items-center gap-2">
+                      <Badge variant={'outline'} className="p-2 text-sm">
+                        <span className="mr-1 font-medium text-xs">Base</span>
+                        <Image
+                          src={'/images/networks/base.png'}
+                          className="size-4"
+                          width={20}
+                          height={20}
+                          alt="Base"
+                        />
+                      </Badge>
+                    </div>
+                  </div>
+                </div>
                 <div className="overflow-hidden rounded-3xl border-4 border-neutral-300 shadow-lg">
                   <QRCodeGenerate data={address} className="h-auto w-full" />
                 </div>