Beta Docs (#1)

Co-authored-by: Kautuk Kundan <[email protected]>

Author: aashutoshrathi

docs/components/ConnectWallet.tsx

@@ -0,0 +1,69 @@
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import { SignupForm } from "./SignupForm";
+
+export const ConnectWallet = () => {
+  return (
+    <ConnectButton.Custom>
+      {({
+        account,
+        chain,
+        openAccountModal,
+        openChainModal,
+        openConnectModal,
+        authenticationStatus,
+        mounted,
+      }) => {
+        const ready = mounted && authenticationStatus !== "loading";
+        const connected =
+          ready &&
+          account &&
+          chain &&
+          (!authenticationStatus || authenticationStatus === "authenticated");
+        return (
+          <div
+            {...(!ready && {
+              "aria-hidden": true,
+              style: {
+                opacity: 0,
+                pointerEvents: "none",
+                userSelect: "none",
+              },
+            })}
+          >
+            {(() => {
+              if (!connected) {
+                return (
+                  <div className="flex items-center justify-center">
+                    <div className="bg-teal-connect opacity-25 w-[180px] h-10 rounded-lg" />
+                    <button
+                      onClick={openConnectModal}
+                      type="button"
+                      className="primary bg-teal-connect w-44 h-9 px-4 rounded-lg absolute text-black font-jetbrains font-bold"
+                    >
+                      Connect Wallet
+                    </button>
+                  </div>
+                );
+              }
+              if (chain.unsupported) {
+                return (
+                  <div className="flex items-center justify-center">
+                    <div className="bg-error-med opacity-25 w-[180px] h-10 rounded-lg" />
+                    <button
+                      onClick={openChainModal}
+                      type="button"
+                      className="primary bg-error-med w-44 h-9 px-4 rounded-lg absolute text-black font-jetbrains font-bold"
+                    >
+                      Wrong network
+                    </button>
+                  </div>
+                );
+              }
+              return <SignupForm />;
+            })()}
+          </div>
+        );
+      }}
+    </ConnectButton.Custom>
+  );
+};

docs/components/Input.tsx

@@ -0,0 +1,47 @@
+import type { UseFormRegister } from "react-hook-form";
+import { getRegex } from "../utils";
+
+interface InputProps {
+  formKey: string;
+  label: string;
+  placeholder: string;
+  paramType: string;
+  register: UseFormRegister<any>;
+  defaultValue?: string;
+}
+
+export const Input: React.FC<InputProps> = ({
+  formKey,
+  label,
+  placeholder,
+  defaultValue,
+  paramType,
+  register,
+}) => {
+  return (
+    <div className="flex flex-col gap-2">
+      <span className="text-white-44 text-sm">{label}</span>
+      <input
+        disabled={label === "Wallet"}
+        className="p-2 border text-sm placeholder-white-44 border-grey-elevation-4 text-white bg-grey-elevation-2 focus:border-teal-primary rounded-lg outline-none"
+        placeholder={placeholder}
+        {...register(formKey, {
+          required: "required",
+          pattern: {
+            value: getRegex(paramType),
+            message: "Invalid input",
+          },
+          value: defaultValue || "",
+          setValueAs: (value) =>
+            paramType === "uint256"
+              ? value === ""
+                ? ""
+                : isNaN(Number(value))
+                  ? value
+                  : Number(value)
+              : value,
+        })}
+      />
+    </div>
+  );
+};

docs/components/SignupForm.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { keccak256, toBytes } from "viem";
+// import { Callout } from "vocs/components";
+import { useAccount, useSignTypedData } from "wagmi";
+import { Input } from "./Input";
+
+const hashFormData = (formData: Record<string, any>) => {
+  return keccak256(toBytes(JSON.stringify(formData)));
+};
+
+const MRU_API = "https://api.beta1.stf.xyz";
+
+const registrationSchema = [
+  {
+    name: "Name",
+    key: "name",
+    type: "string",
+  },
+  {
+    name: "Wallet",
+    key: "wallet",
+    type: "address",
+  },
+  {
+    name: "Discord Username",
+    key: "discord",
+    type: "string",
+  },
+  {
+    name: "GitHub Username",
+    key: "github",
+    type: "string",
+  },
+  {
+    name: "NPM Username",
+    key: "npm",
+    type: "string",
+  },
+  {
+    name: "What vertical are you in?",
+    key: "vertical",
+    type: "string",
+  },
+  {
+    name: "What do you plan to build?",
+    key: "planToBuild",
+    type: "string",
+  },
+  {
+    name: "How does Stackr fit into your project?",
+    key: "stackrFit",
+    type: "string",
+  },
+  {
+    name: "What is your aspirational idea?",
+    key: "aspirationalIdea",
+    type: "string",
+  },
+];
+
+export const SignupForm = () => {
+  const { signTypedDataAsync } = useSignTypedData();
+  const { address } = useAccount();
+  const { register, handleSubmit, reset, watch, formState } = useForm<any>();
+  const watcher = watch();
+  const [isAnyFieldEmpty, setIsAnyFieldEmpty] = useState(false);
+  const [hasApplied, setHasApplied] = useState(false);
+
+  const onSubmit = async (details: any) => {
+    const hash = hashFormData(details);
+
+    const inputs = {
+      hash,
+    };
+
+    const schemaData = await fetch(`${MRU_API}/schema`);
+    const { domain, types } = await schemaData.json();
+    const signature = await signTypedDataAsync({
+      domain,
+      types: types,
+      primaryType: Object.keys(types)[0],
+      message: inputs,
+    });
+
+    const payload = { signature, msgSender: address, inputs, details };
+
+    const res = await fetch(`${MRU_API}/register`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(payload),
+    });
+
+    if (res.status === 201) {
+      setHasApplied(true);
+      reset();
+    }
+  };
+
+  const renderForm = () => {
+    const { isSubmitting, errors, isValid } = formState;
+    const isDisabled = isSubmitting || !isValid || isAnyFieldEmpty;
+
+    useEffect(() => {
+      const anyFieldEmpty = Object.values(watcher).some(
+        (field) => field === ""
+      );
+      setIsAnyFieldEmpty(anyFieldEmpty);
+    }, [watcher, errors]);
+
+    return (
+      <form
+        className="flex flex-col gap-6 w-full overflow-scroll"
+        onSubmit={handleSubmit(onSubmit)}
+      >
+        {registrationSchema.map(({ key, type, name }) => (
+          <Input
+            key={key}
+            formKey={key}
+            register={register}
+            placeholder={type}
+            defaultValue={key === "wallet" ? address : ""}
+            label={name}
+            paramType={type}
+          />
+        ))}
+
+        <div className="bg-teal-connect opacity-25 w-[180px] h-6 rounded-lg" />
+        <div className="flex items-center justify-center">
+          <button
+            type="submit"
+            disabled={isDisabled}
+            className="primary bg-teal-connect w-44 h-9 px-4 rounded-lg absolute text-black font-jetbrains font-bold"
+          >
+            {isSubmitting ? "Applying..." : "Sign & Apply"}
+          </button>
+        </div>
+        <div className="bg-teal-connect opacity-25 w-[180px] h-6 rounded-lg" />
+      </form>
+    );
+  };
+
+  return (
+    <div className="font-geist">
+      {hasApplied ? (
+        // <Callout className="text-center" type="info">
+        <>
+          Thanks for applying, we'll review your application and "drop" access
+          in next few days!
+        </>
+      ) : (
+        // </Callout>
+        renderForm()
+      )}
+    </div>
+  );
+};

docs/components/Web3Provider.tsx

@@ -0,0 +1,40 @@
+import {
+  RainbowKitProvider,
+  darkTheme,
+  getDefaultConfig,
+} from "@rainbow-me/rainbowkit";
+import "@rainbow-me/rainbowkit/styles.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiProvider } from "wagmi";
+import { sepolia } from "wagmi/chains";
+
+const config = getDefaultConfig({
+  appName: "Stackr Explorer",
+  projectId: "YOUR_PROJECT_ID",
+  chains: [sepolia],
+  ssr: true, // If your dApp uses server side rendering (SSR)
+});
+
+const queryClient = new QueryClient();
+
+export const Web3Provider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <RainbowKitProvider
+          theme={darkTheme({
+            accentColor: "#00CECE",
+            accentColorForeground: "black",
+            borderRadius: "small",
+            fontStack: "system",
+            overlayBlur: "small",
+          })}
+        >
+          {children}
+        </RainbowKitProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+};

docs/layout.tsx

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import { Web3Provider } from "./components/Web3Provider";
+
+interface LayoutProps {
+  children: ReactNode;
+}
+
+export default function Layout({ children }: LayoutProps) {
+  return <Web3Provider>{children}</Web3Provider>;
+}