diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 72829408..4b9139d9 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -506,12 +506,12 @@ importers: '@verax-attestation-registry/verax-sdk': specifier: 1.0.0 version: 1.0.0(@babel/core@7.23.3)(@envelop/core@4.0.3)(@graphql-mesh/types@0.93.2)(@graphql-tools/delegate@10.0.3)(@graphql-tools/merge@9.0.0)(@graphql-tools/utils@9.2.1)(@graphql-tools/wrap@10.0.1)(@types/node@20.10.3)(graphql-tag@2.12.6)(react-dom@18.2.0)(react-native@0.72.6)(react@18.2.0)(tslib@2.6.2)(typescript@5.2.2)(zod@3.22.4) + '@web3modal/wagmi': + specifier: ^3.5.0 + version: 3.5.0(@types/react@18.2.37)(@wagmi/core@1.4.7)(typescript@5.2.2)(viem@1.18.9) axios: specifier: ^1.6.1 version: 1.6.1 - connectkit: - specifier: ^1.5.3 - version: 1.5.3(@babel/core@7.23.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(viem@1.18.9)(wagmi@1.4.7) react: specifier: ^18.2.0 version: 18.2.0 @@ -4679,6 +4679,7 @@ packages: resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==} dependencies: '@emotion/memoize': 0.8.1 + dev: true /@emotion/memoize@0.7.4: resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==} @@ -8926,6 +8927,7 @@ packages: '@motionone/utils': 10.16.3 hey-listen: 1.0.8 tslib: 2.6.2 + dev: true /@motionone/dom@10.16.4: resolution: {integrity: sha512-HPHlVo/030qpRj9R8fgY50KTN4Ko30moWRTA3L3imrsRBmob93cTYmodln49HYFbQm01lFF7X523OkKY0DX6UA==} @@ -15314,21 +15316,6 @@ packages: gatsby-core-utils: 3.25.0 dev: true - /babel-plugin-styled-components@2.1.4(@babel/core@7.23.3)(styled-components@5.3.11): - resolution: {integrity: sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==} - peerDependencies: - styled-components: '>= 2' - dependencies: - '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-module-imports': 7.22.15 - '@babel/plugin-syntax-jsx': 7.22.5(@babel/core@7.23.3) - lodash: 4.17.21 - picomatch: 2.3.1 - styled-components: 5.3.11(@babel/core@7.23.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0) - transitivePeerDependencies: - - '@babel/core' - dev: false - /babel-plugin-styled-components@2.1.4(@babel/core@7.23.3)(styled-components@5.3.3): resolution: {integrity: sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==} peerDependencies: @@ -16850,32 +16837,6 @@ packages: - supports-color dev: false - /connectkit@1.5.3(@babel/core@7.23.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0)(viem@1.18.9)(wagmi@1.4.7): - resolution: {integrity: sha512-vXneVOa+oit5Migoxca2QkgVBHaROItzb2kW13o7aUrcEcecYIGZjsizsVM2YvIdKihyWs+zJFrlED4g8zAMew==} - engines: {node: '>=12.4'} - peerDependencies: - react: 17.x || 18.x - react-dom: 17.x || 18.x - viem: ^1.0.0 - wagmi: ^1.1.1 - dependencies: - buffer: 6.0.3 - detect-browser: 5.3.0 - framer-motion: 6.5.1(react-dom@18.2.0)(react@18.2.0) - qrcode: 1.5.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-transition-state: 1.1.5(react-dom@18.2.0)(react@18.2.0) - react-use-measure: 2.1.1(react-dom@18.2.0)(react@18.2.0) - resize-observer-polyfill: 1.5.1 - styled-components: 5.3.11(@babel/core@7.23.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0) - viem: 1.18.9(typescript@5.2.2)(zod@3.22.4) - wagmi: 1.4.7(@types/react@18.2.37)(react-dom@18.2.0)(react-native@0.72.6)(react@18.2.0)(typescript@5.2.2)(viem@1.18.9)(zod@3.22.4) - transitivePeerDependencies: - - '@babel/core' - - react-is - dev: false - /consola@3.2.3: resolution: {integrity: sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==} engines: {node: ^14.18.0 || >=16.10.0} @@ -17423,6 +17384,7 @@ packages: /debounce@1.2.1: resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==} + dev: true /debug@2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} @@ -20219,11 +20181,13 @@ packages: tslib: 2.6.2 optionalDependencies: '@emotion/is-prop-valid': 0.8.8 + dev: true /framesync@6.0.1: resolution: {integrity: sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==} dependencies: tslib: 2.6.2 + dev: true /framesync@6.1.2: resolution: {integrity: sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==} @@ -26839,6 +26803,7 @@ packages: hey-listen: 1.0.8 style-value-types: 5.0.0 tslib: 2.6.2 + dev: true /postcss-calc@8.2.4(postcss@8.4.31): resolution: {integrity: sha512-SmWMSJmB8MRnnULldx0lQIyhSNvuDl9HfrZkaqqE/WHAhToYsAvDq+yAsA/kIyINDszOp3Rh0GFoNuH5Ypsm3Q==} @@ -28364,16 +28329,6 @@ packages: - '@types/react' dev: false - /react-transition-state@1.1.5(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-ITY2mZqc2dWG2eitJkYNdcSFW8aKeOlkL2A/vowRrLL8GH3J6Re/SpD/BLvQzrVOTqjsP0b5S9N10vgNNzwMUQ==} - peerDependencies: - react: '>=16.8.0' - react-dom: '>=16.8.0' - dependencies: - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: false - /react-use-measure@2.1.1(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-nocZhN26cproIiIduswYpV5y5lQpSQS1y/4KuvUCjSKmw7ZWIS/+g3aFnX3WdBkyuGUtTLif3UTqnLLhbDoQig==} peerDependencies: @@ -28383,6 +28338,7 @@ packages: debounce: 1.2.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + dev: true /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} @@ -28799,10 +28755,6 @@ packages: resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==} dev: true - /resize-observer-polyfill@1.5.1: - resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} - dev: false - /resolve-alpn@1.2.1: resolution: {integrity: sha512-0a1F4l73/ZFZOakJnQ3FvkJ2+gSTQWz/r2KE5OdDY0TxPm5h4GkqkWWfM47T7HsbnOtcJVEF4epCVy6u7Q3K+g==} dev: true @@ -30045,31 +29997,7 @@ packages: dependencies: hey-listen: 1.0.8 tslib: 2.6.2 - - /styled-components@5.3.11(@babel/core@7.23.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==} - engines: {node: '>=10'} - peerDependencies: - react: '>= 16.8.0' - react-dom: '>= 16.8.0' - react-is: '>= 16.8.0' - dependencies: - '@babel/helper-module-imports': 7.22.15 - '@babel/traverse': 7.23.2(supports-color@5.5.0) - '@emotion/is-prop-valid': 1.2.1 - '@emotion/stylis': 0.8.5 - '@emotion/unitless': 0.7.5 - babel-plugin-styled-components: 2.1.4(@babel/core@7.23.3)(styled-components@5.3.11) - css-to-react-native: 3.2.0 - hoist-non-react-statics: 3.3.2 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-is: 18.2.0 - shallowequal: 1.1.0 - supports-color: 5.5.0 - transitivePeerDependencies: - - '@babel/core' - dev: false + dev: true /styled-components@5.3.3(@babel/core@7.23.3)(react-dom@18.2.0)(react-is@18.2.0)(react@18.2.0): resolution: {integrity: sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw==} diff --git a/website/package.json b/website/package.json index 1f316604..c1e040c5 100644 --- a/website/package.json +++ b/website/package.json @@ -28,8 +28,8 @@ "@fortawesome/react-fontawesome": "^0.2.0", "@lens-protocol/widgets-react": "^2.1.0", "@verax-attestation-registry/verax-sdk": "1.0.0", + "@web3modal/wagmi": "^3.5.0", "axios": "^1.6.1", - "connectkit": "^1.5.3", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.19.0", diff --git a/website/src/components/ConnectWallet.css b/website/src/components/ConnectWallet.css new file mode 100644 index 00000000..34065761 --- /dev/null +++ b/website/src/components/ConnectWallet.css @@ -0,0 +1,11 @@ +.connect-wallet { + background-color: #353535; + border-radius: 30px; + color: #ffffff; + padding: 12px 20px; + + &:hover { + background-color: #464646; + } +} + diff --git a/website/src/components/ConnectWallet.tsx b/website/src/components/ConnectWallet.tsx new file mode 100644 index 00000000..0e7b5811 --- /dev/null +++ b/website/src/components/ConnectWallet.tsx @@ -0,0 +1,29 @@ +import React, { useEffect, useState } from "react"; +import "./ConnectWallet.css"; +import { useWeb3Modal } from "@web3modal/wagmi/react"; +import { useAccount, useEnsName } from "wagmi"; + +const ConnectWallet: React.FC = () => { + const [truncatedAddress, setTruncatedAddress] = useState(); + + const { open } = useWeb3Modal(); + const { isConnected, address } = useAccount(); + const { data: ensName } = useEnsName({ + address, + chainId: 1, + }); + + useEffect(() => { + if (address) { + setTruncatedAddress(`${address.slice(0, 6)}••••${address.slice(address.length - 4, address.length)}`); + } + }, [address]); + + return ( + + ); +}; + +export default ConnectWallet; diff --git a/website/src/components/Footer.tsx b/website/src/components/Footer.tsx index 37f0665e..15977abd 100644 --- a/website/src/components/Footer.tsx +++ b/website/src/components/Footer.tsx @@ -4,35 +4,35 @@ import { faDiscord, faGithub, faTelegram } from "@fortawesome/free-brands-svg-ic import { Link } from "react-router-dom"; import { faBook } from "@fortawesome/free-solid-svg-icons"; import { FollowOnLens } from "@lens-protocol/widgets-react"; +import React from "react"; -function Navbar() { - +const Footer: React.FC = () => { return ( ); -} +}; -export default Navbar; +export default Footer; diff --git a/website/src/components/Navbar.tsx b/website/src/components/Navbar.tsx index fea0cf18..a8f31759 100644 --- a/website/src/components/Navbar.tsx +++ b/website/src/components/Navbar.tsx @@ -1,7 +1,8 @@ import { NavLink } from "react-router-dom"; import "./Navbar.css"; +import React from "react"; -function Navbar() { +const Navbar: React.FC = () => { return ( ); -} +}; export default Navbar; diff --git a/website/src/main.tsx b/website/src/main.tsx index e68e7409..ec27a57e 100644 --- a/website/src/main.tsx +++ b/website/src/main.tsx @@ -2,25 +2,26 @@ import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.tsx"; import "./index.css"; -import { createConfig, WagmiConfig } from "wagmi"; -import { ConnectKitProvider, getDefaultConfig } from "connectkit"; -import { linea, lineaTestnet, arbitrum, arbitrumGoerli } from "wagmi/chains"; +import { WagmiConfig } from "wagmi"; +import { linea, lineaTestnet, arbitrum, arbitrumGoerli, mainnet } from "wagmi/chains"; +import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi/react"; -const config = createConfig( - getDefaultConfig({ - infuraId: import.meta.env.VITE_INFURA_API_KEY, - walletConnectProjectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || "", - appName: "Verax Website", - chains: [linea, lineaTestnet, arbitrum, arbitrumGoerli], - }), -); +const projectId = import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || ""; + +const metadata = { + name: "Verax Attestation Registry", + url: "https://ver.ax", +}; + +const chains = [linea, lineaTestnet, arbitrum, arbitrumGoerli, mainnet]; +const wagmiConfig = defaultWagmiConfig({ chains, projectId, metadata }); + +createWeb3Modal({ wagmiConfig, projectId, chains }); ReactDOM.createRoot(document.getElementById("root")!).render( - - - - + + , ); diff --git a/website/src/pages/Home.tsx b/website/src/pages/Home.tsx index 277b9ba0..49d8acc6 100644 --- a/website/src/pages/Home.tsx +++ b/website/src/pages/Home.tsx @@ -6,7 +6,7 @@ export type HomeProps = { title: string; }; -export const Home: FunctionComponent = ({ title }) => { +const Home: FunctionComponent = ({ title }) => { useEffect(() => { document.title = title; }, [title]); diff --git a/website/src/pages/SDKDemo.tsx b/website/src/pages/SDKDemo.tsx index db2015f4..8643ab8a 100644 --- a/website/src/pages/SDKDemo.tsx +++ b/website/src/pages/SDKDemo.tsx @@ -1,14 +1,14 @@ import { type FunctionComponent, useEffect, useState } from "react"; import "./SDKDemo.css"; -import { ConnectKitButton } from "connectkit"; import { Attestation, VeraxSdk } from "@verax-attestation-registry/verax-sdk"; import { useAccount, useNetwork } from "wagmi"; +import ConnectWallet from "../components/ConnectWallet.tsx"; export type SDKDemoProps = { title: string; }; -export const SDKDemo: FunctionComponent = ({ title }) => { +const SDKDemo: FunctionComponent = ({ title }) => { const [attestations, setAttestations] = useState([]); const [attestationsCounter, setAttestationsCounter] = useState(0); const [txHash, setTxHash] = useState(""); @@ -32,7 +32,7 @@ export const SDKDemo: FunctionComponent = ({ title }) => { }, [chain, address]); const shortenHexString = (longString: string) => { - return `${longString.slice(0, 5)}...${longString.slice(longString.length - 4, longString.length)}`; + return `${longString.slice(0, 6)}••••${longString.slice(longString.length - 4, longString.length)}`; }; const getSomeAttestations = async () => { @@ -80,7 +80,7 @@ export const SDKDemo: FunctionComponent = ({ title }) => { <>

Verax - SDK Demo

- +