Skip to content

Commit

Permalink
feat: As a user, I want to have a landing page
Browse files Browse the repository at this point in the history
  • Loading branch information
alainncls committed Nov 21, 2023
1 parent a0d64e5 commit 892fa6a
Show file tree
Hide file tree
Showing 20 changed files with 798 additions and 561 deletions.
File renamed without changes.
78 changes: 78 additions & 0 deletions .github/workflows/website.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
name: Deploy website

on:
push:
branches: ["dev", "feat/as-a-user-i-want-to-have-a-landing-page"]

# Sets the GITHUB_TOKEN permissions to allow deployment to GitHub Pages
permissions:
contents: read
pages: write
id-token: write

# Allow one concurrent deployment
concurrency:
group: "pages"
cancel-in-progress: true

jobs:
# Single deploy job since we're just deploying
deploy:
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}

runs-on: ubuntu-latest

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: Run the unit tests
run: pnpm run test:unit:ci

- name: Run the integration tests
run: pnpm run test:integration:ci

- 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: "./dist"

- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v2
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -32,5 +32,8 @@ subgraph.yaml
# SDK
lib

# Explorer
dist

# Misc
.DS_Store
2 changes: 1 addition & 1 deletion explorer/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<link rel="icon" type="image/svg+xml" href="src/assets/verax-logo-circle.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Verax | Explorer</title>
</head>
Expand Down
11 changes: 9 additions & 2 deletions explorer/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand All @@ -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"
}
}
1 change: 0 additions & 1 deletion explorer/src/App.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}

Expand Down
90 changes: 19 additions & 71 deletions explorer/src/App.tsx
Original file line number Diff line number Diff line change
@@ -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<any[]>([]);
const [attestationsCounter, setAttestationsCounter] = useState<number>(0);
const [txHash, setTxHash] = useState<string>("");
const [error, setError] = useState<string>("");

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 (
<>
<div>
<a href="https://docs.ver.ax/" target="_blank">
<img src={veraxLogo} className="logo" alt="Verax logo" />
</a>
</div>
<h1>Verax Attestation Registry</h1>
<div className="card" style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
<ConnectKitButton />
</div>
<div className="card">
<button onClick={getSomeAttestations}>Get 2 attestations from the subgraph</button>
{attestations.length > 0 && (
<ul>
{attestations.map((attestation) => (
<li key={attestation.id}>{attestation.id}</li>
))}
</ul>
)}
</div>
<div className="card">
<button onClick={getAttestationCounter}>Count attestations from the contract</button>
{attestationsCounter > 0 && <p>{`We have ${attestationsCounter} attestations at the moment`}</p>}
</div>
<div className="card">
<button onClick={createAnAttestation}>Create an attestation via a Portal</button>
{txHash !== "" && <p>{`Transaction with hash ${txHash} sent!`}</p>}
{error !== "" && <p style={{ color: "red" }}>{error}</p>}
</div>
<p className="read-the-docs">Click on the Verax logo to learn more</p>
</>
<Router>
<header>
<Navbar />
</header>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/sdk-demo" element={<SDKDemo />} />
<Route path="/poh" element={<Poh />} />
</Routes>
<footer>
<Footer />
</footer>
</Router>
);
}

Expand Down
64 changes: 64 additions & 0 deletions explorer/src/components/Footer.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 10vh;
min-height: 150px;
margin: 20px 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

.social-icon,
.menu {
position: relative;
display: flex;
justify-content: center;
align-items: center;
margin: 10px 0;
flex-wrap: wrap;
padding: 0;
}

.social-icon__item,
.menu__item {
list-style: none;
}

.social-icon__link {
font-size: 2rem;
color: #fff;
margin: 0 10px;
display: inline-block;
transition: 0.5s;
}

.social-icon__link:hover {
transform: translateY(-10px);
}

.menu__link {
font-size: 1.2rem;
color: #fff;
margin: 0 10px;
display: inline-block;
transition: 0.5s;
text-decoration: none;
opacity: 0.75;
font-weight: 300;
}

.menu__link:hover {
opacity: 1;
}

footer &.bottom {
color: #fff;
margin: 15px 0 10px 0;
font-size: 1rem;
font-weight: 300;
padding: 0;
}
64 changes: 64 additions & 0 deletions explorer/src/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
import "./Footer.css";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faDiscord, faTelegram } from "@fortawesome/free-brands-svg-icons";
import { Link } from "react-router-dom";
import { faLeaf } from "@fortawesome/free-solid-svg-icons";

function Navbar() {

return (
<>
<ul className="social-icon">
<li className="social-icon__item">
<Link className="social-icon__link" to={"https://discord.gg/Sq4EmYdBEk"}
target={"_blank"}>
<FontAwesomeIcon icon={faDiscord} />
</Link>
</li>

<li className="social-icon__item">
<Link className="social-icon__link" to={"https://t.me/+C94-EJOoVjVhM2U0"}
target={"_blank"}>
<FontAwesomeIcon icon={faTelegram} />
</Link>
</li>

{/*
<li className="social-icon__item">
<Link className="social-icon__link" to={"#"}>
<FontAwesomeIcon icon={faXTwitter} />
</Link>
</li>
*/}

<li className="social-icon__item">
<Link className="social-icon__link" to={"https://hey.xyz/u/verax"}
target={"_blank"}>
<FontAwesomeIcon icon={faLeaf} />
</Link>
</li>
</ul>

<ul className="menu">
<li className="menu__item">
<Link className={"menu__link"} to={"/"}>Homepage</Link>
</li>
<li className="menu__item">
<Link className={"menu__link"} to={"https://docs.ver.ax"}
target={"_blank"}>Documentation</Link>
</li>
<li className="menu__item">
<Link className={"menu__link"} to={"https://community.ver.ax"}
target={"_blank"}>Discourse</Link>
</li>
</ul>

<div className={"bottom"}>
<p>Made with ❤️ by Verax</p>
<p>&copy;2023 Verax | All Rights Reserved</p>
</div>
</>
);
}

export default Navbar;
26 changes: 26 additions & 0 deletions explorer/src/components/Navbar.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
.navbar {
& ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

& li {
float: left;
}

& li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

& li a:hover {
background-color: #111;
}
}

Loading

0 comments on commit 892fa6a

Please sign in to comment.