fix problem with margins

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

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

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

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

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

@@ -8,18 +8,18 @@ export const Keystore: React.FunctionComponent<{}> = () => {
   const { keystoreStatus } = useStore();
 
   return (
-    <Block top="10">
+    <Block className="mt-10">
       <Block type={BlockTypes.FlexHorizontal}>
         <Subtitle>Keystore</Subtitle>
         <div>
           <Button>Import</Button>
-          <Button left="2">Export</Button>
+          <Button className="ml-2">Export</Button>
         </div>
       </Block>
 
       <Status text="Keystore status" mark={keystoreStatus} />
 
-      <Block top="4">
+      <Block className="mt-4">
         <label
           htmlFor="keystore-input"
           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 top="4">
+      <Block className="mt-4">
         <p className="text-s">Generate new credentials from wallet</p>
         <Button>Generate new credentials</Button>
         <Button>Register credentials</Button>
       </Block>
 
-      <Block top="4">
+      <Block className="mt-4">
         <p className="text-s">Read from Keystore</p>
         <select id="keystoreOptions"></select>
         <Button>Read credentials</Button>

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

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

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

@@ -8,11 +8,11 @@ export const Waku: React.FunctionComponent<{}> = () => {
   const { wakuStatus } = useStore();
 
   return (
-    <Block top="10">
+    <Block className="mt-10">
       <Subtitle>Waku</Subtitle>
       <Status text="Waku status" mark={wakuStatus} />
 
-      <Block top="4">
+      <Block className="mt-4">
         <label
           htmlFor="remote-multiaddr"
           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"
             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 top="4">
+      <Block className="mt-4">
         <label
           htmlFor="nick-input"
           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 top="4">
+      <Block className="mt-4">
         <Block>
           <label
             htmlFor="message-input"
@@ -60,10 +60,10 @@ export const Waku: React.FunctionComponent<{}> = () => {
             placeholder="Text your message here"
           />
         </Block>
-        <Button top="2">Send</Button>
+        <Button className="mt-2">Send</Button>
       </Block>
 
-      <Block top="4">
+      <Block className="mt-4">
         <p className="text-l mb-4">Messages</p>
       </Block>
     </Block>

examples/rln-js/src/app/home/page.tsx

@@ -7,7 +7,7 @@ import { KeystoreDetails } from "./components/KeystoreDetails";
 
 export default function Home() {
   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 />
       <Blockchain />
       <Keystore />

examples/rln-js/src/app/page.tsx

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

examples/rln-js/src/components/Block.tsx

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

examples/rln-js/src/components/Button.tsx

@@ -1,17 +1,18 @@
 type ButtonProps = {
   children: any;
-  top?: string;
-  left?: string;
+  className?: string;
   onClick?: (e?: any) => void;
 };
 
-export const Button: React.FunctionComponent<ButtonProps> = (props) => (
-  <button
-    onClick={props.onClick}
-    className={`ml-${props.left || 0} mt-${
-      props.top || 0
-    } 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>
-);
+export const Button: React.FunctionComponent<ButtonProps> = (props) => {
+  return (
+    <button
+      onClick={props.onClick}
+      className={`${
+        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>
+  );
+};