feat: refact cache behavior (#127)

packages/front/src/components/form/withdraw.tsx

@@ -98,13 +98,37 @@ export function Withdraw() {
 
       <If condition={!state.generatingProof || !!state.publicArgs}>
         <div
-          className="pt-[16px]"
+          className={loadingData ? 'pt-[16px]' : 'pt-0'}
         >
+          <If
+            condition={loadingData}
+          >
+            <div
+              className="mb-[16px] border-[#F8D45C] bg-[#2D2A1C] px-4 py-2 border rounded-[8px] relative z-[0]"
+            >
+              <div>
+                <span
+                  className="text-font-1 text-xxs font-[600]"
+                >
+                  Download security files
+                </span>
+              </div>
+
+              <div v-if="desc">
+                <span
+                  className="text-font-1 text-xxs font-[500]"
+                >
+                  Opact Tickets needs to download the security files so that you can proceed with the withdrawal.
+                </span>
+              </div>
+            </div>
+          </If>
+
           <WithdrawButton
-            isLoading={state.loading}
             buttonText={state.buttonText}
-            isDisabled={!state.fee.token || state.loading || state.isDisabled}
             onClick={() => preWithdraw(loadingData)}
+            isLoading={state.loading || loadingData}
+            isDisabled={!state.fee.token || state.loading || state.isDisabled || loadingData}
           />
         </div>
       </If>

packages/front/src/components/layout/app.tsx

@@ -2,15 +2,7 @@ import routes from "virtual:generated-pages-react";
 import { BrowserRouter as Router, useRoutes } from "react-router-dom";
 import TagManager from "react-gtm-module";
 
-const Pages = () => {
-  if (!window.location.hostname.includes('tickets')) {
-    const rebrandRoute = routes.find(({ path }: any) => path === 'rebrand')
-
-    return useRoutes([{ ...rebrandRoute, path: '/' }])
-
-  }
-  return useRoutes(routes);
-};
+const Pages = () => useRoutes(routes);
 
 export const App = () => {
   const tagManagerArgs = {

packages/front/src/hooks/withdraw.tsx

@@ -9,10 +9,6 @@ import {
   calculateRelayerFee,
 } from '@/utils/sdk'
 
-import {
-  RelayerDataInterface,
-} from "hideyourcash-sdk";
-
 export interface TicketStored {
   contract: string;
   counter: string;
@@ -70,17 +66,7 @@ export const useWithdraw = () => {
   }
 
   const preWithdraw = useCallback(async (loadingData) => {
-    if (loadingData) {
-      dispatch({
-        isDisable: true,
-        setShowWithdrawWarn: true,
-        buttonText: 'Downloading security files...'
-      })
-
-      return
-    }
-
-    if (!state.relayer || !state.receiver || !state.ticket) {
+    if (!state.relayer || !state.receiver || !state.ticket || loadingData) {
       return
     }
 
@@ -259,7 +245,7 @@ export const useWithdraw = () => {
         loading: false
       })
     }
-  }, 1000), [state.ticket, state.loading])
+  }, 1500), [state.ticket, state.loading])
 
   const fetchRelayer = useCallback(async () => {
     if (state.relayer) {