Buildspace DAO project done.

.github/workflows/codeql-analysis.yml

@@ -18,7 +18,7 @@ on:
     # The branches below must be a subset of the branches above
     branches: [ main ]
   schedule:
-    - cron: '41 17 * * 0'
+    - cron: '33 0 * * 1'
 
 jobs:
   analyze:
@@ -33,9 +33,8 @@ jobs:
       fail-fast: false
       matrix:
         language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
-        # Learn more:
-        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
+        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
+        # Learn more about CodeQL language support at https://git.io/codeql-language-support
 
     steps:
     - name: Checkout repository

.gitignore

@@ -121,6 +121,7 @@ dist
 .pnp.*
 
 .vercel
+.netlify
 
 # macOS files to ignore
 .DS_Store

.nvmrc

@@ -1 +1 @@
-v14.18.0
+v16.13.1

README.md

@@ -1,17 +1,19 @@
-# Web3 Starter
+[![Netlify Status](https://api.netlify.com/api/v1/badges/07c2eaba-441d-4386-b678-73de56b3ab12/deploy-status)](https://app.netlify.com/sites/structured-yolo-dao/deploys)
 
-The goal of this project is to give you an opinionated boilerplate to start a
-web3 project.
+# Structured YOLO DAO
+
+My [Buildspace](https://buildspace) DAO project. Lots of fun and as always,
+thanks Buildspace team for such great learning content!
 
 ## Contributing
 
 If you are interested in contributing to the project, first read our
 [contributing guidelines](./CONTRIBUTING.md). Take a look at our
-[existing issues](https://github.com/nickytonline/unofficial-edge-and-node-starter/issues),
+[existing issues](https://github.com/nickytonline/structured-yolo-dao/issues),
 or if you come across an issue,
-[create an issue](https://github.com/nickytonline/unofficial-edge-and-node-starter/issues/new/choose).
+[create an issue](https://github.com/nickytonline/structured-yolo-dao/issues/new/choose).
 For feature requests,
-[start a discussion](https://github.com/nickytonline/unofficial-edge-and-node-starter/discussions)
+[start a discussion](https://github.com/nickytonline/structured-yolo-dao/discussions)
 first.
 
 ## Getting Started (Local Development)
@@ -38,10 +40,10 @@ result.
 ## Getting Started (Gitpod)
 
 The project can be run in Gitpod. Navigate to
-https://gitpod.io/#https://github.com/nickytonline/hello-edge-and-node. If you
+https://gitpod.io/#https://github.com/nickytonline/structured-yolo-dao. If you
 wish to load it in Gitpod as an external contributor, you will need to fork the
 project first, then open the fork in Gitpod, e.g.
-https://gitpod.io/#https://github.com/some_user_that_forked_the_repository/hello-edge-and-node.
+https://gitpod.io/#https://github.com/some_user_that_forked_the_repository/structured-yolo-dao.
 
 1. Gitpod will take a minute or two to load.
 1. If this is the first time loading the project in Gitpod, it will take longer
@@ -103,31 +105,6 @@ yarn build-storybook
 
 ## Under the hood
 
-### Basic Sample Hardhat Project
-
-This project demonstrates a basic Hardhat use case. It comes with a sample
-contract, a test for that contract, a sample script that deploys that contract,
-and an example of a task implementation, which simply lists the available
-accounts.
-
-Try running some of the following tasks:
-
-```shell
-npx hardhat accounts
-npx hardhat compile
-npx hardhat clean
-npx hardhat test
-npx hardhat node
-node scripts/sample-script.js
-npx hardhat help
-```
-
-Unlike jest, tests for Hardhat are located in the `/test` folder and use
-mocha/chai.
-
-For more on Hardhat, see the
-[official documentation](https://hardhat.org/getting-started/).
-
 ### Next.js
 
 This is a [Next.js](https://nextjs.org/) project bootstrapped with
@@ -154,27 +131,13 @@ You can check out
 [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your
 feedback and contributions are welcome!
 
-### Apollo
-
-For more on Apollo, check out their
-[official documentation](http://apollographql.com/docsd).
-
-### Ethers.js
+### ThirdWeb
 
-For more on Ethers.js, check out their
-[official documentation](https://docs.ethers.io/).
+ThirdWeb allows you to create a DAO without any smart contracts. Just
+JavaScript! For more information, visit the [ThirdWeb](https://thirdweb.com/)
+site.
 
 ### Theme UI
 
 For more on theme UI, check out their
 [official documentation](https://theme-ui.com/getting-started).
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the
-[Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme)
-from the creators of Next.js.
-
-Check out our
-[Next.js deployment documentation](https://nextjs.org/docs/deployment) for more
-details.

components/Button.tsx

@@ -0,0 +1,24 @@
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export const Button: React.FC<ButtonProps> = ({
+  children,
+  onClick,
+  type = 'button',
+}) => {
+  return (
+    <button
+      type={type}
+      sx={{
+        backgroundColor: 'accent',
+        color: '#fff',
+        borderRadius: '32px',
+        border: 'none',
+        padding: '0.25rem 0.5rem',
+        cursor: 'pointer',
+      }}
+      onClick={onClick}
+    >
+      {children}
+    </button>
+  );
+};

components/EtherscanLink.tsx

@@ -0,0 +1,41 @@
+import Image from 'next/image';
+
+export const EtherscanLink: React.FC<{
+  address: string;
+  domainName: string | null;
+  avatar: string;
+}> = ({ address, domainName, avatar }) => {
+  return (
+    <a
+      sx={{
+        backgroundColor: '#fff',
+        color: 'accent',
+        borderRadius: '32px',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        display: 'flex',
+        padding: '0.25rem',
+        '& img': {
+          borderRadius: '50%',
+          border: '1px solid #000000 !important',
+        },
+      }}
+      href={`https://rinkeby.etherscan.io/address/${address}`}
+      title={`User with wallet address ${address} on etherscan.io`}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      <Image src={avatar} alt="" width="24" height="24" />
+      <span
+        sx={{
+          marginLeft: '0.5rem',
+          marginRight: '0.25rem',
+          display: ['none', 'inherit'],
+        }}
+      >
+        {domainName ?? address}
+      </span>
+    </a>
+  );
+};

components/Header.tsx

@@ -17,8 +17,17 @@ const web3Styles = {
   },
 };
 
-export const ExampleHeader: React.FC = () => (
-  <h1 sx={{ fontFamily: 'heading' }}>
-    Welcome to <span sx={web3Styles}>web3</span>
+export const Header: React.FC = () => (
+  <h1
+    sx={{
+      fontFamily: 'heading',
+      background:
+        'linear-gradient(90deg, #d53a9d 0%, rgba(0,255,255,1) 50%, #d400ff 100%)',
+      backgroundClip: 'text',
+      textFillColor: 'transparent',
+    }}
+    aria-label="Structured YOLO DAO"
+  >
+    Struc🏗️ured YOLO DAO
   </h1>
 );

components/Wallet.tsx

@@ -0,0 +1,25 @@
+import { Maybe } from '@metamask/providers/dist/utils';
+import { EtherscanLink } from '@components/EtherscanLink';
+import { Button } from '@components/Button';
+import Image from 'next/image';
+
+export const Wallet: React.FC<{
+  account: Maybe<string>;
+  domainName: string | null;
+  avatar: string;
+  connectWallet: () => void;
+}> = ({ account, domainName, connectWallet, avatar }) => {
+  return (
+    <div>
+      {account ? (
+        <EtherscanLink
+          address={account}
+          domainName={domainName}
+          avatar={avatar}
+        />
+      ) : (
+        <Button onClick={connectWallet}>Connect Wallet</Button>
+      )}
+    </div>
+  );
+};

components/__stories__/Header.stories.tsx

@@ -1,13 +1,13 @@
 import { Meta } from '@storybook/react';
-import { ExampleHeader } from '@components/Header';
+import { Header } from '@components/Header';
 
 const meta: Meta = {
   title: 'Components/Example Header',
-  component: ExampleHeader,
+  component: Header,
   argTypes: {},
 };
 export default meta;
 
 export const Default: React.VFC = () => {
-  return <ExampleHeader />;
+  return <Header />;
 };

next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited