Skip to content

Commit

Permalink
web3modal integration
Browse files Browse the repository at this point in the history
  • Loading branch information
@jfschwarz
jfschwarz committed Nov 23, 2023
1 parent a5ad883 commit 81ceb42
Show file tree
Hide file tree
Showing 6 changed files with 622 additions and 163 deletions.
52 changes: 52 additions & 0 deletions packages/app/components/Connect/Web3Modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { createWeb3Modal, defaultConfig } from "@web3modal/ethers5/react"
import { RouterController } from "@web3modal/core"

const isProd =
typeof window !== "undefined" && window.location.hostname === "lock.gnosis.io"

// 1. Get projectId at https://cloud.walletconnect.com
const projectId = "f0f39635674ae1bc5c5db55ccfbb0f33"

// 2. Set chains
const mainnet = {
chainId: 1,
name: "Ethereum",
currency: "ETH",
explorerUrl: "https://etherscan.io",
rpcUrl: "https://cloudflare-eth.com",
}
const gnosis = {
chainId: 100,
name: "Gnosis",
currency: "xDAI",
explorerUrl: "https://gnosisscan.io",
rpcUrl: "https://rpc.gnosis.gateway.fm",
}
const goerli = {
chainId: 5,
name: "Görli",
currency: "Görli ETH",
explorerUrl: "https://goerli.etherscan.io",
rpcUrl: "https://rpc.goerli.eth.gateway.fm",
}

// 3. Create modal
const metadata = {
name: "Lock GNO",
description: "Lock GNO for 12 months to receive a $COW airdrop boost",
url: "https://lock.gnosis.io",
icons: ["https://lock.gnosis.io/gno.svg"],
}

createWeb3Modal({
ethersConfig: defaultConfig({ metadata }),
chains: [mainnet, gnosis, ...(isProd ? [] : [goerli])],
projectId,
themeMode: "light",
})

