From 38709026f8383966058ef1b7cb7966bba7f3911b Mon Sep 17 00:00:00 2001 From: Kevin Ingersoll Date: Fri, 26 Apr 2024 19:23:13 +0100 Subject: [PATCH] disable button if not enough funds, hardcode time estimate --- packages/account-kit/package.json | 1 - .../src/steps/deposit/DepositForm.tsx | 20 ++++++++----------- .../steps/deposit/DepositViaBridgeForm.tsx | 4 ++-- .../src/steps/deposit/DepositViaRelayForm.tsx | 8 ++------ .../steps/deposit/DepositViaTransferForm.tsx | 4 ++-- .../src/steps/deposit/SubmitButton.tsx | 8 ++++---- .../src/steps/deposit/useSourceChains.ts | 15 ++++++++------ pnpm-lock.yaml | 7 ------- 8 files changed, 27 insertions(+), 40 deletions(-) diff --git a/packages/account-kit/package.json b/packages/account-kit/package.json index 3823052c63..5a482bbd95 100644 --- a/packages/account-kit/package.json +++ b/packages/account-kit/package.json @@ -59,7 +59,6 @@ "abitype": "1.0.0", "debug": "^4.3.4", "execa": "^7.0.0", - "itty-time": "^1.0.6", "p-retry": "^5.1.2", "permissionless": "^0.1.17", "react": "^18.2.0", diff --git a/packages/account-kit/src/steps/deposit/DepositForm.tsx b/packages/account-kit/src/steps/deposit/DepositForm.tsx index 5b6a4388e4..d7d6b1878b 100644 --- a/packages/account-kit/src/steps/deposit/DepositForm.tsx +++ b/packages/account-kit/src/steps/deposit/DepositForm.tsx @@ -5,11 +5,11 @@ import { useOnboardingSteps } from "../../useOnboardingSteps"; import { useQueryClient } from "@tanstack/react-query"; import { twMerge } from "tailwind-merge"; import { PendingIcon } from "../../icons/PendingIcon"; -import { duration } from "itty-time"; import { formatBalance } from "./formatBalance"; import { formatGas } from "./formatGas"; import { DepositMethod, SourceChain } from "./common"; import { ReactNode, useEffect, useRef } from "react"; +import { SubmitButton } from "./SubmitButton"; export const DEFAULT_DEPOSIT_AMOUNT = 0.005; @@ -21,7 +21,7 @@ export type Props = { depositMethod: DepositMethod; setDepositMethod: (depositMethod: DepositMethod) => void; estimatedFee?: bigint | undefined; - estimatedTime?: number | undefined; + estimatedTime: string; submitButton: ReactNode; onSubmit: () => Promise; isComplete?: boolean; @@ -136,20 +136,16 @@ export function DepositForm({
Estimated fee
{estimatedFee ? <>{formatGas(estimatedFee)} gwei : }
Time to deposit
-
- {estimatedTime == null ? ( - - ) : estimatedTime === 0 ? ( - <>Instant - ) : ( - <>{duration(estimatedTime * 1000, { parts: 1 })} - )} -
+
{estimatedTime}
{/* TODO: show message when no balance */} - {submitButton} + {balance.data != null && amount != null && balance.data.value < amount + (estimatedFee ?? 0n) ? ( + Not enough funds + ) : ( + submitButton + )} {transactionStatus} diff --git a/packages/account-kit/src/steps/deposit/DepositViaBridgeForm.tsx b/packages/account-kit/src/steps/deposit/DepositViaBridgeForm.tsx index cdccf1db3e..c1402c9fcd 100644 --- a/packages/account-kit/src/steps/deposit/DepositViaBridgeForm.tsx +++ b/packages/account-kit/src/steps/deposit/DepositViaBridgeForm.tsx @@ -60,12 +60,12 @@ export function DepositViaBridgeForm(props: Props) { diff --git a/packages/account-kit/src/steps/deposit/DepositViaRelayForm.tsx b/packages/account-kit/src/steps/deposit/DepositViaRelayForm.tsx index 2278a566fb..a6cb7f0872 100644 --- a/packages/account-kit/src/steps/deposit/DepositViaRelayForm.tsx +++ b/packages/account-kit/src/steps/deposit/DepositViaRelayForm.tsx @@ -15,13 +15,9 @@ export function DepositViaRelayForm(props: Props) { + Deposit via Relay } diff --git a/packages/account-kit/src/steps/deposit/DepositViaTransferForm.tsx b/packages/account-kit/src/steps/deposit/DepositViaTransferForm.tsx index a5b59b2944..038f50dba6 100644 --- a/packages/account-kit/src/steps/deposit/DepositViaTransferForm.tsx +++ b/packages/account-kit/src/steps/deposit/DepositViaTransferForm.tsx @@ -29,10 +29,10 @@ export function DepositViaTransferForm(props: Props) { diff --git a/packages/account-kit/src/steps/deposit/SubmitButton.tsx b/packages/account-kit/src/steps/deposit/SubmitButton.tsx index b153ebe7b2..e962869ecd 100644 --- a/packages/account-kit/src/steps/deposit/SubmitButton.tsx +++ b/packages/account-kit/src/steps/deposit/SubmitButton.tsx @@ -3,12 +3,12 @@ import { Button, type Props as ButtonProps } from "../../ui/Button"; import { twMerge } from "tailwind-merge"; export type Props = Omit & { - sourceChainId: number; + chainId?: number | undefined; }; -export function SubmitButton({ sourceChainId, className, ...buttonProps }: Props) { +export function SubmitButton({ chainId, className, ...buttonProps }: Props) { const { chainId: userChainId } = useAccount(); - const shouldSwitchChain = userChainId !== sourceChainId; + const shouldSwitchChain = chainId != null && chainId !== userChainId; const switchChain = useSwitchChain(); if (shouldSwitchChain) { @@ -17,7 +17,7 @@ export function SubmitButton({ sourceChainId, className, ...buttonProps }: Props type="button" className={twMerge("w-full", className)} pending={switchChain.isPending} - onClick={() => switchChain.switchChain({ chainId: sourceChainId })} + onClick={() => switchChain.switchChain({ chainId })} > Switch chain diff --git a/packages/account-kit/src/steps/deposit/useSourceChains.ts b/packages/account-kit/src/steps/deposit/useSourceChains.ts index 09408d51a8..53b9fcfb1b 100644 --- a/packages/account-kit/src/steps/deposit/useSourceChains.ts +++ b/packages/account-kit/src/steps/deposit/useSourceChains.ts @@ -5,6 +5,8 @@ import { useMemo } from "react"; import { isDefined } from "@latticexyz/common/utils"; import { SourceChain } from "./common"; +// TODO: define list of chains we support for bridging? our bridge logic is very OP specific + export function useSourceChains(): readonly SourceChain[] { const appChain = useAppChain(); const chains = useChains(); @@ -16,21 +18,22 @@ export function useSourceChains(): readonly SourceChain[] { const sourceChains = useMemo(() => { return chains - .map((chain): SourceChain => { - const canBridge = appChain.sourceId === chain.id; - const relayChain = relayChains?.find((c) => c.id === chain.id); + .map((sourceChain): SourceChain => { + const canBridge = appChain.sourceId === sourceChain.id; + const relayChain = relayChains?.find((c) => c.id === sourceChain.id); const depositMethods = ( - appChain.id === chain.id + appChain.id === sourceChain.id ? ["transfer"] : [ canBridge && portalAddress ? ("bridge" as const) : undefined, - canRelay && relayChain ? ("relay" as const) : undefined, + // TODO: enable relay once working + // canRelay && relayChain ? ("relay" as const) : undefined, ].filter(isDefined) ) satisfies SourceChain["depositMethods"]; return { - ...chain, + ...sourceChain, depositMethods, // TODO: I think we can remove this for now since we're using viem's op-stack actions portalAddress: canBridge ? portalAddress : undefined, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 53b4788054..4236800bf8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -153,9 +153,6 @@ importers: execa: specifier: ^7.0.0 version: 7.2.0 - itty-time: - specifier: ^1.0.6 - version: 1.0.6 p-retry: specifier: ^5.1.2 version: 5.1.2 @@ -12762,10 +12759,6 @@ packages: istanbul-lib-report: 3.0.0 dev: true - /itty-time@1.0.6: - resolution: {integrity: sha512-+P8IZaLLBtFv8hCkIjcymZOp4UJ+xW6bSlQsXGqrkmJh7vSiMFSlNne0mCYagEE0N7HDNR5jJBRxwN0oYv61Rw==} - dev: false - /jake@10.8.5: resolution: {integrity: sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==} engines: {node: '>=10'}