-
Notifications
You must be signed in to change notification settings - Fork 39
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
277 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
149 changes: 149 additions & 0 deletions
149
apps/extension/src/ui/domains/CopyAddress/CopyAddressFormatPickerDrawer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| import { InfoIcon } from "@talismn/icons" | ||
| import { ChainId } from "extension-core" | ||
| import { UNIFIED_ADDRESS_FORMAT_DOCS_URL } from "extension-shared" | ||
| import { FC, useCallback, useEffect, useState } from "react" | ||
| import { useTranslation } from "react-i18next" | ||
| import { Button, Drawer } from "talisman-ui" | ||
|
|
||
| import { shortenAddress } from "@talisman/util/shortenAddress" | ||
| import { useChain } from "@ui/state" | ||
|
|
||
| import { ChainLogo } from "../Asset/ChainLogo" | ||
|
|
||
| // should only be used here and in CopyAddressChainForm | ||
| export type ChainFormat = { | ||
| key: string | ||
| chainId: ChainId | null | ||
| prefix: number | null | ||
| oldPrefix?: number | ||
| name: string | ||
| address: string | ||
| oldAddress?: string | ||
| } | ||
|
|
||
| export type MigratedChainFormat = { | ||
| key: string | ||
| chainId: ChainId | ||
| prefix: number | ||
| oldPrefix: number | ||
| name: string | ||
| address: string | ||
| oldAddress: string | ||
| } | ||
|
|
||
| export const isMigratedFormat = (format: ChainFormat): format is MigratedChainFormat => { | ||
| const { prefix, oldPrefix } = format | ||
| return typeof oldPrefix === "number" && typeof prefix === "number" && oldPrefix !== prefix | ||
| } | ||
|
|
||
| export const CopyAddressFormatPickerDrawer: FC<{ | ||
| format?: MigratedChainFormat | ||
| onDismiss: () => void | ||
| onSelect: (legacyFormat: boolean) => void | ||
| }> = ({ format, onDismiss, onSelect }) => { | ||
| // keep a copy here to be able to keep rendering content while drawer is closing | ||
| const [data, setData] = useState<MigratedChainFormat>() | ||
|
|
||
| useEffect(() => { | ||
| if (format) setData(format) | ||
| }, [format]) | ||
|
|
||
| return ( | ||
| <Drawer | ||
| containerId="copy-address-modal" | ||
| isOpen={!!format} | ||
| anchor="bottom" | ||
| onDismiss={onDismiss} | ||
| > | ||
| {!!data && <DrawerContent format={data} onSelect={onSelect} />} | ||
| </Drawer> | ||
| ) | ||
| } | ||
|
|
||
| const DrawerContent: FC<{ | ||
| format: MigratedChainFormat | ||
| onSelect: (legacyFormat: boolean) => void | ||
| }> = ({ format, onSelect }) => { | ||
| const { t } = useTranslation() | ||
| const chain = useChain(format.chainId) | ||
|
|
||
| const handleSelect = useCallback( | ||
| (legacyFormat: boolean) => () => { | ||
| onSelect(legacyFormat) | ||
| }, | ||
| [onSelect], | ||
| ) | ||
|
|
||
| return ( | ||
| <div className="bg-grey-800 flex w-full flex-col items-center gap-6 rounded-t-xl p-12"> | ||
| <div className="text-md text-body font-bold">{t("Select Address Format")}</div> | ||
| <div className="text-body-secondary text-center text-sm"> | ||
| {t("Legacy format may be needed when sending from some exchanges.")} <LearnMore /> | ||
| </div> | ||
| <div></div> | ||
| <FormatRow | ||
| chainId={format.chainId} | ||
| chainName={chain?.name ?? t("Unknown network")} | ||
| address={format.address} | ||
| label={t("New format")} | ||
| onSelect={handleSelect(false)} | ||
| /> | ||
| <FormatRow | ||
| chainId={format.chainId} | ||
| chainName={chain?.name ?? t("Unknown network")} | ||
| address={format.oldAddress} | ||
| label={t("Legacy format")} | ||
| onSelect={handleSelect(true)} | ||
| /> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const LearnMore = () => { | ||
| const { t } = useTranslation() | ||
|
|
||
| const handleClick = () => { | ||
| window.open(UNIFIED_ADDRESS_FORMAT_DOCS_URL, "_blank", "nooppener noreferrer") | ||
| } | ||
|
|
||
| return ( | ||
| <button | ||
| type="button" | ||
| className="text-body bg-grey-750 hover:bg-grey-700 inline-flex h-10 items-center gap-2 rounded-full px-3 text-xs" | ||
| onClick={handleClick} | ||
| > | ||
| <InfoIcon /> | ||
| <span>{t("Learn more")}</span> | ||
| </button> | ||
| ) | ||
| } | ||
|
|
||
| const FormatRow: FC<{ | ||
| chainId: ChainId | ||
| chainName: string | ||
| address: string | ||
| label: string | ||
| onSelect: () => void | ||
| }> = ({ chainId, chainName, address, label, onSelect }) => { | ||
| const { t } = useTranslation() | ||
|
|
||
| return ( | ||
| <div className="border-grey-700 flex h-[6.8rem] w-full items-center gap-6 rounded-lg border px-10"> | ||
| <div className="size-16 shrink-0"> | ||
| <ChainLogo id={chainId} className="shrink-0 text-xl" /> | ||
| </div> | ||
| <div className="flex grow flex-col gap-2 overflow-hidden"> | ||
| <div className="flex items-center gap-4 overflow-hidden"> | ||
| <div className="text-body truncate text-sm">{chainName}</div> | ||
| <div className="text-body-inactive text-tiny rounded-xs border-body-inactive shrink-0 border px-2 py-1"> | ||
| {label} | ||
| </div> | ||
| </div> | ||
| <div className="text-body-secondary text-xs">{shortenAddress(address, 10, 10)}</div> | ||
| </div> | ||
| <Button primary small onClick={onSelect}> | ||
| {t("Select")} | ||
| </Button> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.