ARCHIVE/xrpl-hooks-ide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add panel resizing to views

Browse Source
This commit is contained in:
Joni Juup
2022-02-01 16:44:51 +02:00
parent 5850551906
commit 9a09da88ec
8 changed files with 318 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
components/Accounts.tsx
View File

@@ -36,11 +36,13 @@ 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);
}}
@@ -135,7 +137,7 @@ const AccountDialog = ({
}}
ghost
size="xs"
onClick={() => setShowSecret(curr => !curr)}
onClick={() => setShowSecret((curr) => !curr)}
>
{showSecret ? "Hide" : "Show"}
</Button>
@@ -181,7 +183,11 @@ 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>
@@ -197,8 +203,10 @@ 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(", ")
: "–"}
@@ -223,13 +231,15 @@ interface AccountProps {
showHookStats?: boolean;
}
const Accounts: FC<AccountProps> = props => {
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",
@@ -241,13 +251,15 @@ const Accounts: FC<AccountProps> = props => {
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",
@@ -257,7 +269,9 @@ const Accounts: FC<AccountProps> = props => {
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")
@@ -291,14 +305,17 @@ const Accounts: FC<AccountProps> = props => {
position: "relative",
flex: "1",
height: "100%",
borderRight: "1px solid $mauve6",
borderLeft: "1px solid $mauve6",
borderBottom: "1px solid $mauve6",
border: "1px solid $mauve6",
borderRadius: props.card ? "$md" : undefined,
}}
>
<Container css={{ p: 0, flexShrink: 1, height: "100%" }}>
<Flex css={{ py: "$3", borderBottom: props.card ? "1px solid $mauve6" : undefined }}>
<Flex
css={{
py: "$3",
borderBottom: props.card ? "1px solid $mauve6" : undefined,
}}
>
<Heading
as="h3"
css={{
@@ -336,7 +353,7 @@ const Accounts: FC<AccountProps> = props => {
overflowY: "auto",
}}
>
{snap.accounts.map(account => (
{snap.accounts.map((account) => (
<Flex
column
key={account.address + account.name}
@@ -361,7 +378,12 @@ const Accounts: FC<AccountProps> = props => {
>
<Box>
<Text>{account.name} </Text>
<Text css={{ color: "$mauve9" }}>
<Text
css={{
color: "$mauve9",
wordBreak: "break-word",
}}
>
{account.address} (
{Dinero({
amount: Number(account?.xrp || "0"),
@@ -384,10 +406,11 @@ const Accounts: FC<AccountProps> = props => {
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);
}}
@@ -430,7 +453,7 @@ const ImportAccountDialog = () => {
name="secret"
type="password"
value={value}
onChange={e => setValue(e.target.value)}
onChange={(e) => setValue(e.target.value)}
/>
</DialogDescription>

19
components/LogBox.tsx
View File

@@ -21,7 +21,14 @@ interface ILogBox {
enhanced?: boolean;
}
const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children, renderNav, enhanced }) => {
const LogBox: React.FC<ILogBox> = ({
title,
clearLog,
logs,
children,
renderNav,
enhanced,
}) => {
const logRef = useRef<HTMLPreElement>(null);
const { stayScrolled /*, scrollBottom*/ } = useStayScrolled(logRef);
@@ -41,7 +48,14 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children, renderNav,
}}
>
<Container css={{ px: 0, flexShrink: 1 }}>
<Flex css={{ py: "$3", alignItems: "center", fontSize: "$sm", fontWeight: 300 }}>
<Flex
css={{
py: "$3",
alignItems: "center",
fontSize: "$sm",
fontWeight: 300,
}}
>
<Heading
as="h3"
css={{
@@ -76,7 +90,6 @@ const LogBox: React.FC<ILogBox> = ({ title, clearLog, logs, children, renderNav,
display: "flex",
flexDirection: "column",
width: "100%",
height: "160px",
fontSize: "13px",
fontWeight: "$body",
fontFamily: "$monospace",

106
components/Navigation.tsx
View File

@@ -27,7 +27,7 @@ import {
DialogTrigger,
} from "./Dialog";
import PanelBox from "./PanelBox";
import { templateFileIds } from '../state/constants';
import { templateFileIds } from "../state/constants";
const Navigation = () => {
const router = useRouter();
@@ -43,6 +43,7 @@ const Navigation = () => {
borderBottom: "1px solid $mauve6",
position: "relative",
zIndex: 2003,
height: "60px",
}}
>
<Container
@@ -83,8 +84,12 @@ const Navigation = () => {
<Spinner />
) : (
<>
<Heading css={{ lineHeight: 1 }}>{snap.files?.[0]?.name || "XRPL Hooks"}</Heading>
<Text css={{ fontSize: "$xs", color: "$mauve10", lineHeight: 1 }}>
<Heading css={{ lineHeight: 1 }}>
{snap.files?.[0]?.name || "XRPL Hooks"}
</Heading>
<Text
css={{ fontSize: "$xs", color: "$mauve10", lineHeight: 1 }}
>
{snap.files.length > 0 ? "Gist: " : "Playground"}
<Text css={{ color: "$mauve12" }}>
{snap.files.length > 0 &&
@@ -96,7 +101,10 @@ const Navigation = () => {
</Flex>
{router.isReady && (
<ButtonGroup css={{ marginLeft: "auto" }}>
<Dialog open={snap.mainModalOpen} onOpenChange={open => (state.mainModalOpen = open)}>
<Dialog
open={snap.mainModalOpen}
onOpenChange={(open) => (state.mainModalOpen = open)}
>
<DialogTrigger asChild>
<Button outline>
<FolderOpen size="15px" />
@@ -157,9 +165,12 @@ const Navigation = () => {
mb: "$7",
}}
>
Hooks add smart contract functionality to the XRP Ledger.
Hooks add smart contract functionality to the XRP
Ledger.
</Text>
<Flex css={{ flexDirection: "column", gap: "$2", mt: "$2" }}>
<Flex
css={{ flexDirection: "column", gap: "$2", mt: "$2" }}
>
<Text
css={{
display: "inline-flex",
@@ -244,27 +255,54 @@ const Navigation = () => {
},
}}
>
<PanelBox as="a" href={`/develop/${templateFileIds.starter}`}>
<PanelBox
as="a"
href={`/develop/${templateFileIds.starter}`}
>
<Heading>Starter</Heading>
<Text>Just an empty starter with essential imports</Text>
<Text>
Just an empty starter with essential imports
</Text>
</PanelBox>
<PanelBox as="a" href={`/develop/${templateFileIds.starter}`}>
<PanelBox
as="a"
href={`/develop/${templateFileIds.starter}`}
>
<Heading>Firewall</Heading>
<Text>This Hook essentially checks a blacklist of accounts</Text>
<Text>
This Hook essentially checks a blacklist of accounts
</Text>
</PanelBox>
<PanelBox as="a" href={`/develop/${templateFileIds.accept}`}>
<PanelBox
as="a"
href={`/develop/${templateFileIds.accept}`}
>
<Heading>Accept</Heading>
<Text>This hook just accepts any transaction coming through it</Text>
<Text>
This hook just accepts any transaction coming through
it
</Text>
</PanelBox>
<PanelBox as="a" href={`/develop/${templateFileIds.notary}`}>
<PanelBox
as="a"
href={`/develop/${templateFileIds.notary}`}
>
<Heading>Notary</Heading>
<Text>Collecting signatures for multi-sign transactions</Text>
<Text>
Collecting signatures for multi-sign transactions
</Text>
</PanelBox>
<PanelBox as="a" href={`/develop/${templateFileIds.carbon}`}>
<PanelBox
as="a"
href={`/develop/${templateFileIds.carbon}`}
>
<Heading>Carbon</Heading>
<Text>Send a percentage of sum to an address</Text>
</PanelBox>
<PanelBox as="a" href={`/develop/${templateFileIds.peggy}`}>
<PanelBox
as="a"
href={`/develop/${templateFileIds.peggy}`}
>
<Heading>Peggy</Heading>
<Text>An oracle based stabe coin hook</Text>
</PanelBox>
@@ -313,18 +351,42 @@ const Navigation = () => {
}}
>
<ButtonGroup>
<Link href={gistId ? `/develop/${gistId}` : "/develop"} passHref shallow>
<Button as="a" outline={!router.pathname.includes("/develop")} uppercase>
<Link
href={gistId ? `/develop/${gistId}` : "/develop"}
passHref
shallow
>
<Button
as="a"
outline={!router.pathname.includes("/develop")}
uppercase
>
Develop
</Button>
</Link>
<Link href={gistId ? `/deploy/${gistId}` : "/deploy"} passHref shallow>
<Button as="a" outline={!router.pathname.includes("/deploy")} uppercase>
<Link
href={gistId ? `/deploy/${gistId}` : "/deploy"}
passHref
shallow
>
<Button
as="a"
outline={!router.pathname.includes("/deploy")}
uppercase
>
Deploy
</Button>
</Link>
<Link href={gistId ? `/test/${gistId}` : "/test"} passHref shallow>
<Button as="a" outline={!router.pathname.includes("/test")} uppercase>
<Link
href={gistId ? `/test/${gistId}` : "/test"}
passHref
shallow
>
<Button
as="a"
outline={!router.pathname.includes("/test")}
uppercase
>
Test
</Button>
</Link>