chore: moves withdraw example as a react-stories example

Author: cesarenaldi

examples/react-stories/src/components/SupplySelector.tsx

@@ -0,0 +1,87 @@
+import {
+  type EvmAddress,
+  type SpokeId,
+  type UserSupplyItem,
+  useUserSupplies,
+} from '@aave/react';
+import { FormControl } from 'baseui/form-control';
+import { type OnChangeParams, SingleSelect } from 'baseui/select';
+import { useEffect } from 'react';
+
+interface SupplySelectorProps {
+  spokeId: SpokeId | undefined;
+  user: EvmAddress;
+  onChange: (supply: UserSupplyItem | null) => void;
+  selected: UserSupplyItem | null;
+}
+
+export function SupplySelector({
+  spokeId,
+  user,
+  onChange,
+  selected,
+}: SupplySelectorProps) {
+  const {
+    data: supplies,
+    loading,
+    paused,
+  } = useUserSupplies({
+    query: spokeId
+      ? {
+          userSpoke: {
+            spoke: spokeId,
+            user,
+          },
+        }
+      : undefined,
+    pause: !spokeId,
+  });
+
+  useEffect(() => {
+    if (supplies?.length === 1) {
+      onChange(supplies[0]);
+    }
+  }, [supplies, onChange]);
+
+  const handleChange = (params: OnChangeParams) => {
+    switch (params.type) {
+      case 'clear':
+        onChange(null);
+        break;
+
+      case 'select':
+        onChange(params.option as UserSupplyItem);
+        break;
+    }
+  };
+
+  return (
+    <FormControl
+      label='Supply Position'
+      caption={
+        supplies?.length === 1
+          ? 'Only one supply position found'
+          : 'Select the supply position you want to withdraw from'
+      }
+      disabled={
+        paused || loading || supplies?.length === 1 || supplies?.length === 0
+      }
+      error={supplies?.length === 0 ? 'No supply positions found' : undefined}
+    >
+      <SingleSelect
+        placeholder='Select a supply position'
+        valueKey='id'
+        getValueLabel={({ option }) => {
+          return option.reserve.asset.underlying.info.symbol;
+        }}
+        getOptionLabel={({ option }) =>
+          `${option.reserve.asset.underlying.info.symbol} — ${option.withdrawable.amount.value.toDisplayString(2)} ${option.withdrawable.token.info.symbol}`
+        }
+        onChange={handleChange}
+        options={supplies}
+        value={selected ? [selected] : undefined}
+      />
+    </FormControl>
+  );
+}
+

examples/react-stories/src/components/WithdrawForm.tsx

