feat(wallet): Zcash Sync Account UI

components/brave_wallet/browser/brave_wallet_constants.h

@@ -1620,7 +1620,23 @@ inline constexpr webui::LocalizedString kLocalizedStrings[] = {
      IDS_BRAVE_WALLET_ACCOUNT_SHIELDED_DESCRIPTION},
     {"braveWalletShielded", IDS_BRAVE_WALLET_SHIELDED},
     {"braveWalletUnified", IDS_BRAVE_WALLET_UNIFIED},
-    {"braveWalletTransparent", IDS_BRAVE_WALLET_TRANSPARENT}};
+    {"braveWalletTransparent", IDS_BRAVE_WALLET_TRANSPARENT},
+    {"braveWalletOutOfSyncTitle", IDS_BRAVE_WALLET_OUT_OF_SYNC_TITLE},
+    {"braveWalletOutOfSyncBlocksBehindTitle",
+     IDS_BRAVE_WALLET_OUT_OF_SYNC_BLOCKS_BEHIND_TITLE},
+    {"braveWalletOutOfSyncDescription",
+     IDS_BRAVE_WALLET_OUT_OF_SYNC_DESCRIPTION},
+    {"braveWalletSyncAccountButton", IDS_BRAVE_WALLET_SYNC_ACCOUNT_BUTTON},
+    {"braveWalletSyncAccountName", IDS_BRAVE_WALLET_SYNC_ACCOUNT_NAME},
+    {"braveWalletInitializing", IDS_BRAVE_WALLET_INITIALIZING},
+    {"braveWalletProcessingBlock", IDS_BRAVE_WALLET_PROCESSING_BLOCK},
+    {"braveWalletBlocksLeft", IDS_BRAVE_WALLET_BLOCKS_LEFT},
+    {"braveWalletBlocksOfBlocks", IDS_BRAVE_WALLET_BLOCKS_OF_BLOCKS},
+    {"braveWalletRanges", IDS_BRAVE_WALLET_RANGES},
+    {"braveWalletPause", IDS_BRAVE_WALLET_PAUSE},
+    {"braveWalletSyncCompleteMessage", IDS_BRAVE_WALLET_SYNC_COMPLETE_MESSAGE},
+    {"braveWalletSyncStartedMessage", IDS_BRAVE_WALLET_SYNC_STARTED_MESSAGE},
+    {"braveWalletContinueUsingWallet", IDS_BRAVE_WALLET_CONTINUE_USING_WALLET}};
 
 // 0x swap constants
 inline constexpr char kZeroExBaseAPIURL[] = "https://api.0x.wallet.brave.com";

components/brave_wallet_ui/common/slices/api-base.slice.ts

@@ -85,7 +85,8 @@ export function createWalletApiBase() {
       'MeldPaymentMethods',
       'MeldWidget',
       'ZCashAccountInfo',
-      'IsShieldingAvailable'
+      'IsShieldingAvailable',
+      'ZcashChainTipStatus'
     ],
     endpoints: ({ mutation, query }) => ({})
   })

components/brave_wallet_ui/common/slices/api.slice.ts

