Merge pull request #76 from lidofinance/feature/si-1940-update-tx-modal-texts

Text & tx refetch

Author: Jeday

features/adjustment/mint/hooks/use-mint.ts

@@ -6,25 +6,25 @@ import { type Address, encodeFunctionData } from 'viem';
 import { useSendTransaction, withSuccess } from 'modules/web3';
 
 import { dashboardAbi } from 'abi/dashboard-abi';
-import { useVaultInfo, useVaultPermission } from 'modules/vaults';
+import { useVaultInfo, useVaultPermission, vaultTexts } from 'modules/vaults';
 
 import { fallbackedAddress } from 'utils/fallbacked-address';
 
 import { useReportStatus } from 'features/report';
 import { GoToVault } from 'modules/vaults/components/go-to-vault';
 
 export const useMint = () => {
-  const { activeVault } = useVaultInfo();
+  const { activeVault, refetchVaultInfo } = useVaultInfo();
   const { isReportAvailable, prepareReportCall } = useReportStatus();
   const { sendTX, ...rest } = useSendTransaction();
 
   return {
     mint: useCallback(
-      async (recipient: Address, amount: bigint, token: string) => {
+      async (recipient: Address, amount: bigint, token: 'stETH' | 'wstETH') => {
         invariant(activeVault?.owner, '[useMint] owner is undefined');
 
-        const loadingActionText = `Minting ${token} backed by vault`;
-        const mainActionCompleteText = `Minted ${token} backed by vault`;
+        const loadingActionText = vaultTexts.actions.mint.loading(token);
+        const mainActionCompleteText = vaultTexts.actions.mint.completed(token);
 
         const mintCall = {
           to: activeVault.owner,
@@ -53,9 +53,19 @@ export const useMint = () => {
           }),
         );
 
+        if (success) {
+          await refetchVaultInfo();
+        }
+
         return success;
       },
-      [activeVault?.owner, prepareReportCall, sendTX, isReportAvailable],
+      [
+        activeVault?.owner,
+        refetchVaultInfo,
+        prepareReportCall,
+        sendTX,
+        isReportAvailable,
+      ],
     ),
     ...rest,
   };

features/adjustment/mint/mint-form-context/mint-form-provider.tsx

@@ -68,6 +68,10 @@ export const MintFormProvider: FC<{ children: ReactNode }> = ({ children }) => {
       invariant(recipient, '[MintFormProvider] recipient is undefined');
       invariant(amount, '[MintFormProvider] amount is undefined');
       invariant(token, '[MintFormProvider] token is undefined');
+      invariant(
+        token === 'stETH' || token === 'wstETH',
+        '[MintFormProvider] token is invalid',
+      );
 
       return await mint(recipient, amount, token);
     },

features/adjustment/repay/hooks/use-burn.ts

@@ -4,7 +4,7 @@ import { useEstimateGas, useAccount } from 'wagmi';
 import { encodeFunctionData } from 'viem';
 
 import { dashboardAbi } from 'abi/dashboard-abi';
-import { useVaultInfo, useVaultPermission } from 'modules/vaults';
+import { useVaultInfo, useVaultPermission, vaultTexts } from 'modules/vaults';
 
 import {
   TransactionEntry,
@@ -15,19 +15,20 @@ import {
 import { GoToVault } from 'modules/vaults/components/go-to-vault';
 
 export const useBurn = () => {
-  const { activeVault } = useVaultInfo();
+  const { activeVault, refetchVaultInfo } = useVaultInfo();
   const { stETH, wstETH } = useLidoSDK();
   const { sendTX, ...rest } = useSendTransaction();
 
   return {
     burn: useCallback(
-      async (amount: bigint, token: string) => {
+      async (amount: bigint, token: 'stETH' | 'wstETH') => {
         invariant(activeVault?.owner, '[useMint] owner is undefined');
 
-        const loadingActionText = `Repaying ${token}`;
-        const mainActionCompleteText = `Repaid ${token}`;
+        const loadingActionText = vaultTexts.actions.repay.loading(token);
+        const mainActionCompleteText =
+          vaultTexts.actions.repay.completed(token);
 
-        const transactions = async () => {
+        const prepareTransactions = async () => {
           const calls: TransactionEntry[] = [];
 
           const isSteth = token === 'stETH';
@@ -43,7 +44,7 @@ export const useBurn = () => {
                 amount,
                 to: activeVault.owner,
               })),
-              loadingActionText: `Approving ${token}`,
+              loadingActionText: vaultTexts.actions.approve.loading(token),
             };
             calls.push(approveCall);
           }
@@ -61,17 +62,21 @@ export const useBurn = () => {
 
         const { success } = await withSuccess(
           sendTX({
-            transactions,
+            transactions: prepareTransactions,
             forceAtomic: true,
             mainActionLoadingText: loadingActionText,
             mainActionCompleteText,
             renderSuccessContent: GoToVault,
           }),
         );
 
+        if (success) {
+          await refetchVaultInfo();
+        }
+
         return success;
       },
-      [activeVault?.owner, sendTX, stETH, wstETH],
+      [activeVault?.owner, refetchVaultInfo, sendTX, stETH, wstETH],
     ),
     ...rest,
   };

features/adjustment/repay/repay-form-context/repay-form-provider.tsx

@@ -93,7 +93,10 @@ export const RepayFormProvider = ({ children }: { children: ReactNode }) => {
       if (!amount || !token) return false;
 
       invariant(amount, '[RepayFormProvider] amount is undefined');
-      invariant(token, '[RepayFormProvider] token is undefined');
+      invariant(
+        token === 'stETH' || token === 'wstETH',
+        '[RepayFormProvider] token is invalid',
+      );
 
       return await burn(amount, token);
     },

features/claim/claim-form/hooks/use-claim.ts

@@ -3,14 +3,14 @@ import { useEstimateGas, useAccount } from 'wagmi';
 import { Address, encodeFunctionData } from 'viem';
 
 import { dashboardAbi } from 'abi/dashboard-abi';
-import { useVaultInfo, useVaultPermission } from 'modules/vaults';
+import { useVaultInfo, useVaultPermission, vaultTexts } from 'modules/vaults';
 import invariant from 'tiny-invariant';
 import { fallbackedAddress } from 'utils/fallbacked-address';
 import { useSendTransaction, withSuccess } from 'modules/web3';
 import { GoToVault } from 'modules/vaults/components/go-to-vault';
 
 export const useClaim = () => {
-  const { activeVault } = useVaultInfo();
+  const { activeVault, refetchVaultInfo } = useVaultInfo();
   const owner = activeVault?.owner;
   const { sendTX, ...rest } = useSendTransaction();
 
@@ -19,8 +19,8 @@ export const useClaim = () => {
       async (recipient: Address) => {
         invariant(owner, '[useClaim] owner is undefined');
 
-        const loadingActionText = `Claiming node operator fee`;
-        const mainActionCompleteText = `Claimed node operator fee`;
+        const loadingActionText = vaultTexts.actions.claim.loading;
+        const mainActionCompleteText = vaultTexts.actions.claim.completed;
 
         const claimCall = {
           to: owner,
@@ -41,9 +41,13 @@ export const useClaim = () => {
           }),
         );
 
+        if (success) {
+          await refetchVaultInfo();
+        }
+
         return success;
       },
-      [owner, sendTX],
+      [owner, refetchVaultInfo, sendTX],
     ),
     ...rest,
   };

features/create-vault/consts.ts

@@ -1,11 +1,12 @@
+import { vaultTexts } from 'modules/vaults';
 import { MainSettingsEntryType } from './types';
 
 export enum CREATE_VAULT_FORM_STEPS {
   main = 1,
   confirm,
 }
 
-const steps = ['Main settings', 'Verify new vault’s settings'];
+const steps = vaultTexts.actions.createVault.steps;
 
 export const SECTION_NAMES_BY_STEP = steps.reduce(
   (acc, step, index) => ({
@@ -17,43 +18,39 @@ export const SECTION_NAMES_BY_STEP = steps.reduce(
 
 export const CREATE_VAULT_STEPS = steps.length;
 
+const texts = vaultTexts.actions.createVault.fields;
+
 export const MAIN_SETTINGS: MainSettingsEntryType[] = [
   {
     name: 'nodeOperator',
-    title: 'Node Operator',
-    label: 'Node Operator address',
-    notes: 'Node Operator address cannot be changed after the vault is created',
     dataType: 'address',
+    ...texts.nodeOperator,
   },
   {
     name: 'nodeOperatorFeeBP',
-    title: 'Node Operator fee',
-    label: 'Node Operator fee, %',
     dataType: 'percent',
     type: 'number',
+    ...texts.nodeOperatorFee,
   },
   {
     name: 'confirmExpiry',
-    title: 'Confirmation Lifetime',
-    label: 'Confirmation Lifetime, hours',
     dataType: 'time',
     type: 'number',
+    ...texts.confirmationLifetime,
   },
   {
     name: 'vaultManager',
-    title: 'Vault Manager',
-    label: 'Vault Manager address',
     dataType: 'addressArray',
+    ...texts.vaultManager,
   },
   {
     name: 'nodeOperatorManager',
-    title: 'Node Operator Manager',
-    label: 'Node Operator Manager address',
     dataType: 'address',
+    ...texts.nodeOperatorManager,
   },
   {
     name: 'acceptTerms',
-    notes: 'Vault creation requires a supply of 1 ETH.',
     dataType: 'confirm',
+    ...texts.acceptTerms,
   },
 ];

features/create-vault/create-vault-faq/create-vault-faq.tsx

@@ -1,13 +1,14 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 
-import { SomeFaqItem, AnotherFaqItem } from './list';
-import { Wrapper } from './styles';
+import { FAQ } from 'shared/components/faq';
+
+import { FeeStructure, Roles } from './items';
 
 export const CreateVaultFaq: FC = () => {
   return (
-    <Wrapper title="FAQ">
-      <SomeFaqItem />
-      <AnotherFaqItem />
-    </Wrapper>
+    <FAQ.List>
+      <Roles defaultExpanded />
+      <FeeStructure />
+    </FAQ.List>
   );
 };

features/create-vault/create-vault-faq/items/fee-structure.tsx

@@ -0,0 +1,42 @@
+import type { FC } from 'react';
+import { FAQ, FAQComponentProps } from 'shared/components/faq';
+
+export const FeeStructure: FC<FAQComponentProps> = ({ defaultExpanded }) => {
+  return (
+    <FAQ.Item title="Fee structure" defaultExpanded={defaultExpanded}>
+      There are two main fees applied on the vault:
+      <ul>
+        <li>Node Operator Fee</li>
+        <li>Lido Fees</li>
+      </ul>
+      <p>
+        The validation rewards receiving by the vault are subject to the Node
+        Operator Fee.
+      </p>
+      <p>
+        Node Operator Fee is not therefore deducted from the rewards
+        automatically, but remain part of validators balance and vault balance
+        as they are received. The accumulated Node Operator Fee is counted and
+        reported by the Oracle regularly, and locked for the withdrawn by the
+        Vault Owner so that only Node Operator representative can claim it.
+      </p>
+      Lido fees consist of two potential parts depending on the stVault selected
+      tier:
+      <ul>
+        <li>
+          Infrastructure fee, charged for using the stVaults infrastructure.
+          Calculated from the stVault’s total value.
+        </li>
+        <li>
+          Liquidity fee, charged for actual liquidity usage. Calculated from the
+          stETH liability.
+        </li>
+      </ul>
+      <p>
+        Lido fees amount is locked for the withdrawn by the Vault Owner and
+        claimed automatically from the vault contract balance within the Oracle
+        report applying.
+      </p>
+    </FAQ.Item>
+  );
+};

features/create-vault/create-vault-faq/items/index.ts

@@ -0,0 +1,2 @@
+export * from './roles';
+export * from './fee-structure';

features/create-vault/create-vault-faq/items/roles.tsx

@@ -0,0 +1,30 @@
+import type { FC } from 'react';
+import { FAQ, FAQComponentProps } from 'shared/components/faq';
+
+export const Roles: FC<FAQComponentProps> = ({ defaultExpanded }) => {
+  return (
+    <FAQ.Item title="Roles" defaultExpanded={defaultExpanded}>
+      There are three main roles in the stVault:
+      <ol>
+        <li>
+          <strong>Node Operator:</strong> provides validation service for the
+          vault: handles depositing ETH from the vault balance to validators and
+          exiting validators if necessary. Address of the Node Operator can’t be
+          changed after the vault is created.
+        </li>
+        <li>
+          <strong>Vault Owner:</strong> is one of the two admin roles for the
+          stVault, allows to manage permissions and change key vault parameters
+          from the Vault Owner (Staker) perspective. Multiple addresses
+          supported.
+        </li>
+        <li>
+          <strong>Node Operator Manager:</strong> is another of the two admin
+          roles for the stVault, allows to manage permissions and change key
+          vault parameters from the Node Operator perspective. Multiple
+          addresses supported.
+        </li>
+      </ol>
+    </FAQ.Item>
+  );
+};