From 9b5a4ea6afd847bcc931df2bea001e5cc7ac82f2 Mon Sep 17 00:00:00 2001 From: Alain Nicolas Date: Tue, 21 Nov 2023 14:20:50 +0100 Subject: [PATCH] feat: As a user, I want to have a landing page --- .../workflows/{releaser.yaml => releaser.yml} | 4 +- .github/workflows/website.yml | 73 ++ .gitignore | 3 + explorer/index.html | 2 +- explorer/package.json | 11 +- explorer/src/App.css | 1 - explorer/src/App.tsx | 90 +-- explorer/src/components/Footer.css | 64 ++ explorer/src/components/Footer.tsx | 64 ++ explorer/src/components/Navbar.css | 26 + explorer/src/components/Navbar.tsx | 25 + explorer/src/index.css | 90 ++- explorer/src/pages/Home.css | 0 explorer/src/pages/Home.tsx | 21 + explorer/src/pages/Poh.css | 0 explorer/src/pages/Poh.tsx | 57 ++ explorer/src/pages/SDKDemo.css | 0 explorer/src/pages/SDKDemo.tsx | 78 ++ explorer/vite.config.ts | 11 +- pnpm-lock.yaml | 738 +++++++----------- 20 files changed, 796 insertions(+), 562 deletions(-) rename .github/workflows/{releaser.yaml => releaser.yml} (65%) create mode 100644 .github/workflows/website.yml create mode 100644 explorer/src/components/Footer.css create mode 100644 explorer/src/components/Footer.tsx create mode 100644 explorer/src/components/Navbar.css create mode 100644 explorer/src/components/Navbar.tsx create mode 100644 explorer/src/pages/Home.css create mode 100644 explorer/src/pages/Home.tsx create mode 100644 explorer/src/pages/Poh.css create mode 100644 explorer/src/pages/Poh.tsx create mode 100644 explorer/src/pages/SDKDemo.css create mode 100644 explorer/src/pages/SDKDemo.tsx diff --git a/.github/workflows/releaser.yaml b/.github/workflows/releaser.yml similarity index 65% rename from .github/workflows/releaser.yaml rename to .github/workflows/releaser.yml index b50b7b87..633d2aae 100644 --- a/.github/workflows/releaser.yaml +++ b/.github/workflows/releaser.yml @@ -6,7 +6,9 @@ on: jobs: release: - if: github.actor == 'alainncls' || github.actor == 'fdemiramon' || github.actor == 'satyajeetkolhapure' || github.actor == 'orbmis' || github.actor == '0xEillo' + if: + github.actor == 'alainncls' || github.actor == 'fdemiramon' || github.actor == 'satyajeetkolhapure' || + github.actor == 'orbmis' || github.actor == '0xEillo' runs-on: ubuntu-latest diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml new file mode 100644 index 00000000..be17cbeb --- /dev/null +++ b/.github/workflows/website.yml @@ -0,0 +1,73 @@ +name: Deploy website + +on: + push: + branches: ["dev", "feat/as-a-user-i-want-to-have-a-landing-page"] + +permissions: + contents: read + pages: write + id-token: write + +concurrency: + group: "pages" + cancel-in-progress: true + +jobs: + deploy: + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + + runs-on: ubuntu-latest + + defaults: + run: + working-directory: explorer + + steps: + - name: Check out the repo + uses: actions/checkout@v4 + + - name: Install Pnpm + uses: pnpm/action-setup@v2 + with: + version: 8 + run_install: false + + - name: Install Node.js + uses: actions/setup-node@v3 + with: + node-version: 18 + cache: pnpm + + - name: Get pnpm store directory + shell: bash + run: | + echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV + + - uses: actions/cache@v3 + name: Setup pnpm cache + with: + path: ${{ env.STORE_PATH }} + key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} + restore-keys: | + ${{ runner.os }}-pnpm-store- + + - name: Install dependencies + run: pnpm install --frozen-lockfile + + - name: Build + run: pnpm run build + + - name: Setup Pages + uses: actions/configure-pages@v3 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v2 + with: + path: "./explorer/dist" + + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v2 diff --git a/.gitignore b/.gitignore index 99338e82..fb5be3d1 100644 --- a/.gitignore +++ b/.gitignore @@ -32,5 +32,8 @@ subgraph.yaml # SDK lib +# Explorer +dist + # Misc .DS_Store diff --git a/explorer/index.html b/explorer/index.html index 302f0a45..af0d2569 100644 --- a/explorer/index.html +++ b/explorer/index.html @@ -2,7 +2,7 @@ - + Verax | Explorer diff --git a/explorer/package.json b/explorer/package.json index 3ac76c14..40734e2d 100644 --- a/explorer/package.json +++ b/explorer/package.json @@ -22,10 +22,16 @@ "preview": "vite preview" }, "dependencies": { - "@verax-attestation-registry/verax-sdk": "workspace:^", + "@fortawesome/fontawesome-svg-core": "^6.4.2", + "@fortawesome/free-brands-svg-icons": "^6.4.2", + "@fortawesome/free-solid-svg-icons": "^6.4.2", + "@fortawesome/react-fontawesome": "^0.2.0", + "@verax-attestation-registry/verax-sdk": "0.0.14", + "axios": "^1.6.1", "connectkit": "^1.5.3", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.19.0", "viem": "^1.18.9", "wagmi": "^1.4.6" }, @@ -39,6 +45,7 @@ "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.4", "typescript": "^5.2.2", - "vite": "^4.5.0" + "vite": "^4.5.0", + "vite-plugin-radar": "^0.9.1" } } diff --git a/explorer/src/App.css b/explorer/src/App.css index db040500..e9aa0a87 100644 --- a/explorer/src/App.css +++ b/explorer/src/App.css @@ -1,7 +1,6 @@ #root { max-width: 1280px; margin: 0 auto; - padding: 2rem; text-align: center; } diff --git a/explorer/src/App.tsx b/explorer/src/App.tsx index 41ed8bff..9a409577 100644 --- a/explorer/src/App.tsx +++ b/explorer/src/App.tsx @@ -1,79 +1,27 @@ -import { useState } from "react"; -import veraxLogo from "./assets/verax-logo-circle.svg"; import "./App.css"; -import { ConnectKitButton } from "connectkit"; -import VeraxSdk from "@verax-attestation-registry/verax-sdk"; +import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import Home from "./pages/Home.tsx"; +import Poh from "./pages/Poh.tsx"; +import SDKDemo from "./pages/SDKDemo.tsx"; +import Navbar from "./components/Navbar.tsx"; +import Footer from "./components/Footer.tsx"; function App() { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - const [attestations, setAttestations] = useState([]); - const [attestationsCounter, setAttestationsCounter] = useState(0); - const [txHash, setTxHash] = useState(""); - const [error, setError] = useState(""); - - const getSomeAttestations = async () => { - const veraxSdk = new VeraxSdk(VeraxSdk.DEFAULT_LINEA_TESTNET_FRONTEND); - setAttestations(await veraxSdk.attestation.findBy(2)); - }; - const getAttestationCounter = async () => { - const veraxSdk = new VeraxSdk(VeraxSdk.DEFAULT_LINEA_TESTNET_FRONTEND); - setAttestationsCounter((await veraxSdk.utils.getAttestationIdCounter()) as number); - }; - - const createAnAttestation = async () => { - const veraxSdk = new VeraxSdk(VeraxSdk.DEFAULT_LINEA_TESTNET_FRONTEND); - try { - const hash = await veraxSdk.portal.attest( - "0xeea25bc2ec56cae601df33b8fc676673285e12cc", - { - schemaId: "0x9ba590dd7fbd5bd1a7d06cdcb4744e20a49b3520560575cd63de17734a408738", - expirationDate: 1693583329, - subject: "0x068579b2398992629df8dDbcB048D26d863f7A70", - attestationData: [{ isBuidler: true }], - }, - [], - ); - setTxHash(hash); - } catch (e) { - console.log(e); - if (e instanceof Error) { - setError(`Oops, something went wrong: ${e.message}`); - } - } - }; return ( - <> -
- - Verax logo - -
-

Verax Attestation Registry

-
- -
-
- - {attestations.length > 0 && ( -
    - {attestations.map((attestation) => ( -
  • {attestation.id}
    • - ))} -
- )} -
-
- - {attestationsCounter > 0 &&

{`We have ${attestationsCounter} attestations at the moment`}

} -
-
- - {txHash !== "" &&

{`Transaction with hash ${txHash} sent!`}

} - {error !== "" &&

{error}

} -
-

Click on the Verax logo to learn more

- + +
+ +
+ + } /> + } /> + } /> + +