From 62470d4c69feef025ea2fd4c36fdf8df8176104c Mon Sep 17 00:00:00 2001 From: Ken Goldfarb Date: Tue, 26 Jul 2022 09:41:39 -0400 Subject: [PATCH] latest --- package.json | 6 +- src/components/Atoms/ContractCard.tsx | 29 +-- src/components/Atoms/FacetList.tsx | 166 ++++++++---------- src/components/Atoms/FindContract.tsx | 35 ++-- src/components/Bundles/BundleContainer.tsx | 24 +-- src/components/Bundles/BundleForm.tsx | 7 +- src/components/Bundles/BundlesContainer.tsx | 2 +- .../Bundles/CreateBundleContainer.tsx | 39 ++-- src/components/Bundles/DeployBundle.tsx | 38 ++-- src/components/Bundles/FindBundle.tsx | 3 +- .../Contracts/ContractsContainer.tsx | 76 +++++--- src/components/Contracts/DeployContract.tsx | 130 +++++++++----- src/components/Create/CreateContainer.tsx | 21 ++- .../ManageDiamond/ManageDiamondContainer.tsx | 96 ++++------ src/graphql/contracts.tsx | 17 ++ src/pages/_app.tsx | 75 ++++++-- yarn.lock | 68 +++---- 17 files changed, 479 insertions(+), 353 deletions(-) diff --git a/package.json b/package.json index 775c4a2..79a119a 100644 --- a/package.json +++ b/package.json @@ -44,9 +44,9 @@ "@mantine/next": "4.2.2", "@mantine/notifications": "4.2.2", "@mantine/prism": "^4.2.11", - "@meemproject/api": "0.6.5-pre-2821809.0", - "@meemproject/meem-contracts": "0.6.5-pre-2821809.0", - "@meemproject/react": "0.6.5-pre-2821809.0", + "@meemproject/api": "^0.7.0", + "@meemproject/meem-contracts": "^0.7.0", + "@meemproject/react": "^0.7.0", "@next/bundle-analyzer": "^12.1.4", "@types/superagent": "^4.1.15", "blob-util": "^2.0.2", diff --git a/src/components/Atoms/ContractCard.tsx b/src/components/Atoms/ContractCard.tsx index a8f6da4..3688ff6 100644 --- a/src/components/Atoms/ContractCard.tsx +++ b/src/components/Atoms/ContractCard.tsx @@ -6,8 +6,7 @@ import { Spoiler, Accordion, Title, - Space, - Modal + Space } from '@mantine/core' import { useWallet } from '@meemproject/react' import cx from 'classnames' @@ -21,6 +20,7 @@ import { Address } from './Address' const useStyles = createStyles(_theme => ({ row: { alignItems: 'center', + justifyContent: 'space-between', display: 'flex', width: '100%' }, @@ -139,7 +139,10 @@ export const ContractCard: React.FC = ({ return ( <> {isCompact ? ( - + = ({ {cardDetails} )} - Deploy Contract} opened={isOpen} onClose={() => setIsOpen(false)} - > - { - setIsOpen(false) - }} - /> - + > */} + setIsOpen(false)} + contract={contract as Contracts} + onDeployed={() => { + setIsOpen(false) + }} + /> + {/* */} ) } diff --git a/src/components/Atoms/FacetList.tsx b/src/components/Atoms/FacetList.tsx index 19837e2..fe9b357 100644 --- a/src/components/Atoms/FacetList.tsx +++ b/src/components/Atoms/FacetList.tsx @@ -125,8 +125,6 @@ export const FacetList: React.FC = ({ form.setFieldValue('facets', formList(updatedFacets)) } - console.log({ form }) - return (
{isEnabled && ( @@ -196,96 +194,88 @@ export const FacetList: React.FC = ({ ] = functionName }) - console.log({ functions, abi: contract?.abi }) - return ( - <> -
- {isLoading && ( - - )} - {!isLoading && ( - <> - -
- - - Functions - - - {contract?.functionSelectors.map( - (selector: string) => { - const isInUse = - facet.selectors.includes( - selector - ) +
+ {isLoading && ( + + )} + {!isLoading && ( + <> + +
+ + + Functions + + + {contract?.functionSelectors.map( + (selector: string) => { + const isInUse = + facet.selectors.includes( + selector + ) - const name = - functionSelectorNameHash[ - selector - ] + const name = + functionSelectorNameHash[ + selector + ] - return ( - <> - { - handleToggle( - { - functionName: - name, - facet, - isChecked: - e - .target - .checked, - selector - } - ) - }} - /> - - - ) - } - )} -
- - {isEnabled && ( -
- { - form.removeListItem( - 'facets', - [i] - ) - }} - icon={ - - } - /> -
- )} - - )} -
+ return ( + <> + { + handleToggle( + { + functionName: + name, + facet, + isChecked: + e + .target + .checked, + selector + } + ) + }} + /> + + + ) + } + )} +
+ + {isEnabled && ( +
+ { + form.removeListItem( + 'facets', + [i] + ) + }} + icon={ + + } + /> +
+ )} + + )} - +
) } )} diff --git a/src/components/Atoms/FindContract.tsx b/src/components/Atoms/FindContract.tsx index 8684ffe..6d2770e 100644 --- a/src/components/Atoms/FindContract.tsx +++ b/src/components/Atoms/FindContract.tsx @@ -1,19 +1,28 @@ -import { useQuery } from '@apollo/client' +import { useSubscription } from '@apollo/client' import { Button, TextInput, Space, Grid, Skeleton } from '@mantine/core' import { useForm } from '@mantine/form' import { MeemAPI } from '@meemproject/api' import React from 'react' -import { SearchContractsQuery } from '../../../generated/graphql' -import { SEARCH_CONTRACTS } from '../../graphql/contracts' +import { SubSearchContractsSubscription } from '../../../generated/graphql' +import { SUB_SEARCH_CONTRACTS } from '../../graphql/contracts' import { ArrayElement } from '../../lib/utils' import { ContractCard } from './ContractCard' export interface IProps { - onClick: (contract: ArrayElement) => void + onClick: ( + contract: ArrayElement + ) => void contractType?: MeemAPI.ContractType + disabledContractIds?: string[] + children?: React.ReactNode } -export const FindContract: React.FC = ({ contractType, onClick }) => { +export const FindContract: React.FC = ({ + contractType, + onClick, + disabledContractIds, + children +}) => { const form = useForm({ initialValues: { searchTerm: '' @@ -21,15 +30,13 @@ export const FindContract: React.FC = ({ contractType, onClick }) => { validate: {} }) - const { loading: isLoading, data: facets } = useQuery( - SEARCH_CONTRACTS, - { + const { loading: isLoading, data: facets } = + useSubscription(SUB_SEARCH_CONTRACTS, { variables: { contractType: contractType ?? MeemAPI.ContractType.DiamondFacet, searchTerm: `%${form.values.searchTerm}%` } - } - ) + }) return (
{})}> @@ -53,13 +60,19 @@ export const FindContract: React.FC = ({ contractType, onClick }) => { - ))} + {children} ) } diff --git a/src/components/Bundles/BundleContainer.tsx b/src/components/Bundles/BundleContainer.tsx index ab9c31e..4e5f5ce 100644 --- a/src/components/Bundles/BundleContainer.tsx +++ b/src/components/Bundles/BundleContainer.tsx @@ -1,4 +1,4 @@ -import { useQuery } from '@apollo/client' +import { useSubscription } from '@apollo/client' import log from '@kengoldfarb/log' import { Text, Center, Button, Space, Title, Skeleton } from '@mantine/core' import { formList, useForm } from '@mantine/form' @@ -9,10 +9,9 @@ import { useRouter } from 'next/router' import React, { useEffect, useState } from 'react' import { Contracts, - GetBundleByIdQuery, - GetContractsByIdQuery + SubGetBundleByIdSubscription } from '../../../generated/graphql' -import { GET_BUNDLE_BY_ID, GET_CONTRACTS_BY_ID } from '../../graphql/contracts' +import { SUB_GET_BUNDLE_BY_ID } from '../../graphql/contracts' import { downloadFile } from '../../lib/utils' import { Page } from '../../styles/Page' import { DemoCode } from '../Atoms/DemoCode' @@ -34,15 +33,12 @@ export const BundleContainer: React.FC = () => { const [hasInitialized, setHasInitialized] = useState(false) const [isSaving, setIsSaving] = useState(false) - const { - loading: isLoading, - data, - refetch - } = useQuery(GET_BUNDLE_BY_ID, { - variables: { - id: bundleId - } - }) + const { loading: isLoading, data } = + useSubscription(SUB_GET_BUNDLE_BY_ID, { + variables: { + id: bundleId + } + }) const contractsData = data?.Bundles[0].BundleContracts.map( bc => bc.Contract @@ -82,8 +78,6 @@ export const BundleContainer: React.FC = () => { } ) - refetch() - showNotification({ title: 'Bundle Saved!', message: 'The bundle has been saved.', diff --git a/src/components/Bundles/BundleForm.tsx b/src/components/Bundles/BundleForm.tsx index 735b4bc..85e8a31 100644 --- a/src/components/Bundles/BundleForm.tsx +++ b/src/components/Bundles/BundleForm.tsx @@ -107,7 +107,12 @@ export const BundleForm: React.FC = ({ size={900} title={Find a Facet} > - + f.contractId + )} + /> ) diff --git a/src/components/Bundles/BundlesContainer.tsx b/src/components/Bundles/BundlesContainer.tsx index 36b3e05..c95884a 100644 --- a/src/components/Bundles/BundlesContainer.tsx +++ b/src/components/Bundles/BundlesContainer.tsx @@ -33,7 +33,7 @@ export const BundlesContainer: React.FC = () => { onClose={() => setIsOpen(false)} size="xl" > - + ) diff --git a/src/components/Bundles/CreateBundleContainer.tsx b/src/components/Bundles/CreateBundleContainer.tsx index 6b1996e..4eb236b 100644 --- a/src/components/Bundles/CreateBundleContainer.tsx +++ b/src/components/Bundles/CreateBundleContainer.tsx @@ -1,4 +1,4 @@ -import { useQuery } from '@apollo/client' +import { useSubscription } from '@apollo/client' import log from '@kengoldfarb/log' import { createStyles, @@ -18,8 +18,11 @@ import { makeFetcher } from '@meemproject/react' import { useRouter } from 'next/router' import React, { useState } from 'react' import { CirclePlus } from 'tabler-icons-react' -import { Contracts, GetContractsByIdQuery } from '../../../generated/graphql' -import { GET_CONTRACTS_BY_ID } from '../../graphql/contracts' +import { + Contracts, + SubGetContractsByIdSubscription +} from '../../../generated/graphql' +import { SUB_GET_CONTRACTS_BY_ID } from '../../graphql/contracts' import { Page } from '../../styles/Page' import { FacetList } from '../Atoms/FacetList' import { @@ -57,14 +60,15 @@ export const CreateBundleContainer: React.FC = () => { const [isOpen, setIsOpen] = useState(false) - const { loading: isLoading, data } = useQuery( - GET_CONTRACTS_BY_ID, - { - variables: { - ids: form.values.facets.map(facet => facet.contractId) + const { loading: isLoading, data } = + useSubscription( + SUB_GET_CONTRACTS_BY_ID, + { + variables: { + ids: form.values.facets.map(facet => facet.contractId) + } } - } - ) + ) // const handleFacetSelect: IFindContractProps['onClick'] = async contract => { // form.addListItem('facets', { @@ -108,7 +112,13 @@ export const CreateBundleContainer: React.FC = () => { target: contract.id, contractId: contract.id }) - setIsOpen(false) + + showNotification({ + title: 'Contract added!', + message: `${contract.name} has been added to the bundle.`, + color: 'green' + }) + // setIsOpen(false) } const handleSave = async (values: typeof form.values) => { @@ -234,7 +244,12 @@ export const CreateBundleContainer: React.FC = () => { size={900} title={Find a Facet} > - + f.contractId + )} + /> diff --git a/src/components/Bundles/DeployBundle.tsx b/src/components/Bundles/DeployBundle.tsx index 881f1d5..f082245 100644 --- a/src/components/Bundles/DeployBundle.tsx +++ b/src/components/Bundles/DeployBundle.tsx @@ -1,3 +1,4 @@ +import { useSubscription } from '@apollo/client' import log from '@kengoldfarb/log' import { Text, @@ -19,8 +20,10 @@ import { Check, CircleX } from 'tabler-icons-react' import { Bundles, Contracts, - SearchContractsQuery + SearchContractsQuery, + SubGetBundleByIdSubscription } from '../../../generated/graphql' +import { SUB_GET_BUNDLE_BY_ID } from '../../graphql/contracts' import { ArrayElement } from '../../lib/utils' import { Address } from '../Atoms/Address' import { ContractCard } from '../Atoms/ContractCard' @@ -28,10 +31,10 @@ import { FindContract } from '../Atoms/FindContract' import { DeployContract } from '../Contracts/DeployContract' export interface IProps { - bundle?: Bundles | null + bundleId?: string | null } -export const DeployBundle: React.FC = ({ bundle }) => { +export const DeployBundle: React.FC = ({ bundleId }) => { const router = useRouter() const { signer, chainId } = useWallet() const [isLoading, setIsLoading] = useState(false) @@ -42,6 +45,15 @@ export const DeployBundle: React.FC = ({ bundle }) => { const [selectedContract, setSelectedContract] = useState>() + const { loading: isLoadingBundle, data } = + useSubscription(SUB_GET_BUNDLE_BY_ID, { + variables: { + id: bundleId + } + }) + + const bundle = data?.Bundles[0] + if (!bundle) { return null } @@ -277,19 +289,15 @@ export const DeployBundle: React.FC = ({ bundle }) => { }} /> - Deploy Contract} - opened={isDeployProxyOpen} + setIsDeployProxyOpen(false)} - > - { - setDeployedProxy(c) - setIsDeployProxyOpen(false) - }} - /> - + contract={selectedContract as Contracts} + onDeployed={c => { + setDeployedProxy(c) + setIsDeployProxyOpen(false) + }} + />
) } diff --git a/src/components/Bundles/FindBundle.tsx b/src/components/Bundles/FindBundle.tsx index 66b8491..cfc16bf 100644 --- a/src/components/Bundles/FindBundle.tsx +++ b/src/components/Bundles/FindBundle.tsx @@ -1,10 +1,9 @@ -import { useQuery, useSubscription } from '@apollo/client' +import { useSubscription } from '@apollo/client' import { TextInput, Space, Skeleton, Grid } from '@mantine/core' import { useForm } from '@mantine/form' import React from 'react' import { Bundles, - SearchBundlesQuery, SubSearchBundlesSubscription } from '../../../generated/graphql' import { SUB_SEARCH_BUNDLES } from '../../graphql/contracts' diff --git a/src/components/Contracts/ContractsContainer.tsx b/src/components/Contracts/ContractsContainer.tsx index 4e12e9d..186960b 100644 --- a/src/components/Contracts/ContractsContainer.tsx +++ b/src/components/Contracts/ContractsContainer.tsx @@ -1,4 +1,4 @@ -import { useQuery } from '@apollo/client' +import { useSubscription } from '@apollo/client' import { Text, Modal, @@ -13,9 +13,16 @@ import { useForm } from '@mantine/form' import { MeemAPI } from '@meemproject/api' import { useWallet } from '@meemproject/react' import { useRouter } from 'next/router' -import React, { useState } from 'react' -import { Contracts, SearchContractsQuery } from '../../../generated/graphql' -import { SEARCH_CONTRACTS } from '../../graphql/contracts' +import React, { useEffect, useState } from 'react' +import { + Contracts, + SubGetContractsByIdSubscription, + SubSearchContractsSubscription +} from '../../../generated/graphql' +import { + SUB_GET_CONTRACTS_BY_ID, + SUB_SEARCH_CONTRACTS +} from '../../graphql/contracts' import { Page } from '../../styles/Page' import { ContractCard } from '../Atoms/ContractCard' import { DeployContract } from './DeployContract' @@ -34,19 +41,48 @@ export const ContractsContainer: React.FC = () => { validate: {} }) + // const { loading: isContractsLoading, data: contracts } = + // useQuery(SEARCH_CONTRACTS, { + // variables: { + // contractType: form.values.contractType, + // searchTerm: `${form.values.searchText}%` + // } + // }) + const { loading: isContractsLoading, data: contracts } = - useQuery(SEARCH_CONTRACTS, { + useSubscription(SUB_SEARCH_CONTRACTS, { variables: { contractType: form.values.contractType, searchTerm: `${form.values.searchText}%` } }) + const { data: singleContractData } = + useSubscription( + SUB_GET_CONTRACTS_BY_ID, + { + skip: !router.query.contractId, + variables: { + ids: [router.query.contractId] + } + } + ) + const handleDeploy = async (c: Contracts) => { setIsOpen(true) setSelectedContract(c) } + useEffect(() => { + if (singleContractData) { + setSelectedContract(singleContractData.Contracts[0] as Contracts) + setIsOpen(true) + router.push({ + pathname: '/contracts' + }) + } + }, [singleContractData, router]) + return (
{})}> @@ -100,24 +136,20 @@ export const ContractsContainer: React.FC = () => { ))} - Deploy Contract} - opened={isOpen} + { + router.push({ + pathname: `/manage`, + query: { + address: tx.address, + chainId + } + }) + }} + isOpen={isOpen} onClose={() => setIsOpen(false)} - > - { - router.push({ - pathname: `/manage`, - query: { - address: tx.address, - chainId - } - }) - }} - /> - + /> ) } diff --git a/src/components/Contracts/DeployContract.tsx b/src/components/Contracts/DeployContract.tsx index 744c178..dd180a1 100644 --- a/src/components/Contracts/DeployContract.tsx +++ b/src/components/Contracts/DeployContract.tsx @@ -1,27 +1,48 @@ import log from '@kengoldfarb/log' -import { Text, Button, TextInput, Space, Title } from '@mantine/core' +import { Text, Button, TextInput, Space, Title, Modal } from '@mantine/core' import { useForm } from '@mantine/form' +import { showNotification } from '@mantine/notifications' import { chains, MeemAPI } from '@meemproject/api' import { makeFetcher, useWallet } from '@meemproject/react' import { ethers } from 'ethers' -import React, { useState } from 'react' +import React, { useEffect, useState } from 'react' import { Contracts } from '../../../generated/graphql' export interface IProps { contract?: Contracts onDeployed?: (contract: ethers.Contract) => void + onClose?: () => void + isOpen?: boolean + title?: string } -export const DeployContract: React.FC = ({ contract, onDeployed }) => { +export const DeployContract: React.FC = ({ + contract, + onDeployed, + isOpen: isRequestedOpen, + title, + onClose +}) => { const { signer, chainId } = useWallet() const [isLoading, setIsLoading] = useState(false) + const [isOpen, setIsOpen] = useState(false) const form = useForm({ initialValues: {}, validate: {} }) - if (!contract) { + useEffect(() => { + if (!isLoading) { + setIsOpen(!!isRequestedOpen) + } + + if (!isRequestedOpen && onClose) { + onClose() + } + }, [isRequestedOpen, isLoading, onClose]) + + if (!contract || !chainId) { return null } @@ -70,6 +91,13 @@ export const DeployContract: React.FC = ({ contract, onDeployed }) => { chainId } ) + + showNotification({ + title: 'Contract Deployed!', + message: `${contract.name} was deployed to ${tx.address}.`, + color: 'green' + }) + if (onDeployed) { onDeployed(tx) } @@ -83,42 +111,64 @@ export const DeployContract: React.FC = ({ contract, onDeployed }) => { const chain = chains.find(c => c.chainId === chainId) return ( -
- {contract.name} - {contract.description} - - {inputs.length > 0 && ( - Constructor Arguments - )} - { - handleDeploy() - })} - > - {inputs.map((input, i) => { - switch (input.type) { - case 'address': - default: { - return ( - - ) - } + {title || `Deploy ${contract.name}`} + } + opened={isOpen} + onClose={() => { + if (isLoading) { + showNotification({ + title: 'Contract Deployment In Progress', + message: 'Please wait for the contract to deploy.', + color: 'yellow' + }) + } else { + setIsOpen(false) + if (onClose) { + onClose() } - })} - - - -
+ } + }} + > +
+ {contract.description} + + {inputs.length > 0 && ( + Constructor Arguments + )} +
{ + handleDeploy() + })} + > + {inputs.map((input, i) => { + switch (input.type) { + case 'address': + default: { + return ( + + ) + } + } + })} + + + +
+ ) } diff --git a/src/components/Create/CreateContainer.tsx b/src/components/Create/CreateContainer.tsx index 83284da..8b143e3 100644 --- a/src/components/Create/CreateContainer.tsx +++ b/src/components/Create/CreateContainer.tsx @@ -14,6 +14,7 @@ import { useForm } from '@mantine/form' import { showNotification } from '@mantine/notifications' import { MeemAPI } from '@meemproject/api' import { makeFetcher } from '@meemproject/react' +import Link from 'next/link' import React, { useState } from 'react' import { Page } from '../../styles/Page' @@ -56,7 +57,7 @@ export const CreateContainer: React.FC = () => { method: MeemAPI.v1.CreateContract.method }) - await createContract( + const { contractId } = await createContract( MeemAPI.v1.CreateContract.path(), undefined, { @@ -71,8 +72,22 @@ export const CreateContainer: React.FC = () => { showNotification({ title: 'Contract created', - message: - 'The contract was saved and can now be deployed.', + message: ( +

+ The contract was saved and can now be + deployed.{' '} + + View Contract + +

+ ), color: 'green' }) } catch (e) { diff --git a/src/components/ManageDiamond/ManageDiamondContainer.tsx b/src/components/ManageDiamond/ManageDiamondContainer.tsx index 1c060b9..7d7e445 100644 --- a/src/components/ManageDiamond/ManageDiamondContainer.tsx +++ b/src/components/ManageDiamond/ManageDiamondContainer.tsx @@ -1,4 +1,4 @@ -import { useQuery, useSubscription } from '@apollo/client' +import { useSubscription } from '@apollo/client' import log from '@kengoldfarb/log' import { createStyles, @@ -36,14 +36,10 @@ import { import { Bundles, ContractInstances, - GetContractsByAddressesQuery, SubGetContractsByAddressesSubscription, WalletContractInstances } from '../../../generated/graphql' -import { - GET_CONTRACTS_BY_ADDRESS, - SUB_GET_CONTRACTS_BY_ADDRESS -} from '../../graphql/contracts' +import { SUB_GET_CONTRACTS_BY_ADDRESS } from '../../graphql/contracts' import { diamondABI } from '../../lib/diamond' import { downloadFile } from '../../lib/utils' import { Page } from '../../styles/Page' @@ -55,7 +51,6 @@ import { FindContract, IProps as IFindContractProps } from '../Atoms/FindContract' -import { FunctionList } from '../Atoms/FunctionList' import { IconButton } from '../Atoms/IconButton' import { FindBundle } from '../Bundles/FindBundle' @@ -109,65 +104,35 @@ export const ManageDiamondContainer: React.FC = () => { const [fetchedAddress, setFetchedAddress] = useState() const [fetchedChainId, setFetchedChainId] = useState() const [contractOwner, setContractOwner] = useState() - const [hasFoundAllFacets, setHasFoundAllFacets] = useState(false) + const [hasFoundAllFacets, setHasFoundAllFacets] = useState(true) const [facets, setFacets] = useState< { selectors: string[]; target: string }[] >([]) const { web3Provider, signer, chainId, setChain, accounts } = useWallet() - // const { loading: isLoading, data } = - // useSubscription( - // SUB_GET_CONTRACTS_BY_ADDRESS, - // { - // variables: { - // addresses: [ - // ...form.values.facets, - // { target: form.values.address } - // ] - // .sort((a, b) => { - // if (a.target < b.target) { - // return -1 - // } - // if (a.target > b.target) { - // return 1 - // } - // return 0 - // }) - // .map(f => f.target) - // }, - // fetchPolicy: 'no-cache' - // } - // ) - - const { loading: isLoading, data } = useQuery( - GET_CONTRACTS_BY_ADDRESS, - { - variables: { - addresses: [ - ...form.values.facets, - { target: form.values.address } - ] - .sort((a, b) => { - if (a.target < b.target) { - return -1 - } - if (a.target > b.target) { - return 1 - } - return 0 - }) - .map(f => { - if (f.target) { - return ethers.utils.getAddress(f.target) - } - - log.warn('No target', f) - return '' - }) - }, - fetchPolicy: 'no-cache' - } - ) + const { loading: isLoading, data } = + useSubscription( + SUB_GET_CONTRACTS_BY_ADDRESS, + { + variables: { + addresses: [ + ...form.values.facets, + { target: form.values.address } + ] + .sort((a, b) => { + if (a.target < b.target) { + return -1 + } + if (a.target > b.target) { + return 1 + } + return 0 + }) + .map(f => f.target) + }, + fetchPolicy: 'no-cache' + } + ) const isValidAddress = fetchedAddress ? ethers.utils.isAddress(fetchedAddress) @@ -568,7 +533,7 @@ export const ManageDiamondContainer: React.FC = () => { ]) useEffect(() => { - if (!isLoading && data) { + if (!isLoading && data && data.ContractInstances.length > 0) { for (let i = 0; i < facets.length; i += 1) { const facet = facets[i] const contractInstance = data.ContractInstances.find( @@ -895,7 +860,12 @@ export const ManageDiamondContainer: React.FC = () => { size={900} title={Find a Facet} > - + ci.Contract?.id + )} + /> { - console.log(err) - return true - }, - onNonLazyError: err => { - log.crit(err) - } - }) - ) - : null + let wsClient: Client | undefined + + if (typeof window !== 'undefined') { + log.debug('Creating GQL WS client') + wsClient = createClient({ + url: process.env.NEXT_PUBLIC_GRAPHQL_API_WS_URL ?? '', + keepAlive: 10_000, + lazy: false, + connectionAckWaitTimeout: 10_000, + shouldRetry: err => { + log.crit(err) + return true + }, + onNonLazyError: err => { + log.crit(err) + } + }) + + wsClient.on('closed', e => { + log.warn('Websocket: closed', e) + }) + wsClient.on('connected', () => { + log.debug('Websocket: connected') + }) + wsClient.on('connecting', () => { + log.debug('Websocket: connecting') + }) + wsClient.on('error', e => { + log.crit('Websocket: error', e) + }) + wsClient.on('message', e => { + log.trace('Websocket: message', e) + }) + wsClient.on('opened', () => { + log.debug('Websocket: opened') + }) + wsClient.on('ping', e => { + log.trace('Websocket: ping', e) + }) + wsClient.on('pong', e => { + log.trace('Websocket: pong', e) + }) + } + + const wsLink = wsClient ? new GraphQLWsLink(wsClient) : null // The split function takes three parameters: // @@ -80,6 +108,17 @@ function MyApp(props: AppProps) { }) }, []) + React.useEffect(() => { + const jssStyles = document.querySelector('#jss-server-side') + if (jssStyles) { + jssStyles.parentElement?.removeChild(jssStyles) + } + log.setOptions({ + level: + (process.env.NEXT_PUBLIC_LOG_LEVEL as LogLevel) ?? LogLevel.Warn + }) + }, []) + const rpcs: { [chainId: string]: string[] } = {} diff --git a/yarn.lock b/yarn.lock index 090e411..b789e5a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1932,31 +1932,13 @@ prop-types "^15.7.2" react-is "^16.8.0 || ^17.0.0" -"@meemproject/api@0.6.5-pre-2821809.0": - version "0.6.5-pre-2821809.0" - resolved "https://registry.yarnpkg.com/@meemproject/api/-/api-0.6.5-pre-2821809.0.tgz#f11476fd5e030415ae9945af57db6ebd4b084c33" - integrity sha512-YI+m5SWdFQ2qrRf2n1HWwjEXEc6Hah9ZX/8V51xWLk1buwZvuATR3Xs5iLkbMK5GoXxenyylecuYSjSOWmidJQ== - dependencies: - "@kengoldfarb/log" "^1.0.5" - "@meemproject/meem-contracts" "^0.6.5-pre-2821809.0" - "@typechain/ethers-v5" "^10.0.0" - "@types/js-cookie" "^3.0.1" - "@types/luxon" "^2.3.1" - ethers "^5.6.4" - js-cookie "^3.0.1" - luxon "^2.3.1" - superagent "^7.1.2" - swr "^1.3.0" - tsnd "^1.0.2" - typechain "^8.0.0" - -"@meemproject/api@^0.6.5-pre-2821809.0": - version "0.6.5-pre-c49d3f7.0" - resolved "https://registry.yarnpkg.com/@meemproject/api/-/api-0.6.5-pre-c49d3f7.0.tgz#af809044687d1e93205a320decba62398a8ce2c6" - integrity sha512-nl1LDyP8C2rIo7QSPGstYm5Fx77jUiPCm8uYr5/p/+UdsT5FjK9ZK0+sYdo2Vsauwbr93kE8X+xXe4czzFK5jw== +"@meemproject/api@^0.7.0": + version "0.7.0" + resolved "https://registry.yarnpkg.com/@meemproject/api/-/api-0.7.0.tgz#317797e9290f00ef706e40bb73c25a4a625269bf" + integrity sha512-q1AjdDwDNR56WCew3zwbm80VKu+tCmriDEbEk05FpXUsrnLy2SlerAxWb/aJPIIRgbyBKbfcV8klI1TQ+gStvA== dependencies: "@kengoldfarb/log" "^1.0.5" - "@meemproject/meem-contracts" "^0.6.5-pre-c49d3f7.0" + "@meemproject/meem-contracts" "^0.7.0" "@typechain/ethers-v5" "^10.0.0" "@types/js-cookie" "^3.0.1" "@types/luxon" "^2.3.1" @@ -1968,33 +1950,25 @@ tsnd "^1.0.2" typechain "^8.0.0" -"@meemproject/meem-contracts@0.6.5-pre-2821809.0": - version "0.6.5-pre-2821809.0" - resolved "https://registry.yarnpkg.com/@meemproject/meem-contracts/-/meem-contracts-0.6.5-pre-2821809.0.tgz#ab74489bf822217c78fdfa3566bc77d04a6fd6ab" - integrity sha512-Fg4LY1wJQdqO0VANOKdpnARdf+jEHxzfrtXaH7/CyWLAz9IF2zWtbCkPPdyXjrdvFvegmCtNZ6WRjBcx89tX7g== - dependencies: - "@kengoldfarb/log" "^1.0.5" - ethers "^5.6.4" - -"@meemproject/meem-contracts@^0.6.5-pre-2821809.0", "@meemproject/meem-contracts@^0.6.5-pre-c49d3f7.0": - version "0.6.5-pre-c49d3f7.0" - resolved "https://registry.yarnpkg.com/@meemproject/meem-contracts/-/meem-contracts-0.6.5-pre-c49d3f7.0.tgz#52f0df68189bcaec0e6cef61c9ee2138812263a5" - integrity sha512-QkKxwkNBJsH7jm2Z0cXyh9ZWW/NcR5WZvo1O01SkKfSGXGy7Uqus4oNzxQcGrq+PLhZfpQvFcHEz+kEuM3G7MA== +"@meemproject/meem-contracts@^0.7.0": + version "0.7.0" + resolved "https://registry.yarnpkg.com/@meemproject/meem-contracts/-/meem-contracts-0.7.0.tgz#8e0fb98db0eb394b980662771698466dfa3832ba" + integrity sha512-oGpafFyqST9OaF+8i542MW/njn/uBvkibaVqUB4HmzZEsNus+0z8BZ+Jc2rgstcgAT1ph0QYARsk+WhKkJV3XA== dependencies: "@kengoldfarb/log" "^1.0.5" ethers "^5.6.4" -"@meemproject/react@0.6.5-pre-2821809.0": - version "0.6.5-pre-2821809.0" - resolved "https://registry.yarnpkg.com/@meemproject/react/-/react-0.6.5-pre-2821809.0.tgz#f3c1c89b179c77e78d1bb1e96bfe1f78c542bed3" - integrity sha512-ah9dDMI06u0J1llo4hX1+8Dcmbp3gf6CEjQyHqUAWAmyAIdh57gpnCehzgniinmRh3Wka9JU0vnpvyYjQdtD6Q== +"@meemproject/react@^0.7.0": + version "0.7.0" + resolved "https://registry.yarnpkg.com/@meemproject/react/-/react-0.7.0.tgz#0ccc9caa5c9ec16797033ed4048f251828a215f5" + integrity sha512-Hqxl9m1FdVIgmwO1+e0QCmUZfO2OIXqQTGBYOa3eokmeMHM7to+liurzCa8YEAQWkDmHHdp+y4QC59FVVengaA== dependencies: "@kengoldfarb/log" "^1.0.5" "@material-ui/core" "^4.12.4" "@material-ui/lab" "^4.0.0-alpha.61" - "@meemproject/api" "^0.6.5-pre-2821809.0" - "@meemproject/meem-contracts" "^0.6.5-pre-2821809.0" - "@meemproject/utils" "^0.6.5-pre-2821809.0" + "@meemproject/api" "^0.7.0" + "@meemproject/meem-contracts" "^0.7.0" + "@meemproject/utils" "^0.7.0" "@mui/material" "^5.6.1" "@walletconnect/web3-provider" "^1.7.7" ethers "^5.6.4" @@ -2005,13 +1979,13 @@ swr "^1.3.0" web3modal "^1.9.6" -"@meemproject/utils@^0.6.5-pre-2821809.0": - version "0.6.5-pre-c49d3f7.0" - resolved "https://registry.yarnpkg.com/@meemproject/utils/-/utils-0.6.5-pre-c49d3f7.0.tgz#6a4bed64893c95cfa71dcf7891549747b2a16360" - integrity sha512-5sUqLEeCv6N3vtxrj8pP+qrBc54fShkdaFyRTe/0u+Y62NsZEToEoDrqtN2fq2Z+ojAoSDdK9CBBFcS1eHYHSg== +"@meemproject/utils@^0.7.0": + version "0.7.0" + resolved "https://registry.yarnpkg.com/@meemproject/utils/-/utils-0.7.0.tgz#7ad3401d7c1a7d260581fe071f0ae751c6d97a6e" + integrity sha512-i0fdem1EdHvPzhdV4kUMaEgR3ovkF0xzQ6rNeFGINAITyC7DkZR2PPXGfzKiKjemCKl4Wtv2Jzm4/LMjpmrqHQ== dependencies: "@kengoldfarb/log" "^1.0.5" - "@meemproject/meem-contracts" "^0.6.5-pre-c49d3f7.0" + "@meemproject/meem-contracts" "^0.7.0" ethers "^5.6.4" "@metamask/safe-event-emitter@^2.0.0":