New design

apps/web/README.md

@@ -1,24 +1,52 @@
-# ReScript Remix Template
-
-A starter template for writing Remix apps in [ReScript](https://rescript-lang.org/).
+<div align="center">
+	<br />
+	<p>
+		<a href="https://bot.brightid.org"><img src="https://i.imgur.com/zCL03cc.png" width="546" alt="bright id discord bot" /></a>
+	</p>
+	<br />
+	<p>
+		<a href="https://vercel.com/?utm_source=brightid&utm_campaign=oss"><img src="https://raw.githubusercontent.com/discordjs/discord.js/main/.github/powered-by-vercel.svg" alt="Vercel" /></a>
+	</p>
+</div>
+
+A [Discord Bot](https://bot.brightid.org) that empowers servers with BrightID's Sybil Resistant Social Graph
 
 ## Development
 
-```
-npm i
-npm run dev:rescript
+```sh-session
+yarn
+yarn re:build
+yarn web dev
 ```
 
-And then in another terminal:
+## Building
 
 ```
-npm run dev:remix
+yarn web build
 ```
 
-## Building
+## Environment setup
 
+You will need to make a `.env` file in the web app root
+
+```sh-session
+touch ./apps/web/.env
 ```
-npm run build
-```
 
-# Vercel Test
+### Env Fields
+
+You can see an example in `.env.sample`
+
+`UUID_NAMESPACE`: UUID v5 Namespace ([Generate a random one](https://www.uuidtools.com/v5))
+
+`DISCORD_API_TOKEN`: Discord Bot Token ([Go to Discord Developer Portal](https://discord.com/developers/applications))
+
+`DISCORD_CLIENT_SECRET`: Discord Client Secret ([Go to Discord Developer Portal](https://discord.com/developers/applications))
+
+`DISCORD_CLIENT_ID`: Discord Client ID ([Go to Discord Developer Portal](https://discord.com/developers/applications))
+
+`GIST_ID`: ID of the github gist to use as a database
+
+`GITHUB_ACCESS_TOKEN`: Github Token that has the `gist` attribute
+
+`ALCHEMY_ID`: Alchemy Ethereum API KEY

apps/web/app/components/AdminButton.res

@@ -2,7 +2,7 @@
 let make = (~guildId) => {
   <Remix.Link to={`/guilds/${guildId}/admin`} prefetch={#intent}>
     <button
-      className="p-4 bg-transparent border-2 border-brightid font-semibold rounded-3xl text-large text-white">
+      className="py-1 px-2  bg-transparent border-2 border-brightOrange font-semibold rounded-xl text-large text-brightOrange hover:text-white hover:bg-brightOrange">
       {`Admin Settings`->React.string}
     </button>
   </Remix.Link>

apps/web/app/components/DiscordLoginButton.res

@@ -1,7 +1,8 @@
 @react.component
 let make = (~label) => {
   <Remix.Form action={`/auth/discord`} method={#post}>
-    <button className="w-full p-6 bg-discord font-bold rounded-xl text-2xl text-white">
+    <button
+      className="w-full p-6 border-2 border-discord text-discord bg-transparent font-bold rounded-xl text-2xl hover:bg-discord hover:text-white">
       {label->React.string}
     </button>
   </Remix.Form>

apps/web/app/components/InviteButton.res

@@ -5,7 +5,7 @@ let make = (~className: option<string>=?) => {
     target="_blank"
     className={className->Option.getWithDefault("")}>
     <button
-      className="p-3 bg-transparent border-2 border-brightid font-semibold rounded-3xl text-xl text-white">
+      className="py-1 px-2 bg-transparent border border-brightOrange font-semibold rounded-xl text-lg text-brightOrange hover:text-white hover:bg-brightOrange">
       {`Add to Discord`->React.string}
     </button>
   </a>

apps/web/app/components/Sidebar.res

@@ -24,7 +24,7 @@ let make = (~isSidebarVisible, ~handleIsSidebarVisible, ~guilds, ~loadingGuilds)
       let intersection = guilds->Array.map((guild: Types.oauthGuild) => {
         <Menu iconShape="square" key={guild.id}>
           <MenuItem
-            className="bg-extraDark"
+            className="bg-extraDark hover:bg-dark"
             icon={<img
               className=" bg-extraDark rounded-lg border-1 border-white" src={guild->icon}
             />}>
@@ -75,24 +75,27 @@ let make = (~isSidebarVisible, ~handleIsSidebarVisible, ~guilds, ~loadingGuilds)
   }
 
   <ProSidebar
-    className="bg-dark scrollbar-hide"
+    className="bg-transparent"
     breakPoint="md"
     onToggle={handleIsSidebarVisible}
     toggled={isSidebarVisible}>
     <SidebarHeader
-      className="p-2 flex justify-around items-center top-0 sticky bg-dark z-10 scrollbar-hide">
-      <InviteButton />
+      className="flex top-0 sticky bg-inherit z-10 justify-center items-center border-b border-b-black backdrop-blur-3xl ">
+      <Remix.Link to="">
+        <img className="w-40" src={"/assets/brightid_reversed.svg"} />
+      </Remix.Link>
     </SidebarHeader>
-    <SidebarContent className="scrollbar-hide">
-      <Menu iconShape="square" key={0->Int.toString} />
+    <SidebarContent className=" bg-extraDark z-[-1]">
+      <Menu iconShape="square" key={0->Belt.Int.toString} />
       {sidebarElements}
     </SidebarContent>
-    <SidebarFooter className="bg-extraDark bottom-0 sticky scrollbar-hide list-none">
-      <Remix.Link to={""}>
-        <MenuItem>
-          <img src={"/assets/brightid_reversed.svg"} />
-        </MenuItem>
-      </Remix.Link>
+    <SidebarFooter className="bg-dark bottom-0 sticky list-none">
+      <div className=" flex flex-col justify-around items-center py-8 gap-3">
+        <p className="text-white font-poppins">
+          {"Your server is not on the list?"->React.string}
+        </p>
+        <InviteButton />
+      </div>
     </SidebarFooter>
   </ProSidebar>
 }

apps/web/app/components/SidebarToggle.res

@@ -1,9 +1,9 @@
 @react.component
-let make = (~handleToggleSidebar, ~maybeUser) => {
+let make = (~handleIsSidebarVisible, ~maybeUser) => {
   let visibility = maybeUser->Option.isSome ? "visible" : "invisible"
   <div
     className={`${visibility} md:hidden cursor-pointer w-12 h-12 bg-dark text-center text-white rounded-full flex justify-center items-center font-xl`}
-    onClick={_ => handleToggleSidebar(true)}>
+    onClick={_ => handleIsSidebarVisible(true)}>
     <ReactIcons.FaBars size={30} />
   </div>
 }

apps/web/app/entry.server.js

@@ -1,8 +1,8 @@
 import { PassThrough } from 'stream'
-import { Response } from '@remix-run/node'
+import { renderToPipeableStream } from 'react-dom/server'
 import { RemixServer } from '@remix-run/react'
+import { Response } from '@remix-run/node' // or cloudflare/deno
 import isbot from 'isbot'
-import { renderToPipeableStream } from 'react-dom/server'
 
 const ABORT_DELAY = 5000
 
@@ -12,41 +12,97 @@ export default function handleRequest(
   responseHeaders,
   remixContext,
 ) {
-  const callbackName = isbot(request.headers.get('user-agent'))
-    ? 'onAllReady'
-    : 'onShellReady'
+  // If the request is from a bot, we want to wait for the full
+  // response to render before sending it to the client. This
+  // ensures that bots can see the full page content.
+  if (isbot(request.headers.get('user-agent'))) {
+    return serveTheBots(
+      request,
+      responseStatusCode,
+      responseHeaders,
+      remixContext,
+    )
+  }
 
-  return new Promise((resolve, reject) => {
-    let didError = false
+  return serveBrowsers(
+    request,
+    responseStatusCode,
+    responseHeaders,
+    remixContext,
+  )
+}
 
+function serveTheBots(
+  request,
+  responseStatusCode,
+  responseHeaders,
+  remixContext,
+) {
+  return new Promise((resolve, reject) => {
     const { pipe, abort } = renderToPipeableStream(
-      <RemixServer context={remixContext} url={request.url} />,
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
       {
-        [callbackName]: () => {
-          const body = new PassThrough()
-
+        // Use onAllReady to wait for the entire document to be ready
+        onAllReady() {
           responseHeaders.set('Content-Type', 'text/html')
-
+          let body = new PassThrough()
+          pipe(body)
           resolve(
             new Response(body, {
+              status: responseStatusCode,
               headers: responseHeaders,
-              status: didError ? 500 : responseStatusCode,
             }),
           )
+        },
+        onShellError(err) {
+          reject(err)
+        },
+      },
+    )
+    setTimeout(abort, ABORT_DELAY)
+  })
+}
 
+function serveBrowsers(
+  request,
+  responseStatusCode,
+  responseHeaders,
+  remixContext,
+) {
+  return new Promise((resolve, reject) => {
+    let didError = false
+    const { pipe, abort } = renderToPipeableStream(
+      <RemixServer
+        context={remixContext}
+        url={request.url}
+        abortDelay={ABORT_DELAY}
+      />,
+      {
+        // use onShellReady to wait until a suspense boundary is triggered
+        onShellReady() {
+          responseHeaders.set('Content-Type', 'text/html')
+          let body = new PassThrough()
           pipe(body)
+          resolve(
+            new Response(body, {
+              status: didError ? 500 : responseStatusCode,
+              headers: responseHeaders,
+            }),
+          )
         },
-        onShellError: err => {
+        onShellError(err) {
           reject(err)
         },
-        onError: error => {
+        onError(err) {
           didError = true
-
-          console.error(error)
+          console.error(err)
         },
       },
     )
-
     setTimeout(abort, ABORT_DELAY)
   })
 }