sync to main

.env.example

@@ -1,30 +1,24 @@
-NEXT_PUBLIC_SUPABASE_PRIVATE_KEY=supabase-key
-WALLET_CONNECT_ID=wallet-connect-id
-SUPABASE_ACCESS_TOKEN=supabase-access-token
+NEXT_PUBLIC_NFT_STORAGE_TOKEN=<YOUR_NFT_STORAGE_TOKEN>
+NEXT_PUBLIC_WALLETCONNECT_ID=<YOUR_WALLETCONNECT_ID>
+NEXT_PUBLIC_TRADER_CONTRACT=<YOUR_TRADER_CONTRACT_ADDRESS>
 
-NEXT_PUBLIC_DOMAIN=hyperboards.org
+NEXT_PUBLIC_SUPABASE_URL=<supabase_url>
+NEXT_PUBLIC_SUPABASE_ANON_KEY=<supabase_anon_key>
+SUPABASE_ACCESS_TOKEN=<supabase_access_token>
+NEXT_PUBLIC_SUPABASE_SERVICE_ROLE_KEY=<supabase_service_role_key>
 
-####### Web3 #######
-# 5 = Goerli, 10=Optimism
-NEXT_PUBLIC_DEFAULT_CHAIN_ID=5
-
-
-# UUPS proxy contract address
-NEXT_PUBLIC_CONTRACT_ADDRESS=public-contract-address
-
-
-# Subgraph URL - currently using hosted service
-NEXT_PUBLIC_GRAPH_URL=https://api.thegraph.com/subgraphs/name/hypercerts-admin/hypercerts-optimism-mainnet
-
-NEXT_PUBLIC_NFT_STORAGE_TOKEN=nft-storage-token
-
-# Trader contract
-NEXT_PUBLIC_TRADER_CONTRACT=trader-contract-address
+# Hypercerts supabase
+NEXT_PUBLIC_SUPABASE_HYPERCERTS_URL=<supabase_url>
+NEXT_PUBLIC_SUPABASE_HYPERCERTS_ANON_KEY=<supabase_anon_key>
+NEXT_PUBLIC_SUPABASE_HYPERCERTS_SERVICE_ROLE_KEY=<supabase_service_role_key>
 
+# Marketplace API endpoint
+NEXT_PUBLIC_HYPERCERTS_MARKETPLACE_API_URL=<marketplace_api_url>
 
 # Provider RPC URL (e.g. via Alchemy)
-NEXT_PUBLIC_WALLETCONNECT_ID=wallet-connect-id
-NEXT_PUBLIC_WEB3_STORAGE_TOKEN=storage-token
-NEXT_PUBLIC_SUPABASE_URL=https://clagjjfinooizoqdkvqc.supabase.co
-NEXT_PUBLIC_SUPABASE_ANON_KEY=supabase-anon-key
-NEXT_PUBLIC_SUPABASE_TABLE=allowlistCache-optimism
+NEXT_PUBLIC_ALCHEMY_KEY=<alchemy_key>
+NEXT_PUBLIC_JWT_SECRET=<jwt_secret>
+NEXT_PUBLIC_ZUZALU_DONATION_SAFE=<zuzalu_donation_safe>
+
+NEXT_PUBLIC_WEB3_STORAGE_TOKEN=<web3_storage_token>
+NEXT_PUBLIC_EAS_CONTRACT_ADDRESS=<eas_contract_address>

.gitignore

@@ -35,3 +35,4 @@ yarn-error.log*
 next-env.d.ts
 /.idea/
 /.env
+/.snaplet/

components/ConnectButton.tsx

