Jip Fr
2 years ago
7 changed files with 195 additions and 51 deletions
@ -0,0 +1,50 @@ |
|||||||
|
import { useRef, useState } from "react"; |
||||||
|
import { useCopyToClipboard } from "react-use"; |
||||||
|
|
||||||
|
import { Icon, Icons } from "./Icon"; |
||||||
|
|
||||||
|
export function PassphaseDisplay(props: { mnemonic: string }) { |
||||||
|
const individualWords = props.mnemonic.split(" "); |
||||||
|
|
||||||
|
const [_, copy] = useCopyToClipboard(); |
||||||
|
|
||||||
|
const [hasCopied, setHasCopied] = useState(false); |
||||||
|
|
||||||
|
const timeout = useRef<ReturnType<typeof setTimeout>>(); |
||||||
|
|
||||||
|
function copyMnemonic() { |
||||||
|
copy(props.mnemonic); |
||||||
|
setHasCopied(true); |
||||||
|
if (timeout.current) clearTimeout(timeout.current); |
||||||
|
timeout.current = setTimeout(() => setHasCopied(false), 500); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<div className="rounded-lg border border-authentication-border/50 "> |
||||||
|
<div className="px-4 py-2 flex justify-between border-b border-authentication-border/50"> |
||||||
|
<p className="font-bold text-sm text-white">Passphase</p> |
||||||
|
<button |
||||||
|
type="button" |
||||||
|
className="text-authentication-copyText hover:text-authentication-copyTextHover transition-colors flex gap-2 items-center cursor-pointer" |
||||||
|
onClick={() => copyMnemonic()} |
||||||
|
> |
||||||
|
<Icon |
||||||
|
icon={hasCopied ? Icons.CHECKMARK : Icons.COPY} |
||||||
|
className={hasCopied ? "text-xs" : ""} |
||||||
|
/> |
||||||
|
<span className="text-sm">Copy</span> |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
<div className="px-4 py-4 flex flex-wrap gap-x-2 gap-y-4"> |
||||||
|
{individualWords.map((word) => ( |
||||||
|
<div |
||||||
|
className="px-4 rounded-md py-2 bg-authentication-wordBackground text-white font-medium" |
||||||
|
key={word} |
||||||
|
> |
||||||
|
{word} |
||||||
|
</div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
@ -0,0 +1,37 @@ |
|||||||
|
export function LargeCard(props: { children: React.ReactNode }) { |
||||||
|
return ( |
||||||
|
<div className="rounded-xl bg-largeCard-background bg-opacity-50 max-w-[600px] mx-auto p-[3rem]"> |
||||||
|
{props.children} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export function LargeCardText(props: { |
||||||
|
title: string; |
||||||
|
children?: React.ReactNode; |
||||||
|
icon?: React.ReactNode; |
||||||
|
}) { |
||||||
|
return ( |
||||||
|
<div className="flex flex-col items-center text-center mb-8"> |
||||||
|
<div className="flex flex-col items-center text-center max-w-[318px]"> |
||||||
|
{props.icon ? ( |
||||||
|
<div className="text-2xl mb-4 text-largeCard-icon">{props.icon}</div> |
||||||
|
) : null} |
||||||
|
<h2 className="text-xl text-white font-bold">{props.title}</h2> |
||||||
|
{props.children ? ( |
||||||
|
<div className="text-type-text mt-4">{props.children}</div> |
||||||
|
) : null} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export function LargeCardButtons(props: { children: React.ReactNode }) { |
||||||
|
return ( |
||||||
|
<div className="flex justify-center mt-8"> |
||||||
|
<div className="mx-auto inline-grid grid-cols-1 gap-3 justify-center items-center"> |
||||||
|
{props.children} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
Loading…
Reference in new issue