@@ -203,6 +203,7 @@ export const {
   useGetAllKnownNetworksQuery,
   useGetBitcoinBalancesQuery,
   useGetBuyUrlQuery,
+  useGetChainTipStatusQuery,
   useGetCoingeckoIdQuery,
   useGetCoinMarketQuery,
   useGetDefaultEthereumWalletQuery,
@@ -278,6 +279,7 @@ export const {
   useLazyGetAllKnownNetworksQuery,
   useLazyGetBitcoinBalancesQuery,
   useLazyGetBuyUrlQuery,
+  useLazyGetChainTipStatusQuery,
   useLazyGetDefaultFiatCurrencyQuery,
   useLazyGetERC20AllowanceQuery,
   useLazyGetEVMTransactionSimulationQuery,
@@ -340,6 +342,8 @@ export const {
   useShowRecoveryPhraseMutation,
   useSignMessageHardwareMutation,
   useSpeedupTransactionMutation,
+  useStartShieldSyncMutation,
+  useStopShieldSyncMutation,
   useTransactionStatusChangedMutation,
   useUnapprovedTxUpdatedMutation,
   useUnlockWalletMutation,

components/brave_wallet_ui/common/slices/endpoints/zcash.endpoints.ts

@@ -22,7 +22,8 @@ export const zcashEndpoints = ({
           const { zcashWalletService } = baseQuery(undefined).data
 
           const { errorMessage } = await zcashWalletService.makeAccountShielded(
-            args, 0
+            args,
+            0
           )
 
           if (errorMessage) {
@@ -97,6 +98,94 @@ export const zcashEndpoints = ({
         }
       },
       providesTags: ['IsShieldingAvailable']
+    }),
+
+    getChainTipStatus: query<
+      BraveWallet.ZCashChainTipStatus | null,
+      BraveWallet.AccountId
+    >({
+      queryFn: async (args, { endpoint }, _extraOptions, baseQuery) => {
+        try {
+          const { zcashWalletService } = baseQuery(undefined).data
+
+          const { status } = await zcashWalletService.getChainTipStatus(
+            args,
+            BraveWallet.Z_CASH_MAINNET
+          )
+
+          return {
+            data: status
+          }
+        } catch (error) {
+          return handleEndpointError(
+            endpoint,
+            'Error getting Zcash Chain Tip Status info: ',
+            error
+          )
+        }
+      },
+      providesTags: ['ZcashChainTipStatus']
+    }),
+
+    startShieldSync: mutation<true, BraveWallet.AccountId>({
+      queryFn: async (args, { endpoint }, _extraOptions, baseQuery) => {
+        try {
+          const { zcashWalletService } = baseQuery(undefined).data
+
+          const { errorMessage } = await zcashWalletService.startShieldSync(
+            args,
+            0
+          )
+
+          if (errorMessage) {
+            return handleEndpointError(
+              endpoint,
+              'Error starting shield sync: ',
+              errorMessage
+            )
+          }
+
+          return {
+            data: true
+          }
+        } catch (error) {
+          return handleEndpointError(
+            endpoint,
+            'Error starting shield sync: ',
+            error
+          )
+        }
+      },
+      invalidatesTags: []
+    }),
+
+    stopShieldSync: mutation<true, BraveWallet.AccountId>({
+      queryFn: async (args, { endpoint }, _extraOptions, baseQuery) => {
+        try {
+          const { zcashWalletService } = baseQuery(undefined).data
+
+          const { errorMessage } = await zcashWalletService.stopShieldSync(args)
+
+          if (errorMessage) {
+            return handleEndpointError(
+              endpoint,
+              'Error stopping shield sync: ',
+              errorMessage
+            )
+          }
+
+          return {
+            data: true
+          }
+        } catch (error) {
+          return handleEndpointError(
+            endpoint,
+            'Error stopping shield sync: ',
+            error
+          )
+        }
+      },
+      invalidatesTags: ['ZcashChainTipStatus']
     })
   }
 }

components/brave_wallet_ui/components/desktop/popup-modals/zcash_sync_modal/zcash_sync_modal.stories.tsx

@@ -0,0 +1,32 @@
+// Copyright (c) 2025 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import * as React from 'react'
+
+// Mocks
+import { mockAccount } from '../../../../common/constants/mocks'
+
+// Components
+import {
+  WalletPageStory //
+} from '../../../../stories/wrappers/wallet-page-story-wrapper'
+import { ZCashSyncModal } from './zcash_sync_modal'
+
+export const _ZCashSyncModal = {
+  render: () => {
+    return (
+      <WalletPageStory>
+        <ZCashSyncModal
+          account={mockAccount}
+          onClose={() => {}}
+        />
+      </WalletPageStory>
+    )
+  }
+}
+
+export default {
+  component: ZCashSyncModal
+}

components/brave_wallet_ui/components/desktop/popup-modals/zcash_sync_modal/zcash_sync_modal.style.ts

@@ -0,0 +1,32 @@
+// Copyright (c) 2025 The Brave Authors. All rights reserved.
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this file,
+// You can obtain one at https://mozilla.org/MPL/2.0/.
+
+import styled from 'styled-components'
+import Progress from '@brave/leo/react/progressRing'
+
+// Constants
+import { layoutPanelWidth } from '../../wallet-page-wrapper/wallet-page-wrapper.style'
+
+// Shared Styles
+import { Column, Row } from '../../../shared/style'
+
+export const ProgressRing = styled(Progress)`
+  --leo-progressring-size: 144px;
+  margin-bottom: 24px;
+`
+
+export const ContentWrapper = styled(Column)`
+  padding: 16px 32px;
+  @media screen and (max-width: ${layoutPanelWidth}px) {
+    padding: 16px;
+  }
+`
+
+export const ButtonRow = styled(Row)`
+  padding: 32px;
+  @media screen and (max-width: ${layoutPanelWidth}px) {
+    padding: 24px 16px;
+  }
+`