@@ -0,0 +1,151 @@
+import {
+  bigDecimal,
+  evmAddress,
+  type UserSupplyItem,
+  useWithdraw,
+} from '@aave/react';
+import { useSendTransaction } from '@aave/react/viem';
+import { Block } from 'baseui/block';
+import { Button } from 'baseui/button';
+import { Checkbox } from 'baseui/checkbox';
+import { FormControl } from 'baseui/form-control';
+import { Input } from 'baseui/input';
+import { KIND, Notification } from 'baseui/notification';
+import { useState } from 'react';
+import type { WalletClient } from 'viem';
+
+interface WithdrawFormProps {
+  supply: UserSupplyItem;
+  walletClient: WalletClient;
+}
+
+export function WithdrawForm({ supply, walletClient }: WithdrawFormProps) {
+  const [status, setStatus] = useState<{
+    kind: keyof typeof KIND;
+    message: string;
+  } | null>(null);
+  const [useMax, setUseMax] = useState(false);
+
+  const [sendTransaction] = useSendTransaction(walletClient);
+  const [withdraw, { loading }] = useWithdraw((plan) => {
+    switch (plan.__typename) {
+      case 'TransactionRequest':
+        setStatus({
+          kind: KIND.info,
+          message: 'Sign the Withdraw Transaction in your wallet',
+        });
+        return sendTransaction(plan).andTee(() =>
+          setStatus({
+            kind: KIND.info,
+            message: 'Sending Withdraw Transaction…',
+          }),
+        );
+
+      case 'Erc20ApprovalRequired':
+      case 'PreContractActionRequired':
+        setStatus({
+          kind: KIND.info,
+          message: 'Sign the Approval Transaction in your wallet',
+        });
+        return sendTransaction(plan.transaction).andTee(() =>
+          setStatus({
+            kind: KIND.info,
+            message: 'Sending Approval Transaction…',
+          }),
+        );
+    }
+  });
+
+  const submit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+
+    const form = e.currentTarget;
+    const amount = form.amount.value as string;
+
+    if (!useMax && !amount) {
+      setStatus({
+        kind: KIND.info,
+        message: 'Please enter an amount or enable Max',
+      });
+      return;
+    }
+
+    const result = await withdraw({
+      reserve: supply.reserve.id,
+      amount: {
+        erc20: useMax
+          ? { max: true }
+          : {
+              exact: bigDecimal(amount),
+            },
+      },
+      sender: evmAddress(walletClient.account!.address),
+    });
+
+    if (result.isErr()) {
+      switch (result.error.name) {
+        case 'ValidationError':
+          setStatus({
+            kind: KIND.warning,
+            message: 'Insufficient supplied balance in this reserve',
+          });
+          return;
+        case 'CancelError':
+          setStatus({ kind: KIND.info, message: 'Transaction cancelled' });
+          return;
+        default:
+          setStatus({ kind: KIND.negative, message: result.error.message });
+          return;
+      }
+    }
+
+    setStatus({ kind: KIND.info, message: 'Withdraw successful!' });
+  };
+
+  const currentWithdrawable =
+    supply.withdrawable.amount.value.toDisplayString(2);
+
+  return (
+    <Block as='form' onSubmit={submit} marginTop='scale600'>
+      <FormControl
+        label='Amount'
+        caption={
+          useMax
+            ? 'Withdrawing maximum available balance'
+            : 'Human-friendly amount (e.g. 1.23, 4.56, 7.89)'
+        }
+      >
+        <Input
+          name='amount'
+          type='number'
+          step={0.000000000000000001}
+          disabled={loading || useMax}
+          placeholder={currentWithdrawable}
+        />
+      </FormControl>
+
+      <FormControl>
+        <Checkbox
+          checked={useMax}
+          onChange={(e) => setUseMax(e.target.checked)}
+          disabled={loading}
+        >
+          Withdraw maximum available
+        </Checkbox>
+      </FormControl>
+
+      <Button type='submit' disabled={loading} isLoading={loading}>
+        Withdraw
+      </Button>
+
+      {status && (
+        <Notification
+          kind={status.kind}
+          overrides={{ Body: { style: { width: 'auto' } } }}
+        >
+          {status.message}
+        </Notification>
+      )}
+    </Block>
+  );
+}

examples/react-stories/src/withdraw.stories.tsx

@@ -0,0 +1,62 @@
+import 'viem/window';
+
+import type { Hub, Spoke, UserSupplyItem } from '@aave/react';
+import type { Story } from '@ladle/react';
+import { HeadingLarge } from 'baseui/typography';
+import { useState } from 'react';
+import { HubSelector } from './components/HubSelector';
+import { SingleUserPosition } from './components/positions';
+import { SpokeSelector } from './components/SpokeSelector';
+import { SupplySelector } from './components/SupplySelector';
+import { WithdrawForm } from './components/WithdrawForm';
+import * as config from './config';
+import { user, walletClient } from './wallet';
+
+export const WithdrawERC20: Story = () => {
+  const [hub, setHub] = useState<Hub | null>(null);
+  const [spoke, setSpoke] = useState<Spoke | null>(null);
+  const [supply, setSupply] = useState<UserSupplyItem | null>(null);
+
+  const handleHubSelect = (hub: Hub | null) => {
+    setHub(hub);
+    setSpoke(null);
+    setSupply(null);
+  };
+
+  const handleSpokeSelect = (spoke: Spoke | null) => {
+    setSpoke(spoke);
+    setSupply(null);
+  };
+
+  return (
+    <>
+      <HeadingLarge>Withdraw ERC-20 Tokens</HeadingLarge>
+
+      <HubSelector
+        chainId={config.chainId}
+        onChange={handleHubSelect}
+        selected={hub}
+      />
+
+      <SpokeSelector
+        hubId={hub?.id}
+        onChange={handleSpokeSelect}
+        selected={spoke}
+      />
+
+      {spoke && <SingleUserPosition spokeId={spoke.id} user={user} />}
+
+      <SupplySelector
+        spokeId={spoke?.id}
+        user={user}
+        onChange={setSupply}
+        selected={supply}
+      />
+
+      {supply && <WithdrawForm supply={supply} walletClient={walletClient} />}
+    </>
+  );
+};
+
+WithdrawERC20.storyName = 'ERC-20 Tokens';
+