logos-messaging/examples.waku.org
1
0
Fork 0
mirror of https://github.com/logos-messaging/examples.waku.org.git synced 2026-01-05 22:33:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix problem with margins

Browse Source
This commit is contained in:
Sasha 2023-10-26 13:06:50 +02:00
parent 0a53a1f974
commit dbb0dd567d
No known key found for this signature in database
9 changed files with 38 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/rln-js/src/app/home/components/Blockchain.tsx
View File

@ -4,8 +4,8 @@ import { Subtitle } from "@/components/Subtitle";
export const Blockchain: React.FunctionComponent<{}> = () => { export const Blockchain: React.FunctionComponent<{}> = () => {
return ( return (
<Block top="10"> <Block className="mt-10">
<Block bottom="3" type={BlockTypes.FlexHorizontal}> <Block className="mb-3" type={BlockTypes.FlexHorizontal}>
<Subtitle>Contract</Subtitle> <Subtitle>Contract</Subtitle>
<Button>Fetch state</Button> <Button>Fetch state</Button>
</Block> </Block>

2
examples/rln-js/src/app/home/components/Header.tsx
View File

@ -9,7 +9,7 @@ export const Header: React.FunctionComponent<{}> = () => {
return ( return (
<> <>
<Block bottom="5" type={BlockTypes.FlexHorizontal}> <Block className="mb-5" type={BlockTypes.FlexHorizontal}>
<Title>Waku RLN</Title> <Title>Waku RLN</Title>
<Button>Connect Wallet</Button> <Button>Connect Wallet</Button>
</Block> </Block>

10
examples/rln-js/src/app/home/components/Keystore.tsx
View File

@ -8,18 +8,18 @@ export const Keystore: React.FunctionComponent<{}> = () => {
const { keystoreStatus } = useStore(); const { keystoreStatus } = useStore();
return ( return (
<Block top="10"> <Block className="mt-10">
<Block type={BlockTypes.FlexHorizontal}> <Block type={BlockTypes.FlexHorizontal}>
<Subtitle>Keystore</Subtitle> <Subtitle>Keystore</Subtitle>
<div> <div>
<Button>Import</Button> <Button>Import</Button>
<Button left="2">Export</Button> <Button className="ml-2">Export</Button>
</div> </div>
</Block> </Block>
<Status text="Keystore status" mark={keystoreStatus} /> <Status text="Keystore status" mark={keystoreStatus} />
<Block top="4"> <Block className="mt-4">
<label <label
htmlFor="keystore-input" htmlFor="keystore-input"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
@ -33,13 +33,13 @@ export const Keystore: React.FunctionComponent<{}> = () => {
/> />
</Block> </Block>
<Block top="4"> <Block className="mt-4">
<p className="text-s">Generate new credentials from wallet</p> <p className="text-s">Generate new credentials from wallet</p>
<Button>Generate new credentials</Button> <Button>Generate new credentials</Button>
<Button>Register credentials</Button> <Button>Register credentials</Button>
</Block> </Block>
<Block top="4"> <Block className="mt-4">
<p className="text-s">Read from Keystore</p> <p className="text-s">Read from Keystore</p>
<select id="keystoreOptions"></select> <select id="keystoreOptions"></select>
<Button>Read credentials</Button> <Button>Read credentials</Button>

14
examples/rln-js/src/app/home/components/KeystoreDetails.tsx
View File

@ -2,33 +2,33 @@ import { Block, BlockTypes } from "@/components/Block";
export const KeystoreDetails: React.FunctionComponent<{}> = () => { export const KeystoreDetails: React.FunctionComponent<{}> = () => {
return ( return (
<Block top="5"> <Block className="mt-5">
<Block top="3" type={BlockTypes.FlexHorizontal}> <Block className="mt-3" type={BlockTypes.FlexHorizontal}>
<p>Keystore</p> <p>Keystore</p>
<code>none</code> <code>none</code>
</Block> </Block>
<Block top="3" type={BlockTypes.FlexHorizontal}> <Block className="mt-3" type={BlockTypes.FlexHorizontal}>
<p>Membership ID</p> <p>Membership ID</p>
<code>none</code> <code>none</code>
</Block> </Block>
<Block top="3" type={BlockTypes.FlexHorizontal}> <Block className="mt-3" type={BlockTypes.FlexHorizontal}>
<p>Secret Hash</p> <p>Secret Hash</p>
<code>none</code> <code>none</code>
</Block> </Block>
<Block top="3" type={BlockTypes.FlexHorizontal}> <Block className="mt-3" type={BlockTypes.FlexHorizontal}>
<p>Commitment</p> <p>Commitment</p>
<code>none</code> <code>none</code>
</Block> </Block>
<Block top="3" type={BlockTypes.FlexHorizontal}> <Block className="mt-3" type={BlockTypes.FlexHorizontal}>
<p>Nullifier</p> <p>Nullifier</p>
<code>none</code> <code>none</code>
</Block> </Block>
<Block top="3" type={BlockTypes.FlexHorizontal}> <Block className="mt-3" type={BlockTypes.FlexHorizontal}>
<p>Trapdoor</p> <p>Trapdoor</p>
<code>none</code> <code>none</code>
</Block> </Block>

14
examples/rln-js/src/app/home/components/Waku.tsx
View File

@ -8,11 +8,11 @@ export const Waku: React.FunctionComponent<{}> = () => {
const { wakuStatus } = useStore(); const { wakuStatus } = useStore();
return ( return (
<Block top="10"> <Block className="mt-10">
<Subtitle>Waku</Subtitle> <Subtitle>Waku</Subtitle>
<Status text="Waku status" mark={wakuStatus} /> <Status text="Waku status" mark={wakuStatus} />
<Block top="4"> <Block className="mt-4">
<label <label
htmlFor="remote-multiaddr" htmlFor="remote-multiaddr"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
@ -26,11 +26,11 @@ export const Waku: React.FunctionComponent<{}> = () => {
className="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" className="w-full bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
defaultValue="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm" defaultValue="/dns4/node-01.ac-cn-hongkong-c.wakuv2.test.statusim.net/tcp/443/wss/p2p/16Uiu2HAkvWiyFsgRhuJEb9JfjYxEkoHLgnUQmr1N5mKWnYjxYRVm"
/> />
<Button left="2">Dial</Button> <Button className="ml-2">Dial</Button>
</Block> </Block>
</Block> </Block>
<Block top="4"> <Block className="mt-4">
<label <label
htmlFor="nick-input" htmlFor="nick-input"
className="block mb-2 text-sm font-medium text-gray-900 dark:text-white" className="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
@ -45,7 +45,7 @@ export const Waku: React.FunctionComponent<{}> = () => {
/> />
</Block> </Block>
<Block top="4"> <Block className="mt-4">
<Block> <Block>
<label <label
htmlFor="message-input" htmlFor="message-input"
@ -60,10 +60,10 @@ export const Waku: React.FunctionComponent<{}> = () => {
placeholder="Text your message here" placeholder="Text your message here"
/> />
</Block> </Block>
<Button top="2">Send</Button> <Button className="mt-2">Send</Button>
</Block> </Block>
<Block top="4"> <Block className="mt-4">
<p className="text-l mb-4">Messages</p> <p className="text-l mb-4">Messages</p>
</Block> </Block>
</Block> </Block>

2
examples/rln-js/src/app/home/page.tsx
View File

@ -7,7 +7,7 @@ import { KeystoreDetails } from "./components/KeystoreDetails";
export default function Home() { export default function Home() {
return ( return (
<main className="flex min-h-screen flex-col p-24 font-mono"> <main className="flex min-h-screen flex-col p-24 font-mono max-w-screen-lg m-auto">
<Header /> <Header />
<Blockchain /> <Blockchain />
<Keystore /> <Keystore />

1
examples/rln-js/src/app/page.tsx
View File

@ -1,3 +1,4 @@
import Home from "@/app/home/page"; import Home from "@/app/home/page";
export const dynamic = "force-static";
export default Home; export default Home;

8
examples/rln-js/src/components/Block.tsx
View File

@ -4,8 +4,6 @@ export enum BlockTypes {
type BlockProps = { type BlockProps = {
children: any; children: any;
top?: string;
bottom?: string;
type?: BlockTypes; type?: BlockTypes;
className?: string; className?: string;
}; };
@ -18,11 +16,7 @@ export const Block: React.FunctionComponent<BlockProps> = (props) => {
const restClassNames = props.className || ""; const restClassNames = props.className || "";
return ( return (
<div <div className={`${flexClassNames} ${restClassNames}`}>
className={`mt-${props.top || 0} mb-${
props.bottom || 0
} ${flexClassNames} ${restClassNames}`}
>
{props.children} {props.children}
</div> </div>
); );

25
examples/rln-js/src/components/Button.tsx
View File

@ -1,17 +1,18 @@
type ButtonProps = { type ButtonProps = {
children: any; children: any;
top?: string; className?: string;
left?: string;
onClick?: (e?: any) => void; onClick?: (e?: any) => void;
}; };
export const Button: React.FunctionComponent<ButtonProps> = (props) => ( export const Button: React.FunctionComponent<ButtonProps> = (props) => {
<button return (
onClick={props.onClick} <button
className={`ml-${props.left || 0} mt-${ onClick={props.onClick}
props.top || 0 className={`${
} py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700`} props.className || ""
> } py-2.5 px-5 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700`}
{props.children} >
</button> {props.children}
); </button>
);
};