Skip to content

Commit

Permalink
tmp: web3Auth demo
Browse files Browse the repository at this point in the history
  • Loading branch information
izri16 committed Dec 4, 2023
1 parent d436496 commit 3662e11
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 32 deletions.
59 changes: 32 additions & 27 deletions components/navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { useState, useRef, useEffect } from 'react';
import NextLink from 'next/link';
import { navHeight } from 'constants/global';
import { WalletApi, Lucid } from "lucid-cardano";
import GoogleButton from 'react-google-button'
import {
Heading,
Flex,
Expand Down Expand Up @@ -107,6 +108,7 @@ const ConnectButton = ({hideWidget}: {hideWidget: () => void}) => {
const [_walletName, _setWalletName] = useState<SupportedWallets>('nufi')
const [walletConnected, setWalletConnected] = useState<boolean>(false)
const [selectWalletTapped, setSelectWalletTapped] = useState<boolean>(false)
const [isConnecting, setIsConnecting] = useState<boolean>(false)
const [isDisconnecting, setIsDisconnecting] = useState<boolean>(false)

// I have two alert setup, one fires up when selected wallet is not installed in the browser and other one when enabled wallet is on wrong network
Expand Down Expand Up @@ -161,16 +163,23 @@ const ConnectButton = ({hideWidget}: {hideWidget: () => void}) => {
}

useEffect(() => {
if (status === 'authenticated') {
window.cardano.nufi.enable()
}
const fn = async () => {
if (status === 'authenticated') {
const isEnabled = await window.cardano.nufi.isEnabled()
if (!isEnabled) {
await disconnecting()
}
}
}
fn()
}, [status])

const connectWallet = async (walletName: SupportedWallets) => {
if (!hasWalletExtension(walletName)) {
walletNotFound.onOpen();
} else {
try {
setIsConnecting(true)
const api: WalletApi = await getApi(walletName)
// In case the above connection fails, the whole component fails so I guess nothing to worry.
const networkId = await api.getNetworkId();
Expand All @@ -184,6 +193,8 @@ const ConnectButton = ({hideWidget}: {hideWidget: () => void}) => {
} catch (e) {
console.error(e);
resetStatus();
} finally {
setIsDisconnecting(false)
}
}
}
Expand All @@ -196,32 +207,19 @@ const ConnectButton = ({hideWidget}: {hideWidget: () => void}) => {
<>
<SimpleAlert {...{ isOpen: walletNotFound.isOpen, onClose: () => { resetStatus(); walletNotFound.onClose() }, cancelRef: cancelRefWalletNotFound, message: "You don't have the selected wallet installed." }} />
<SimpleAlert {...{ isOpen: wrongNetwork.isOpen, onClose: () => { resetStatus(); wrongNetwork.onClose() }, cancelRef: cancelRefWrongNetwork, message: "You have selected wrong network, please switch to Preprod." }} />

<Popover onClose={resetStatus}>
<PopoverTrigger>
<Button {...connectbuttonStyle}>
Connect
<Button {...connectbuttonStyle} border="none">
<GoogleButton
style={{background: '#333', width: 250}}
label={isConnecting ? 'Connecting ...' : 'Sign in with Google'}
onClick={() => connectWallet('nufi')}
/>
</Button>
</PopoverTrigger>
{walletConnected === false
? <PopoverContent>
<PopoverHeader {...popoverHeaderStyle}>
Select wallet
</PopoverHeader>
<PopoverArrow />
<PopoverCloseButton />
<PopoverBody>
<VStack>
{supportedWallets.map((walletName) => (
<Button key={walletName} onClick={() => { setSelectWalletTapped(true); connectWallet(walletName) }} variant='link' colorScheme='black' isLoading={selectWalletTapped}>
{walletName[0].toUpperCase() + walletName.slice(1)}
</Button>
))}
</VStack>
<PopoverFooter {...popoverFooterStyle}>
<Text align='center'> ✤ step 1 of 2 ✤ </Text>
</PopoverFooter>
</PopoverBody>
</PopoverContent>
? null
: <PopoverContent>
<PopoverHeader {...popoverHeaderStyle}>
Create session password
Expand Down Expand Up @@ -278,8 +276,15 @@ const ConnectButton = ({hideWidget}: {hideWidget: () => void}) => {
</Popover>
</>
); else return (
<Button {...connectbuttonStyle} onClick={() => disconnecting()} isLoading={isDisconnecting} >
Disconnect
</Button>
<div style={{display: 'flex', alignItems: 'center'}}>
<GoogleButton
style={{background: '#333', width: 250}}
label='Connected'
onClick={() => connectWallet('nufi')}
/>
<Button {...connectbuttonStyle} height="50px" marginLeft="8px" onClick={() => disconnecting()} isLoading={isDisconnecting} >
Disconnect
</Button>
</div>
);
}
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@
"lint": "next lint"
},
"dependencies": {
"@nufi/dapp-client-cardano": "link:../nufi/packages/dapp-client/cardano",
"@chakra-ui/icons": "^2.0.11",
"@chakra-ui/react": "^2.3.7",
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@fontsource/jetbrains-mono": "^4.5.11",
"@nufi/dapp-client-cardano": "link:../nufi/packages/dapp-client/cardano",
"formik": "^2.2.9",
"framer-motion": "^6",
"lucid-cardano": "^0.7.6",
Expand All @@ -24,6 +24,7 @@
"react": "18.2.0",
"react-countdown": "^2.3.3",
"react-dom": "18.2.0",
"react-google-button": "^0.7.2",
"react-icons": "^4.6.0",
"yup": "^0.32.11",
"yup-password": "^0.2.2",
Expand Down
7 changes: 4 additions & 3 deletions pages/_app.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import Navbar from '../components/navbar'
import { SessionProvider } from "next-auth/react"
import { Session } from 'next-auth'
import { headingTheme } from 'theme/components/heading'
import { nufiToMetamaskSnapCardanoAdapter } from '@nufi/dapp-client-cardano';
import { nufiAdapter } from '@nufi/dapp-client-cardano';

const theme = extendTheme({
fonts: {
Expand All @@ -30,7 +30,7 @@ function MyApp({ Component, pageProps }: AppProps<{ session: Session }>) {
if (didInject === false) {
// TODO: adjust SDK so that iframe is visible only after user choose NuFi wallet
// (relies on proper batching of requests).
const {hideWidget} = nufiToMetamaskSnapCardanoAdapter();
const {hideWidget} = nufiAdapter('web3Auth');
setHideWidget(() => hideWidget)
didInject = true;
}
Expand All @@ -40,7 +40,7 @@ function MyApp({ Component, pageProps }: AppProps<{ session: Session }>) {
<SessionProvider session={pageProps.session}>
<ChakraProvider theme={theme}>
<Head>
<title>adaplays.xyz</title>
<title>adaplays.com</title>
<meta name="description" content="Place to play simple games with ada" />
<link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"/>
<link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"/>
Expand All @@ -55,6 +55,7 @@ function MyApp({ Component, pageProps }: AppProps<{ session: Session }>) {
<Container maxWidth='container.md'>
<Navbar hideWidget={hideWidget} />
<Component {...pageProps} />
<div style={{position: 'fixed', bottom: 10, right: 10}}>Copyright (c) 2022 Sourabh Aggarwal</div>
</Container>
</ChakraProvider>
</SessionProvider>
Expand Down
9 changes: 8 additions & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1144,7 +1144,7 @@
version "0.0.0"
uid ""

"@nufi/dapp-client-core@0.1.0":
"@nufi/dapp-client-core@7.1.1":
version "0.0.0"
uid ""

Expand Down Expand Up @@ -2955,6 +2955,13 @@ react-focus-lock@^2.9.1:
use-callback-ref "^1.3.0"
use-sidecar "^1.1.2"

react-google-button@^0.7.2:
version "0.7.2"
resolved "https://registry.yarnpkg.com/react-google-button/-/react-google-button-0.7.2.tgz#5bb2bcb0d54e36da3cd3b712a6fac4f9209b764c"
integrity sha512-LPIqU2hIlc212kqks8MtKjRstquVkP3SIjxlK5B1nIfg2R7YqSusJAxZUkJA5dv/z6QeSuGyI9ujwV/VWMTyAA==
dependencies:
prop-types "^15.7.2"

react-icons@^4.6.0:
version "4.6.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.6.0.tgz#f83eda179af5d02c047449a20b702c858653d397"
Expand Down

0 comments on commit 3662e11

Please sign in to comment.