init web template

apps/web/package.json

@@ -9,10 +9,14 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@rainbow-me/rainbowkit": "^0.5.1",
     "next": "12.2.5",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "ui": "*"
+    "react-query": "^3.39.2",
+    "sass": "^1.54.9",
+    "ui": "*",
+    "wagmi": "^0.6.5"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0",

apps/web/public/fonts/fonts.css

@@ -0,0 +1,49 @@
+@font-face {
+  font-family: 'Aeonik';
+  src: url('/fonts/Aeonik-Bold.woff2') format('woff2'),
+    url('/fonts/Aeonik-Bold.woff') format('woff'),
+    url('/fonts/Aeonik-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Aeonik';
+  src: url('/fonts/Aeonik-Medium.woff2') format('woff2'),
+    url('/fonts/Aeonik-Medium.woff') format('woff'),
+    url('/fonts/Aeonik-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Aeonik';
+  src: url('/fonts/Aeonik-Regular.woff2') format('woff2'),
+    url('/fonts/Aeonik-Regular.woff') format('woff'),
+    url('/fonts/Aeonik-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Aeonik';
+  src: url('/fonts/Aeonik-Light.woff2') format('woff2'),
+    url('/fonts/Aeonik-Light.woff') format('woff'),
+    url('/fonts/Aeonik-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Aeonik';
+  src: url('/fonts/Aeonik-Thin.woff2') format('woff2'),
+    url('/fonts/Aeonik-Thin.woff') format('woff'),
+    url('/fonts/Aeonik-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}

apps/web/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+  "name": "MyApp",
+  "short_name": "MY_APP",
+  "icons": [
+    {
+      "src": "/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/android-chrome-384x384.png",
+      "sizes": "384x384",
+      "type": "image/png"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}

apps/web/src/components/Header.tsx

@@ -0,0 +1,23 @@
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+import React from "react";
+
+function Header() {
+  return (
+    <>
+      <header
+        style={{
+          paddingTop: "1%",
+          paddingLeft: "2%",
+          paddingRight: "2%",
+          height: "3vh",
+        }}
+      >
+        <div style={{ float: "right" }}>
+          <ConnectButton showBalance={false} />
+        </div>
+      </header>
+    </>
+  );
+}
+
+export default Header;

apps/web/src/components/Web3Provider.tsx

@@ -0,0 +1,42 @@
+import "@rainbow-me/rainbowkit/styles.css";
+
+import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import { chain, configureChains, createClient, WagmiConfig } from "wagmi";
+import { alchemyProvider } from "wagmi/providers/alchemy";
+import { publicProvider } from "wagmi/providers/public";
+
+const { chains, provider } = configureChains(
+  [chain.mainnet, chain.rinkeby],
+  [
+    alchemyProvider({ apiKey: process.env.NEXT_PUBLIC_ALCHEMY }),
+    publicProvider(),
+  ]
+);
+
+const { connectors } = getDefaultWallets({
+  appName: "anotherblock-allowlist",
+  chains,
+});
+
+const wagmiClient = createClient({
+  autoConnect: true,
+  connectors,
+  provider,
+});
+
+const Web3Provider = ({ children }) => {
+  return (
+    <WagmiConfig client={wagmiClient}>
+      <RainbowKitProvider
+        chains={chains}
+        appInfo={{
+          appName: "My App",
+        }}
+      >
+        {children}
+      </RainbowKitProvider>
+    </WagmiConfig>
+  );
+};
+
+export default Web3Provider;

apps/web/src/pages/_app.tsx

@@ -0,0 +1,24 @@
+import "../styles/globals.scss";
+
+import type { AppProps } from "next/app";
+import React from "react";
+import { Hydrate } from "react-query";
+import { QueryClient, QueryClientProvider } from "react-query";
+
+import WagmiProvider from "../components/Web3Provider";
+
+const queryClient = new QueryClient({});
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Hydrate state={pageProps.dehydratedState}>
+        <WagmiProvider>
+          <Component {...pageProps} />
+        </WagmiProvider>
+      </Hydrate>
+    </QueryClientProvider>
+  );
+}
+
+export default MyApp;

apps/web/src/pages/index.tsx

@@ -0,0 +1,37 @@
+import { Button } from "ui";
+import Header from "../components/Header";
+import {
+  useAccount,
+  useContractRead,
+  useContractWrite,
+  useNetwork,
+} from "wagmi";
+
+export default function Web() {
+  const { address, isDisconnected, isConnecting } = useAccount();
+
+  return (
+    <>
+      <Header />
+      {isDisconnected && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            marginTop: "15%",
+          }}
+        >
+          <h1>please connect your wallet</h1>
+        </div>
+      )}
+
+      {!isDisconnected && (
+        <>
+          <h1>My App Name</h1>
+          <Button />
+        </>
+      )}
+    </>
+  );
+}

apps/web/src/styles/globals.scss

@@ -0,0 +1,11 @@
+@import url("/fonts/fonts.css");
+
+html * {
+  font-family: "Aeonik";
+  src: url("/fonts/Aeonik-Medium.woff2") format("woff2"),
+    url("/fonts/Aeonik-Medium.woff") format("woff"),
+    url("/fonts/Aeonik-Medium.ttf") format("truetype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}