export const Web3ModalProvider: React.FC<{ children: React.ReactNode }> = ({
children,
}) => {
return <>{children}</>
}
6 changes: 4 additions & 2 deletions packages/app/components/Connect/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useRef, useState } from "react"
import useOnClickOutside from "use-onclickoutside"
import { useWeb3Modal } from "@web3modal/ethers5/react"
import copy from "copy-to-clipboard"
import {
useAccount,
Expand All @@ -17,6 +18,7 @@ import IconButton, { IconLinkButton } from "../IconButton"

const Connect: React.FC = () => {
const network = useNetwork()
const { open } = useWeb3Modal()
const { address, isConnected, connector } = useAccount()
const { data: ensName } = useEnsName({
address,
Expand All @@ -37,7 +39,7 @@ const Connect: React.FC = () => {
{showModal && <Modal onRequestClose={() => setShowModal(false)} />}

<div className={cls.container}>
<button className={cls.button} onClick={() => setShowDropdown(true)}>
<button className={cls.button} onClick={() => open()}>
<div className={cls.identiconWrapper}>
<Identicon />
<img
Expand Down Expand Up @@ -127,7 +129,7 @@ const Connect: React.FC = () => {
<Button
className={cls.dropdownButton}
primary
onClick={() => setShowModal(true)}
onClick={() => open()}
>
Connect wallet
</Button>
Expand Down
3 changes: 1 addition & 2 deletions packages/app/config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Chain, mainnet, gnosis } from "@wagmi/chains"
import { goerli } from "wagmi"
import { Chain, mainnet, gnosis, goerli } from "@wagmi/chains"

export const LOCKED_TOKEN_NAME = "Gnosis"
export const LOCKED_TOKEN_SYMBOL = "GNO"
Expand Down
5 changes: 3 additions & 2 deletions packages/app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,10 @@
"dependencies": {
"@gnosis.pm/safe-apps-provider": "^0.9.3",
"@gnosis.pm/safe-apps-sdk": "^6.2.0",
"@web3modal/ethers5": "^3.3.2",
"copy-to-clipboard": "^3.3.1",
"ethereum-blockies-base64": "^1.0.2",
"ethers": "^5.5.3",
"ethers": "5.7.2",
"next": "12.0.8",
"react": "17.0.2",
"react-dom": "17.0.2",
Expand All @@ -32,4 +33,4 @@
"prettier": "^2.5.1",
"typescript": "4.5.4"
}
}
}
243 changes: 124 additions & 119 deletions packages/app/pages/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import type { NextPage } from "next"
import ReactModal from "react-modal"
// import { mainnet, gnosis, goerli } from "@wagmi/chains"

import { Web3ModalProvider } from "../components/Connect/Web3Modal"

import Head from "next/head"
import styles from "../styles/Home.module.css"
import { CHAINS } from "../config"
Expand All @@ -24,9 +27,9 @@ const isProd =
typeof window !== "undefined" && window.location.hostname === "lock.gnosis.io"

const Home: NextPage = () => {
useEffect(() => {
ReactModal.setAppElement("#root")
}, [])
// useEffect(() => {
// ReactModal.setAppElement("#root")
// }, [])
const config = useTokenLockConfig()
const network = useNetwork()

Expand All @@ -42,142 +45,144 @@ const Home: NextPage = () => {
config.depositDeadline.getTime() + config.lockDuration < Date.now()

return (
<div className={styles.container} id="root">
<Head>
<title>Lock GNO</title>
<meta
name="description"
content="Qualify for a $COW airdrop boost by locking your GNO for 12 months"
/>
{!isProd && <meta name="robots" content="noindex" />}
<link rel="icon" href="/favicon.ico" />
</Head>

<header className={styles.header}>
<GnosisLogo />
<LockedGnoLogo locked={lockPeriodOngoing} />
<Connect />
</header>

<main className={styles.main}>
<UseGNOBanner />
{depositPeriodOngoing && (
<>
<StatsDeposit />
{connected && <DepositAndWithdraw />}
</>
)}

{lockPeriodOngoing && (
<>
<StatsLocked />
{connected && <LockedBalance />}
</>
)}

{lockPeriodOver && (
<>
<StatsWithdraw />
{connected && <Withdraw />}
</>
)}

{!connected && <ConnectHint />}
</main>

<footer className={styles.footer}>
<div className={styles.footerContainer}>
<div className={styles.left}>
<span>LGNO contract: </span>
{connectedChainId === 100 ? (
<Web3ModalProvider>
<div className={styles.container} id="root">
<Head>
<title>Lock GNO</title>
<meta
name="description"
content="Qualify for a $COW airdrop boost by locking your GNO for 12 months"
/>
{!isProd && <meta name="robots" content="noindex" />}
<link rel="icon" href="/favicon.ico" />
</Head>

<header className={styles.header}>
<GnosisLogo />
<LockedGnoLogo locked={lockPeriodOngoing} />
<Connect />
</header>

<main className={styles.main}>
<UseGNOBanner />
{depositPeriodOngoing && (
<>
<StatsDeposit />
{connected && <DepositAndWithdraw />}
</>
)}

{lockPeriodOngoing && (
<>
<StatsLocked />
{connected && <LockedBalance />}
</>
)}

{lockPeriodOver && (
<>
<StatsWithdraw />
{connected && <Withdraw />}
</>
)}

{!connected && <ConnectHint />}
</main>

<footer className={styles.footer}>
<div className={styles.footerContainer}>
<div className={styles.left}>
<span>LGNO contract: </span>
{connectedChainId === 100 ? (
<a
href="https://blockscout.com/xdai/mainnet/address/0xd4Ca39f78Bf14BfaB75226AC833b1858dB16f9a1"
target="_blank"
rel="noopener noreferrer"
>
<img
src="/etherscan.svg"
alt="View contract on Gnosis Chain Blockscout"
width={16}
height={16}
/>
</a>
) : (
<a
href="https://etherscan.io/address/0x4f8AD938eBA0CD19155a835f617317a6E788c868"
target="_blank"
rel="noopener noreferrer"
>
<img
src="/etherscan.svg"
alt="View contract on Etherscan"
width={16}
height={16}
/>
</a>
)}

<a
href="https://blockscout.com/xdai/mainnet/address/0xd4Ca39f78Bf14BfaB75226AC833b1858dB16f9a1"
href="https://github.com/gnosis/token-lock/blob/master/packages/contracts/contracts/TokenLock.sol"
target="_blank"
rel="noopener noreferrer"
>
<img
src="/etherscan.svg"
alt="View contract on Gnosis Chain Blockscout"
src="/github.png"
alt="View contract source code on GitHub"
width={16}
height={16}
/>
</a>
) : (
</div>
<div className={styles.right}>
<a
href="https://etherscan.io/address/0x4f8AD938eBA0CD19155a835f617317a6E788c868"
href="https://discord.com/invite/gnosischain"
target="_blank"
rel="noopener noreferrer"
>
<img
src="/etherscan.svg"
alt="View contract on Etherscan"
src="/discordicon.svg"
alt="Gnosis Guild Discord"
width={16}
height={16}
/>
</a>
)}

<a
href="https://github.com/gnosis/token-lock/blob/master/packages/contracts/contracts/TokenLock.sol"
target="_blank"
rel="noopener noreferrer"
>
<img
src="/github.png"
alt="View contract source code on GitHub"
width={16}
height={16}
/>
</a>
</div>
<div className={styles.right}>
<a
href="https://discord.com/invite/gnosischain"
target="_blank"
rel="noopener noreferrer"
>
<img
src="/discordicon.svg"
alt="Gnosis Guild Discord"
width={16}
height={16}
/>
</a>
<a
href="https://twitter.com/gnosisguild"
target="_blank"
rel="noopener noreferrer"
>
<img
src="/twittericon.svg"
alt="Gnosis Guild Twitter"
width={16}
height={16}
/>
</a>

<div className={styles.divider} />

<a
className={styles.gg}
href="https://gnosisguild.mirror.xyz"
target="_blank"
rel="noopener noreferrer"
>
Built by Gnosis Guild{" "}
<span className={styles.logo}>
<a
href="https://twitter.com/gnosisguild"
target="_blank"
rel="noopener noreferrer"
>
<img
src="/gnosisguild.png"
alt="Gnosis Guild"
width={32}
height={32}
src="/twittericon.svg"
alt="Gnosis Guild Twitter"
width={16}
height={16}
/>
</span>
</a>
</a>

<div className={styles.divider} />

<a
className={styles.gg}
href="https://gnosisguild.mirror.xyz"
target="_blank"
rel="noopener noreferrer"
>
Built by Gnosis Guild{" "}
<span className={styles.logo}>
<img
src="/gnosisguild.png"
alt="Gnosis Guild"
width={32}
height={32}
/>
</span>
</a>
</div>
</div>
</div>
</footer>
</div>
</footer>
</div>
</Web3ModalProvider>
)
}

Expand Down
Loading

0 comments on commit 81ceb42

Please sign in to comment.