From 8bdd7bab23016d0c8d977b9c05209f389b8f1830 Mon Sep 17 00:00:00 2001
From: Anton Lykhoyda <lykhoyda@gmail.com>
Date: Thu, 12 Dec 2024 17:34:00 +0100
Subject: [PATCH] add account summary balances

---
 Cargo.toml                                    |   6 +-
 justfile                                      |   2 -
 packages/snap/snap.manifest.json              |   2 +-
 packages/web-wallet/src/App.tsx               |   2 +-
 .../web-wallet/src/assets/icons/coins.svg     |   3 +
 packages/web-wallet/src/assets/index.ts       |   2 +
 .../src/components/Layout/Layout.tsx          |   4 +-
 .../web-wallet/src/context/WebzjsContext.tsx  |  43 +++----
 .../web-wallet/src/hooks/useWebzjsActions.ts  | 112 ++++++++++++++----
 .../web-wallet/src/pages/AccountSummary.tsx   |  84 ++++++++++++-
 packages/web-wallet/src/pages/Dashboard.tsx   |   6 +-
 packages/web-wallet/src/pages/Home.tsx        |  22 +++-
 packages/web-wallet/src/utils/index.ts        |   1 +
 packages/web-wallet/src/utils/zatsToZec.ts    |   3 +
 14 files changed, 231 insertions(+), 61 deletions(-)
 create mode 100644 packages/web-wallet/src/assets/icons/coins.svg
 create mode 100644 packages/web-wallet/src/utils/zatsToZec.ts

diff --git a/Cargo.toml b/Cargo.toml
index 9221896..ab840f5 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,8 +1,10 @@
 [workspace]
 resolver = "2"
 
