Add account component
This commit is contained in:
Valtteri Karesto
448
components/Accounts.tsx
Normal file
448
components/Accounts.tsx
Normal file
@@ -0,0 +1,448 @@
|
||||
import toast from "react-hot-toast";
|
||||
import Button from "./Button";
|
||||
import { addFaucetAccount, deployHook, importAccount, state } from "../state";
|
||||
import Box from "./Box";
|
||||
import Container from "./Container";
|
||||
import Heading from "./Heading";
|
||||
import { ArrowSquareOut, Copy, Wallet, X } from "phosphor-react";
|
||||
import Stack from "./Stack";
|
||||
import Text from "./Text";
|
||||
import Flex from "./Flex";
|
||||
import { useSnapshot } from "valtio";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Dinero from "dinero.js";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogClose,
|
||||
DialogTrigger,
|
||||
} from "./Dialog";
|
||||
import { css } from "../stitches.config";
|
||||
import { Input } from "./Input";
|
||||
|
||||
const labelStyle = css({
|
||||
color: "$mauve10",
|
||||
textTransform: "uppercase",
|
||||
fontSize: "10px",
|
||||
mb: "$0.5",
|
||||
});
|
||||
|
||||
const AccountDialog = ({
|
||||
activeAccountAddress,
|
||||
setActiveAccountAddress,
|
||||
}: {
|
||||
activeAccountAddress: string | null;
|
||||
setActiveAccountAddress: React.Dispatch<React.SetStateAction<string | null>>;
|
||||
}) => {
|
||||
const snap = useSnapshot(state);
|
||||
const [showSecret, setShowSecret] = useState(false);
|
||||
const activeAccount = snap.accounts.find(
|
||||
(account) => account.address === activeAccountAddress
|
||||
);
|
||||
return (
|
||||
<Dialog
|
||||
open={Boolean(activeAccountAddress)}
|
||||
onOpenChange={(open) => {
|
||||
setShowSecret(false);
|
||||
!open && setActiveAccountAddress(null);
|
||||
}}
|
||||
>
|
||||
<DialogContent
|
||||
css={{
|
||||
backgroundColor: "$mauve1 !important",
|
||||
border: "1px solid $mauve2",
|
||||
".dark &": {
|
||||
// backgroundColor: "$black !important",
|
||||
},
|
||||
p: "$3",
|
||||
"&:before": {
|
||||
content: " ",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
opacity: 0.2,
|
||||
".dark &": {
|
||||
opacity: 1,
|
||||
},
|
||||
zIndex: 0,
|
||||
pointerEvents: "none",
|
||||
backgroundImage: `url('/pattern-dark.svg'), url('/pattern-dark-2.svg')`,
|
||||
backgroundRepeat: "no-repeat",
|
||||
backgroundPosition: "bottom left, top right",
|
||||
},
|
||||
}}
|
||||
>
|
||||
<DialogTitle
|
||||
css={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
borderBottom: "1px solid $mauve6",
|
||||
pb: "$3",
|
||||
gap: "$3",
|
||||
fontSize: "$md",
|
||||
}}
|
||||
>
|
||||
<Wallet size="15px" /> {activeAccount?.name}
|
||||
</DialogTitle>
|
||||
<DialogDescription as="div" css={{ fontFamily: "$monospace" }}>
|
||||
<Stack css={{ display: "flex", flexDirection: "column", gap: "$3" }}>
|
||||
<Flex css={{ alignItems: "center" }}>
|
||||
<Flex css={{ flexDirection: "column" }}>
|
||||
<Text className={labelStyle()}>Account Address</Text>
|
||||
<Text
|
||||
css={{
|
||||
fontFamily: "$monospace",
|
||||
}}
|
||||
>
|
||||
{activeAccount?.address}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex css={{ marginLeft: "auto", color: "$mauve12" }}>
|
||||
<Button
|
||||
size="sm"
|
||||
ghost
|
||||
css={{ mt: "$3" }}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(activeAccount?.address || "");
|
||||
toast.success("Copied address to clipboard");
|
||||
}}
|
||||
>
|
||||
<Copy size="15px" />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex css={{ alignItems: "center" }}>
|
||||
<Flex css={{ flexDirection: "column" }}>
|
||||
<Text className={labelStyle()}>Secret</Text>
|
||||
<Text
|
||||
as="div"
|
||||
css={{
|
||||
fontFamily: "$monospace",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{showSecret
|
||||
? activeAccount?.secret
|
||||
: "•".repeat(activeAccount?.secret.length || 16)}{" "}
|
||||
<Button
|
||||
css={{
|
||||
fontFamily: "$monospace",
|
||||
lineHeight: 2,
|
||||
mt: "2px",
|
||||
ml: "$3",
|
||||
}}
|
||||
ghost
|
||||
size="xs"
|
||||
onClick={() => setShowSecret((curr) => !curr)}
|
||||
>
|
||||
{showSecret ? "Hide" : "Show"}
|
||||
</Button>
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex css={{ marginLeft: "auto", color: "$mauve12" }}>
|
||||
<Button
|
||||
size="sm"
|
||||
ghost
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(activeAccount?.secret || "");
|
||||
toast.success("Copied secret to clipboard");
|
||||
}}
|
||||
css={{ mt: "$3" }}
|
||||
>
|
||||
<Copy size="15px" />
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex css={{ alignItems: "center" }}>
|
||||
<Flex css={{ flexDirection: "column" }}>
|
||||
<Text className={labelStyle()}>Balances & Objects</Text>
|
||||
<Text
|
||||
css={{
|
||||
fontFamily: "$monospace",
|
||||
}}
|
||||
>
|
||||
{Dinero({
|
||||
amount: Number(activeAccount?.xrp || "0"),
|
||||
precision: 6,
|
||||
})
|
||||
.toUnit()
|
||||
.toLocaleString(undefined, {
|
||||
style: "currency",
|
||||
currency: "XRP",
|
||||
currencyDisplay: "name",
|
||||
})}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Flex css={{ marginLeft: "auto" }}>
|
||||
<a
|
||||
href={`https://hooks-testnet-explorer.xrpl-labs.com/${activeAccount?.address}`}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
ghost
|
||||
css={{ color: "$green11 !important", mt: "$3" }}
|
||||
>
|
||||
<ArrowSquareOut size="15px" />
|
||||
</Button>
|
||||
</a>
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Flex css={{ alignItems: "center" }}>
|
||||
<Flex css={{ flexDirection: "column" }}>
|
||||
<Text className={labelStyle()}>Installed Hooks</Text>
|
||||
<Text
|
||||
css={{
|
||||
fontFamily: "$monospace",
|
||||
}}
|
||||
>
|
||||
{activeAccount && activeAccount?.hooks?.length > 0
|
||||
? activeAccount?.hooks
|
||||
.map((i) => {
|
||||
return `${i?.substring(0, 6)}...${i?.substring(
|
||||
i.length - 4
|
||||
)}`;
|
||||
})
|
||||
.join(", ")
|
||||
: "–"}
|
||||
</Text>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Stack>
|
||||
</DialogDescription>
|
||||
<DialogClose asChild>
|
||||
<Box css={{ position: "absolute", top: "$3", right: "$3" }}>
|
||||
<X size="20px" />
|
||||
</Box>
|
||||
</DialogClose>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
const Accounts = () => {
|
||||
const snap = useSnapshot(state);
|
||||
const [activeAccountAddress, setActiveAccountAddress] = useState<
|
||||
string | null
|
||||
>(null);
|
||||
useEffect(() => {
|
||||
const fetchAccInfo = async () => {
|
||||
if (snap.clientStatus === "online") {
|
||||
const requests = snap.accounts.map((acc) =>
|
||||
snap.client?.send({
|
||||
id: acc.address,
|
||||
command: "account_info",
|
||||
account: acc.address,
|
||||
})
|
||||
);
|
||||
const responses = await Promise.all(requests);
|
||||
responses.forEach((res: any) => {
|
||||
const address = res?.account_data?.Account as string;
|
||||
const balance = res?.account_data?.Balance as string;
|
||||
const sequence = res?.account_data?.Sequence as number;
|
||||
const accountToUpdate = state.accounts.find(
|
||||
(acc) => acc.address === address
|
||||
);
|
||||
if (accountToUpdate) {
|
||||
accountToUpdate.xrp = balance;
|
||||
accountToUpdate.sequence = sequence;
|
||||
}
|
||||
});
|
||||
const objectRequests = snap.accounts.map((acc) => {
|
||||
return snap.client?.send({
|
||||
id: `${acc.address}-hooks`,
|
||||
command: "account_objects",
|
||||
account: acc.address,
|
||||
});
|
||||
});
|
||||
const objectResponses = await Promise.all(objectRequests);
|
||||
objectResponses.forEach((res: any) => {
|
||||
const address = res?.account as string;
|
||||
const accountToUpdate = state.accounts.find(
|
||||
(acc) => acc.address === address
|
||||
);
|
||||
if (accountToUpdate) {
|
||||
accountToUpdate.hooks = res.account_objects
|
||||
.filter((ac: any) => ac?.LedgerEntryType === "Hook")
|
||||
.map((oo: any) => oo.HookHash);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
let fetchAccountInfoInterval: NodeJS.Timer;
|
||||
if (snap.clientStatus === "online") {
|
||||
fetchAccInfo();
|
||||
fetchAccountInfoInterval = setInterval(() => fetchAccInfo(), 2000);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (snap.accounts.length > 0) {
|
||||
if (fetchAccountInfoInterval) {
|
||||
clearInterval(fetchAccountInfoInterval);
|
||||
}
|
||||
}
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [snap.accounts, snap.clientStatus]);
|
||||
return (
|
||||
<Box
|
||||
as="div"
|
||||
css={{
|
||||
display: "flex",
|
||||
borderTop: "1px solid $mauve6",
|
||||
background: "$mauve1",
|
||||
position: "relative",
|
||||
width: "50%",
|
||||
flexShrink: 0,
|
||||
borderRight: "1px solid $mauve6",
|
||||
}}
|
||||
>
|
||||
<Container css={{ px: 0, flexShrink: 1 }}>
|
||||
<Flex css={{ py: "$3" }}>
|
||||
<Heading
|
||||
as="h3"
|
||||
css={{
|
||||
fontWeight: 300,
|
||||
m: 0,
|
||||
fontSize: "11px",
|
||||
color: "$mauve12",
|
||||
px: "$3",
|
||||
textTransform: "uppercase",
|
||||
alignItems: "center",
|
||||
display: "inline-flex",
|
||||
gap: "$3",
|
||||
}}
|
||||
>
|
||||
<Wallet size="15px" /> <Text css={{ lineHeight: 1 }}>Accounts</Text>
|
||||
</Heading>
|
||||
<Flex css={{ ml: "auto", gap: "$3", marginRight: "$3" }}>
|
||||
<Button ghost size="xs" onClick={() => addFaucetAccount(true)}>
|
||||
Create
|
||||
</Button>
|
||||
<ImportAccountDialog />
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Box
|
||||
as="div"
|
||||
css={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
height: "160px",
|
||||
fontSize: "13px",
|
||||
fontWeight: "$body",
|
||||
fontFamily: "$monospace",
|
||||
overflowY: "auto",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
>
|
||||
<Stack css={{ flexDirection: "column", gap: 0 }}>
|
||||
{snap.accounts.map((account) => (
|
||||
<Flex
|
||||
key={account.address + account.name}
|
||||
onClick={() => setActiveAccountAddress(account.address)}
|
||||
css={{
|
||||
gap: "$3",
|
||||
p: "$2 $3",
|
||||
justifyContent: "center",
|
||||
cursor: "pointer",
|
||||
"@hover": {
|
||||
"&:hover": {
|
||||
background: "$mauve3",
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Text>{account.name} </Text>
|
||||
<Text css={{ color: "$mauve9" }}>
|
||||
{account.address} ({account.xrp}) ({account.sequence})
|
||||
</Text>
|
||||
<Button
|
||||
css={{ ml: "auto" }}
|
||||
size="xs"
|
||||
uppercase
|
||||
isLoading={account.isLoading}
|
||||
disabled={account.isLoading}
|
||||
variant="secondary"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
deployHook(account);
|
||||
}}
|
||||
>
|
||||
Deploy
|
||||
</Button>
|
||||
</Flex>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Container>
|
||||
<AccountDialog
|
||||
activeAccountAddress={activeAccountAddress}
|
||||
setActiveAccountAddress={setActiveAccountAddress}
|
||||
/>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const ImportAccountDialog = () => {
|
||||
const [value, setValue] = useState("");
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button ghost size="xs">
|
||||
Import
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogTitle>Import account</DialogTitle>
|
||||
<DialogDescription>
|
||||
<label>Add account secret</label>
|
||||
<Input
|
||||
name="secret"
|
||||
type="password"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
/>
|
||||
</DialogDescription>
|
||||
|
||||
<Flex
|
||||
css={{
|
||||
marginTop: 25,
|
||||
justifyContent: "flex-end",
|
||||
gap: "$3",
|
||||
}}
|
||||
>
|
||||
<DialogClose asChild>
|
||||
<Button outline>Cancel</Button>
|
||||
</DialogClose>
|
||||
<DialogClose asChild>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => {
|
||||
importAccount(value);
|
||||
setValue("");
|
||||
}}
|
||||
>
|
||||
Import account
|
||||
</Button>
|
||||
</DialogClose>
|
||||
</Flex>
|
||||
<DialogClose asChild>
|
||||
<Box css={{ position: "absolute", top: "$3", right: "$3" }}>
|
||||
<X size="20px" />
|
||||
</Box>
|
||||
</DialogClose>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default Accounts;
|
||||
Reference in New Issue
Block a user