@@ -1,4 +1,114 @@
-import { ConnectButton as RainbowKitConnectButton } from "@rainbow-me/rainbowkit";
-export const ConnectButton = () => {
-  return <RainbowKitConnectButton />;
+import { ConnectButton as ConnectButtonInternal } from "@rainbow-me/rainbowkit";
+import { Button, ButtonProps } from "@chakra-ui/react";
+
+export const ConnectButton = ({ ...buttonProps }: ButtonProps) => {
+  return (
+    <ConnectButtonInternal.Custom>
+      {({
+        account,
+        chain,
+        openAccountModal,
+        openChainModal,
+        openConnectModal,
+        authenticationStatus,
+        mounted,
+      }) => {
+        // Note: If your app doesn't use authentication, you
+        // can remove all 'authenticationStatus' checks
+        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 (
+                  <Button
+                    {...buttonProps}
+                    variant={"blackAndWhite"}
+                    onClick={openConnectModal}
+                    type="button"
+                  >
+                    Connect wallet
+                  </Button>
+                );
+              }
+
+              if (chain.unsupported) {
+                return (
+                  <Button
+                    {...buttonProps}
+                    variant={"blackAndWhite"}
+                    onClick={openChainModal}
+                    type="button"
+                  >
+                    Wrong network
+                  </Button>
+                );
+              }
+
+              return (
+                <div style={{ display: "flex", gap: 12 }}>
+                  <Button
+                    {...buttonProps}
+                    variant={"blackAndWhiteOutline"}
+                    onClick={openChainModal}
+                    style={{ display: "flex", alignItems: "center" }}
+                    type="button"
+                  >
+                    {chain.hasIcon && (
+                      <div
+                        style={{
+                          background: chain.iconBackground,
+                          width: 12,
+                          height: 12,
+                          borderRadius: 999,
+                          overflow: "hidden",
+                          marginRight: 4,
+                        }}
+                      >
+                        {chain.iconUrl && (
+                          <img
+                            alt={chain.name ?? "Chain icon"}
+                            src={chain.iconUrl}
+                            style={{ width: 12, height: 12 }}
+                          />
+                        )}
+                      </div>
+                    )}
+                    {chain.name}
+                  </Button>
+
+                  <Button
+                    {...buttonProps}
+                    onClick={openAccountModal}
+                    type="button"
+                    variant={"blackAndWhite"}
+                  >
+                    {account.displayName}
+                    {account.displayBalance
+                      ? ` (${account.displayBalance})`
+                      : ""}
+                  </Button>
+                </div>
+              );
+            })()}
+          </div>
+        );
+      }}
+    </ConnectButtonInternal.Custom>
+  );
 };

components/GenericModal.tsx

@@ -0,0 +1,30 @@
+import {
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalContentProps,
+  ModalHeader,
+  ModalOverlay,
+  ModalProps,
+} from "@chakra-ui/modal";
+import { Flex, Modal } from "@chakra-ui/react";
+
+export const GenericModal = ({
+  title,
+  children,
+  width,
+  ...modalProps
+}: ModalProps & { title: string } & Pick<ModalContentProps, "width">) => {
+  return (
+    <Modal {...modalProps}>
+      <ModalOverlay />
+      <ModalContent minW={width}>
+        <ModalHeader>{title}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Flex>{children}</Flex>
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  );
+};

components/admin/add-hyperboard-registry-button.tsx

@@ -0,0 +1,33 @@
+import { Button, useDisclosure } from "@chakra-ui/react";
+import { CreateOrUpdateHyperboardRegistryModal } from "@/components/admin/create-or-update-hyperboard-registry-modal";
+
+export const AddHyperboardRegistryButton = ({
+  hyperboardId,
+  registryId,
+  size,
+}: {
+  hyperboardId: string;
+  registryId?: string;
+  size?: string;
+}) => {
+  const { onClose, onOpen, isOpen } = useDisclosure();
+
+  return (
+    <>
+      <Button
+        aria-label="Edit hyperboard registry"
+        colorScheme="blue"
+        onClick={onOpen}
+        size={size}
+      >
+        Add registry to hyperboard
+      </Button>
+      <CreateOrUpdateHyperboardRegistryModal
+        hyperboardId={hyperboardId}
+        registryId={registryId}
+        onClose={onClose}
+        isOpen={isOpen}
+      />
+    </>
+  );
+};

components/admin/create-blueprint-modal.tsx

@@ -0,0 +1,21 @@
+import { ModalProps } from "@chakra-ui/modal";
+import { GenericModal } from "@/components/GenericModal";
+import { CreateOrUpdateBlueprintForm } from "@/components/forms/create-or-update-blueprint-form";
+
+export const CreateBlueprintModal = ({
+  registryId,
+  ...modalProps
+}: { registryId?: string } & Omit<ModalProps, "children">) => {
+  return (
+    <GenericModal
+      title="Create Blueprint"
+      {...modalProps}
+      width={"fit-content"}
+    >
+      <CreateOrUpdateBlueprintForm
+        onComplete={modalProps.onClose}
+        registryId={registryId}
+      />
+    </GenericModal>
+  );
+};