-members = [ "crates/webz-common",
-    "crates/webz-keys", "crates/webz-requests",
+members = [
+    "crates/webz-common",
+    "crates/webz-keys",
+    "crates/webz-requests",
     "crates/webz-wallet",
 ]
 
diff --git a/justfile b/justfile
index 05fcb63..b5b5c69 100644
--- a/justfile
+++ b/justfile
@@ -15,7 +15,6 @@ build-keys *features:
 build-requests *features:
     cd crates/webz-requests && wasm-pack build -t web --release --scope webzjs --out-dir ../../packages/webz-requests --no-default-features --features="{{features}}" -Z build-std="panic_abort,std"
 
-
 # All Wasm Tests
 test-web *features:
     WASM_BINDGEN_TEST_TIMEOUT=99999 wasm-pack test --release --firefox --no-default-features --features "wasm no-bundler {{features}}" -Z build-std="panic_abort,std"
@@ -28,7 +27,6 @@ test-message-board-web *features:
 test-simple-web *features:
     WASM_BINDGEN_TEST_TIMEOUT=99999 wasm-pack test --release --chrome --no-default-features --features "wasm no-bundler {{features}}" -Z build-std="panic_abort,std" --test simple-sync-and-send
 
-
 # simple example: additional args:, sqlite-db
 example-simple *features:
    RUST_LOG="info,zcash_client_backend::sync=debug" cargo run -r --example simple-sync --features "native {{features}}"
diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json
index cb9482e..5de5b5f 100644
--- a/packages/snap/snap.manifest.json
+++ b/packages/snap/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/template-snap-monorepo.git"
   },
   "source": {
-    "shasum": "5kG/5tKuPrrpApOlFvFR5gCuTloSUZfJ4QCjtVezHu8=",
+    "shasum": "trfvzpmDcGt2TqfetqwfKPa8kHXQKGf4cytN7W+dHZU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/web-wallet/src/App.tsx b/packages/web-wallet/src/App.tsx
index 1cd8cd4..220fe0c 100644
--- a/packages/web-wallet/src/App.tsx
+++ b/packages/web-wallet/src/App.tsx
@@ -1,8 +1,8 @@
 import { useInterval } from 'usehooks-ts';
-import { RESCAN_INTERVAL } from '@webzjs/demo-wallet/src/App/Constants.tsx';
 import { useWebZjsActions } from '@hooks/useWebzjsActions.ts';
 import Layout from '@components/Layout/Layout.tsx';
 import { Outlet } from 'react-router-dom';
+import { RESCAN_INTERVAL } from './config/constants.ts';
 
 function App() {
   const { triggerRescan } = useWebZjsActions();
diff --git a/packages/web-wallet/src/assets/icons/coins.svg b/packages/web-wallet/src/assets/icons/coins.svg
new file mode 100644
index 0000000..bdf26eb
--- /dev/null
+++ b/packages/web-wallet/src/assets/icons/coins.svg
@@ -0,0 +1,3 @@
+<svg width="27" height="20" viewBox="0 0 27 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M19.25 5.79672V5.1875C19.25 2.44438 15.1123 0.375 9.625 0.375C4.13766 0.375 0 2.44438 0 5.1875V9.5625C0 11.8473 2.87109 13.663 7 14.2066V14.8125C7 17.5556 11.1377 19.625 16.625 19.625C22.1123 19.625 26.25 17.5556 26.25 14.8125V10.4375C26.25 8.17344 23.4697 6.35563 19.25 5.79672ZM24.5 10.4375C24.5 11.8834 21.1323 13.5 16.625 13.5C16.217 13.5 15.8123 13.4858 15.4131 13.4595C17.7723 12.5998 19.25 11.2031 19.25 9.5625V7.56531C22.517 8.05203 24.5 9.37328 24.5 10.4375ZM7 12.4336V9.83156C7.87038 9.94497 8.74726 10.0012 9.625 10C10.5027 10.0012 11.3796 9.94497 12.25 9.83156V12.4336C11.3809 12.562 10.5035 12.626 9.625 12.625C8.74648 12.626 7.86909 12.562 7 12.4336ZM17.5 8.02359V9.5625C17.5 10.4802 16.1427 11.4656 14 12.0639V9.50781C15.412 9.16547 16.6075 8.65578 17.5 8.02359ZM9.625 2.125C14.1323 2.125 17.5 3.74156 17.5 5.1875C17.5 6.63344 14.1323 8.25 9.625 8.25C5.11766 8.25 1.75 6.63344 1.75 5.1875C1.75 3.74156 5.11766 2.125 9.625 2.125ZM1.75 9.5625V8.02359C2.6425 8.65578 3.83797 9.16547 5.25 9.50781V12.0639C3.10734 11.4656 1.75 10.4802 1.75 9.5625ZM8.75 14.8125V14.3564C9.03766 14.3673 9.32859 14.375 9.625 14.375C10.0494 14.375 10.4639 14.3608 10.8708 14.3367C11.3228 14.4985 11.7832 14.6358 12.25 14.748V17.3139C10.1073 16.7156 8.75 15.7302 8.75 14.8125ZM14 17.6836V15.075C14.8701 15.192 15.7471 15.2504 16.625 15.25C17.5027 15.2512 18.3796 15.195 19.25 15.0816V17.6836C17.5093 17.9388 15.7407 17.9388 14 17.6836ZM21 17.3139V14.7578C22.412 14.4155 23.6075 13.9058 24.5 13.2736V14.8125C24.5 15.7302 23.1427 16.7156 21 17.3139Z" fill="#0F0F0F"/>
+</svg>
diff --git a/packages/web-wallet/src/assets/index.ts b/packages/web-wallet/src/assets/index.ts
index 5cf95b6..60f4035 100644
--- a/packages/web-wallet/src/assets/index.ts
+++ b/packages/web-wallet/src/assets/index.ts
@@ -12,6 +12,7 @@ import ClockSvg from './icons/clock.svg';
 import ShieldSvg from './icons/shield.svg';
 import ShieldDividedSvg from './icons/shield-divided.svg';
 import SummarySvg from './icons/summary.svg';
+import CoinsSvg from './icons/coins.svg';
 
 export {
   ChainsafeSvg,
@@ -26,4 +27,5 @@ export {
   ShieldSvg,
   ShieldDividedSvg,
   SummarySvg,
+  CoinsSvg,
 };
diff --git a/packages/web-wallet/src/components/Layout/Layout.tsx b/packages/web-wallet/src/components/Layout/Layout.tsx
index 82e5414..83682fa 100644
--- a/packages/web-wallet/src/components/Layout/Layout.tsx
+++ b/packages/web-wallet/src/components/Layout/Layout.tsx
@@ -5,9 +5,9 @@ import Footer from '../Footer/Footer.tsx';
 
 const Layout = (): React.JSX.Element => {
   return (
-    <div className="flex flex-col min-h-screen">
+    <div className="container mx-auto flex flex-col min-h-screen">
       <Header />
-      <main className="flex-grow flex justify-center py-3">
+      <main className="flex-grow flex justify-center py-3 self-stretch w-full">
         <Outlet />
       </main>
       <Footer />
diff --git a/packages/web-wallet/src/context/WebzjsContext.tsx b/packages/web-wallet/src/context/WebzjsContext.tsx
index ac41edd..523feba 100644
--- a/packages/web-wallet/src/context/WebzjsContext.tsx
+++ b/packages/web-wallet/src/context/WebzjsContext.tsx
@@ -1,40 +1,32 @@
 import React, { createContext, useReducer, useEffect } from 'react';
 import type { ReactNode } from 'react';
-import type { MetaMaskInpageProvider } from '@metamask/providers';
 import { get, set } from 'idb-keyval';
 
-import initWebzWallet, { initThreadPool, WebWallet } from '@webzjs/webz-wallet';
+import initWebzWallet, {
+  initThreadPool,
+  WalletSummary,
+  WebWallet,
+} from '@webzjs/webz-wallet';
 import initWebzKeys from '@webzjs/webz-keys';
 
 import type { Snap } from '../types';
-import { getSnapsProvider } from '../utils';
 import { MAINNET_LIGHTWALLETD_PROXY } from '../config/constants.ts';
 
-interface Summary {
-  chain_tip_height: number;
-  fully_scanned_height: number;
-  next_sapling_subtree_index: bigint;
-  next_orchard_subtree_index: bigint;
-  account_balances: [number, number][];
-}
-
 interface State {
   webWallet: WebWallet | null;
-  provider: MetaMaskInpageProvider | null;
   installedSnap: Snap | null;
   error: Error | null;
-  summary: Summary | null;
-  chainHeight: bigint | null;
-  activeAccount: number | null;
+  summary?: WalletSummary;
+  chainHeight?: bigint;
+  activeAccount?: number;
   syncInProgress: boolean;
   loading: boolean;
 }
 
 type Action =
   | { type: 'set-web-wallet'; payload: WebWallet }
-  | { type: 'set-provider'; payload: MetaMaskInpageProvider | null }
   | { type: 'set-error'; payload: Error | null }
-  | { type: 'set-summary'; payload: Summary }
+  | { type: 'set-summary'; payload: WalletSummary }
   | { type: 'set-chain-height'; payload: bigint }
   | { type: 'set-active-account'; payload: number }
   | { type: 'set-sync-in-progress'; payload: boolean }
@@ -42,12 +34,11 @@ type Action =
 
 const initialState: State = {
   webWallet: null,
-  provider: null,
   installedSnap: null,
   error: null,
-  summary: null,
-  chainHeight: null,
-  activeAccount: null,
+  summary: undefined,
+  chainHeight: undefined,
+  activeAccount: undefined,
   syncInProgress: false,
   loading: true,
 };
@@ -56,8 +47,6 @@ function reducer(state: State, action: Action): State {
   switch (action.type) {
     case 'set-web-wallet':
       return { ...state, webWallet: action.payload };
-    case 'set-provider':
-      return { ...state, provider: action.payload };
     case 'set-error':
       return { ...state, error: action.payload };
     case 'set-summary':
@@ -102,10 +91,8 @@ export const WebZjsProvider = ({ children }: { children: ReactNode }) => {
         await initThreadPool(10);
       } catch (err) {
         console.error(err);
-        throw Error('Unable to initialize Thread Pool');
+        return Error('Unable to initialize Thread Pool');
       }
-      const provider = await getSnapsProvider();
-      dispatch({ type: 'set-provider', payload: provider });
 
       const bytes = await get('wallet');
       let wallet;
@@ -138,9 +125,9 @@ export const WebZjsProvider = ({ children }: { children: ReactNode }) => {
       }
 
       dispatch({ type: 'set-loading', payload: false });
-    } catch (err: never) {
+    } catch (err) {
       console.error('Initialization error:', err);
-      dispatch({ type: 'set-error', payload: err.toString() });
+      dispatch({ type: 'set-error', payload: Error(String(err)) });
       dispatch({ type: 'set-loading', payload: false });
     }
   }
diff --git a/packages/web-wallet/src/hooks/useWebzjsActions.ts b/packages/web-wallet/src/hooks/useWebzjsActions.ts
index 8ddb5a6..da00528 100644
--- a/packages/web-wallet/src/hooks/useWebzjsActions.ts
+++ b/packages/web-wallet/src/hooks/useWebzjsActions.ts
@@ -1,11 +1,28 @@
 import { set } from 'idb-keyval';
+import { useCallback } from 'react';
 import { useWebZjsContext } from '../context/WebzjsContext.tsx';
 
-export function useWebZjsActions() {
+export interface AccountBalance {
+  totalShieldedBalance: number;
+  unshieldedBalance: number;
+  totalBalance: number;
+}
+
+interface UseWebzjsActions {
+  addNewAccountFromUfvk: (
+    ufvk: string,
+    birthdayHeight: number,
+  ) => Promise<void>;
+  getBalance: () => AccountBalance;
+  triggerRescan: () => Promise<void>;
+  flushDbToStore: () => Promise<void>;
+  syncStateWithWallet: () => Promise<void>;
+}
+
+export function useWebZjsActions(): UseWebzjsActions {
   const { state, dispatch } = useWebZjsContext();
-  console.log('state', state);
 
-  async function syncStateWithWallet() {
+  const syncStateWithWallet = useCallback(async () => {
     if (!state.webWallet) {
       dispatch({
         type: 'set-error',
@@ -13,17 +30,37 @@ export function useWebZjsActions() {
       });
       return;
     }
-    const summary = await state.webWallet.get_wallet_summary();
-    if (summary) {
-      dispatch({ type: 'set-summary', payload: summary });
-    }
-    const chainHeight = await state.webWallet.get_latest_block();
-    if (chainHeight) {
-      dispatch({ type: 'set-chain-height', payload: chainHeight });
+    try {
+      const summary = await state.webWallet.get_wallet_summary();
+      if (summary) {
+        dispatch({ type: 'set-summary', payload: summary });
+      }
+      const chainHeight = await state.webWallet.get_latest_block();
+      if (chainHeight) {
+        dispatch({ type: 'set-chain-height', payload: chainHeight });
+      }
+    } catch (error) {
+      console.error('Error syncing state with wallet:', error);
+      dispatch({ type: 'set-error', payload: error });
     }
-  }
+  }, [state.webWallet, dispatch]);
+
+  const addNewAccountFromUfvk = useCallback(
+    async (ufvk: string, birthdayHeight: number) => {
+      const account_id =
+        (await state.webWallet?.create_account_ufvk(ufvk, birthdayHeight)) || 0;
+      dispatch({ type: 'set-active-account', payload: account_id });
+
+      if (state.webWallet) {
+        const summary = await state.webWallet.get_wallet_summary();
+        console.log(summary?.account_balances.length);
+      }
+      await syncStateWithWallet();
+    },
+    [dispatch, state.webWallet, syncStateWithWallet],
+  );
 
-  async function flushDbToStore() {
+  const flushDbToStore = useCallback(async () => {
     if (!state.webWallet) {
       dispatch({
         type: 'set-error',
@@ -31,13 +68,18 @@ export function useWebZjsActions() {
       });
       return;
     }
-    console.info('Serializing wallet and dumping to IndexedDB store');
-    const bytes = await state.webWallet.db_to_bytes();
-    await set('wallet', bytes);
-    console.info('Wallet saved to storage');
-  }
+    try {
+      console.info('Serializing wallet and dumping to IndexedDB store');
+      const bytes = await state.webWallet.db_to_bytes();
+      await set('wallet', bytes);
+      console.info('Wallet saved to storage');
+    } catch (error) {
+      console.error('Error flushing DB to store:', error);
+      dispatch({ type: 'set-error', payload: error });
+    }
+  }, [state.webWallet, dispatch]);
 
-  async function triggerRescan() {
+  const triggerRescan = useCallback(async () => {
     if (state.loading) {
       dispatch({ type: 'set-error', payload: new Error('App not yet loaded') });
       return;
@@ -49,7 +91,7 @@ export function useWebZjsActions() {
       });
       return;
     }
-    if (state.activeAccount == undefined) {
+    if (state.activeAccount === undefined) {
       dispatch({ type: 'set-error', payload: new Error('No active account') });
       return;
     }
@@ -73,10 +115,40 @@ export function useWebZjsActions() {
     } finally {
       dispatch({ type: 'set-sync-in-progress', payload: false });
     }
-  }
+  }, [
+    state.loading,
+    state.webWallet,
+    state.activeAccount,
+    state.syncInProgress,
+    dispatch,
+    syncStateWithWallet,
+    flushDbToStore,
+  ]);
+
+  const getBalance = useCallback((): AccountBalance => {
+    const activeBalanceReport = state.summary?.account_balances.find(
+      ([id]) => id === state.activeAccount,
+    );
+
+    const totalShieldedBalance = activeBalanceReport
+      ? activeBalanceReport[1].sapling_balance +
+        activeBalanceReport[1].orchard_balance
+      : 0;
+
+    const unshieldedBalance = activeBalanceReport?.[1]?.unshielded_balance || 0;
+
+    return {
+      totalShieldedBalance,
+      unshieldedBalance,
+      totalBalance: totalShieldedBalance + unshieldedBalance,
+    };
+  }, [state.activeAccount, state.summary?.account_balances]);
 
   return {
+    getBalance,
+    addNewAccountFromUfvk,
     triggerRescan,
+    flushDbToStore,
     syncStateWithWallet,
   };
 }
diff --git a/packages/web-wallet/src/pages/AccountSummary.tsx b/packages/web-wallet/src/pages/AccountSummary.tsx
index 9a9b5ca..70ce9e6 100644
--- a/packages/web-wallet/src/pages/AccountSummary.tsx
+++ b/packages/web-wallet/src/pages/AccountSummary.tsx
@@ -1,5 +1,87 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { useWebZjsActions } from '@hooks/useWebzjsActions.ts';
+import { zatsToZec } from '../utils';
+import { CoinsSvg, ShieldDividedSvg, ShieldSvg } from '../assets';
+
+interface BalanceCard {
+  name: string;
+  icon: React.JSX.Element;
+  balance: number;
+}
+
 function AccountSummary() {
-  return <div>TODO: Account Summary</div>;
+  const [totalBalance, setTotalBalance] = useState<number>(0);
+  const [totalShieldedBalance, setTotalShieldedBalance] = useState<number>(0);
+  const [unshieldedBalance, setUnshieldedBalance] = useState<number>(0);
+  const { getBalance } = useWebZjsActions();
+
+  const BalanceCards: BalanceCard[] = [
+    {
+      name: 'Account Balance',
+      icon: <CoinsSvg />,
+      balance: totalBalance,
+    },
+    {
+      name: 'Shielded Balance',
+      icon: <ShieldSvg />,
+      balance: totalShieldedBalance,
+    },
+    {
+      name: 'Unshielded Balance',
+      icon: <ShieldDividedSvg />,
+      balance: unshieldedBalance,
+    },
+  ];
+
+  const fetchBalances = useCallback(() => {
+    const { totalBalance, unshieldedBalance, totalShieldedBalance } =
+      getBalance();
+
+    setTotalBalance(totalBalance);
+    setTotalShieldedBalance(totalShieldedBalance);
+    setUnshieldedBalance(unshieldedBalance);
+  }, [getBalance]);
+
+  useEffect(() => {
+    fetchBalances();
+  }, [fetchBalances]);
+
+  const renderBalanceCard = ({ name, balance, icon }: BalanceCard) => {
+    return (
+      <div
+        key={name}
+        className="grow shrink basis-0 p-6 bg-white rounded-xl border border-[#afafaf] flex-col justify-start items-start gap-2 inline-flex"
+      >
+        {icon}
+        <div className="self-stretch text-[#595959] text-sm font-semibold font-inter leading-[21px]">
+          {name}
+        </div>
+        <div className="self-stretch justify-start items-center gap-2 inline-flex">
+          <div className="text-black text-2xl font-medium font-['Inter'] leading-9">
+            Available Balance: {zatsToZec(balance)} ZEC
+          </div>
+          <div className="w-7 h-7 relative" />
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className="h-[390px] px-16 pt-12 pb-[72px] flex-col justify-center items-center gap-6 inline-flex">
+      <div className="py-6 self-start  gap-3 inline-flex">
+        <div className="grow shrink basis-0 flex-col justify-start items-start gap-2 inline-flex">
+          <div className="self-stretch text-black text-[44px] font-semibold font-['Inter'] leading-[52.80px]">
+            Account summary
+          </div>
+        </div>
+      </div>
+      <div
+        className={'rounded-2xl justify-start items-center gap-6 inline-flex'}
+      >
+        {BalanceCards.map((card) => renderBalanceCard(card))}
+      </div>
+    </div>
+  );
 }
 
 export default AccountSummary;
diff --git a/packages/web-wallet/src/pages/Dashboard.tsx b/packages/web-wallet/src/pages/Dashboard.tsx
index 10d634f..1087d02 100644
--- a/packages/web-wallet/src/pages/Dashboard.tsx
+++ b/packages/web-wallet/src/pages/Dashboard.tsx
@@ -47,7 +47,7 @@ const getClassNames = (isActive: boolean) => {
 const Dashboard: React.FC = () => {
   return (
     <div>
-      <nav className="flex space-x-9 mb-3">
+      <nav className="flex space-x-9 mb-3 max-w-[720px] items-center align-middle self-center m-auto ">
         {navItems.map((item) => (
           <NavLink
             key={item.to}
@@ -60,7 +60,9 @@ const Dashboard: React.FC = () => {
               <span
                 className={`inline-flex items-center hover:text-brand-orange navbar-link ${isActive && 'navbar-link-active'}`}
               >
-                <span className="text-brand-grey10  mr-2">{item.icon}</span>
+                <span className="text-brand-grey10 text-sm  mr-2">
+                  {item.icon}
+                </span>
                 {item.label}
               </span>
             )}
diff --git a/packages/web-wallet/src/pages/Home.tsx b/packages/web-wallet/src/pages/Home.tsx
index c7bc0d2..0a2eeb6 100644
--- a/packages/web-wallet/src/pages/Home.tsx
+++ b/packages/web-wallet/src/pages/Home.tsx
@@ -1,14 +1,32 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { MetaMaskLogoSvg, ZcashYellowSvg, FormTransferSvg } from '../assets';
 import { useMetaMask } from '@hooks/snaps/useMetaMask.ts';
 import { useRequestSnap } from '@hooks/snaps/useRequestSnap.ts';
 import { useNavigate } from 'react-router-dom';
+import { useInvokeSnap } from '@hooks/snaps/useInvokeSnap.ts';
+import { useWebZjsActions } from '@hooks/useWebzjsActions.ts';
 
 const Home: React.FC = () => {
+  const [birthdayHeight, setBirthdayHeight] = useState(0);
   const navigate = useNavigate();
+  const { flushDbToStore, addNewAccountFromUfvk } = useWebZjsActions();
+  const invokeSnap = useInvokeSnap();
   const { installedSnap, isFlask } = useMetaMask();
   const requestSnap = useRequestSnap();
 
+  const handleRequestSnapAndGetViewingkey = async (e) => {
+    e.preventDefault();
+    await requestSnap();
+
+    const viewKey = (await invokeSnap({ method: 'getViewingKey' })) as string;
+    console.log(viewKey);
+
+    await addNewAccountFromUfvk(viewKey, birthdayHeight);
+    setBirthdayHeight(0);
+
+    await flushDbToStore();
+  };
+
   useEffect(() => {
     if (installedSnap) navigate('/dashboard/account-summary');
   }, [installedSnap, navigate]);
@@ -31,7 +49,7 @@ const Home: React.FC = () => {
           </p>
           <button
             disabled={!isFlask}
-            onClick={requestSnap}
+            onClick={handleRequestSnapAndGetViewingkey}
             className="flex items-center bg-buttonBlackGradient hover:bg-buttonBlackGradientHover text-white px-6 py-3 rounded-[2rem]"
           >
             <span>Connect MetaMask Snap</span>
diff --git a/packages/web-wallet/src/utils/index.ts b/packages/web-wallet/src/utils/index.ts
index 1a54b09..58c4530 100644
--- a/packages/web-wallet/src/utils/index.ts
+++ b/packages/web-wallet/src/utils/index.ts
@@ -1 +1,2 @@
 export * from './metamask';
+export * from './zatsToZec';
diff --git a/packages/web-wallet/src/utils/zatsToZec.ts b/packages/web-wallet/src/utils/zatsToZec.ts
new file mode 100644
index 0000000..e9f4140
--- /dev/null
+++ b/packages/web-wallet/src/utils/zatsToZec.ts
@@ -0,0 +1,3 @@
+export function zatsToZec(zats: number): number {
+  return zats / 100_000_000;
+}