fix: persisting of user settings (#3657)

VenusProtocol · Dec 20, 2024 · e9fe7c8 · e9fe7c8
1 parent 1345c9d
commit e9fe7c8
Show file tree

Hide file tree

Showing 11 changed files with 49 additions and 141 deletions.
diff --git a/.changeset/fresh-hounds-move.md b/.changeset/fresh-hounds-move.md
@@ -0,0 +1,5 @@
+---
+"@venusprotocol/evm": patch
+---
+
+fix how user settings are persisted
diff --git a/apps/evm/package.json b/apps/evm/package.json
@@ -38,6 +38,7 @@
     "@ethersproject/contracts": "^5.7.0",
     "@ethersproject/providers": "^5.7.2",
     "@ethersproject/web": "^5.7.1",
+    "@fastify/deepmerge": "^2.0.0",
     "@hookform/resolvers": "^3.3.2",
     "@lauriys/react-palette": "^1.0.5",
     "@mui/material": "^5.4.2",

diff --git a/apps/evm/src/containers/Layout/Header/TopBar/ChainSelect/index.tsx b/apps/evm/src/containers/Layout/Header/TopBar/ChainSelect/index.tsx
@@ -43,14 +43,14 @@ export const ChainSelect: React.FC<ChainSelectProps> = props => {
   const { t } = useTranslation();
   const { chainId } = useChainId();
   const { switchChain } = useSwitchChain();
-  const [{ gaslessTransactions: isGaslessTransactionsSettingEnabled }] = useUserChainSettings();
+  const [userChainSettings] = useUserChainSettings();
 
   return (
     <Select
       value={chainId}
       onChange={newChainId => switchChain({ chainId: Number(newChainId) })}
       options={getOptions({
-        isGaslessTransactionsSettingEnabled,
+        isGaslessTransactionsSettingEnabled: !!userChainSettings?.gaslessTransactions,
       })}
       menuPosition="right"
       menuTitle={t('layout.chainSelect.label')}

diff --git a/apps/evm/src/containers/Layout/Header/TopBar/GaslessStatus/index.tsx b/apps/evm/src/containers/Layout/Header/TopBar/GaslessStatus/index.tsx
@@ -27,7 +27,7 @@ export const GaslessStatus: React.FC<GaslessStatusProps> = ({
     chainId: chainId ?? chainIdFromHook,
   });
 
-  const [{ gaslessTransactions: isGaslessTransactionsSettingEnabled }] = useUserChainSettings();
+  const [userChainSettings] = useUserChainSettings();
 
   if (!sponsorshipVaultData?.canSponsorTransactions) {
     return undefined;
@@ -56,7 +56,7 @@ export const GaslessStatus: React.FC<GaslessStatusProps> = ({
             // t('gaslessTransactions.tooltip.enabled')
             // t('gaslessTransactions.tooltip.disabled')
             i18nKey={
-              isGaslessTransactionsSettingEnabled
+              userChainSettings?.gaslessTransactions
                 ? 'gaslessTransactions.tooltip.enabled'
                 : 'gaslessTransactions.tooltip.disabled'
             }

diff --git a/apps/evm/src/containers/Layout/Header/TopBar/MdUpControls/index.tsx b/apps/evm/src/containers/Layout/Header/TopBar/MdUpControls/index.tsx
@@ -8,7 +8,7 @@ import { GaslessStatus } from '../GaslessStatus';
 
 export const MdUpControls: React.FC = () => {
   const isOnMarketPage = useIsOnMarketPage();
-  const [{ gaslessTransactions: isGaslessTransactionsSettingEnabled }] = useUserChainSettings();
+  const [userChainSettings] = useUserChainSettings();
 
   return (
     <div className="hidden md:flex md:h-12 md:items-center md:space-x-4 md:pl-6">
@@ -22,7 +22,7 @@ export const MdUpControls: React.FC = () => {
         displayLabel
         className={cn(
           'cursor-help transition-opacity',
-          !isGaslessTransactionsSettingEnabled && 'opacity-50',
+          !userChainSettings?.gaslessTransactions && 'opacity-50',
         )}
       />
 

diff --git a/apps/evm/src/hooks/useSendTransaction/__tests__/index.gaslessTransactions.spec.tsx b/apps/evm/src/hooks/useSendTransaction/__tests__/index.gaslessTransactions.spec.tsx
@@ -18,7 +18,7 @@ import { useTrackTransaction } from '../useTrackTransaction';
 
 vi.mock('../useTrackTransaction');
 vi.mock('hooks/useUserChainSettings', () => ({
-  useUserChainSettings: vi.fn(() => [initialUserSettings[ChainId.BSC_TESTNET], vi.fn()]),
+  useUserChainSettings: vi.fn(() => [initialUserSettings[ChainId.ZKSYNC_SEPOLIA], vi.fn()]),
 }));
 vi.mock('containers/ResendPayingGasModal/store', () => ({
   store: {

diff --git a/apps/evm/src/hooks/useSendTransaction/index.ts b/apps/evm/src/hooks/useSendTransaction/index.ts
@@ -64,7 +64,7 @@ export const useSendTransaction = <
   const { mutateAsync: sendContractTransaction } = useSendContractTransaction();
   const openResendPayingGasModalStoreModal = resendPayingGasModalStore.use.openModal();
 
-  const [{ gaslessTransactions: isGaslessTransactionsSettingEnabled }] = useUserChainSettings();
+  const [userChainSettings] = useUserChainSettings();
 
   const { data: getPaymasterInfo, refetch: refetchPaymasterInfo } = useGetPaymasterInfo(
     {
@@ -84,7 +84,7 @@ export const useSendTransaction = <
   // 4) there are funds in the paymaster wallet
   const shouldTryGasless =
     isGaslessTransactionsFeatureEnabled &&
-    isGaslessTransactionsSettingEnabled &&
+    !!userChainSettings?.gaslessTransactions &&
     tryGasless &&
     paymasterCanSponsorTransactions;
 

diff --git a/apps/evm/src/pages/Account/Settings/index.tsx b/apps/evm/src/pages/Account/Settings/index.tsx
@@ -10,10 +10,12 @@ export const Settings: React.FC = () => {
   const { name: chainName } = useGetChainMetadata();
   const isGaslessTransactionsFeatureEnabled = useIsFeatureEnabled({ name: 'gaslessTransactions' });
 
-  const [{ gaslessTransactions }, setUserChainSettings] = useUserChainSettings();
+  const [userChainSettings, setUserChainSettings] = useUserChainSettings();
+  const isGaslessTransactionsUserSettingEnabled = !!userChainSettings?.gaslessTransactions;
+
   const toggleGaslessTransactions = () =>
     setUserChainSettings({
-      gaslessTransactions: !gaslessTransactions,
+      gaslessTransactions: !isGaslessTransactionsUserSettingEnabled,
     });
 
   if (!isGaslessTransactionsFeatureEnabled) {
@@ -35,7 +37,11 @@ export const Settings: React.FC = () => {
               })}
             </p>
 
-            <Toggle onChange={toggleGaslessTransactions} value={gaslessTransactions} isLight />
+            <Toggle
+              onChange={toggleGaslessTransactions}
+              value={isGaslessTransactionsUserSettingEnabled}
+              isLight
+            />
           </div>
         </div>
       </Card>

diff --git a/apps/evm/src/store/__tests__/__snapshots__/index.spec.ts.snap b/apps/evm/src/store/__tests__/__snapshots__/index.spec.ts.snap
@@ -49,45 +49,15 @@ exports[`store > setUserSettings > updates user settings correctly 1`] = `
 
 exports[`store > setUserSettings > updates user settings correctly when passing chainIds 1`] = `
 {
-  "1": {
-    "gaslessTransactions": true,
-  },
-  "10": {
-    "gaslessTransactions": true,
-  },
-  "11155111": {
-    "gaslessTransactions": true,
-  },
-  "11155420": {
-    "gaslessTransactions": true,
-  },
-  "204": {
-    "gaslessTransactions": true,
-  },
   "300": {
     "gaslessTransactions": true,
   },
   "324": {
     "gaslessTransactions": true,
   },
-  "42161": {
-    "gaslessTransactions": true,
-  },
   "421614": {
     "gaslessTransactions": false,
   },
-  "56": {
-    "gaslessTransactions": true,
-  },
-  "5611": {
-    "gaslessTransactions": true,
-  },
-  "8453": {
-    "gaslessTransactions": true,
-  },
-  "84532": {
-    "gaslessTransactions": true,
-  },
   "97": {
     "gaslessTransactions": false,
   },
@@ -96,47 +66,11 @@ exports[`store > setUserSettings > updates user settings correctly when passing
 
 exports[`store > userSettings > sets correct initial user settings 1`] = `
 {
-  "1": {
-    "gaslessTransactions": true,
-  },
-  "10": {
-    "gaslessTransactions": true,
-  },
-  "11155111": {
-    "gaslessTransactions": true,
-  },
-  "11155420": {
-    "gaslessTransactions": true,
-  },
-  "204": {
-    "gaslessTransactions": true,
-  },
   "300": {
     "gaslessTransactions": true,
   },
   "324": {
     "gaslessTransactions": true,
   },
-  "42161": {
-    "gaslessTransactions": true,
-  },
-  "421614": {
-    "gaslessTransactions": true,
-  },
-  "56": {
-    "gaslessTransactions": true,
-  },
-  "5611": {
-    "gaslessTransactions": true,
-  },
-  "8453": {
-    "gaslessTransactions": true,
-  },
-  "84532": {
-    "gaslessTransactions": true,
-  },
-  "97": {
-    "gaslessTransactions": true,
-  },
 }
 `;
diff --git a/apps/evm/src/store/index.ts b/apps/evm/src/store/index.ts
@@ -1,3 +1,4 @@
+import createDeepMerge from '@fastify/deepmerge';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
@@ -8,24 +9,27 @@ interface UserChainSettings {
   gaslessTransactions: boolean;
 }
 
+type UserSettings = Partial<Record<ChainId, UserChainSettings>>;
+
 export interface State {
-  userSettings: Record<ChainId, UserChainSettings>;
+  userSettings: UserSettings;
   setUserSettings: (input: {
     settings: Partial<UserChainSettings>;
     chainIds?: ChainId[];
   }) => void;
 }
 
+const deepMerge = createDeepMerge({ all: true });
+
 const allChainIds = extractEnumValues(ChainId);
-export const initialUserSettings = allChainIds.reduce(
-  (acc, chainId) => ({
-    ...acc,
-    [chainId]: {
-      gaslessTransactions: true,
-    },
-  }),
-  {} as Record<ChainId, UserChainSettings>,
-);
+export const initialUserSettings: UserSettings = {
+  [ChainId.ZKSYNC_MAINNET]: {
+    gaslessTransactions: true,
+  },
+  [ChainId.ZKSYNC_SEPOLIA]: {
+    gaslessTransactions: true,
+  },
+};
 
 const useStore = create<State>()(
   persist(
@@ -54,6 +58,7 @@ const useStore = create<State>()(
     }),
     {
       name: 'venus-global-store',
+      merge: (persisted, current) => deepMerge(current, persisted) as never,
     },
   ),
 );