From f86fb6f9027c817cdaa26dc86196accffd1291c0 Mon Sep 17 00:00:00 2001 From: Peter Kieltyka Date: Fri, 27 Oct 2023 16:53:02 -0400 Subject: [PATCH] prevent popup (#23) --- src/App.tsx | 108 ++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 93 insertions(+), 15 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 1a7146b..c2f4597 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,10 +8,13 @@ import { Card, TransactionIcon, Select, - TokenImage + TokenImage, + TextInput, + Modal } from '@0xsequence/design-system' +import { AnimatePresence } from 'framer-motion' -import React, { useState, useEffect, useMemo } from 'react' +import React, { useState, useEffect, useMemo, SetStateAction } from 'react' import { ethers } from 'ethers' import { sequence } from '0xsequence' @@ -64,12 +67,15 @@ if (walletAppURL && walletAppURL.length > 0) { // App component const App = () => { const [consoleMsg, setConsoleMsg] = useState(null) + const [email, setEmail] = useState(null) const [consoleLoading, setConsoleLoading] = useState(false) const [isWalletConnected, setIsWalletConnected] = useState(false) const wallet = sequence.getWallet().getProvider() const [showChainId, setShowChainId] = useState(wallet.getChainId()) + const [isOpen, toggleModal] = useState(false) + const [warning, setWarning] = useState(false) useMemo(() => { wallet.on('chainChanged', (chainId: string) => { @@ -129,7 +135,7 @@ const App = () => { const connectDetails = await wallet.connect(connectOptions) // Example of how to verify using ETHAuth via Sequence API - if (connectOptions.authorize) { + if (connectOptions.authorize && connectDetails.connected) { let apiUrl = urlParams.get('apiUrl') if (!apiUrl || apiUrl.length === 0) { @@ -727,6 +733,36 @@ And that has made all the difference. .filter(val => omitNetworks.indexOf(val.chainId) < 0) .sort((a, b) => (a.title > b.title ? 1 : -1)) + useEffect(() => { + if(email && !isOpen) { + console.log(email) + connect({ + app: 'Demo Dapp', + authorize: true, + settings: { + // Specify signInWithEmail with an email address to allow user automatically sign in with the email option. + signInWithEmail: email, + theme: 'dark', + bannerUrl: `${window.location.origin}${skyweaverBannerUrl}` + } + }) + setEmail(null) + } + }, [email, isOpen]) + + const sanitizeEmail = (email: string) => { + // Trim unnecessary spaces + email = email.trim(); + + // Check if the email matches the pattern of a typical email + const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; + if (emailRegex.test(email)) { + return true; + } + + return false + } + return ( @@ -827,17 +863,7 @@ And that has made all the difference. width="full" shape="square" onClick={() => { - const email = prompt('Auto-email login, please specify the email address:') - connect({ - app: 'Demo Dapp', - authorize: true, - settings: { - // Specify signInWithEmail with an email address to allow user automatically sign in with the email option. - signInWithEmail: email, - theme: 'dark', - bannerUrl: `${window.location.origin}${skyweaverBannerUrl}` - } - }) + toggleModal(true) }} label="Connect with Email" /> @@ -942,9 +968,61 @@ And that has made all the difference. /> + + { + isOpen + && + toggleModal(false)} size={'sm'}> + + + + + Auto-email login, please specify the email address + + + + } }) => { + setEmail(ev.target.value) + }}> + + { + warning + ? + + + please input an email with correct format + + + : null + } + +