Use standalone modal (#79)
* Use standalone modal * Set project id * chore(deps): update deps * chore(w3m-standalone): use web3modal standalone with auth-client * fix(deps): update web3modal to v2.2.2 * fix(typescript): revert to 4.9.5 * chore(remove-deps): remove unused dependencies and global declaration --------- Co-authored-by: Cali93 <armut.cumaali@gmail.com>
This commit is contained in:
Celine Sarafa
GitHub
parent
e79ae76a8d
commit
b45f4369c0
7538
dapps/react-dapp-auth/package-lock.json
generated
7538
dapps/react-dapp-auth/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -13,25 +13,23 @@
|
||||
"@emotion/react": "^11.10.0",
|
||||
"@emotion/styled": "^11.10.0",
|
||||
"@walletconnect/auth-client": "2.0.4",
|
||||
"@web3modal/standalone": "^2.2.2",
|
||||
"better-sqlite3": "^7.6.2",
|
||||
"ethers": "^5.7.0",
|
||||
"events": "^3.3.0",
|
||||
"framer-motion": "^7.0.0",
|
||||
"next": "12.2.4",
|
||||
"qr-scanner": "^1.4.1",
|
||||
"qrcode": "^1.5.1",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"smart-truncate": "^1.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "18.6.4",
|
||||
"@types/qrcode": "^1.4.3",
|
||||
"@types/react": "18.0.15",
|
||||
"@types/react-dom": "18.0.6",
|
||||
"@types/smart-truncate": "^1.0.2",
|
||||
"eslint": "8.21.0",
|
||||
"eslint-config-next": "12.2.4",
|
||||
"typescript": "4.7.4"
|
||||
"typescript": "^4.9.5"
|
||||
}
|
||||
}
|
||||
|
||||
41
dapps/react-dapp-auth/pages/404.tsx
Normal file
41
dapps/react-dapp-auth/pages/404.tsx
Normal file
@ -0,0 +1,41 @@
|
||||
import { Box, Heading, Text, Flex, Button } from "@chakra-ui/react";
|
||||
import Link from "next/link";
|
||||
|
||||
const Page404 = () => {
|
||||
return (
|
||||
<Flex minHeight="100vh" direction="column" justifyContent="center">
|
||||
<Box marginY={4}>
|
||||
<Heading textAlign="center" size="lg">
|
||||
Page not Found.
|
||||
</Heading>
|
||||
|
||||
<Flex
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
textAlign="center"
|
||||
marginTop={4}
|
||||
gap={2}
|
||||
>
|
||||
<Text fontSize="sm" color="gray">
|
||||
It's Okay!
|
||||
</Text>
|
||||
<Link href="/">
|
||||
<Button
|
||||
padding={2}
|
||||
backgroundColor="#3396FF"
|
||||
rounded="xl"
|
||||
_hover={{
|
||||
border: "solid 1px #3396FF",
|
||||
backgroundColor: "black",
|
||||
}}
|
||||
>
|
||||
Let's Head Back
|
||||
</Button>
|
||||
</Link>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default Page404;
|
||||
@ -8,7 +8,6 @@ import {
|
||||
Grid,
|
||||
GridItem,
|
||||
Image,
|
||||
Text,
|
||||
} from "@chakra-ui/react";
|
||||
import ThemeSwitcher from "../components/ThemeSwitcher";
|
||||
|
||||
|
||||
@ -1,13 +1,22 @@
|
||||
import { Box } from "@chakra-ui/react";
|
||||
import AuthClient, { generateNonce } from "@walletconnect/auth-client";
|
||||
import { version } from "@walletconnect/auth-client/package.json";
|
||||
import { Web3Modal } from "@web3modal/standalone";
|
||||
import type { NextPage } from "next";
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import DefaultView from "../views/DefaultView";
|
||||
import QrView from "../views/QrView";
|
||||
import SignedInView from "../views/SignedInView";
|
||||
|
||||
console.log(`AuthClient@${version}`);
|
||||
// 1. Get projectID at https://cloud.walletconnect.com
|
||||
const projectId = process.env.NEXT_PUBLIC_PROJECT_ID;
|
||||
if (!projectId) {
|
||||
throw new Error("You need to provide NEXT_PUBLIC_PROJECT_ID env variable");
|
||||
}
|
||||
|
||||
// 2. Configure web3Modal
|
||||
const web3Modal = new Web3Modal({
|
||||
projectId,
|
||||
walletConnectVersion: 2,
|
||||
});
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const [client, setClient] = useState<AuthClient | null>();
|
||||
@ -70,11 +79,22 @@ const Home: NextPage = () => {
|
||||
const [view, changeView] = useState<"default" | "qr" | "signedIn">("default");
|
||||
|
||||
useEffect(() => {
|
||||
if (uri) changeView("qr");
|
||||
}, [uri, changeView]);
|
||||
async function handleOpenModal() {
|
||||
if (uri) {
|
||||
await web3Modal.openModal({
|
||||
uri,
|
||||
standaloneChains: ["eip155:1"],
|
||||
});
|
||||
}
|
||||
}
|
||||
handleOpenModal();
|
||||
}, [uri]);
|
||||
|
||||
useEffect(() => {
|
||||
if (address) changeView("signedIn");
|
||||
if (address) {
|
||||
web3Modal.closeModal();
|
||||
changeView("signedIn");
|
||||
}
|
||||
}, [address, changeView]);
|
||||
|
||||
return (
|
||||
@ -82,7 +102,6 @@ const Home: NextPage = () => {
|
||||
{view === "default" && (
|
||||
<DefaultView onClick={onSignIn} hasInitialized={hasInitialized} />
|
||||
)}
|
||||
{view === "qr" && <QrView uri={uri} />}
|
||||
{view === "signedIn" && <SignedInView address={address} />}
|
||||
</Box>
|
||||
);
|
||||
|
||||
@ -1,83 +0,0 @@
|
||||
import {
|
||||
Text,
|
||||
Box,
|
||||
Divider,
|
||||
Flex,
|
||||
Heading,
|
||||
useToast,
|
||||
Button,
|
||||
Grid,
|
||||
Image,
|
||||
} from "@chakra-ui/react";
|
||||
import Qrcode from "qrcode";
|
||||
import { useEffect, useRef } from "react";
|
||||
|
||||
const QrView: React.FC<{ uri: string }> = ({ uri }) => {
|
||||
const canvasRef = useRef(null);
|
||||
const toast = useToast();
|
||||
|
||||
useEffect(() => {
|
||||
if (uri && canvasRef.current) Qrcode.toCanvas(canvasRef.current, uri);
|
||||
}, [uri, canvasRef]);
|
||||
|
||||
const onClick = async () => {
|
||||
await navigator.clipboard.writeText(uri);
|
||||
toast({
|
||||
title: "Copied URI",
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<Box width="100%" height="100%" padding="1em">
|
||||
<Flex
|
||||
className="bg-secondary"
|
||||
alignItems="center"
|
||||
borderRadius="24px"
|
||||
flexDir="column"
|
||||
>
|
||||
<Grid
|
||||
padding="2em"
|
||||
borderTopRadius="24px"
|
||||
placeItems="center"
|
||||
className="bg-qr"
|
||||
borderBottom="solid 1px white"
|
||||
width="100%"
|
||||
height="100%"
|
||||
>
|
||||
<canvas
|
||||
onClick={onClick}
|
||||
ref={canvasRef}
|
||||
height="20%"
|
||||
width="20%"
|
||||
style={{
|
||||
borderRadius: "24px",
|
||||
minWidth: "20%",
|
||||
minHeight: "20%",
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Flex gap="3" flexDir="column" alignItems="center" padding="2em">
|
||||
<Flex gap="1em">
|
||||
<Image src="/scan.svg" alt="scan" />
|
||||
<Text fontWeight={800} textAlign="center" fontSize="1.5em">
|
||||
Scan with your phone
|
||||
</Text>
|
||||
</Flex>
|
||||
|
||||
<Text fontWeight={600} textAlign="center">
|
||||
Open your camera app or mobile wallet and scan the code to connect
|
||||
</Text>
|
||||
<Button onClick={onClick} borderRadius="20px" className="wc-button">
|
||||
<Flex gap="1em">
|
||||
<Image src="/copy.svg" alt="scan" />
|
||||
<Text>Copy to clipboard</Text>
|
||||
</Flex>
|
||||
</Button>
|
||||
</Flex>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default QrView;
|
||||
12
wallets/react-wallet-auth/package-lock.json
generated
12
wallets/react-wallet-auth/package-lock.json
generated
@ -7051,9 +7051,9 @@
|
||||
"integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
|
||||
},
|
||||
"node_modules/json5": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
|
||||
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
|
||||
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"minimist": "^1.2.0"
|
||||
@ -14821,9 +14821,9 @@
|
||||
"integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA=="
|
||||
},
|
||||
"json5": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
|
||||
"integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
|
||||
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"minimist": "^1.2.0"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user