Merge pull request #20 from lidofinance/feature/si-772-withdrawals-re…

…quest-demo

Feature/si 772 withdrawals request demo

packages/sdk/README.md

@@ -508,6 +508,13 @@ try {
 - approveWstethMultisig
 - approveMultisigByToken
 
+##### Views
+
+- getAllowanceByToken
+- checkAllowanceByToken
+- checkAllowanceSteth
+- checkAllowanceWsteth
+
 ### Views
 
 - getWithdrawalRequestsIds

packages/sdk/src/withdrawals/bus.ts

@@ -8,15 +8,15 @@ import { LidoSDKWithdrawalsApprove } from './withdrawalsApprove.js';
 import { type LidoSDKWithdrawalsProps } from './types.js';
 
 export class Bus {
-  props: LidoSDKWithdrawalsProps;
-  version: string | undefined;
-
-  coreInstance: LidoSDKCore | undefined;
-  contractInstance: LidoSDKWithdrawalsContract | undefined;
-  viewsInstance: LidoSDKWithdrawalsViews | undefined;
-  requestsInfoInstance: LidoSDKWithdrawalsRequestsInfo | undefined;
-  permitInstance: LidoSDKWithdrawalsPermit | undefined;
-  approvalInstance: LidoSDKWithdrawalsApprove | undefined;
+  private props: LidoSDKWithdrawalsProps;
+  private version: string | undefined;
+
+  private coreInstance: LidoSDKCore | undefined;
+  private contractInstance: LidoSDKWithdrawalsContract | undefined;
+  private viewsInstance: LidoSDKWithdrawalsViews | undefined;
+  private requestsInfoInstance: LidoSDKWithdrawalsRequestsInfo | undefined;
+  private permitInstance: LidoSDKWithdrawalsPermit | undefined;
+  private approvalInstance: LidoSDKWithdrawalsApprove | undefined;
 
   constructor(props: LidoSDKWithdrawalsProps, version?: string) {
     this.props = props;

packages/sdk/src/withdrawals/withdrawalsApprove.ts

@@ -17,26 +17,29 @@ export class LidoSDKWithdrawalsApprove {
   }
 
   @Logger('Call:')
+  @ErrorHandler('Error:')
   public async approve(props: ApproveProps) {
     const { account } = props;
     invariant(this.bus.core.web3Provider, 'Web3 provider is not defined');
     invariant(this.bus.core.rpcProvider, 'RPC provider is not defined');
 
     const isContract = await this.bus.core.isContract(account);
 
-    if (isContract) return await this.approveMultisigByToken(props);
-    else return await this.approveByToken(props);
+    if (isContract) return this.approveMultisigByToken(props);
+    else return this.approveByToken(props);
   }
 
   @Logger('Call:')
+  @ErrorHandler('Error:')
   public async approveEOA(props: ApproveProps) {
     invariant(this.bus.core.web3Provider, 'Web3 provider is not defined');
     invariant(this.bus.core.rpcProvider, 'RPC provider is not defined');
 
-    this.approveByToken(props);
+    return this.approveByToken(props);
   }
 
   @Logger('Call:')
+  @ErrorHandler('Error:')
   public async approveMultisig(props: ApproveProps) {
     invariant(this.bus.core.web3Provider, 'Web3 provider is not defined');
 
@@ -46,13 +49,13 @@ export class LidoSDKWithdrawalsApprove {
   @Logger('Call:')
   @ErrorHandler('Error:')
   public async approveSteth(props: Omit<ApproveProps, 'token'>) {
-    this.approveByToken({ ...props, token: 'stETH' });
+    return this.approveByToken({ ...props, token: 'stETH' });
   }
 
   @Logger('Call:')
   @ErrorHandler('Error:')
   public async approveWsteth(props: Omit<ApproveProps, 'token'>) {
-    this.approveByToken({ ...props, token: 'wstETH' });
+    return this.approveByToken({ ...props, token: 'wstETH' });
   }
 
   @Logger('Call:')
@@ -217,22 +220,60 @@ export class LidoSDKWithdrawalsApprove {
 
   @Logger('Utils:')
   @ErrorHandler('Error:')
-  public async checkApprovalSteth(amount: string, account: Address) {
-    return this.checkApprovalByToken(amount, account, 'wstETH');
+  public async checkAllowanceSteth(amount: string, account: Address) {
+    return this.checkAllowanceByToken({ amount, account, token: 'wstETH' });
   }
 
   @Logger('Utils:')
   @ErrorHandler('Error:')
-  public async checkApprovalWsteth(amount: string, account: Address) {
-    return this.checkApprovalByToken(amount, account, 'wstETH');
+  public async checkAllowanceWsteth(amount: string, account: Address) {
+    return this.checkAllowanceByToken({ amount, account, token: 'wstETH' });
   }
 
   @Logger('Utils:')
-  public async checkApprovalByToken(
-    amount: string,
-    account: Address,
-    token: 'stETH' | 'wstETH',
-  ) {
+  @ErrorHandler('Error:')
+  public async getAllowanceByToken({
+    account,
+    token,
+  }: {
+    account: Address;
+    token: 'stETH' | 'wstETH';
+  }) {
+    invariant(this.bus.core.rpcProvider, 'RPC provider is not defined');
+
+    const isSteth = token === 'stETH';
+    let allowanceMethod;
+
+    if (isSteth)
+      allowanceMethod = (await this.bus.contract.getContractStETH()).read
+        .allowance;
+    else
+      allowanceMethod = (await this.bus.contract.getContractWstETH()).read
+        .allowance;
+
+    const addressWithdrawalsQueue =
+      await this.bus.contract.contractAddressWithdrawalsQueue();
+
+    const allowance = await allowanceMethod.call(
+      this,
+      [account, addressWithdrawalsQueue],
+      { account },
+    );
+
+    return allowance;
+  }
+
+  @Logger('Utils:')
+  @ErrorHandler('Error:')
+  public async checkAllowanceByToken({
+    amount,
+    account,
+    token,
+  }: {
+    amount: string;
+    account: Address;
+    token: 'stETH' | 'wstETH';
+  }) {
     invariant(this.bus.core.rpcProvider, 'RPC provider is not defined');
 
     const isSteth = token === 'stETH';
@@ -253,7 +294,7 @@ export class LidoSDKWithdrawalsApprove {
       [account, addressWithdrawalsQueue],
       { account },
     );
-    const isNeedApprove = allowance > parseEther(amount);
+    const isNeedApprove = allowance < parseEther(amount);
 
     return { allowance, isNeedApprove };
   }

playground/components/action/action.tsx

@@ -136,7 +136,7 @@ export const Action = <TResult,>({
         <Button loading={loading} onClick={startLoading}>
           {title}
         </Button>
-        {result && renderResult(result)}
+        {result !== undefined && renderResult(result)}
         {!!error && renderError(error)}
       </Controls>
     </ActionBlock>

playground/demo/core/index.tsx

@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Input, Section } from '@lidofinance/lido-ui';
+import { useCallback, useEffect, useState } from 'react';
+import { Input, Accordion } from '@lidofinance/lido-ui';
 import { Action } from 'components/action';
 import { useLidoSDK } from 'providers/sdk';
 
@@ -17,7 +17,7 @@ export const CoreDemo = () => {
   }, [getStethContract]);
 
   return (
-    <Section title="Core">
+    <Accordion summary="Core">
       <Action
         title="Get Fee Data"
         action={async () => await core.getFeeData()}
@@ -33,6 +33,6 @@ export const CoreDemo = () => {
           onChange={(e) => setContractAddress(e.currentTarget.value)}
         />
       </Action>
-    </Section>
+    </Accordion>
   );
 };

playground/demo/index.tsx

@@ -1,11 +1,14 @@
 import { CoreDemo } from './core';
 import { StakeDemo } from './stake';
+import { WithdrawalsRequestDemo, WithdrawalsViewsDemo } from './withdrawals';
 
 export const Demo = () => {
   return (
     <>
       <StakeDemo />
       <CoreDemo />
+      <WithdrawalsRequestDemo />
+      <WithdrawalsViewsDemo />
     </>
   );
 };

playground/demo/stake/index.tsx

@@ -1,4 +1,4 @@
-import { Input, Section } from '@lidofinance/lido-ui';
+import { Input, Accordion } from '@lidofinance/lido-ui';
 import { useWeb3 } from '@reef-knot/web3-react';
 import { Action } from 'components/action';
 import TokenInput from 'components/tokenInput/tokenInput';
@@ -17,7 +17,7 @@ export const StakeDemo = () => {
     : undefined;
 
   return (
-    <Section title="Staking">
+    <Accordion summary="Staking">
       <Action
         title="Stake"
         action={() => staking.stake({ value: stakingValue, account })}
@@ -68,6 +68,6 @@ export const StakeDemo = () => {
         title="Get Contract Steth ABI"
         action={async () => (await staking.getContractStETH()).abi}
       />
-    </Section>
+    </Accordion>
   );
 };

playground/demo/withdrawals/index.ts

@@ -0,0 +1,2 @@
+export { WithdrawalsRequestDemo } from './request';
+export { WithdrawalsViewsDemo } from './views';

playground/demo/withdrawals/request.tsx

@@ -0,0 +1,90 @@
+import { Accordion } from '@lidofinance/lido-ui';
+import { useWeb3 } from '@reef-knot/web3-react';
+import { Action } from 'components/action';
+import TokenInput from 'components/tokenInput/tokenInput';
+import { useLidoSDK } from 'providers/sdk';
+import { useState } from 'react';
+import { parseEther } from '@ethersproject/units';
+
+export const WithdrawalsRequestDemo = () => {
+  const { account: web3account = '0x0' } = useWeb3();
+  const [requestValue, setRequestValue] = useState('0.001');
+  const { withdrawals } = useLidoSDK();
+
+  const account = web3account as `0x{string}`;
+
+  return (
+    <Accordion summary="Withdrawals requests">
+      <Action
+        title="Request stETH"
+        action={() =>
+          withdrawals.request({
+            account,
+            amount: requestValue,
+            requests: [BigInt(parseEther(requestValue).toString())],
+            token: 'stETH',
+          })
+        }
+      >
+        <TokenInput
+          label="value"
+          value={requestValue}
+          placeholder="0.0"
+          onChange={(e) => setRequestValue(e.currentTarget.value)}
+        />
+      </Action>
+      <Action
+        title="Request Without Permit"
+        action={() =>
+          withdrawals.requestWithoutPermit({
+            account,
+            requests: [BigInt(parseEther(requestValue).toString())],
+            token: 'stETH',
+          })
+        }
+      />
+      <Action
+        title="Approve stETH"
+        action={() =>
+          withdrawals.approval.approveSteth({
+            account,
+            amount: requestValue,
+          })
+        }
+      />
+      <Action
+        title="Approve wstETH"
+        action={() =>
+          withdrawals.approval.approveWsteth({
+            account,
+            amount: requestValue,
+          })
+        }
+      />
+      <Action
+        title="Get allowance stETH"
+        action={() =>
+          withdrawals.approval.getAllowanceByToken({ account, token: 'stETH' })
+        }
+      />
+      <Action
+        title="Get allowance wsStETH"
+        action={() =>
+          withdrawals.approval.getAllowanceByToken({ account, token: 'wstETH' })
+        }
+      />
+      <Action
+        title="Check stETH allowance by amount"
+        action={() =>
+          withdrawals.approval.checkAllowanceSteth(requestValue, account)
+        }
+      />
+      <Action
+        title="Check wstETH allowance by amount"
+        action={() =>
+          withdrawals.approval.checkAllowanceWsteth(requestValue, account)
+        }
+      />
+    </Accordion>
+  );
+};

playground/demo/withdrawals/views.tsx

@@ -0,0 +1,45 @@
+import { Accordion } from '@lidofinance/lido-ui';
+import { useWeb3 } from '@reef-knot/web3-react';
+import { Action } from 'components/action';
+import { useLidoSDK } from 'providers/sdk';
+
+export const WithdrawalsViewsDemo = () => {
+  const { account: web3account = '0x0' } = useWeb3();
+  const { withdrawals } = useLidoSDK();
+
+  const account = web3account as `0x{string}`;
+
+  return (
+    <Accordion summary="Withdrawals views">
+      <Action
+        title="Get request ids"
+        action={() => withdrawals.views.getWithdrawalRequestsIds({ account })}
+      />
+      <Action
+        title="Get last checkpoint index"
+        action={() => withdrawals.views.getLastCheckpointIndex()}
+      />
+      <Action
+        title="Get unfinalized stETH"
+        action={() => withdrawals.views.getUnfinalizedStETH()}
+      />
+      <Action
+        title="Get MIN stETH withdrawal amount"
+        action={() => withdrawals.views.minStethWithdrawalAmount()}
+      />
+      <Action
+        title="Get MAX stETH withdrawal amount"
+        action={() => withdrawals.views.maxStethWithdrawalAmount()}
+      />
+      <Action title="Is paused" action={() => withdrawals.views.isPaused()} />
+      <Action
+        title="Is Bunker mode"
+        action={() => withdrawals.views.isBunkerModeActive()}
+      />
+      <Action
+        title="Is Turbo mode"
+        action={() => withdrawals.views.isTurboModeActive()}
+      />
+    </Accordion>
+  );
+};