Chores: Test GardenJs UI Redesign

packages/test/package.json

@@ -19,12 +19,16 @@
     "@gardenfi/wallet-connectors": "workspace:^",
     "@tanstack/react-query": "^5.59.0",
     "@vitejs/plugin-react-swc": "^3.7.1",
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.49",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "tailwindcss": "^3.4.17",
     "vite-plugin-node-polyfills": "^0.22.0",
     "vite-plugin-top-level-await": "^1.4.4",
     "vite-plugin-wasm": "^3.3.0",
-    "wagmi": "^2.12.17"
+    "wagmi": "^2.12.17",
+    "zustand": "^5.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",

packages/test/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/test/src/App.css

@@ -1,9 +1,3 @@
-#root {
-  max-width: 1280px;
-  margin: 0 0;
-  padding: 2rem;
-}
-
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);
@@ -18,3 +12,11 @@
     animation: logo-spin infinite 20s linear;
   }
 }
+
+.custom-scrollbar {
+  scrollbar-color: #e36492 transparent;
+}
+
+.custom-scrollbar::-webkit-scrollbar {
+  width: 1px;
+}

packages/test/src/App.tsx

@@ -5,8 +5,8 @@ import { Swap } from './components/Swap';
 
 function App() {
   const { data: walletClient } = useWalletClient();
-  console.log('walletClient :', walletClient);
-  return walletClient ? (
+  // console.log('walletClient :', walletClient);
+  return (
     <GardenProvider
       config={{
         store: localStorage,
@@ -16,7 +16,7 @@ function App() {
     >
       <Swap />
     </GardenProvider>
-  ) : null;
+  );
 }
 
 export default App;

packages/test/src/components/Sidebar/BTCWallets.tsx

@@ -0,0 +1,81 @@
+import {
+    IInjectedBitcoinProvider,
+    useBitcoinWallet,
+} from '@gardenfi/wallet-connectors';
+import { Button } from '../common/Button';
+import { useState } from 'react';
+
+export const BTCWallets = () => {
+    const { availableWallets, connect, account, provider, isConnected } =
+        useBitcoinWallet();
+    const [amount, setAmount] = useState('');
+
+    const handleConnect = async (wallet: IInjectedBitcoinProvider) => {
+        const res = await connect(wallet);
+        if (res.error) {
+            console.error(res.error);
+            return;
+        }
+    };
+
+    const handleSwitchNetwork = async () => {
+        if (!provider) return;
+        await provider.switchNetwork();
+    };
+
+    return (
+        <div className="flex flex-col items-start justify-start gap-2">
+            <h2 className="text-sm opacity-60">BTC Wallets</h2>
+            <div className="grid grid-cols-2 gap-2 w-full">
+                <div className="grid grid-cols-1 gap-2">
+                    {Object.entries(availableWallets).map(([name, wallet], i) => (
+                        <Button
+                            disabled={isConnected}
+                            onClick={() => handleConnect(wallet)}
+                            key={i}
+                        >
+                            Connect {name}
+                        </Button>
+                    ))}
+                </div>
+                <div className="grid grid-cols-1 gap-2">
+                    <Button
+                        disabled={!account}
+                        secondary
+                        onClick={() => handleSwitchNetwork()}
+                    >
+                        SwitchNetwork
+                    </Button>
+                    <div
+                        className={`flex border border-[#E36492] rounded-lg overflow-hidden ${!account ? 'border-gray-300 pointer-events-none' : ''
+                            }`}
+                    >
+                        <input
+                            type="number"
+                            className="px-2 active:outline-none focus:outline-none"
+                            value={amount}
+                            onChange={(e) => setAmount(e.target.value)}
+                        />
+                        <Button
+                            disabled={!account}
+                            secondary
+                            onClick={async () => {
+                                if (!provider || amount === '') return;
+                                const satoshis = Number(amount) * 10 ** 8;
+                                const res = await provider.sendBitcoin(
+                                    'bc1pqx4petqw4gfrzs7qfcyle95xsn7w39ukmtyy95zfytcldjztf0tqhe7rsj',
+                                    satoshis,
+                                );
+                                console.log('res :', res.error);
+                            }}
+                        >
+                            Send Bitcoin
+                        </Button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default BTCWallets;

packages/test/src/components/Sidebar/Details.tsx

@@ -0,0 +1,67 @@
+import { useAccount, useChainId, useChains } from 'wagmi';
+import { useBitcoinWallet } from '@gardenfi/wallet-connectors';
+import { useEffect, useState } from 'react';
+
+export const Details = () => {
+    const [network, setNetwork] = useState<string | null>(null);
+    const [balance, setBalance] = useState<number | null>(null);
+
+    const chains = useChains();
+    const chainMap = Object.fromEntries(chains.map(chain => [chain.id, chain.name]));
+    const chainId = useChainId();
+    const { address: EvmAddress } = useAccount();
+    const { account, provider } = useBitcoinWallet();
+
+    provider?.on("accountsChanged", async () => {
+        const networkName = await provider?.getNetwork();
+        const balanceBTC = await provider?.getBalance();
+        setNetwork(networkName.val);
+        setBalance(balanceBTC.val.total * 10 ** (-8));
+    });
+
+    useEffect(() => {
+        const fetchInitialData = async () => {
+            const networkName = await provider?.getNetwork();
+            const balanceBTC = await provider?.getBalance();
+            setNetwork(networkName!.val);
+            setBalance(balanceBTC!.val.total * 10 ** (-8));
+        };
+        fetchInitialData();
+    }, [provider]);
+
+    return (
+        (EvmAddress || account) &&
+        <div className='flex flex-col items-start justify-start gap-2'>
+            {EvmAddress && (
+                <div className='grid grid-cols-2 gap-2 w-full'>
+                    <div className='flex gap-3 items-center justify-start'>
+                        <span className='text-sm font-bold opacity-60'>Current Chain Id:</span>
+                        <span className='text-lg font-normal'>{chainId}</span>
+                    </div>
+                    <div className='flex gap-3 items-center justify-start'>
+                        <span className='text-sm font-bold opacity-60'>Current EVM Chain Name:</span>
+                        <span className='text-lg font-normal'>{chainMap[chainId!]}</span>
+                    </div>
+                    {account && <><div className='flex gap-3 items-center justify-start'>
+                        <span className='text-sm font-bold opacity-60'>Current BTC Chain Name:</span>
+                        <span className='text-lg font-normal'>{network}</span>
+                    </div>
+                        <div className='flex gap-3 items-center justify-start'>
+                            <span className='text-sm font-bold opacity-60'>BTC Account Balance:</span>
+                            <span className='text-lg font-normal'>{balance}</span>
+                        </div>
+                    </>
+                    }
+                </div>
+            )}
+            {EvmAddress && <div className='flex gap-3 items-center justify-between'>
+                <span className='text-sm font-bold opacity-60'>EVM Address: </span>
+                <span className='text-lg'>{EvmAddress}</span>
+            </div>}
+            {account && <div className='flex gap-3 items-center justify-between'>
+                <span className='text-sm font-bold opacity-60'>BTC Account: </span>
+                <span className='text-lg'>{account}</span>
+            </div>}
+        </div>
+    );
+};

packages/test/src/components/Sidebar/EVMWallets.tsx

@@ -0,0 +1,31 @@
+import { Button } from "../common/Button";
+import { getAccount } from "wagmi/actions";
+import { Connector, useConnect } from "wagmi";
+import { config } from "../../main";
+
+export const EVMWallets = () => {
+    const { connectors } = useConnect();
+    const account = getAccount(config)
+
+    const connectWallet = async (connector: Connector) => {
+        await connector.connect();
+    }
+    return (
+        <div className='flex flex-col items-start justify-start gap-2'>
+            <h2 className='text-sm opacity-60'>EVM Wallets</h2>
+            <div className='grid grid-cols-2 gap-2 w-full'>
+                {connectors.map((connector) => {
+                    return (
+                        <Button
+                            disabled={account.status === "connected"}
+                            key={connector.uid}
+                            onClick={() => connectWallet(connector)}
+                        >
+                            {connector.name}
+                        </Button>
+                    );
+                })}
+            </div>
+        </div>
+    )
+};

packages/test/src/components/Sidebar/LogoutButtons.tsx

@@ -0,0 +1,39 @@
+import { Button } from '../common/Button'
+import { useAccount } from 'wagmi';
+import { useDisconnect } from 'wagmi';
+import { useBitcoinWallet } from '@gardenfi/wallet-connectors';
+
+export const LogoutButtons = () => {
+    const { address: EvmAddress } = useAccount();
+    const { disconnect: disconnectWallet } = useDisconnect();
+    const { disconnect: disconnectBTWWallet, account } = useBitcoinWallet();
+
+
+    const EVMdisconnect = () => {
+        disconnectWallet();
+    };
+
+    const BTCDisconnect = () => {
+        disconnectBTWWallet();
+    };
+    return (
+        <div className="flex gap-2 w-1/2">
+            <Button
+                secondary
+                disabled={!EvmAddress}
+                onClick={EVMdisconnect}
+            >
+                EVM Logout
+            </Button>
+            <Button
+                secondary
+                disabled={!account}
+                onClick={BTCDisconnect}
+            >
+                BTC Logout
+            </Button>
+        </div>
+    )
+}
+
+export default LogoutButtons

packages/test/src/components/Sidebar/Sidebar.tsx

@@ -0,0 +1,20 @@
+import { BTCWallets } from "./BTCWallets";
+import { Details } from "./Details";
+import { EVMWallets } from "./EVMWallets";
+import LogoutButtons from "./LogoutButtons";
+import { SupportedChains } from "./SupportedChains";
+
+export const Sidebar = () => {
+  return (
+    <div className='flex flex-col space-y-8 bg-white px-6 pt-6 pb-12 h-screen w-full overflow-y-auto custom-scrollbar'>
+      <div className="flex w-full items-center justify-between">
+        <h2 className='text-lg font-semibold text-[#E36492]'>Test GardenJs</h2>
+        <LogoutButtons />
+      </div>
+      <Details />
+      <EVMWallets />
+      <BTCWallets />
+      <SupportedChains />
+    </div>
+  )
+};

packages/test/src/components/Sidebar/SupportedChains.tsx

@@ -0,0 +1,19 @@
+import { Chains } from "@gardenfi/orderbook";
+
+export const SupportedChains = () => {
+    return (
+        <div className='flex flex-col items-start justify-start gap-2'>
+            <h2 className='text-sm opacity-60'>Supported Wallets</h2>
+            <div className="grid grid-cols-2 gap-2 w-full">
+                {Object.values(Chains).map((chain) => {
+                    if (chain.includes('bitcoin')) return null;
+                    return (
+                        <div key={chain} className="px-3 py-1.5 rounded-md border pointer-events-none bg-transparent border-gray-200">
+                            {chain}
+                        </div>
+                    );
+                })}
+            </div>
+        </div>
+    )
+};