feat(claim-dapp): add UI (UMAprotocol#4)

* improve(claim-dapp): switch to craco to ovveride CRA defaults Signed-off-by: Francesco Baccetti <[email protected]> * improve(create): add UI without interactions Signed-off-by: Francesco Baccetti <[email protected]> * fix(claim-dapp): fix useConnection bug when wallet selection is interrupted Signed-off-by: Francesco Baccetti <[email protected]>
fulminmaxi · Mar 16, 2021 · fea1312 · fea1312
1 parent 0d437eb
commit fea1312
Show file tree

Hide file tree

Showing 42 changed files with 1,346 additions and 85 deletions.
diff --git a/craco.config.js b/craco.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  style: {
+    postcss: {
+      plugins: [require("tailwindcss"), require("autoprefixer")],
+    },
+  },
+  babel: {
+    plugins: ["@emotion"],
+  },
+};
diff --git a/package.json b/package.json
@@ -3,8 +3,11 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.1.1",
+    "@emotion/babel-plugin": "^11.2.0",
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.1.5",
+    "@tailwindcss/postcss7-compat": "^2.0.3",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/react-hooks": "^5.0.3",
@@ -13,22 +16,24 @@
     "@types/node": "^12.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
+    "autoprefixer": "^9",
     "bnc-onboard": "^1.19.2",
     "ethers": "^5.0.31",
     "husky": "^5.1.0",
     "lint-staged": "^10.5.4",
+    "postcss": "^7",
     "prettier": "^2.2.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-scripts": "4.0.2",
-    "tailwindcss": "^2.0.3",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat",
     "twin.macro": "^2.2.3",
     "typescript": "^4.1.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
     "eject": "react-scripts eject",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx . --color"
   },

diff --git a/public/index.html b/public/index.html
@@ -9,22 +9,11 @@
       name="description"
       content="Web site created using create-react-app"
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> 
     <title>React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
+    <div id="root"></div> 
   </body>
 </html>
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,11 +1,33 @@
 import React from "react";
+import {
+  Section,
+  AccentSection,
+  About,
+  Hero,
+  Navbar,
+  Footer,
+  Options,
+} from "./components";
 import { ConnectionProvider } from "./hooks";
-import { Navbar } from "./components";
 
 function App() {
   return (
     <ConnectionProvider>
       <Navbar />
+      <main>
+        <AccentSection>
+          <Hero />
+        </AccentSection>
+        <Section>
+          <Options />
+        </Section>
+        <AccentSection>
+          <About />
+        </AccentSection>
+        <Section>
+          <Footer />
+        </Section>
+      </main>
     </ConnectionProvider>
   );
 }

diff --git a/src/__test__/useConnection.test.ts b/src/__test__/useConnection.test.ts
@@ -57,6 +57,7 @@ test("should connect to the provider and save the data", async () => {
   expect(result.current.network).toBeNull();
   expect(result.current.address).toBeNull();
   expect(result.current.error).toBeNull();
+  expect(result.current.isConnected).toBe(false);
 
   await act(async () => await result.current.connect());
   expect(mockedOnboard).toHaveBeenCalledTimes(1);
@@ -72,4 +73,5 @@ test("should connect to the provider and save the data", async () => {
   expect(result.current.provider?.getNetwork).toHaveBeenCalledTimes(1);
   expect(result.current.address).toBe(fakeAddress);
   expect(result.current.error).toBeNull();
+  expect(result.current.isConnected).toBe(true);
 });
diff --git a/src/assets/fonts/HalyardDisplay-Regular.woff b/src/assets/fonts/HalyardDisplay-Regular.woff
diff --git a/src/assets/fonts/HalyardDisplay-Regular.woff2 b/src/assets/fonts/HalyardDisplay-Regular.woff2
diff --git a/src/assets/fonts/HalyardDisplaySemiBold-Regular.woff b/src/assets/fonts/HalyardDisplaySemiBold-Regular.woff
diff --git a/src/assets/fonts/HalyardDisplaySemiBold-Regular.woff2 b/src/assets/fonts/HalyardDisplaySemiBold-Regular.woff2
diff --git a/src/assets/icons/arrow-left.svg b/src/assets/icons/arrow-left.svg
diff --git a/src/assets/icons/discord.svg b/src/assets/icons/discord.svg
diff --git a/src/assets/icons/discourse.svg b/src/assets/icons/discourse.svg
diff --git a/src/assets/icons/github.svg b/src/assets/icons/github.svg
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
@@ -0,0 +1,8 @@
+export { ReactComponent as Twitter } from "./twitter.svg";
+export { ReactComponent as Github } from "./github.svg";
+export { ReactComponent as Medium } from "./medium.svg";
+export { ReactComponent as Discord } from "./discord.svg";
+export { ReactComponent as Discourse } from "./discourse.svg";
+export { ReactComponent as ArrowLeft } from "./arrow-left.svg";
+export { ReactComponent as Info } from "./info.svg";
+export { ReactComponent as Settings } from "./settings.svg";
diff --git a/src/assets/icons/info.svg b/src/assets/icons/info.svg
diff --git a/src/assets/icons/medium.svg b/src/assets/icons/medium.svg