Jip Fr
2 years ago
7 changed files with 195 additions and 51 deletions
@ -0,0 +1,50 @@
@@ -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 @@
@@ -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