{t('logout')}
+ ); }; diff --git a/src/components/button/RefreshWallet.tsx b/src/components/button/RefreshWallet.tsx index db20018..2547e59 100644 --- a/src/components/button/RefreshWallet.tsx +++ b/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 ( -{t('unlocked')}
) : ( <> -{lockedTitle}
)} @@ -309,6 +314,7 @@ const PasskeyVaultButton: FC<{ size?: 'md'; protectedSymmetricKey: string; passkeyId: string; + unstyled?: boolean; }> = ({ lockedTitle, className, @@ -316,6 +322,7 @@ const PasskeyVaultButton: FC<{ 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} > -{lockedTitle}
); } @@ -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} > -{t('unlocked')}
); }; @@ -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} > -{lockedTitleFinal}
); } @@ -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} > -{t('Common.error')}
); } @@ -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} /> ); }; diff --git a/src/components/button/WalletButton.tsx b/src/components/button/WalletButton.tsx index 15c1226..989f4d3 100644 --- a/src/components/button/WalletButton.tsx +++ b/src/components/button/WalletButton.tsx @@ -1,35 +1,45 @@ 'use client'; -import { CaretSortIcon, CheckIcon } from '@radix-ui/react-icons'; -import { CircleEqual, PlusCircle, Settings } from 'lucide-react'; +import { + Check, + ChevronsUpDown, + Lock, + Plus, + PlusCircle, + Settings2, + Unlock, +} from 'lucide-react'; import Link from 'next/link'; import { useRouter } from 'next/navigation'; -import { useEffect, useMemo, useState } from 'react'; +import { useTranslations } from 'next-intl'; +import { FC, useEffect, useMemo } from 'react'; import { useLocalStorage } from 'usehooks-ts'; import { Button } from '@/components/ui/button'; -import { - Command, - CommandGroup, - CommandItem, - CommandList, -} from '@/components/ui/command'; -import { - Popover, - PopoverContent, - PopoverTrigger, -} from '@/components/ui/popover'; import { useUserQuery } from '@/graphql/queries/__generated__/user.generated'; import { useGetAllWalletsQuery } from '@/graphql/queries/__generated__/wallet.generated'; import { useChat, useContactStore } from '@/stores/contacts'; +import { useKeyStore } from '@/stores/keys'; import { cn } from '@/utils/cn'; import { LOCALSTORAGE_KEYS } from '@/utils/constants'; import { ROUTES } from '@/utils/routes'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuTrigger, +} from '../ui/dropdown-menu'; import { RefreshWallet } from './RefreshWallet'; +import { VaultButton } from './VaultButtonV2'; + +export const WalletButton: FC<{ className?: string; cbk?: () => void }> = ({ + className, + cbk, +}) => { + const t = useTranslations('Index'); -export function WalletButton() { - const [open, setOpen] = useState(false); + const keys = useKeyStore(s => s.keys); const setCurrentContact = useContactStore(s => s.setCurrentContact); const setCurrentPaymentOption = useChat(s => s.setCurrentPaymentOption); @@ -66,124 +76,119 @@ export function WalletButton() { }, [data]); const buttonText = useMemo(() => { - if (loading) return 'Loading...'; - if (!wallets.length) return 'Create a wallet'; + if (loading) return t('loading') + '...'; + if (!wallets.length) return t('create-wallet'); if (value) { - return wallets.find(w => w.value === value)?.label || 'Select wallet...'; + return wallets.find(w => w.value === value)?.label || t('select-wallet'); } - }, [loading, wallets, value]); + }, [loading, wallets, value, t]); if (error) return null; if (!buttonText) return null; return ( -+ {t('wallets')} +
+ + {wallets.length + ? wallets.map(w => ( +