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 e4892da
Show file tree
Hide file tree
Showing 20 changed files with 799 additions and 562 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
76 changes: 76 additions & 0 deletions .github/workflows/website.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
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

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

Please sign in to comment.