From eb27020bab916a62b3103ea4f648eca4b9a19b1f Mon Sep 17 00:00:00 2001 From: bhavya2611 Date: Fri, 16 Dec 2022 09:12:24 +0530 Subject: [PATCH 1/7] fixes styling issues --- components/Conversation/Conversation.tsx | 2 +- components/Conversation/MessagesList.tsx | 4 +++- hooks/useWindowSize.ts | 17 +++++++++++++++++ 3 files changed, 21 insertions(+), 2 deletions(-) create mode 100644 hooks/useWindowSize.ts diff --git a/components/Conversation/Conversation.tsx b/components/Conversation/Conversation.tsx index 4e8f17a7..f6b66830 100644 --- a/components/Conversation/Conversation.tsx +++ b/components/Conversation/Conversation.tsx @@ -60,7 +60,7 @@ const Conversation = ({ return ( <> -
+
{ let lastMessageDate: Date | undefined + const size = useWindowSize() return ( 700 ? '87vh' : '83vh'} inverse endMessage={} hasMore={hasMore} diff --git a/hooks/useWindowSize.ts b/hooks/useWindowSize.ts new file mode 100644 index 00000000..f411aeda --- /dev/null +++ b/hooks/useWindowSize.ts @@ -0,0 +1,17 @@ +import { useLayoutEffect, useState } from 'react' + +const useWindowSize = () => { + const [size, setSize] = useState<[number, number]>([0, 0]) + + useLayoutEffect(() => { + function updateSize() { + setSize([window.innerWidth, window.innerHeight]) + } + window.addEventListener('resize', updateSize) + updateSize() + return () => window.removeEventListener('resize', updateSize) + }, []) + return size +} + +export default useWindowSize From 35de2ac155e3e4889222ba8303a1cbbcd2397784 Mon Sep 17 00:00:00 2001 From: bhavya2611 Date: Fri, 16 Dec 2022 11:57:58 +0530 Subject: [PATCH 2/7] demo flow --- .env | 1 + components/Address.tsx | 14 ++- components/AddressInput.tsx | 4 +- components/Avatar.tsx | 26 +++- components/Conversation/RecipientControl.tsx | 4 +- components/Layout.tsx | 24 +++- components/UserMenu.tsx | 37 +----- helpers/env.ts | 5 + hooks/useDisconnect.ts | 24 ++++ hooks/useEns.ts | 62 ---------- hooks/useEnsHooks.ts | 80 +++++++++++++ hooks/useListConversations.tsx | 4 +- hooks/useWalletProvider.tsx | 118 +++++-------------- hooks/useWalletProviderDemo.tsx | 45 +++++++ pages/dm/[...recipientWalletAddr].tsx | 4 +- store/app.tsx | 11 +- 16 files changed, 259 insertions(+), 204 deletions(-) create mode 100644 .env create mode 100644 hooks/useDisconnect.ts delete mode 100644 hooks/useEns.ts create mode 100644 hooks/useEnsHooks.ts create mode 100644 hooks/useWalletProviderDemo.tsx diff --git a/.env b/.env new file mode 100644 index 00000000..c8858c0c --- /dev/null +++ b/.env @@ -0,0 +1 @@ +NEXT_PUBLIC_APP_ENVIRONMENT=demo diff --git a/components/Address.tsx b/components/Address.tsx index 5c98b3d0..4ce56204 100644 --- a/components/Address.tsx +++ b/components/Address.tsx @@ -1,5 +1,6 @@ +import { useEffect, useState } from 'react' import { classNames, shortAddress } from '../helpers' -import useEns from '../hooks/useEns' +import useEnsHooks from '../hooks/useEnsHooks' type AddressProps = { address: string @@ -7,7 +8,16 @@ type AddressProps = { } const Address = ({ address, className }: AddressProps): JSX.Element => { - const { name, loading } = useEns(address) + const [name, setName] = useState() + const { lookupAddress, loading } = useEnsHooks() + + useEffect(() => { + const getName = async () => { + const newName = await lookupAddress(address) + setName(newName) + } + getName() + }, [address, lookupAddress]) return ( { - const { lookupAddress } = useWalletProvider() + const { lookupAddress } = useEnsHooks() const walletAddress = useAppStore((state) => state.address) const inputElement = useRef(null) const [value, setValue] = useState(recipientWalletAddress || '') diff --git a/components/Avatar.tsx b/components/Avatar.tsx index 33610ad4..5229b073 100644 --- a/components/Avatar.tsx +++ b/components/Avatar.tsx @@ -1,12 +1,23 @@ +import { useEffect, useState } from 'react' import Blockies from 'react-blockies' -import useEns from '../hooks/useEns' +import useEnsHooks from '../hooks/useEnsHooks' type AvatarProps = { peerAddress: string } const Avatar = ({ peerAddress }: AvatarProps) => { - const { avatarUrl, loading } = useEns(peerAddress) + const [avatarUrl, setAvatarUrl] = useState() + const { getAvatarUrl, loading } = useEnsHooks() + + useEffect(() => { + const getUrl = async () => { + const newAvatarUrl = await getAvatarUrl(peerAddress) + setAvatarUrl(newAvatarUrl) + } + getUrl() + }, [getAvatarUrl, peerAddress]) + if (loading) { return (
@@ -14,6 +25,7 @@ const Avatar = ({ peerAddress }: AvatarProps) => {
) } + if (avatarUrl) { return (
@@ -26,7 +38,15 @@ const Avatar = ({ peerAddress }: AvatarProps) => {
) } - return + + return ( + + ) } export default Avatar diff --git a/components/Conversation/RecipientControl.tsx b/components/Conversation/RecipientControl.tsx index 94784255..d2c2093b 100644 --- a/components/Conversation/RecipientControl.tsx +++ b/components/Conversation/RecipientControl.tsx @@ -3,8 +3,8 @@ import { useRouter } from 'next/router' import AddressInput from '../AddressInput' import { checkIfPathIsEns, getAddressFromPath } from '../../helpers' import { useAppStore } from '../../store/app' -import useWalletProvider from '../../hooks/useWalletProvider' import BackArrow from '../BackArrow' +import useEnsHooks from '../../hooks/useEnsHooks' const RecipientInputMode = { InvalidEntry: 0, @@ -15,7 +15,7 @@ const RecipientInputMode = { } const RecipientControl = (): JSX.Element => { - const { resolveName, lookupAddress } = useWalletProvider() + const { lookupAddress, resolveName } = useEnsHooks() const client = useAppStore((state) => state.client) const router = useRouter() const recipientWalletAddress = getAddressFromPath(router) diff --git a/components/Layout.tsx b/components/Layout.tsx index b30f58de..6e5e7c07 100644 --- a/components/Layout.tsx +++ b/components/Layout.tsx @@ -11,25 +11,37 @@ import { useAppStore } from '../store/app' import useInitXmtpClient from '../hooks/useInitXmtpClient' import useListConversations from '../hooks/useListConversations' import useWalletProvider from '../hooks/useWalletProvider' +import useWalletProviderDemo from '../hooks/useWalletProviderDemo' +import { isAppEnvDemo } from '../helpers' +import useDisconnect from '../hooks/useDisconnect' const Layout: React.FC<{ children?: React.ReactNode }> = ({ children }) => { const client = useAppStore((state) => state.client) - const { initClient } = useInitXmtpClient() - useListConversations() const walletAddress = useAppStore((state) => state.address) const signer = useAppStore((state) => state.signer) + const { initClient } = useInitXmtpClient() + useListConversations() + + const { connect: connectWallet } = useWalletProvider() + + const { disconnect: disconnectWallet } = useDisconnect() - const { connect: connectWallet, disconnect: disconnectWallet } = - useWalletProvider() + const { connect: connectDemo } = useWalletProviderDemo() const handleDisconnect = useCallback(async () => { await disconnectWallet() }, [disconnectWallet]) const handleConnect = useCallback(async () => { - await connectWallet() + const isDemoEnv = isAppEnvDemo() + debugger + if (isDemoEnv) { + await connectDemo() + } else { + await connectWallet() + } signer && (await initClient(signer)) - }, [connectWallet, initClient, signer]) + }, [connectWallet, initClient, connectDemo, signer]) return ( <> diff --git a/components/UserMenu.tsx b/components/UserMenu.tsx index 37af8650..351d0b00 100644 --- a/components/UserMenu.tsx +++ b/components/UserMenu.tsx @@ -2,46 +2,17 @@ import { Menu, Transition } from '@headlessui/react' import { CogIcon } from '@heroicons/react/solid' import { Fragment } from 'react' import { classNames, tagStr } from '../helpers' -import Blockies from 'react-blockies' import Address from './Address' -import useEns from '../hooks/useEns' import { Tooltip } from './Tooltip/Tooltip' import packageJson from '../package.json' import { useAppStore } from '../store/app' +import Avatar from './Avatar' type UserMenuProps = { onConnect?: () => Promise onDisconnect?: () => Promise } -type AvatarBlockProps = { - walletAddress: string - avatarUrl?: string -} - -const AvatarBlock = ({ walletAddress }: AvatarBlockProps) => { - const { avatarUrl, loading } = useEns(walletAddress) - if (loading) { - return ( -
-
-
- ) - } - return avatarUrl ? ( -
-
- {walletAddress} -
- ) : ( - - ) -} - const NotConnected = ({ onConnect }: UserMenuProps): JSX.Element => { return ( <> @@ -98,8 +69,8 @@ const UserMenu = ({ onConnect, onDisconnect }: UserMenuProps): JSX.Element => { > {walletAddress ? ( <> - -
+ +

@@ -108,7 +79,7 @@ const UserMenu = ({ onConnect, onDisconnect }: UserMenuProps): JSX.Element => {

diff --git a/helpers/env.ts b/helpers/env.ts index 705a01d1..6f6b2788 100644 --- a/helpers/env.ts +++ b/helpers/env.ts @@ -9,6 +9,11 @@ export const getEnv = (): 'dev' | 'production' | 'local' => { return 'dev' } +export const isAppEnvDemo = (): boolean => { + console.log(process.env.NEXT_PUBLIC_APP_ENVIRONMENT) + return process.env.NEXT_PUBLIC_APP_ENVIRONMENT === 'demo' +} + export const tagStr = (): string | null => { return getEnv() === 'production' ? null : getEnv().toLocaleUpperCase() } diff --git a/hooks/useDisconnect.ts b/hooks/useDisconnect.ts new file mode 100644 index 00000000..d8f6e94a --- /dev/null +++ b/hooks/useDisconnect.ts @@ -0,0 +1,24 @@ +import { useRouter } from 'next/router' +import { useCallback } from 'react' +import { useAppStore } from '../store/app' + +const useDisconnect = () => { + const router = useRouter() + const reset = useAppStore((state) => state.reset) + + const disconnect = useCallback(() => { + Object.keys(localStorage).forEach((key) => { + if (key.startsWith('xmtp')) { + localStorage.removeItem(key) + } + }) + reset() + router.push('/') + }, [router]) + + return { + disconnect, + } +} + +export default useDisconnect diff --git a/hooks/useEns.ts b/hooks/useEns.ts deleted file mode 100644 index d93be157..00000000 --- a/hooks/useEns.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { useState, useEffect } from 'react' -import useWalletProvider from './useWalletProvider' - -const useEns = (addressOrName: string | undefined) => { - const { resolveName, lookupAddress, getAvatarUrl } = useWalletProvider() - const [address, setAddress] = useState('') - const [name, setName] = useState('') - const [avatarUrl, setAvatarUrl] = useState('') - const [loading, setLoading] = useState(true) - const probableAddress = - addressOrName?.startsWith('0x') && addressOrName?.length === 42 - ? addressOrName - : undefined - const probableName = addressOrName?.endsWith('.eth') - ? addressOrName - : undefined - - useEffect(() => { - if (!resolveName || !lookupAddress || !getAvatarUrl) { - return - } - const initAvatarUrl = async (name: string) => { - setAvatarUrl((await getAvatarUrl(name)) as string) - } - const initName = async (probableAddress: string) => { - setLoading(true) - setName((await lookupAddress(probableAddress)) as string) - if (name) { - await initAvatarUrl(name) - } - setLoading(false) - } - const initAddress = async (probableName: string) => { - setLoading(true) - setAddress((await resolveName(probableName)) as string) - await initAvatarUrl(probableName) - setLoading(false) - } - if (probableAddress) { - initName(probableAddress) - } - if (probableName) { - initAddress(probableName) - } - }, [ - probableName, - probableAddress, - name, - resolveName, - lookupAddress, - getAvatarUrl, - ]) - - return { - address: probableAddress || (address as string | undefined), - name: probableName || (name as string | undefined), - avatarUrl: avatarUrl as string | undefined, - loading, - } -} - -export default useEns diff --git a/hooks/useEnsHooks.ts b/hooks/useEnsHooks.ts new file mode 100644 index 00000000..ab9b5c3b --- /dev/null +++ b/hooks/useEnsHooks.ts @@ -0,0 +1,80 @@ +import { useCallback, useState } from 'react' +import { useAppStore } from '../store/app' + +// Ethereum mainnet +const ETH_CHAIN_ID = 1 + +const cachedLookupAddress = new Map() +const cachedResolveName = new Map() +const cachedGetAvatarUrl = new Map() + +const useEnsHooks = () => { + const [loading, setLoading] = useState(false) + const provider = useAppStore((state) => state.provider) + + const resolveName = useCallback( + async (name: string) => { + if (cachedResolveName.has(name)) { + return cachedResolveName.get(name) + } + + setLoading(true) + const { chainId } = (await provider?.getNetwork()) || {} + + if (Number(chainId) !== ETH_CHAIN_ID) { + return undefined + } + const address = (await provider?.resolveName(name)) || undefined + cachedResolveName.set(name, address) + setLoading(false) + return address + }, + [provider] + ) + + const lookupAddress = useCallback( + async (address: string) => { + if (cachedLookupAddress.has(address)) { + return cachedLookupAddress.get(address) + } + setLoading(true) + const { chainId } = (await provider?.getNetwork()) || {} + + if (Number(chainId) !== ETH_CHAIN_ID) { + return undefined + } + + const name = (await provider?.lookupAddress(address)) || undefined + cachedLookupAddress.set(address, name) + setLoading(false) + return name + }, + [provider] + ) + + const getAvatarUrl = useCallback( + async (address: string) => { + const name = await lookupAddress(address) + if (name) { + if (cachedGetAvatarUrl.has(name)) { + return cachedGetAvatarUrl.get(name) + } + setLoading(true) + const avatarUrl = (await provider?.getAvatar(name)) || undefined + cachedGetAvatarUrl.set(name, avatarUrl) + setLoading(false) + return avatarUrl + } + }, + [provider] + ) + + return { + resolveName, + lookupAddress, + getAvatarUrl, + loading, + } +} + +export default useEnsHooks diff --git a/hooks/useListConversations.tsx b/hooks/useListConversations.tsx index c1cc7226..c309a025 100644 --- a/hooks/useListConversations.tsx +++ b/hooks/useListConversations.tsx @@ -7,13 +7,13 @@ import { import { useEffect, useState } from 'react' import { getConversationKey, shortAddress, truncate } from '../helpers' import { useAppStore } from '../store/app' -import useWalletProvider from './useWalletProvider' +import useEnsHooks from './useEnsHooks' let latestMsgId: string export const useListConversations = () => { const walletAddress = useAppStore((state) => state.address) - const { lookupAddress } = useWalletProvider() + const { lookupAddress } = useEnsHooks() const convoMessages = useAppStore((state) => state.convoMessages) const client = useAppStore((state) => state.client) const conversations = useAppStore((state) => state.conversations) diff --git a/hooks/useWalletProvider.tsx b/hooks/useWalletProvider.tsx index 63476093..f751e133 100644 --- a/hooks/useWalletProvider.tsx +++ b/hooks/useWalletProvider.tsx @@ -3,102 +3,45 @@ import { ethers } from 'ethers' import Web3Modal, { IProviderOptions, providers } from 'web3modal' import WalletConnectProvider from '@walletconnect/web3-provider' import WalletLink from 'walletlink' -import { useRouter } from 'next/router' import { useAppStore } from '../store/app' - -// Ethereum mainnet -const ETH_CHAIN_ID = 1 - -const cachedLookupAddress = new Map() -const cachedResolveName = new Map() -const cachedGetAvatarUrl = new Map() - -// This variables are not added in state on purpose. -// It saves few re-renders which then trigger the children to re-render -// Consider the above while moving it to state variables -let provider: ethers.providers.Web3Provider +import { isAppEnvDemo } from '../helpers' +import useDisconnect from './useDisconnect' const useWalletProvider = () => { const [web3Modal, setWeb3Modal] = useState() const setAddress = useAppStore((state) => state.setAddress) const setSigner = useAppStore((state) => state.setSigner) - const reset = useAppStore((state) => state.reset) - const router = useRouter() - - const resolveName = useCallback(async (name: string) => { - if (cachedResolveName.has(name)) { - return cachedResolveName.get(name) - } - - const { chainId } = (await provider?.getNetwork()) || {} - - if (Number(chainId) !== ETH_CHAIN_ID) { - return undefined - } - const address = (await provider?.resolveName(name)) || undefined - cachedResolveName.set(name, address) - return address - }, []) - - const lookupAddress = useCallback(async (address: string) => { - if (cachedLookupAddress.has(address)) { - return cachedLookupAddress.get(address) - } - const { chainId } = (await provider?.getNetwork()) || {} - - if (Number(chainId) !== ETH_CHAIN_ID) { - return undefined - } - - const name = (await provider?.lookupAddress(address)) || undefined - cachedLookupAddress.set(address, name) - return name - }, []) - - const getAvatarUrl = useCallback(async (name: string) => { - if (cachedGetAvatarUrl.has(name)) { - return cachedGetAvatarUrl.get(name) - } - const avatarUrl = (await provider?.getAvatar(name)) || undefined - cachedGetAvatarUrl.set(name, avatarUrl) - return avatarUrl - }, []) - - // Note, this triggers a re-render on acccount change and on diconnect. - const disconnect = useCallback(() => { - Object.keys(localStorage).forEach((key) => { - if (key.startsWith('xmtp')) { - localStorage.removeItem(key) - } - }) - reset() - router.push('/') - }, [router, web3Modal]) + const setProvider = useAppStore((state) => state.setProvider) + const { disconnect } = useDisconnect() const handleAccountsChanged = useCallback(() => { disconnect() }, [disconnect]) const connect = useCallback(async () => { - if (!web3Modal) { - throw new Error('web3Modal not initialized') - } - try { - const instance = await web3Modal.connect() - if (!instance) { - return + const isDemoEnv = isAppEnvDemo() + if (!isDemoEnv) { + if (!web3Modal) { + throw new Error('web3Modal not initialized') + } + try { + const instance = await web3Modal.connect() + if (!instance) { + return + } + instance.on('accountsChanged', handleAccountsChanged) + const newProvider = new ethers.providers.Web3Provider(instance, 'any') + const newSigner = newProvider.getSigner() + setProvider(newProvider) + setSigner(newSigner) + setAddress(await newSigner.getAddress()) + return newSigner + } catch (e) { + // TODO: better error handling/surfacing here. + // Note that web3Modal.connect throws an error when the user closes the + // modal, as "User closed modal" + console.log('error', e) } - instance.on('accountsChanged', handleAccountsChanged) - provider = new ethers.providers.Web3Provider(instance, 'any') - const newSigner = provider.getSigner() - setSigner(newSigner) - setAddress(await newSigner.getAddress()) - return newSigner - } catch (e) { - // TODO: better error handling/surfacing here. - // Note that web3Modal.connect throws an error when the user closes the - // modal, as "User closed modal" - console.log('error', e) } }, [handleAccountsChanged, web3Modal]) @@ -161,8 +104,9 @@ const useWalletProvider = () => { return } instance.on('accountsChanged', handleAccountsChanged) - provider = new ethers.providers.Web3Provider(instance, 'any') - const newSigner = provider.getSigner() + const newProvider = new ethers.providers.Web3Provider(instance, 'any') + const newSigner = newProvider.getSigner() + setProvider(newProvider) setSigner(newSigner) setAddress(await newSigner.getAddress()) } catch (e) { @@ -173,11 +117,7 @@ const useWalletProvider = () => { }, [web3Modal]) return { - resolveName, - lookupAddress, - getAvatarUrl, connect, - disconnect, } } diff --git a/hooks/useWalletProviderDemo.tsx b/hooks/useWalletProviderDemo.tsx new file mode 100644 index 00000000..5ea7bff6 --- /dev/null +++ b/hooks/useWalletProviderDemo.tsx @@ -0,0 +1,45 @@ +import { useCallback, useEffect } from 'react' +import { ethers, Wallet } from 'ethers' +import { useAppStore } from '../store/app' +import { isAppEnvDemo } from '../helpers' + +function getInfuraId() { + return process.env.NEXT_PUBLIC_INFURA_ID || 'c518355f44bd45709cf0d42567d7bdb4' +} + +const useWalletProviderDemo = () => { + const address = useAppStore((state) => state.address) + const provider = useAppStore((state) => state.provider) + const setProvider = useAppStore((state) => state.setProvider) + const setAddress = useAppStore((state) => state.setAddress) + const setSigner = useAppStore((state) => state.setSigner) + + const connect = useCallback(async () => { + const isDemoEnv = isAppEnvDemo() + if (isDemoEnv) { + try { + if (!address) { + const newSigner = Wallet.createRandom() + setSigner(newSigner) + setAddress(newSigner.address) + return newSigner + } + } catch (e) { + console.log('error', e) + } + } + }, [address]) + + useEffect(() => { + if (!provider) { + setProvider(new ethers.providers.InfuraProvider('mainnet', getInfuraId())) + connect() + } + }, [provider]) + + return { + connect, + } +} + +export default useWalletProviderDemo diff --git a/pages/dm/[...recipientWalletAddr].tsx b/pages/dm/[...recipientWalletAddr].tsx index b1d87406..3b5f0a5a 100644 --- a/pages/dm/[...recipientWalletAddr].tsx +++ b/pages/dm/[...recipientWalletAddr].tsx @@ -2,11 +2,11 @@ import React, { useEffect, useState } from 'react' import type { NextPage } from 'next' import { useRouter } from 'next/router' import { Conversation } from '../../components/Conversation' -import useWalletProvider from '../../hooks/useWalletProvider' +import useEnsHooks from '../../hooks/useEnsHooks' const ConversationPage: NextPage = () => { const router = useRouter() - const { resolveName } = useWalletProvider() + const { resolveName } = useEnsHooks() const [recipientWalletAddr, setRecipientWalletAddr] = useState() useEffect(() => { diff --git a/store/app.tsx b/store/app.tsx index 015c5631..485cf239 100644 --- a/store/app.tsx +++ b/store/app.tsx @@ -1,13 +1,20 @@ import { Client, Conversation, DecodedMessage } from '@xmtp/xmtp-js' -import { Signer } from 'ethers' +import { ethers, Signer } from 'ethers' import create from 'zustand' import getUniqueMessages from '../helpers/getUniqueMessages' +type ProviderType = + | ethers.providers.Web3Provider + | ethers.providers.InfuraProvider + | undefined + interface AppState { signer: Signer | undefined setSigner: (signer: Signer | undefined) => void address: string | undefined setAddress: (address: string | undefined) => void + provider: ProviderType + setProvider: (provider: ProviderType) => void client: Client | undefined | null setClient: (client: Client | undefined | null) => void conversations: Map @@ -27,6 +34,8 @@ export const useAppStore = create((set) => ({ setSigner: (signer: Signer | undefined) => set(() => ({ signer })), address: undefined, setAddress: (address: string | undefined) => set(() => ({ address })), + provider: undefined, + setProvider: (provider: ProviderType) => set(() => ({ provider })), client: undefined, setClient: (client: Client | undefined | null) => set(() => ({ client })), conversations: new Map(), From a70a3b05eea44db7d3e3b88cf28d6f991762ad1d Mon Sep 17 00:00:00 2001 From: bhavya2611 Date: Fri, 16 Dec 2022 11:59:40 +0530 Subject: [PATCH 3/7] removed env file --- .env | 1 - 1 file changed, 1 deletion(-) delete mode 100644 .env diff --git a/.env b/.env deleted file mode 100644 index c8858c0c..00000000 --- a/.env +++ /dev/null @@ -1 +0,0 @@ -NEXT_PUBLIC_APP_ENVIRONMENT=demo From 15f198064f01d9977c10f27416ed88dde93a0b0e Mon Sep 17 00:00:00 2001 From: bhavya2611 Date: Fri, 16 Dec 2022 12:00:19 +0530 Subject: [PATCH 4/7] updated git ignore --- .gitignore | 1 + 1 file changed, 1 insertion(+) diff --git a/.gitignore b/.gitignore index 1c2de625..db92f1f3 100644 --- a/.gitignore +++ b/.gitignore @@ -29,6 +29,7 @@ yarn-error.log* .env.development.local .env.test.local .env.production.local +.env # vercel .vercel From 83479ecfb9130d89756463307b80af4cfcb7bf47 Mon Sep 17 00:00:00 2001 From: bhavya2611 Date: Fri, 16 Dec 2022 12:07:13 +0530 Subject: [PATCH 5/7] update tests --- components/Address.test.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/components/Address.test.tsx b/components/Address.test.tsx index 022db1f9..66b26bc5 100644 --- a/components/Address.test.tsx +++ b/components/Address.test.tsx @@ -12,12 +12,15 @@ nextRouter.useRouter.mockImplementation(() => ({ route: '/' })) describe('Address', () => { it('renders value', () => { - const { container } = render(
) - expect(container.textContent).toBe('0xfoo') - expect(container.querySelector('div > span')).toHaveAttribute( - 'title', - '0xfoo' - ) + let text: string | null + let span: Element | null + act(() => { + const { container } = render(
) + text = container.textContent + span = container.querySelector('div > span') + }) + waitFor(() => expect(text).toBe('0xfoo')) + waitFor(() => expect(span).toHaveAttribute('title', '0xfoo')) }) it('renders lookup', async () => { From a85da1cdaf5ba24a4efa11d66fd8ca325c7689c9 Mon Sep 17 00:00:00 2001 From: bhavya2611 Date: Wed, 4 Jan 2023 10:57:33 +0530 Subject: [PATCH 6/7] minor warning fixed --- hooks/useDisconnect.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/hooks/useDisconnect.ts b/hooks/useDisconnect.ts index d8f6e94a..cee66f4b 100644 --- a/hooks/useDisconnect.ts +++ b/hooks/useDisconnect.ts @@ -14,6 +14,7 @@ const useDisconnect = () => { }) reset() router.push('/') + // eslint-disable-next-line react-hooks/exhaustive-deps }, [router]) return { From df8c3bab6a8a682d5b221558e8e45385790e4026 Mon Sep 17 00:00:00 2001 From: bhavya2611 Date: Thu, 5 Jan 2023 09:29:14 +0530 Subject: [PATCH 7/7] removed console log --- helpers/env.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/helpers/env.ts b/helpers/env.ts index 6f6b2788..391bdea1 100644 --- a/helpers/env.ts +++ b/helpers/env.ts @@ -10,7 +10,6 @@ export const getEnv = (): 'dev' | 'production' | 'local' => { } export const isAppEnvDemo = (): boolean => { - console.log(process.env.NEXT_PUBLIC_APP_ENVIRONMENT) return process.env.NEXT_PUBLIC_APP_ENVIRONMENT === 'demo' }