latest

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",

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<IProps> = ({
 	return (
 		<>
 			{isCompact ? (
-				<Accordion key={contract.id} className={classes.card}>
+				<Accordion
+					key={`contractCard-${contract.id}`}
+					className={classes.card}
+				>
 					<Accordion.Item
 						className={classes.card}
 						label={
@@ -175,18 +178,20 @@ export const ContractCard: React.FC<IProps> = ({
 					{cardDetails}
 				</Card>
 			)}
-			<Modal
+			{/* <Modal
 				title={<Title>Deploy Contract</Title>}
 				opened={isOpen}
 				onClose={() => setIsOpen(false)}
-			>
-				<DeployContract
-					contract={contract as Contracts}
-					onDeployed={() => {
-						setIsOpen(false)
-					}}
-				/>
-			</Modal>
+			> */}
+			<DeployContract
+				isOpen={isOpen}
+				onClose={() => setIsOpen(false)}
+				contract={contract as Contracts}
+				onDeployed={() => {
+					setIsOpen(false)
+				}}
+			/>
+			{/* </Modal> */}
 		</>
 	)
 }

src/components/Atoms/FacetList.tsx

@@ -125,8 +125,6 @@ export const FacetList: React.FC<IProps> = ({
 		form.setFieldValue('facets', formList(updatedFacets))
 	}
 
-	console.log({ form })
-
 	return (
 		<div className="facet_container">
 			{isEnabled && (
@@ -196,96 +194,88 @@ export const FacetList: React.FC<IProps> = ({
 							] = functionName
 						})
 
-						console.log({ functions, abi: contract?.abi })
-
 						return (
-							<>
-								<Center
-									className={classes.facet_container}
-									key={`facet-${facet.target}`}
-								>
-									{isLoading && (
-										<Skeleton width="100%" height={235} />
-									)}
-									{!isLoading && (
-										<>
-											<ContractCard
-												className={classes.card}
-												contract={contract}
-											>
-												<div>
-													<Space h={16} />
-													<Title order={4}>
-														Functions
-													</Title>
-													<Space h={8} />
-													{contract?.functionSelectors.map(
-														(selector: string) => {
-															const isInUse =
-																facet.selectors.includes(
-																	selector
-																)
+							<Center
+								className={classes.facet_container}
+								key={`facet-${facet.target}`}
+							>
+								{isLoading && (
+									<Skeleton width="100%" height={235} />
+								)}
+								{!isLoading && (
+									<>
+										<ContractCard
+											className={classes.card}
+											contract={contract}
+										>
+											<div>
+												<Space h={16} />
+												<Title order={4}>
+													Functions
+												</Title>
+												<Space h={8} />
+												{contract?.functionSelectors.map(
+													(selector: string) => {
+														const isInUse =
+															facet.selectors.includes(
+																selector
+															)
 
-															const name =
-																functionSelectorNameHash[
-																	selector
-																]
+														const name =
+															functionSelectorNameHash[
+																selector
+															]
 
-															return (
-																<>
-																	<Switch
-																		key={`${contract?.id}-${selector}`}
-																		checked={
-																			isInUse
-																		}
-																		label={
-																			name
-																		}
-																		onChange={e => {
-																			handleToggle(
-																				{
-																					functionName:
-																						name,
-																					facet,
-																					isChecked:
-																						e
-																							.target
-																							.checked,
-																					selector
-																				}
-																			)
-																		}}
-																	/>
-																	<Space
-																		h={8}
-																	/>
-																</>
-															)
-														}
-													)}
-												</div>
-											</ContractCard>
-											{isEnabled && (
-												<div>
-													<IconButton
-														tooltip="Remove Facet"
-														onClick={() => {
-															form.removeListItem(
-																'facets',
-																[i]
-															)
-														}}
-														icon={
-															<CircleX color="red" />
-														}
-													/>
-												</div>
-											)}
-										</>
-									)}
-								</Center>
+														return (
+															<>
+																<Switch
+																	key={`${contract?.id}-${selector}`}
+																	checked={
+																		isInUse
+																	}
+																	label={name}
+																	onChange={e => {
+																		handleToggle(
+																			{
+																				functionName:
+																					name,
+																				facet,
+																				isChecked:
+																					e
+																						.target
+																						.checked,
+																				selector
+																			}
+																		)
+																	}}
+																/>
+																<Space h={8} />
+															</>
+														)
+													}
+												)}
+											</div>
+										</ContractCard>
+										{isEnabled && (
+											<div>
+												<IconButton
+													tooltip="Remove Facet"
+													onClick={() => {
+														form.removeListItem(
+															'facets',
+															[i]
+														)
+													}}
+													icon={
+														<CircleX color="red" />
+													}
+												/>
+											</div>
+										)}
+									</>
+								)}
 								<Space h={16} />
-							</>
+							</Center>
 						)
 					}
 				)}

src/components/Atoms/FindContract.tsx

@@ -1,35 +1,42 @@
-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<SearchContractsQuery['Contracts']>) => void
+	onClick: (
+		contract: ArrayElement<SubSearchContractsSubscription['Contracts']>
+	) => void
 	contractType?: MeemAPI.ContractType
+	disabledContractIds?: string[]
+	children?: React.ReactNode
 }
 
-export const FindContract: React.FC<IProps> = ({ contractType, onClick }) => {
+export const FindContract: React.FC<IProps> = ({
+	contractType,
+	onClick,
+	disabledContractIds,
+	children
+}) => {
 	const form = useForm({
 		initialValues: {
 			searchTerm: ''
 		},
 		validate: {}
 	})
 
-	const { loading: isLoading, data: facets } = useQuery<SearchContractsQuery>(
-		SEARCH_CONTRACTS,
-		{
+	const { loading: isLoading, data: facets } =
+		useSubscription<SubSearchContractsSubscription>(SUB_SEARCH_CONTRACTS, {
 			variables: {
 				contractType: contractType ?? MeemAPI.ContractType.DiamondFacet,
 				searchTerm: `%${form.values.searchTerm}%`
 			}
-		}
-	)
+		})
 
 	return (
 		<form onSubmit={form.onSubmit(async _values => {})}>
@@ -53,13 +60,19 @@ export const FindContract: React.FC<IProps> = ({ contractType, onClick }) => {
 					<Grid.Col key={facet.id} md={6}>
 						<ContractCard contract={facet}>
 							<Space h={8} />
-							<Button onClick={() => onClick(facet)}>
+							<Button
+								onClick={() => onClick(facet)}
+								disabled={disabledContractIds?.includes(
+									facet.id
+								)}
+							>
 								Select
 							</Button>
 						</ContractCard>
 					</Grid.Col>
 				))}
 			</Grid>
+			{children}
 		</form>
 	)
 }

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<GetBundleByIdQuery>(GET_BUNDLE_BY_ID, {
-		variables: {
-			id: bundleId
-		}
-	})
+	const { loading: isLoading, data } =
+		useSubscription<SubGetBundleByIdSubscription>(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.',

src/components/Bundles/BundleForm.tsx

@@ -107,7 +107,12 @@ export const BundleForm: React.FC<IProps> = ({
 				size={900}
 				title={<Title>Find a Facet</Title>}
 			>
-				<FindContract onClick={handleFacetSelect} />
+				<FindContract
+					onClick={handleFacetSelect}
+					disabledContractIds={form.values.facets.map(
+						(f: { contractId: string }) => f.contractId
+					)}
+				/>
 			</Modal>
 		</>
 	)