web(profile): delete wallet feature

packages/bento-web/src/dashboard/components/WalletList.tsx

@@ -6,10 +6,12 @@ import {
 } from '@bento/common';
 import { shortenAddress } from '@bento/common';
 import { Icon } from '@iconify/react';
+import axios from 'axios';
 import clsx from 'clsx';
 import React, { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
+import { useRevalidateWallets } from '@/hooks/useWallets';
 import { Analytics } from '@/utils/analytics';
 import { copyToClipboard } from '@/utils/clipboard';
 import { toast } from '@/utils/toast';
@@ -28,6 +30,7 @@ export const WalletList: React.FC<WalletListProps> = ({
   onClickConnect,
 }) => {
   const [collapsed, setCollapsed] = useState<boolean>(true);
+  const revalidateWallets = useRevalidateWallets();
 
   const renderedWallets = useMemo(
     () => (collapsed ? wallets.slice(0, 3) : wallets),
@@ -71,21 +74,34 @@ export const WalletList: React.FC<WalletListProps> = ({
                   <Icon icon="eva:copy-fill" />
                 </button>
 
-                {/* FIXME: Add delete feature */}
-                {/* <button
+                <button
                   className="ml-auto text-white/25"
-                  onClick={() => {
-                    setWallets(
-                      wallets.filter(
-                        (w) =>
-                          w.address.toLowerCase() !==
-                          wallet.address.toLowerCase(),
-                      ),
-                    );
+                  onClick={async () => {
+                    let walletAddress = wallet.address;
+                    try {
+                      await axios.post(`/api/profile/delete-wallet`, {
+                        walletAddress,
+                      });
+                      await revalidateWallets();
+
+                      toast({
+                        type: 'success',
+                        title: 'Deleted Wallet',
+                        description: `Removed wallet ${shortenAddress(
+                          walletAddress,
+                        )}`,
+                      });
+                    } catch (error: any) {
+                      toast({
+                        type: 'error',
+                        title: 'Server Error',
+                        description: error.message || 'Something went wrong',
+                      });
+                    }
                   }}
                 >
                   <Icon icon="entypo:cross" width={20} height={20} />
-                </button> */}
+                </button>
               </div>
 
               <div>

packages/bento-web/src/pages/api/profile/delete-wallet.ts

@@ -0,0 +1,51 @@
+import { PostgrestError, PostgrestResponse } from '@supabase/supabase-js';
+import type { NextApiRequest, NextApiResponse } from 'next';
+
+import { UserProfile } from '@/profile/types/UserProfile';
+import { Supabase } from '@/utils/Supabase';
+
+type APIRequest = NextApiRequest & {
+  body: UserProfile;
+};
+
+// FIXME: Soft delete next time
+
+export default async (req: APIRequest, res: NextApiResponse) => {
+  let {
+    body: { walletAddress: _walletAddress },
+  } = req;
+  let walletAddress: string = _walletAddress as string;
+
+  const { user } = await Supabase.auth.api.getUserByCookie(req);
+  if (!user) {
+    res.status(401).json({ message: 'Unauthorized' });
+    return;
+  }
+
+  const walletQuery = await Supabase.from('wallets') //
+    .select('*')
+    .eq('user_id', user.id)
+    .eq('address', walletAddress);
+  const [walletToDelete] = (walletQuery.data ?? []) as [any | undefined];
+
+  let data: PostgrestResponse<any>;
+  let error: PostgrestError | null = null;
+
+  if (!!walletToDelete) {
+    data = await Supabase.from('wallets').delete().match({
+      address: walletToDelete.address,
+      user_id: walletToDelete.user_id,
+    });
+    error = data.error;
+  } else {
+    res.status(401).json({ message: 'No wallet found' });
+    return;
+  }
+
+  if (!!error) {
+    res.status(500).json({ message: error.message });
+    return;
+  }
+
+  return res.status(200).json(data);
+};