Merge pull request #108 from ChainSafe/irubido/shieldBalance

irubido · web-flow · commit 8312ccb0b333 · 2025-07-15T15:30:59.000+02:00
shield balance
diff --git a/packages/web-wallet/src/components/NavBar/NavBar.tsx b/packages/web-wallet/src/components/NavBar/NavBar.tsx
@@ -6,6 +6,7 @@ import {
   ArrowReceiveSvg,
   ArrowTransferSvg,
   SummarySvg,
+  ShieldSvg
 } from '../../assets';
 
 interface NavItem {
@@ -24,6 +25,11 @@ const navItems: NavItem[] = [
     to: 'transfer-balance',
     label: 'Transfer Balance',
     icon: <ArrowTransferSvg />,
+  },
+    {
+    to: 'shield-balance',
+    label: 'Shield Balance',
+    icon: <ShieldSvg />,
   },
   {
     to: 'receive',
diff --git a/packages/web-wallet/src/components/TransferCards/TransferConfirm.tsx b/packages/web-wallet/src/components/TransferCards/TransferConfirm.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import {
   TransferBalanceFormData,
   TransferBalanceFormType,
-} from './useTransferBalanceForm';
-import Button from '../../components/Button/Button';
+} from '../../pages/TransferBalance/useTransferBalanceForm';
+import Button from '../Button/Button';
 
 interface TransferConfirmProps {
   formData: TransferBalanceFormData;
diff --git a/packages/web-wallet/src/components/TransferCards/TransferInput.tsx b/packages/web-wallet/src/components/TransferCards/TransferInput.tsx
@@ -2,9 +2,9 @@ import React, { useState } from 'react';
 import {
   TransferBalanceFormData,
   TransferBalanceFormHandleChange,
-} from './useTransferBalanceForm';
-import Input from '../../components/Input/Input';
-import Button from '../../components/Button/Button';
+} from '../../pages/TransferBalance/useTransferBalanceForm';
+import Input from '../Input/Input';
+import Button from '../Button/Button';
 
 interface TransferInputProps {
   formData: TransferBalanceFormData;
diff --git a/packages/web-wallet/src/components/TransferCards/TransferResult.tsx b/packages/web-wallet/src/components/TransferCards/TransferResult.tsx
@@ -1,60 +1,69 @@
 import { useNavigate } from 'react-router-dom';
-import { TransferBalanceFormType } from './useTransferBalanceForm';
+import { TransferBalanceFormType } from '../../pages/TransferBalance/useTransferBalanceForm';
 import React from 'react';
 import { CheckSVG, WarningSVG } from '../../assets';
-import Button from '../../components/Button/Button';
-import TransactionStatusCard from '../../components/TransactionStatusCard/TransactionStatusCard';
+import Button from '../Button/Button';
+import TransactionStatusCard from '../TransactionStatusCard/TransactionStatusCard';
 import { PcztTransferStatus } from 'src/hooks/usePCZT';
 import Loader from 'src/components/Loader/Loader';
 
 interface TransferResultProps {
   pcztTransferStatus: PcztTransferStatus;
   resetForm: TransferBalanceFormType['resetForm'];
+  isShieldTransaction?: boolean;
 }
 
 export function TransferResult({
   pcztTransferStatus,
   resetForm,
+  isShieldTransaction,
 }: TransferResultProps): React.JSX.Element {
   const navigate = useNavigate();
 
+  const actionWord = isShieldTransaction ? 'Shielding' : 'Transfer';
+
   switch (pcztTransferStatus) {
     case PcztTransferStatus.SEND_SUCCESSFUL:
       return <TransactionStatusCard
-        headText="Transfer complete"
-        statusMessage="Your transaction has been sent."
+        headText={`${actionWord} complete`}
+        statusMessage={`Your transaction has been sent.`}
         icon={<CheckSVG />}
       >
         <Button
           onClick={() =>
             navigate('/dashboard/account-summary', { replace: true })
           }
-          label={'Back to Account Summary'}
-        />
-        <Button
-          variant="secondary"
-          classNames="border-[#0e0e0e]"
-          onClick={() => resetForm()}
-          label={'Make Another Transfer'}
+          label={`Back to Account Summary`}
         />
+        {!isShieldTransaction && (
+          <Button
+            variant="secondary"
+            classNames="border-[#0e0e0e]"
+            onClick={() => resetForm()}
+            label={'Make Another Transfer'}
+          />
+        )}
       </TransactionStatusCard>
 
     case PcztTransferStatus.SEND_ERROR:
       return <TransactionStatusCard
-        headText="Transfer incomplete"
-        statusMessage="Your transaction has not been sent."
+        headText={`${actionWord} incomplete`}
+        statusMessage={`Your transaction has not been sent.`}
         icon={<WarningSVG />}
       >
-        <Button
-          variant="primary"
-          onClick={() => resetForm()}
-          label={'Try Again'}
-        />
+
+        {!isShieldTransaction && (
+          <Button
+            variant="primary"
+            onClick={() => resetForm()}
+            label={'Try Again'}
+          />
+        )}
       </TransactionStatusCard>
 
     default:
       return <TransactionStatusCard
-        headText="Transfer in progres..."
+        headText={`${actionWord} in progres...`}
         statusMessage={pcztTransferStatus}
         icon={<Loader />}
       />
diff --git a/packages/web-wallet/src/components/TransferCards/index.tsx b/packages/web-wallet/src/components/TransferCards/index.tsx
@@ -0,0 +1,3 @@
+export * from "./TransferConfirm";
+export * from "./TransferInput";
+export * from "./TransferResult";
diff --git a/packages/web-wallet/src/hooks/usePCZT.ts b/packages/web-wallet/src/hooks/usePCZT.ts
@@ -12,6 +12,11 @@ interface IUsePczt {
     toAddress: string,
     value: string,
   ) => void;
+  handlePcztShieldTransaction: (
+    accountId: number,
+    toAddress: string,
+    value: string,
+  ) => void;
   pcztTransferStatus: PcztTransferStatus;
 }
 
@@ -38,10 +43,15 @@ export const usePczt = (): IUsePczt => {
   const createPCZT = async (
     accountId: number,
     toAddress: string,
-    value: bigint,
+    value: string,
   ) => {
     try {
-      return await state.webWallet!.pczt_create(accountId, toAddress, value);
+      const valueinZats = zecToZats(value);
+      return await state.webWallet!.pczt_create(
+        accountId,
+        toAddress,
+        valueinZats,
+      );
     } catch (error) {
       console.error('Error creating PCZT:', error);
       throw error;
@@ -90,48 +100,42 @@ export const usePczt = (): IUsePczt => {
     }
   };
 
-  const handlePcztTransaction = async (
+  const handlePcztGenericTransaction = async (
     accountId: number,
     toAddress: string,
     value: string,
+    createPcztFunc: (
+      accountId: number,
+      toAddress: string,
+      value: string,
+    ) => Promise<Pczt>,
   ) => {
     if (!state.webWallet) return;
     try {
       const chainHeight = await state.webWallet.get_latest_block();
-
       const isSynced =
         chainHeight.toString() ===
         state.summary?.fully_scanned_height.toString();
-
       setPcztTransferStatus(PcztTransferStatus.CHECK_LATEST_BLOCK);
       if (!isSynced) {
         setPcztTransferStatus(PcztTransferStatus.SYNCING_CHAIN);
         await triggerRescan();
       }
 
-      //Creating PCZT
       setPcztTransferStatus(PcztTransferStatus.CREATING_PCZT);
-      const valueinZats = zecToZats(value);
-      const pczt = await createPCZT(accountId, toAddress, valueinZats);
+      const pczt = await createPcztFunc(accountId, toAddress, value);
 
-      //Signing PCZT
       setPcztTransferStatus(PcztTransferStatus.SIGNING_PCZT);
       const pcztHexStringSigned = await signPczt(pczt, {
         recipient: toAddress,
         amount: value,
       });
-
       const pcztBufferSigned = Buffer.from(pcztHexStringSigned, 'hex');
+      const signedPczt = Pczt.from_bytes(new Uint8Array(pcztBufferSigned));
 
-      const pcztUint8ArraySigned = new Uint8Array(pcztBufferSigned);
-
-      const signedPczt = Pczt.from_bytes(pcztUint8ArraySigned);
-
-      //Proving PCZT
       setPcztTransferStatus(PcztTransferStatus.PROVING_PCZT);
       const provedPczt = await provePczt(signedPczt);
 
-      //Sending PCZT
       setPcztTransferStatus(PcztTransferStatus.SENDING_PCZT);
       await sendPczt(provedPczt);
       setPcztTransferStatus(PcztTransferStatus.SEND_SUCCESSFUL);
@@ -143,5 +147,30 @@ export const usePczt = (): IUsePczt => {
     }
   };
 
-  return { handlePcztTransaction, pcztTransferStatus };
+  const handlePcztShieldTransaction = async (
+    accountId: number,
+    toAddress: string,
+    value: string,
+  ) => {
+    await handlePcztGenericTransaction(
+      accountId,
+      toAddress,
+      value,
+      async (accountId) => await state.webWallet!.pczt_shield(accountId),
+    );
+  };
+
+  const handlePcztTransaction = async (
+    accountId: number,
+    toAddress: string,
+    value: string,
+  ) => {
+    await handlePcztGenericTransaction(accountId, toAddress, value, createPCZT);
+  };
+
+  return {
+    handlePcztTransaction,
+    handlePcztShieldTransaction,
+    pcztTransferStatus,
+  };
 };
diff --git a/packages/web-wallet/src/pages/ShieldBalance/ShieldBalance.tsx b/packages/web-wallet/src/pages/ShieldBalance/ShieldBalance.tsx
@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react';
+import { ZcashYellowPNG } from '../../assets';
+import PageHeading from '../../components/PageHeading/PageHeading';
+import useBalance from '../../hooks/useBalance';
+import { zatsToZec } from '../../utils';
+import Button from 'src/components/Button/Button';
+import { useWebZjsActions } from 'src/hooks';
+import { usePczt } from 'src/hooks/usePCZT';
+import { TransferResult } from 'src/components/TransferCards/TransferResult';
+
+export enum ShieldStatus {
+  DEFAULT = 'default',
+  SHIELDING = 'shielding',
+}
+
+export function ShieldBalance(): React.JSX.Element {
+  const { unshieldedBalance } = useBalance();
+  const [addresses, setAddresses] = useState<{
+    unifiedAddress: string;
+    transparentAddress: string;
+  }>({
+    unifiedAddress: '',
+    transparentAddress: '',
+  });
+
+  const { getAccountData } = useWebZjsActions();
+  const { handlePcztShieldTransaction, pcztTransferStatus } = usePczt();
+  const [shieldStatus, setShieldStatus] = useState(ShieldStatus.DEFAULT);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await getAccountData();
+      if (data)
+        setAddresses({
+          unifiedAddress: data.unifiedAddress,
+          transparentAddress: data.transparentAddress,
+        });
+    };
+    fetchData();
+  }, [getAccountData]);
+
+
+  const handleShieldBalance = () => {
+    setShieldStatus(ShieldStatus.SHIELDING);
+    handlePcztShieldTransaction(1, addresses.unifiedAddress, unshieldedBalance.toString());
+  }
+
+  return (
+    <div className="flex flex-col w-full">
+      <PageHeading title="Shield Balance">
+        <div className="flex items-center gap-2.5">
+          <span className="text-black text-base font-normal font-inter leading-tight">
+            Available unshielded balance:
+          </span>
+          <div className="px-4 py-2 bg-[#e8e8e8] rounded-3xl flex items-center gap-2.5">
+            <img
+              src={ZcashYellowPNG}
+              alt="Zcash Yellow"
+              className="w-5 h-5"
+            />
+            <span className="text-[#434343] text-base font-semibold font-inter leading-tight">
+              {zatsToZec(unshieldedBalance)} ZEC
+            </span>
+          </div>
+        </div>
+      </PageHeading>
+      {shieldStatus === ShieldStatus.DEFAULT && (
+        <div className="min-h-[460px] px-12 py-6 bg-white rounded-3xl border border-[#afafaf] flex-col justify-start items-center gap-6 inline-flex">
+          <div className="self-stretch h-[413px] flex-col justify-center items-center gap-3 flex">
+            <div className="self-stretch justify-start items-center gap-2 inline-flex">
+              <div className="grow shrink basis-0 text-black text-base font-medium font-['Roboto'] leading-normal">
+                To:
+              </div>
+              <div className="p-3 rounded-xl justify-start items-center gap-2 flex">
+                <div className="text-[#4f4f4f] text-base font-normal font-['Roboto'] break-all leading-normal">
+                  {addresses.unifiedAddress}
+                </div>
+              </div>
+            </div>
+            <div className="self-stretch justify-start items-center gap-2 inline-flex">
+              <div className="grow shrink basis-0 text-black text-base font-normal font-['Roboto'] leading-normal">
+                Amount:
+              </div>
+              <div className="px-4 py-1.5 bg-[#e8e8e8] rounded-3xl justify-center items-center gap-2.5 flex">
+                <div className="text-[#0e0e0e] text-sm font-medium font-['Roboto'] leading-[21px]">
+                  {zatsToZec(unshieldedBalance)} ZEC
+                </div>
+              </div>
+            </div>
+            <div className="self-stretch pt-6 flex-col justify-center items-center gap-3 flex">
+              <div className="justify-start items-start inline-flex">
+                <Button
+                  onClick={handleShieldBalance}
+                  label={'Shield balance'}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+      {shieldStatus === ShieldStatus.SHIELDING && (
+        <TransferResult
+          pcztTransferStatus={pcztTransferStatus}
+          resetForm={() => { }}
+          isShieldTransaction={true}
+        />
+      )}
+
+    </div>
+  );
+}
+
diff --git a/packages/web-wallet/src/pages/TransferBalance/TransferBalance.tsx b/packages/web-wallet/src/pages/TransferBalance/TransferBalance.tsx
diff --git a/packages/web-wallet/src/router/index.tsx b/packages/web-wallet/src/router/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export * from "./TransferConfirm";`
	`2`	`+export * from "./TransferInput";`
	`3`	`+export * from "./TransferResult";`