diff --git a/packages/web/components/bridge/immersive/confirmation-screen.tsx b/packages/web/components/bridge/immersive/confirmation-screen.tsx new file mode 100644 index 0000000000..9438f22066 --- /dev/null +++ b/packages/web/components/bridge/immersive/confirmation-screen.tsx @@ -0,0 +1,295 @@ +import { CoinPretty, PricePretty } from "@keplr-wallet/unit"; +import { getShortAddress } from "@osmosis-labs/utils"; +import classNames from "classnames"; +import dayjs from "dayjs"; +import Image from "next/image"; +import { FunctionComponent, PropsWithChildren, useState } from "react"; +import { useMeasure } from "react-use"; + +import { Icon } from "~/components/assets"; +import { Button } from "~/components/ui/button"; + +export const ConfirmationScreen: FunctionComponent<{ + direction: "deposit" | "withdraw"; + onCancel: () => void; + onConfirm: () => void; +}> = ({ direction, onCancel, onConfirm }) => ( +
+
+ Confirm {direction} {direction === "withdraw" ? "from" : "to"} Osmosis +
+ + {}} + /> + +
+ + +
+
+); + +const AssetBox: FunctionComponent<{ + type: "from" | "to"; + tokenImageUrl: string; + chainName: string; + address: string; + walletImageUrl: string; + value: PricePretty; + coin: CoinPretty; +}> = ({ + type, + tokenImageUrl, + chainName, + address, + walletImageUrl, + value, + coin, +}) => ( +
+
+
+ token image +
+ {type === "from" ? "Transfer" : "Receive"} {coin.denom} +
+
+
+
+ {type === "to" && "~"} {value.toString()} +
+
+ {type === "to" && "~"} {coin.trim(true).toString()} +
+
+
+
+
+
+ {type === "from" ? "From" : "To"} {chainName} +
+
+ wallet image +
+ {getShortAddress(address)} +
+
+
+
+); + +/** Assumes the first provider in the list is the selected provider. */ +const TransferDetails: FunctionComponent<{ + // TODO: this should be a list of quotes of a single quote type + providerId: string; + providerImageUrl: string; + estimatedTimeSeconds: number; + networkName: string; + networkFee: { + amount: CoinPretty; + value: PricePretty; + }; + transferFee: { + amount: CoinPretty; + value: PricePretty; + }; + alternativeProvider: { id: string; imageUrl: string }[]; + onSelectProvider: (providerId: string) => void; +}> = ({ + providerImageUrl, + estimatedTimeSeconds, + networkName, + networkFee, + transferFee, +}) => { + const [isOpen, setIsOpen] = useState(false); + const [detailsRef, { height: detailsHeight, y: detailsOffset }] = + useMeasure(); + + const totalFeePrice = networkFee.value.add(transferFee.value); + const estTime = dayjs.duration({ seconds: estimatedTimeSeconds }).humanize(); + + const HeaderContents = isOpen ? ( +
Transfer details
+ ) : ( +
+
+ +
+
{estTime} ETA
+
+ ); + + return ( +
+ +
+ +
+ provider logo + +
+ + +
+ +
{estTime}
+
+ + +
+
+ {networkFee.value.trim(true).toString()} +
+
+ {networkFee.amount.trim(true).toString()} +
+
+ + +
+
+ {transferFee.value.trim(true).toString()} +
+
+ {transferFee.amount.trim(true).toString()} +
+
+ +
+
+ ); +}; + +const DetailRow: FunctionComponent> = ({ + label, + children, +}) => ( +
+
{label}
+ {children} +
+); diff --git a/packages/web/public/icons/sprite.svg b/packages/web/public/icons/sprite.svg index a865f1f497..3b62db916b 100644 --- a/packages/web/public/icons/sprite.svg +++ b/packages/web/public/icons/sprite.svg @@ -1247,16 +1247,9 @@ fill="currentColor" /> - - + + +