Fronted for Web3 Dapp: روشهای خوب

// State modeling with discriminated unions
type TxNormalStateIdle = { kind: 'idle' };
type TxNormalStateSending = { kind: 'sending' };
type TxNormalStateSuccess = { kind: 'success'; txHash: Hash };
type TxNormalStateError = { kind: 'error'; error: BaseError };

export type TxNormalState =
  | TxNormalStateIdle
  | TxNormalStateSending
  | TxNormalStateSuccess
  | TxNormalStateError;

// Commands - user actions
type Submit = {
  kind: 'submit';
  data: { tx: () => WriteContractParameters };
};

// Events - system responses
type SuccessEvent = {
  kind: 'success';
  data: { hash: Hash };
};

// State - application state
type TxAllowanceStateApproveNeeded = {
  kind: 'approve-needed';
  amount: bigint;
};

reducer: (state, event) => {
  switch (event.kind) {
    case 'check':
      return {
        ...state,
        kind: 'checking-allowance',
        amount: event.data.amount,
      };
    case 'enough-allowance':
      switch (state.kind) {
        case 'rechecking-allowance':
          return { ...state, kind: 'sending' };
        default:
          return {
            ...state,
            kind: 'has-allowance',
            amount: event.data.amount,
          };
      }
    // ...
  }
}

return from(
  this.client.simulateContract(<SimulateContractParameters>cmd.data.tx())
).pipe(
  switchMap(response =>
    from(this.client.writeContract(response.request)).pipe(
      switchMap(txHash => {
        return from(
          this.client.waitForTransactionReceipt({
            hash: txHash,
            confirmations: 1,
          })
        ).pipe(
          map(() =>
            txAllowanceEvent({
              kind: 'success',
              data: { hash: txHash },
            })
          )
        );
      }),
      catchError(err => of(txAllowanceEvent({ kind: 'error', data: err })))
    )
  ),
  startWith(txAllowanceEvent({ kind: 'submitted' })),
  take(2)
);

// Error is just another type of state
type TxAllowanceStateError = {
  kind: 'error';
  amount: bigint;
  error: BaseError;
};

// Error is handled through the normal event flow
catchError(err => 
  of(txAllowanceEvent({ 
    kind: 'error', 
    data: err.cause ?? err 
  }))
)

// Inside business logic there is no exception handling, only data handling
tap(result => {
  if (result.kind === 'success') {
    // do something
  } else {
    // do something else, show alert for example
  }
})

@Injectable()
export class TxAllowanceStore extends FeatureStore<
  TxAllowanceCommand,
  TxAllowanceEvent,
  TxAllowanceState,
  TxAllowanceStateIdle
> {
  // Implementation
}

@Injectable()
export abstract class WalletBase {
  public abstract requestConnect(): void;
  public abstract getCurrentAddress(): Observable<Hash | null>;
  public abstract getBalance(): Observable<string>;
}

export class TxNormalStore extends FeatureStore<
  TxNormalCommand,
  TxNormalEvent,
  TxNormalState,
  TxNormalStateIdle
> {
  // Implementation
}

initialValue: {
  kind: 'idle',
  amount: 0n,
}

reducer: (state, event) => {
  switch (event.kind) {
    case 'reset':
      return { kind: 'idle', amount: 0n };
    case 'success':
      return { ...state, kind: 'success', txHash: event.data.hash };
    // ...
  }
}

// From tx-with-allowance.ts
function checkAllowance(
  client: PublicClient & WalletClient,
  data: Check['data']
) {
  return from(
    client.readContract({
      address: data.token,
      abi: erc20Abi,
      functionName: 'allowance',
      args: [data.userAddress, data.spender],
    })
  ).pipe(
    map(actualAllowance => {
      const isEnoughAllowance = actualAllowance >= data.amount;
      if (isEnoughAllowance) {
        return txAllowanceEvent({
          kind: 'enough-allowance',
          data: {
            spender: data.spender,
            token: data.token,
            amount: data.amount,
          },
        });
      } else {
        return txAllowanceEvent({
          kind: 'not-enough-allowance',
          data: {
            spender: data.spender,
            token: data.token,
            amount: data.amount,
          },
        });
      }
    }),
    catchError(() =>
      of(
        txAllowanceEvent({
          kind: 'not-enough-allowance',
          data: {
            spender: data.spender,
            token: data.token,
            amount: data.amount,
          },
        })
      )
    ),
    take(1)
  );
}

// From tx-normal.ts
submit: cmd => {
  const tx = <SimulateContractParameters>cmd.data.tx();

  console.log('tx: ', tx);

  return from(this.client.simulateContract(tx)).pipe(
    switchMap(response =>
      from(this.client.writeContract(response.request)).pipe(
        switchMap(txHash => {
          return from(
            this.client.waitForTransactionReceipt({
              hash: txHash,
              confirmations: 1,
            })
          ).pipe(
            map(() =>
              txNormalEvent({ kind: 'success', data: { hash: txHash } })
            )
          );
        }),
        catchError(err => {
          return of(txNormalEvent({ kind: 'error', data: err }));
        })
      )
    ),
    catchError(err => {
      return of(
        txNormalEvent({
          kind: 'error',
          data: err.cause ?? err,
        })
      );
    }),
    startWith(txNormalEvent({ kind: 'submitted' })),
    take(2)
  );
}

// From tx-with-allowance.ts
approve: (cmd: Approve) => {
  return defer(() =>
    from(
      this.client.simulateContract({
        account: cmd.data.userAddress,
        address: cmd.data.token,
        abi: erc20Abi,
        functionName: 'approve',
        args: [cmd.data.spender, MAX_UINT],
        gas: 65000n,
      })
    )
  ).pipe(
    switchMap(response =>
      from(this.client.writeContract(response.request)).pipe(
        switchMap(value => {
          return from(
            this.client.waitForTransactionReceipt({
              hash: value,
              confirmations: 1,
            })
          ).pipe(switchMap(() => checkAllowance(this.client, cmd.data)));
        }),
        catchError(err => {
          return of(
            txAllowanceEvent({
              kind: 'approve-fail',
              data: err.cause ?? err,
            })
          );
        })
      )
    ),
    catchError(err =>
      of(
        txAllowanceEvent({
          kind: 'approve-fail',
          data: err.cause ?? err,
        })
      )
    ),
    startWith(
      txAllowanceEvent({
        kind: 'approve-sent',
        data: {
          spender: cmd.data.spender,
          token: cmd.data.token,
          amount: cmd.data.amount,
        },
      })
    ),
    take(2)
  );
}

// From tx-allowance.ts
reducer: (state, event) => {
  console.log('event: ', event);
  switch (event.kind) {
    case 'reset':
      return { kind: 'idle', amount: 0n };
    case 'success':
      return { ...state, kind: 'success', txHash: event.data.hash };
    case 'error':
      return { ...state, error: event.data, kind: 'error' };
    case 'check':
      return {
        ...state,
        kind: 'checking-allowance',
        amount: event.data.amount,
      };
    case 'enough-allowance':
      switch (state.kind) {
        case 'rechecking-allowance':
          return { ...state, kind: 'sending' };
        default:
          return {
            ...state,
            kind: 'has-allowance',
            amount: event.data.amount,
          };
      }
    // Additional cases omitted for brevity
  }
}