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

Updated main modal

Browse Source
This commit is contained in:
Valtteri Karesto
2022-05-11 13:07:08 +03:00
parent 260de7c838
commit 4dd7cbe2ca
7 changed files with 163 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
components/Navigation.tsx
View File

@@ -1,5 +1,6 @@
import React from "react";
import Link from "next/link";
import Image from "next/image";
import { useSnapshot } from "valtio";
import { useRouter } from "next/router";
@@ -28,6 +29,13 @@ import {
} from "./Dialog";
import PanelBox from "./PanelBox";
import { templateFileIds } from "../state/constants";
import { styled } from "../stitches.config";
const ImageWrapper = styled(Flex, {
position: "relative",
mt: "$2",
mb: "$10",
});
const Navigation = () => {
const router = useRouter();
@@ -128,9 +136,10 @@ const Navigation = () => {
</DialogTrigger>
<DialogContent
css={{
display: "flex",
maxWidth: "1080px",
width: "80vw",
height: "80%",
maxHeight: "80%",
backgroundColor: "$mauve1 !important",
overflowY: "auto",
p: 0,
@@ -139,8 +148,7 @@ const Navigation = () => {
<Flex
css={{
flexDirection: "column",
flex: 1,
height: "auto",
height: "100%",
"@md": {
flexDirection: "row",
height: "100%",
@@ -151,9 +159,9 @@ const Navigation = () => {
css={{
borderBottom: "1px solid $colors$mauve5",
width: "100%",
minWidth: "240px",
flexDirection: "column",
p: "$7",
height: "100%",
backgroundColor: "$mauve2",
"@md": {
width: "30%",
@@ -255,67 +263,115 @@ const Navigation = () => {
</Flex>
</DialogDescription>
</Flex>
<div>
<Flex
css={{
display: "grid",
gridTemplateColumns: "1fr",
<Flex
css={{
display: "grid",
gridTemplateColumns: "1fr",
gridTemplateRows: "max-content",
flex: 1,
p: "$7",
pb: "$16",
gap: "$3",
alignItems: "normal",
flexWrap: "wrap",
backgroundColor: "$mauve1",
"@md": {
gridTemplateColumns: "1fr 1fr",
gridTemplateRows: "max-content",
flex: 1,
p: "$7",
gap: "$3",
alignItems: "normal",
flexWrap: "wrap",
backgroundColor: "$mauve1",
"@md": {
gridTemplateColumns: "1fr 1fr 1fr",
gridTemplateRows: "max-content",
},
}}
},
"@lg": {
gridTemplateColumns: "1fr 1fr 1fr",
gridTemplateRows: "max-content",
},
}}
>
<PanelBox
as="a"
href={`/develop/${templateFileIds.starter}`}
>
<PanelBox
as="a"
href={`/develop/${templateFileIds.starter}`}
>
<Heading>Starter</Heading>
<Text>
Just a basic starter with essential imports
</Text>
</PanelBox>
<PanelBox
as="a"
href={`/develop/${templateFileIds.firewall}`}
>
<Heading>Firewall</Heading>
<Text>
This Hook essentially checks a blacklist of accounts
</Text>
</PanelBox>
<PanelBox
as="a"
href={`/develop/${templateFileIds.notary}`}
>
<Heading>Notary</Heading>
<Text>
Collecting signatures for multi-sign transactions
</Text>
</PanelBox>
<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}`}
>
<Heading>Peggy</Heading>
<Text>An oracle based stable coin hook</Text>
</PanelBox>
</Flex>
</div>
<ImageWrapper>
<Image
src="/starter.svg"
alt="Firewall icon"
width="66px"
height="33px"
/>
</ImageWrapper>
<Heading>Starter</Heading>
<Text>
Just a basic starter with essential imports, just
accepts any transaction coming through
</Text>
</PanelBox>
<PanelBox
as="a"
href={`/develop/${templateFileIds.firewall}`}
css={{ alignItems: "flex-start" }}
>
<ImageWrapper>
<Image
src="/firewall.svg"
alt="Firewall icon"
width="66px"
height="33px"
/>
</ImageWrapper>
<Heading>Firewall</Heading>
<Text>
This Hook essentially checks a blacklist of accounts
</Text>
</PanelBox>
<PanelBox
as="a"
href={`/develop/${templateFileIds.notary}`}
>
<ImageWrapper>
<Image
src="/notary.svg"
alt="Firewall icon"
width="66px"
height="33px"
/>
</ImageWrapper>
<Heading>Notary</Heading>
<Text>
Collecting signatures for multi-sign transactions
</Text>
</PanelBox>
<PanelBox
as="a"
href={`/develop/${templateFileIds.carbon}`}
>
<ImageWrapper>
<Image
src="/carbon.svg"
alt="Firewall icon"
width="66px"
height="33px"
/>
</ImageWrapper>
<Heading>Carbon</Heading>
<Text>Send a percentage of sum to an address</Text>
</PanelBox>
<PanelBox
as="a"
href={`/develop/${templateFileIds.peggy}`}
>
<ImageWrapper>
<Image
src="/peggy.svg"
alt="Firewall icon"
width="66px"
height="33px"
/>
</ImageWrapper>
<Heading>Peggy</Heading>
<Text>An oracle based stable coin hook</Text>
</PanelBox>
</Flex>
</Flex>
<DialogClose asChild>
<Box

6
public/accept.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M38.5 13L31.1666 20L27.5 16.5" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M43 5H23C22.4477 5 22 5.44772 22 6V26C22 26.5523 22.4477 27 23 27H43C43.5523 27 44 26.5523 44 26V6C44 5.44772 43.5523 5 43 5Z" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.14441e-05 5L8.94099 16.0625L4.00543e-05 27.125H2.27587L10.5015 16.9475H16.5938V15.1775H10.5015L2.27582 5H-1.14441e-05Z" fill="#EDEDEF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M66 5L57.059 16.0625L66 27.125H63.7241L55.4985 16.9475H49.4062V15.1775H55.4985L63.7242 5H66Z" fill="#EDEDEF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 799 B

6
public/carbon.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33 2L23 15H28L21 24H45L38 15H43L33 2Z" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M33 24V30" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.14441e-05 4L8.94099 15.0625L4.00543e-05 26.125H2.27587L10.5015 15.9475H16.5938V14.1775H10.5015L2.27582 4H-1.14441e-05Z" fill="#EDEDEF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M66 4L57.059 15.0625L66 26.125H63.7241L55.4985 15.9475H49.4062V14.1775H55.4985L63.7242 4H66Z" fill="#EDEDEF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 692 B

11
public/firewall.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33 13V7" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M27 19V13" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M39 19V13" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M33 25V19" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 13H45" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M21 19H45" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M45 7H21V25H45V7Z" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.14441e-05 4.875L8.94099 15.9375L4.00543e-05 27H2.27587L10.5015 16.8225H16.5938V15.0525H10.5015L2.27582 4.875H-1.14441e-05Z" fill="#EDEDEF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M66 4.875L57.059 15.9375L66 27H63.7241L55.4985 16.8225H49.4062V15.0525H55.4985L63.7242 4.875H66Z" fill="#EDEDEF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

6
public/notary.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M37.5 10.5L26.5 21.5L21 16.0002" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M49 10.5L38 21.5L35.0784 18.5785" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.14441e-05 5L8.94099 16.0625L4.00543e-05 27.125H2.27587L10.5015 16.9475H16.5938V15.1775H10.5015L2.27582 5H-1.14441e-05Z" fill="#EDEDEF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M66 5L57.059 16.0625L66 27.125H63.7241L55.4985 16.9475H49.4062V15.1775H55.4985L63.7242 5H66Z" fill="#EDEDEF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 708 B

9
public/peggy.svg Normal file
View File

@@ -0,0 +1,9 @@
<svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33 19C40.1797 19 46 16.3137 46 13C46 9.68629 40.1797 7 33 7C25.8203 7 20 9.68629 20 13C20 16.3137 25.8203 19 33 19Z" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M33 19V25" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20 13V19C20 22 25 25 33 25C41 25 46 22 46 19V13" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M41 17.7633V23.7634" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M25 17.7633V23.7634" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.14441e-05 4L8.94099 15.0625L4.00543e-05 26.125H2.27587L10.5015 15.9475H16.5938V14.1775H10.5015L2.27582 4H-1.14441e-05Z" fill="#EDEDEF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M66 4L57.059 15.0625L66 26.125H63.7241L55.4985 15.9475H49.4062V14.1775H55.4985L63.7242 4H66Z" fill="#EDEDEF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

6
public/starter.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="66" height="32" viewBox="0 0 66 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M42 28H24C23.7347 28 23.4804 27.8946 23.2929 27.7071C23.1053 27.5196 23 27.2652 23 27V5C23 4.73479 23.1053 4.48044 23.2929 4.2929C23.4804 4.10537 23.7347 4.00001 24 4H36.0003L43 11V27C43 27.2652 42.8947 27.5196 42.7071 27.7071C42.5196 27.8946 42.2653 28 42 28V28Z" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M36 4V11H43.001" stroke="#EDEDEF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.14441e-05 4.875L8.94099 15.9375L4.00543e-05 27H2.27587L10.5015 16.8225H16.5938V15.0525H10.5015L2.27582 4.875H-1.14441e-05Z" fill="#EDEDEF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M66 4.875L57.059 15.9375L66 27H63.7241L55.4985 16.8225H49.4062V15.0525H55.4985L63.7242 4.875H66Z" fill="#EDEDEF"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 931 B