Test page UI layout
This commit is contained in:
muzam
@@ -1,18 +1,14 @@
|
||||
import toast from "react-hot-toast";
|
||||
import { useSnapshot } from "valtio";
|
||||
import { ArrowSquareOut, Copy, Wallet, X } from "phosphor-react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import React, { useEffect, useState, FC } from "react";
|
||||
import Dinero from "dinero.js";
|
||||
|
||||
import Button from "./Button";
|
||||
import { addFaucetAccount, deployHook, importAccount } from "../state/actions";
|
||||
import state from "../state";
|
||||
import Box from "./Box";
|
||||
import Container from "./Container";
|
||||
import Heading from "./Heading";
|
||||
import Stack from "./Stack";
|
||||
import Text from "./Text";
|
||||
import Flex from "./Flex";
|
||||
import { Container, Heading, Stack, Text, Flex } from ".";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -40,13 +36,11 @@ const AccountDialog = ({
|
||||
}) => {
|
||||
const snap = useSnapshot(state);
|
||||
const [showSecret, setShowSecret] = useState(false);
|
||||
const activeAccount = snap.accounts.find(
|
||||
(account) => account.address === activeAccountAddress
|
||||
);
|
||||
const activeAccount = snap.accounts.find(account => account.address === activeAccountAddress);
|
||||
return (
|
||||
<Dialog
|
||||
open={Boolean(activeAccountAddress)}
|
||||
onOpenChange={(open) => {
|
||||
onOpenChange={open => {
|
||||
setShowSecret(false);
|
||||
!open && setActiveAccountAddress(null);
|
||||
}}
|
||||
@@ -141,7 +135,7 @@ const AccountDialog = ({
|
||||
}}
|
||||
ghost
|
||||
size="xs"
|
||||
onClick={() => setShowSecret((curr) => !curr)}
|
||||
onClick={() => setShowSecret(curr => !curr)}
|
||||
>
|
||||
{showSecret ? "Hide" : "Show"}
|
||||
</Button>
|
||||
@@ -187,11 +181,7 @@ const AccountDialog = ({
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
<Button
|
||||
size="sm"
|
||||
ghost
|
||||
css={{ color: "$green11 !important", mt: "$3" }}
|
||||
>
|
||||
<Button size="sm" ghost css={{ color: "$green11 !important", mt: "$3" }}>
|
||||
<ArrowSquareOut size="15px" />
|
||||
</Button>
|
||||
</a>
|
||||
@@ -207,10 +197,8 @@ const AccountDialog = ({
|
||||
>
|
||||
{activeAccount && activeAccount?.hooks?.length > 0
|
||||
? activeAccount?.hooks
|
||||
.map((i) => {
|
||||
return `${i?.substring(0, 6)}...${i?.substring(
|
||||
i.length - 4
|
||||
)}`;
|
||||
.map(i => {
|
||||
return `${i?.substring(0, 6)}...${i?.substring(i.length - 4)}`;
|
||||
})
|
||||
.join(", ")
|
||||
: "–"}
|
||||
@@ -229,15 +217,19 @@ const AccountDialog = ({
|
||||
);
|
||||
};
|
||||
|
||||
const Accounts = () => {
|
||||
interface AccountProps {
|
||||
card?: boolean;
|
||||
hideDeployBtn?: boolean;
|
||||
showHookStats?: boolean;
|
||||
}
|
||||
|
||||
const Accounts: FC<AccountProps> = props => {
|
||||
const snap = useSnapshot(state);
|
||||
const [activeAccountAddress, setActiveAccountAddress] = useState<
|
||||
string | null
|
||||
>(null);
|
||||
const [activeAccountAddress, setActiveAccountAddress] = useState<string | null>(null);
|
||||
useEffect(() => {
|
||||
const fetchAccInfo = async () => {
|
||||
if (snap.clientStatus === "online") {
|
||||
const requests = snap.accounts.map((acc) =>
|
||||
const requests = snap.accounts.map(acc =>
|
||||
snap.client?.send({
|
||||
id: acc.address,
|
||||
command: "account_info",
|
||||
@@ -249,15 +241,13 @@ const Accounts = () => {
|
||||
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
|
||||
);
|
||||
const accountToUpdate = state.accounts.find(acc => acc.address === address);
|
||||
if (accountToUpdate) {
|
||||
accountToUpdate.xrp = balance;
|
||||
accountToUpdate.sequence = sequence;
|
||||
}
|
||||
});
|
||||
const objectRequests = snap.accounts.map((acc) => {
|
||||
const objectRequests = snap.accounts.map(acc => {
|
||||
return snap.client?.send({
|
||||
id: `${acc.address}-hooks`,
|
||||
command: "account_objects",
|
||||
@@ -267,9 +257,7 @@ const Accounts = () => {
|
||||
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
|
||||
);
|
||||
const accountToUpdate = state.accounts.find(acc => acc.address === address);
|
||||
if (accountToUpdate) {
|
||||
accountToUpdate.hooks = res.account_objects
|
||||
.filter((ac: any) => ac?.LedgerEntryType === "Hook")
|
||||
@@ -299,16 +287,20 @@ const Accounts = () => {
|
||||
as="div"
|
||||
css={{
|
||||
display: "flex",
|
||||
borderTop: "1px solid $mauve6",
|
||||
background: "$mauve1",
|
||||
backgroundColor: props.card ? "$deep" : "$mauve1",
|
||||
position: "relative",
|
||||
width: "50%",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
flexShrink: 0,
|
||||
borderTop: "1px solid $mauve6",
|
||||
borderRight: "1px solid $mauve6",
|
||||
borderLeft: "1px solid $mauve6",
|
||||
borderBottom: "1px solid $mauve6",
|
||||
borderRadius: props.card ? "$md" : undefined,
|
||||
}}
|
||||
>
|
||||
<Container css={{ px: 0, flexShrink: 1 }}>
|
||||
<Flex css={{ py: "$3" }}>
|
||||
<Container css={{ p: 0, flexShrink: 1, height: "100%" }}>
|
||||
<Flex css={{ py: "$3", borderBottom: props.card ? "1px solid $mauve6" : undefined }}>
|
||||
<Heading
|
||||
as="h3"
|
||||
css={{
|
||||
@@ -326,36 +318,36 @@ const Accounts = () => {
|
||||
<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)}>
|
||||
<Button ghost size="sm" onClick={() => addFaucetAccount(true)}>
|
||||
Create
|
||||
</Button>
|
||||
<ImportAccountDialog />
|
||||
</Flex>
|
||||
</Flex>
|
||||
<Box
|
||||
as="div"
|
||||
<Stack
|
||||
css={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
width: "100%",
|
||||
height: "160px",
|
||||
fontSize: "13px",
|
||||
wordWrap: "break-word",
|
||||
fontWeight: "$body",
|
||||
fontFamily: "$monospace",
|
||||
gap: 0,
|
||||
height: "calc(100% - 52px)",
|
||||
flexWrap: "nowrap",
|
||||
overflowY: "auto",
|
||||
wordWrap: "break-word",
|
||||
}}
|
||||
>
|
||||
<Stack css={{ flexDirection: "column", gap: 0 }}>
|
||||
{snap.accounts.map((account) => (
|
||||
{snap.accounts.map(account => (
|
||||
<Flex
|
||||
column
|
||||
key={account.address + account.name}
|
||||
onClick={() => setActiveAccountAddress(account.address)}
|
||||
css={{
|
||||
gap: "$3",
|
||||
p: "$2 $3",
|
||||
justifyContent: "center",
|
||||
px: "$3",
|
||||
py: props.card ? "$3" : "$2",
|
||||
cursor: "pointer",
|
||||
borderBottom: props.card ? "1px solid $mauve6" : undefined,
|
||||
"@hover": {
|
||||
"&:hover": {
|
||||
background: "$mauve3",
|
||||
@@ -363,6 +355,13 @@ const Accounts = () => {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Flex
|
||||
row
|
||||
css={{
|
||||
justifyContent: "space-between",
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Text>{account.name} </Text>
|
||||
<Text css={{ color: "$mauve9" }}>
|
||||
{account.address} (
|
||||
@@ -378,6 +377,8 @@ const Accounts = () => {
|
||||
})}
|
||||
)
|
||||
</Text>
|
||||
</Box>
|
||||
{!props.hideDeployBtn && (
|
||||
<Button
|
||||
css={{ ml: "auto" }}
|
||||
size="xs"
|
||||
@@ -385,20 +386,26 @@ const Accounts = () => {
|
||||
isLoading={account.isLoading}
|
||||
disabled={
|
||||
account.isLoading ||
|
||||
!snap.files.filter((file) => file.compiledWatContent).length
|
||||
!snap.files.filter(file => file.compiledWatContent).length
|
||||
}
|
||||
variant="secondary"
|
||||
onClick={(e) => {
|
||||
onClick={e => {
|
||||
e.stopPropagation();
|
||||
deployHook(account);
|
||||
}}
|
||||
>
|
||||
Deploy
|
||||
</Button>
|
||||
)}
|
||||
</Flex>
|
||||
{props.showHookStats && (
|
||||
<Text muted small css={{ mt: "$2" }}>
|
||||
X hooks installed
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Container>
|
||||
<AccountDialog
|
||||
activeAccountAddress={activeAccountAddress}
|
||||
@@ -413,7 +420,7 @@ const ImportAccountDialog = () => {
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button ghost size="xs">
|
||||
<Button ghost size="sm">
|
||||
Import
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
@@ -425,7 +432,7 @@ const ImportAccountDialog = () => {
|
||||
name="secret"
|
||||
type="password"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onChange={e => setValue(e.target.value)}
|
||||
/>
|
||||
</DialogDescription>
|
||||
|
||||
|
||||
@@ -3,6 +3,23 @@ import Box from "./Box";
|
||||
|
||||
const Flex = styled(Box, {
|
||||
display: "flex",
|
||||
variants: {
|
||||
row: {
|
||||
true: {
|
||||
flexDirection: "row",
|
||||
},
|
||||
},
|
||||
column: {
|
||||
true: {
|
||||
flexDirection: "column",
|
||||
},
|
||||
},
|
||||
fluid: {
|
||||
true: {
|
||||
width: '100%'
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
export default Flex;
|
||||
|
||||
@@ -110,20 +110,22 @@ export const Input = styled("input", {
|
||||
backgroundColor: "transparent",
|
||||
},
|
||||
},
|
||||
deep: {
|
||||
backgroundColor: "$deep",
|
||||
boxShadow: "none",
|
||||
},
|
||||
},
|
||||
state: {
|
||||
invalid: {
|
||||
boxShadow: "inset 0 0 0 1px $colors$red7",
|
||||
"&:focus": {
|
||||
boxShadow:
|
||||
"inset 0px 0px 0px 1px $colors$red8, 0px 0px 0px 1px $colors$red8",
|
||||
boxShadow: "inset 0px 0px 0px 1px $colors$red8, 0px 0px 0px 1px $colors$red8",
|
||||
},
|
||||
},
|
||||
valid: {
|
||||
boxShadow: "inset 0 0 0 1px $colors$green7",
|
||||
"&:focus": {
|
||||
boxShadow:
|
||||
"inset 0px 0px 0px 1px $colors$green8, 0px 0px 0px 1px $colors$green8",
|
||||
boxShadow: "inset 0px 0px 0px 1px $colors$green8, 0px 0px 0px 1px $colors$green8",
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
55
components/Select.tsx
Normal file
55
components/Select.tsx
Normal file
@@ -0,0 +1,55 @@
|
||||
import { FC } from "react";
|
||||
import { gray, grayDark } from "@radix-ui/colors";
|
||||
import { useTheme } from "next-themes";
|
||||
import { styled } from '../stitches.config';
|
||||
import dynamic from 'next/dynamic';
|
||||
import type { Props } from "react-select";
|
||||
const SelectInput = dynamic(() => import("react-select"), { ssr: false });
|
||||
|
||||
const Select: FC<Props> = props => {
|
||||
const { theme } = useTheme();
|
||||
const isDark = theme === "dark";
|
||||
const colors: any = {
|
||||
// primary: pink.pink9,
|
||||
primary: isDark ? grayDark.gray4 : gray.gray4,
|
||||
secondary: isDark ? grayDark.gray8 : gray.gray8,
|
||||
background: isDark ? "rgb(10, 10, 10)" : "rgb(245, 245, 245)",
|
||||
searchText: isDark ? grayDark.gray12 : gray.gray12,
|
||||
placeholder: isDark ? grayDark.gray11 : gray.gray11,
|
||||
};
|
||||
colors.outline = colors.background;
|
||||
colors.selected = colors.secondary;
|
||||
return (
|
||||
<SelectInput
|
||||
theme={theme => ({
|
||||
...theme,
|
||||
spacing: {
|
||||
...theme.spacing,
|
||||
controlHeight: 30
|
||||
},
|
||||
colors: {
|
||||
primary: colors.selected,
|
||||
primary25: colors.primary,
|
||||
primary50: colors.primary,
|
||||
primary75: colors.primary,
|
||||
danger: colors.primary,
|
||||
dangerLight: colors.primary,
|
||||
neutral0: colors.background,
|
||||
neutral5: colors.primary,
|
||||
neutral10: colors.primary,
|
||||
neutral20: colors.outline,
|
||||
neutral30: colors.primary,
|
||||
neutral40: colors.primary,
|
||||
neutral50: colors.placeholder,
|
||||
neutral60: colors.primary,
|
||||
neutral70: colors.primary,
|
||||
neutral80: colors.searchText,
|
||||
neutral90: colors.primary,
|
||||
},
|
||||
})}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default styled(Select, {});
|
||||
70
components/Tabs.tsx
Normal file
70
components/Tabs.tsx
Normal file
@@ -0,0 +1,70 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import type { ReactNode, ReactElement } from "react";
|
||||
import { Button, Stack } from ".";
|
||||
|
||||
interface TabProps {
|
||||
header?: string;
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
activeIndex?: number;
|
||||
activeHeader?: string;
|
||||
headless?: boolean;
|
||||
children: ReactElement<TabProps>[];
|
||||
}
|
||||
|
||||
export const Tab = (props: TabProps) => null;
|
||||
|
||||
export const Tabs = ({ children, activeIndex, activeHeader, headless }: Props) => {
|
||||
const [active, setActive] = useState(activeIndex || 0);
|
||||
const tabProps: TabProps[] = children.map(elem => elem.props);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeIndex) setActive(activeIndex);
|
||||
}, [activeIndex]);
|
||||
|
||||
useEffect(() => {
|
||||
if (activeHeader) {
|
||||
const idx = tabProps.findIndex(tab => tab.header === activeHeader);
|
||||
setActive(idx);
|
||||
}
|
||||
}, [activeHeader, tabProps]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{!headless && (
|
||||
<Stack
|
||||
css={{
|
||||
gap: "$3",
|
||||
flex: 1,
|
||||
flexWrap: "nowrap",
|
||||
marginBottom: "-1px",
|
||||
}}
|
||||
>
|
||||
{tabProps.map((prop, idx) => (
|
||||
<Button
|
||||
key={prop.header}
|
||||
role="tab"
|
||||
tabIndex={idx}
|
||||
onClick={() => setActive(idx)}
|
||||
onKeyPress={() => setActive(idx)}
|
||||
outline={active !== idx}
|
||||
size="sm"
|
||||
css={{
|
||||
"&:hover": {
|
||||
span: {
|
||||
visibility: "visible",
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
{prop.header || idx}
|
||||
</Button>
|
||||
))}
|
||||
</Stack>
|
||||
)}
|
||||
{tabProps[active].children}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -4,6 +4,18 @@ const Text = styled("span", {
|
||||
fontFamily: "$body",
|
||||
lineHeight: "$body",
|
||||
color: "$text",
|
||||
variants: {
|
||||
small: {
|
||||
true: {
|
||||
fontSize: '$xs'
|
||||
}
|
||||
},
|
||||
muted: {
|
||||
true: {
|
||||
color: '$mauve9'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export default Text;
|
||||
|
||||
15
components/index.tsx
Normal file
15
components/index.tsx
Normal file
@@ -0,0 +1,15 @@
|
||||
export { default as Flex } from './Flex'
|
||||
export { default as Container } from './Container'
|
||||
export { default as Heading } from './Heading'
|
||||
export { default as Stack } from './Stack'
|
||||
export { default as Text } from './Text'
|
||||
export { default as Input } from './Input'
|
||||
export { default as Select } from './Select'
|
||||
export * from './Tabs'
|
||||
export * from './AlertDialog'
|
||||
export { default as Box } from './Box'
|
||||
export { default as Button } from './Button'
|
||||
export { default as ButtonGroup } from './ButtonGroup'
|
||||
export { default as DeployFooter } from './DeployFooter'
|
||||
export * from './Dialog'
|
||||
export * from './DropdownMenu'
|
||||
@@ -20,10 +20,10 @@
|
||||
"@radix-ui/react-dropdown-menu": "^0.1.1",
|
||||
"@radix-ui/react-id": "^0.1.1",
|
||||
"@stitches/react": "^1.2.6-0",
|
||||
"file-saver": "^2.0.5",
|
||||
"jszip": "^3.7.1",
|
||||
"base64-js": "^1.5.1",
|
||||
"dinero.js": "^1.9.1",
|
||||
"file-saver": "^2.0.5",
|
||||
"jszip": "^3.7.1",
|
||||
"monaco-editor": "^0.30.1",
|
||||
"next": "^12.0.4",
|
||||
"next-auth": "^4.0.0-beta.5",
|
||||
@@ -40,6 +40,7 @@
|
||||
"react-hot-keys": "^2.7.1",
|
||||
"react-hot-toast": "^2.1.1",
|
||||
"react-new-window": "^0.2.1",
|
||||
"react-select": "^5.2.1",
|
||||
"react-stay-scrolled": "^7.4.0",
|
||||
"reconnecting-websocket": "^4.4.0",
|
||||
"valtio": "^1.2.5",
|
||||
@@ -50,8 +51,8 @@
|
||||
"xrpl-client": "^1.9.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/file-saver": "^2.0.4",
|
||||
"@types/dinero.js": "^1.9.0",
|
||||
"@types/file-saver": "^2.0.4",
|
||||
"@types/pako": "^1.0.2",
|
||||
"@types/react": "17.0.31",
|
||||
"eslint": "7.32.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import Flex from "../../components/Flex";
|
||||
import { Flex, Box } from "../../components";
|
||||
import { useSnapshot } from "valtio";
|
||||
import state from "../../state";
|
||||
|
||||
@@ -20,16 +20,20 @@ const Deploy = () => {
|
||||
const snap = useSnapshot(state);
|
||||
return (
|
||||
<>
|
||||
<main style={{ display: "flex", flex: 1 }}>
|
||||
<main style={{ display: "flex", flex: 1, height: 'calc(100vh - 30vh - 60px)' }}>
|
||||
<DeployEditor />
|
||||
</main>
|
||||
<Flex css={{ flexDirection: "row", width: "100%" }}>
|
||||
<Flex css={{ flexDirection: "row", width: "100%", minHeight: '225px', height: '30vh' }}>
|
||||
<Box css={{ width: "100%" }}>
|
||||
<Accounts />
|
||||
</Box>
|
||||
<Box css={{ width: "100%" }}>
|
||||
<LogBox
|
||||
title="Deploy Log"
|
||||
logs={snap.deployLogs}
|
||||
clearLog={() => (state.deployLogs = [])}
|
||||
/>
|
||||
</Box>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -1,7 +1,115 @@
|
||||
import Container from "../../components/Container";
|
||||
import { Container, Flex, Box, Tabs, Tab, Input, Select, Text, Button } from "../../components";
|
||||
import { Play } from "phosphor-react";
|
||||
import dynamic from "next/dynamic";
|
||||
|
||||
const LogBox = dynamic(() => import("../../components/LogBox"), {
|
||||
ssr: false,
|
||||
});
|
||||
const Accounts = dynamic(() => import("../../components/Accounts"), {
|
||||
ssr: false,
|
||||
});
|
||||
|
||||
const Transaction = () => {
|
||||
const options = [
|
||||
{ value: "chocolate", label: "Chocolate" },
|
||||
{ value: "strawberry", label: "Strawberry" },
|
||||
{ value: "vanilla", label: "Vanilla" },
|
||||
{
|
||||
value: "long",
|
||||
label: "lorem woy uiwyf wyfw8 fwfw98f w98fy wf8fw89f 9w8fy w9fyw9f wf7tdw9f ",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<>
|
||||
<Container css={{ p: "$3 0", fontSize: "$sm" }}>
|
||||
<Flex column fluid>
|
||||
<Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
|
||||
<Text muted css={{ mr: "$3" }}>
|
||||
Transaction type:{" "}
|
||||
</Text>
|
||||
<Select
|
||||
instanceId="transaction"
|
||||
placeholder="Select transaction type"
|
||||
css={{ width: "70%" }}
|
||||
options={options}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
|
||||
<Text muted css={{ mr: "$3" }}>
|
||||
From account:{" "}
|
||||
</Text>
|
||||
<Select
|
||||
instanceId="from-account"
|
||||
placeholder="Select account from which to send from"
|
||||
css={{ width: "70%" }}
|
||||
options={options}
|
||||
/>
|
||||
</Flex>
|
||||
<Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
|
||||
<Text muted css={{ mr: "$3" }}>
|
||||
Amount (XRP):{" "}
|
||||
</Text>
|
||||
<Input defaultValue="0" variant="deep" css={{ width: "70%", flex: "inherit", height: "$9" }} />
|
||||
</Flex>
|
||||
<Flex row fluid css={{ justifyContent: "flex-end", alignItems: "center", mb: "$3" }}>
|
||||
<Text muted css={{ mr: "$3" }}>
|
||||
To account:{" "}
|
||||
</Text>
|
||||
<Select
|
||||
instanceId="to-account"
|
||||
placeholder="Select account from which to send from"
|
||||
css={{ width: "70%" }}
|
||||
options={options}
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Container>
|
||||
<Flex row css={{ justifyContent: "space-between" }}>
|
||||
<Button outline>VIEW AS JSON</Button>
|
||||
<Flex row>
|
||||
<Button outline css={{ mr: "$3" }}>
|
||||
RESET
|
||||
</Button>
|
||||
<Button variant="primary">
|
||||
<Play weight="bold" size="16px" />
|
||||
RUN TEST
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
const Test = () => {
|
||||
return <Container css={{ py: "$10" }}>This will be the test page</Container>;
|
||||
return (
|
||||
<Container css={{ py: "$3", px: 0 }}>
|
||||
<Flex row fluid css={{ justifyContent: 'center', mb: "$2", height: '40vh', minHeight: '300px', p: '$3 $2' }}>
|
||||
<Box css={{ width: "60%", px: "$2", maxWidth: '800px' }}>
|
||||
<Tabs>
|
||||
{/* TODO Dynamic tabs */}
|
||||
<Tab header="test1.json">
|
||||
<Transaction />
|
||||
</Tab>
|
||||
<Tab header="test2.json">
|
||||
<Transaction />
|
||||
</Tab>
|
||||
</Tabs>
|
||||
</Box>
|
||||
<Box css={{ width: "40%", mx: "$2", height: '100%', maxWidth: '750px' }}>
|
||||
<Accounts card hideDeployBtn showHookStats />
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
<Flex row fluid css={{ borderBottom: "1px solid $mauve8" }}>
|
||||
<Box css={{ width: "50%", borderRight: "1px solid $mauve8" }}>
|
||||
<LogBox title="From Log" logs={[]} clearLog={() => {}} />
|
||||
</Box>
|
||||
<Box css={{ width: "50%" }}>
|
||||
<LogBox title="To Log" logs={[]} clearLog={() => {}} />
|
||||
</Box>
|
||||
</Flex>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default Test;
|
||||
|
||||
@@ -50,7 +50,8 @@ export const {
|
||||
text: "$gray12",
|
||||
primary: "$plum",
|
||||
white: "white",
|
||||
black: "black"
|
||||
black: "black",
|
||||
'deep': 'rgb(248, 248, 248)'
|
||||
},
|
||||
fonts: {
|
||||
body: 'Work Sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
|
||||
@@ -303,6 +304,7 @@ export const darkTheme = createTheme('dark', {
|
||||
...pinkDark,
|
||||
...yellowDark,
|
||||
...purpleDark,
|
||||
deep: 'rgb(10, 10, 10)'
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
147
yarn.lock
147
yarn.lock
@@ -50,6 +50,13 @@
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.12.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7":
|
||||
version "7.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.7.tgz#03ff99f64106588c9c403c6ecb8c3bafbbdff1fa"
|
||||
integrity sha512-9E9FJowqAsytyOY6LG+1KuueckRL+aQW+mKvXRXnuFGyRAyepJPmEo9vgMfXUA6O9u3IeEdv9MAkppFcaQwogQ==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/types@7.15.0":
|
||||
version "7.15.0"
|
||||
resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
|
||||
@@ -76,6 +83,71 @@
|
||||
vscode-languageserver-textdocument "^1.0.1"
|
||||
vscode-uri "^3.0.2"
|
||||
|
||||
"@emotion/cache@^11.4.0", "@emotion/cache@^11.7.1":
|
||||
version "11.7.1"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539"
|
||||
integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==
|
||||
dependencies:
|
||||
"@emotion/memoize" "^0.7.4"
|
||||
"@emotion/sheet" "^1.1.0"
|
||||
"@emotion/utils" "^1.0.0"
|
||||
"@emotion/weak-memoize" "^0.2.5"
|
||||
stylis "4.0.13"
|
||||
|
||||
"@emotion/hash@^0.8.0":
|
||||
version "0.8.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
|
||||
integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
|
||||
|
||||
"@emotion/memoize@^0.7.4":
|
||||
version "0.7.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
|
||||
integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
|
||||
|
||||
"@emotion/react@^11.1.1":
|
||||
version "11.7.1"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.7.1.tgz#3f800ce9b20317c13e77b8489ac4a0b922b2fe07"
|
||||
integrity sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.13.10"
|
||||
"@emotion/cache" "^11.7.1"
|
||||
"@emotion/serialize" "^1.0.2"
|
||||
"@emotion/sheet" "^1.1.0"
|
||||
"@emotion/utils" "^1.0.0"
|
||||
"@emotion/weak-memoize" "^0.2.5"
|
||||
hoist-non-react-statics "^3.3.1"
|
||||
|
||||
"@emotion/serialize@^1.0.2":
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.2.tgz#77cb21a0571c9f68eb66087754a65fa97bfcd965"
|
||||
integrity sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==
|
||||
dependencies:
|
||||
"@emotion/hash" "^0.8.0"
|
||||
"@emotion/memoize" "^0.7.4"
|
||||
"@emotion/unitless" "^0.7.5"
|
||||
"@emotion/utils" "^1.0.0"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@emotion/sheet@^1.1.0":
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
|
||||
integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
|
||||
|
||||
"@emotion/unitless@^0.7.5":
|
||||
version "0.7.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
|
||||
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
|
||||
|
||||
"@emotion/utils@^1.0.0":
|
||||
version "1.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.0.0.tgz#abe06a83160b10570816c913990245813a2fd6af"
|
||||
integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
|
||||
|
||||
"@emotion/weak-memoize@^0.2.5":
|
||||
version "0.2.5"
|
||||
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
|
||||
integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
|
||||
|
||||
"@eslint/eslintrc@^0.4.3":
|
||||
version "0.4.3"
|
||||
resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
|
||||
@@ -861,6 +933,22 @@
|
||||
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
|
||||
integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
|
||||
|
||||
"@types/react-transition-group@^4.4.0":
|
||||
version "4.4.4"
|
||||
resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
|
||||
integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
|
||||
dependencies:
|
||||
"@types/react" "*"
|
||||
|
||||
"@types/react@*":
|
||||
version "17.0.38"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.38.tgz#f24249fefd89357d5fa71f739a686b8d7c7202bd"
|
||||
integrity sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==
|
||||
dependencies:
|
||||
"@types/prop-types" "*"
|
||||
"@types/scheduler" "*"
|
||||
csstype "^3.0.2"
|
||||
|
||||
"@types/react@17.0.31":
|
||||
version "17.0.31"
|
||||
resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.31.tgz#fe05ebf91ff3ae35bb6b13f6c1b461db8089dff8"
|
||||
@@ -1739,6 +1827,14 @@ doctrine@^3.0.0:
|
||||
dependencies:
|
||||
esutils "^2.0.2"
|
||||
|
||||
dom-helpers@^5.0.1:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
|
||||
integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.8.7"
|
||||
csstype "^3.0.2"
|
||||
|
||||
domain-browser@4.19.0:
|
||||
version "4.19.0"
|
||||
resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-4.19.0.tgz#1093e17c0a17dbd521182fe90d49ac1370054af1"
|
||||
@@ -2431,6 +2527,13 @@ hmac-drbg@^1.0.1:
|
||||
minimalistic-assert "^1.0.0"
|
||||
minimalistic-crypto-utils "^1.0.1"
|
||||
|
||||
hoist-non-react-statics@^3.3.1:
|
||||
version "3.3.2"
|
||||
resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
|
||||
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
|
||||
dependencies:
|
||||
react-is "^16.7.0"
|
||||
|
||||
hotkeys-js@^3.8.1:
|
||||
version "3.8.7"
|
||||
resolved "https://registry.yarnpkg.com/hotkeys-js/-/hotkeys-js-3.8.7.tgz#c16cab978b53d7242f860ca3932e976b92399981"
|
||||
@@ -2990,6 +3093,11 @@ md5.js@^1.3.4:
|
||||
inherits "^2.0.1"
|
||||
safe-buffer "^5.1.2"
|
||||
|
||||
memoize-one@^5.0.0:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
|
||||
integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
|
||||
|
||||
memoize-one@^6.0.0:
|
||||
version "6.0.0"
|
||||
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
|
||||
@@ -3580,6 +3688,15 @@ progress@^2.0.0:
|
||||
resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
|
||||
integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
|
||||
|
||||
prop-types@^15.6.0, prop-types@^15.6.2:
|
||||
version "15.8.0"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.0.tgz#d237e624c45a9846e469f5f31117f970017ff588"
|
||||
integrity sha512-fDGekdaHh65eI3lMi5OnErU6a8Ighg2KjcjQxO7m8VHyWjcPyj5kiOgV1LQDOOOgVy3+5FgjXvdSSX7B8/5/4g==
|
||||
dependencies:
|
||||
loose-envify "^1.4.0"
|
||||
object-assign "^4.1.1"
|
||||
react-is "^16.13.1"
|
||||
|
||||
prop-types@^15.7.2:
|
||||
version "15.7.2"
|
||||
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
|
||||
@@ -3689,7 +3806,7 @@ react-is@17.0.2:
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
|
||||
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
|
||||
|
||||
react-is@^16.8.1:
|
||||
react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||
@@ -3725,6 +3842,19 @@ react-remove-scroll@^2.4.0:
|
||||
use-callback-ref "^1.2.3"
|
||||
use-sidecar "^1.0.1"
|
||||
|
||||
react-select@^5.2.1:
|
||||
version "5.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-select/-/react-select-5.2.1.tgz#416c25c6b79b94687702374e019c4f2ed9d159d6"
|
||||
integrity sha512-OOyNzfKrhOcw/BlembyGWgdlJ2ObZRaqmQppPFut1RptJO423j+Y+JIsmxkvsZ4D/3CpOmwIlCvWbbAWEdh12A==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.12.0"
|
||||
"@emotion/cache" "^11.4.0"
|
||||
"@emotion/react" "^11.1.1"
|
||||
"@types/react-transition-group" "^4.4.0"
|
||||
memoize-one "^5.0.0"
|
||||
prop-types "^15.6.0"
|
||||
react-transition-group "^4.3.0"
|
||||
|
||||
react-stay-scrolled@^7.4.0:
|
||||
version "7.4.0"
|
||||
resolved "https://registry.yarnpkg.com/react-stay-scrolled/-/react-stay-scrolled-7.4.0.tgz#cb109b8dfd7834e5406d9c9322035ab40c398368"
|
||||
@@ -3742,6 +3872,16 @@ react-style-singleton@^2.1.0:
|
||||
invariant "^2.2.4"
|
||||
tslib "^1.0.0"
|
||||
|
||||
react-transition-group@^4.3.0:
|
||||
version "4.4.2"
|
||||
resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
|
||||
integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.5.5"
|
||||
dom-helpers "^5.0.1"
|
||||
loose-envify "^1.4.0"
|
||||
prop-types "^15.6.2"
|
||||
|
||||
react@17.0.2:
|
||||
version "17.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
|
||||
@@ -4265,6 +4405,11 @@ stylis@3.5.4:
|
||||
resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
|
||||
integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
|
||||
|
||||
stylis@4.0.13:
|
||||
version "4.0.13"
|
||||
resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
|
||||
integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
|
||||
|
||||
supports-color@^5.3.0:
|
||||
version "5.5.0"
|
||||
resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
|
||||
|
||||
Reference in New Issue
Block a user