diff --git a/apps/ethereum/erc721/components/Container.tsx b/apps/ethereum/erc721/components/Container.tsx index 892acf5b..33c21129 100644 --- a/apps/ethereum/erc721/components/Container.tsx +++ b/apps/ethereum/erc721/components/Container.tsx @@ -3,8 +3,10 @@ import CreateInstance from './WriteFunctions/CreateInstance'; import Transfer from './WriteFunctions/Transfer'; import BalanceOf from './ReadFunctions/BalanceOf'; import Approve from './WriteFunctions/Approve'; +import BaseURI from './WriteFunctions/SetBaseUri'; import ApproveForAll from './WriteFunctions/ApproveForAll'; import TogglePublicMint from './WriteFunctions/TogglePublicMint'; +import TenantMint from './WriteFunctions/TenantMint'; import Mint from './WriteFunctions/Mint'; import GetOwnerOf from './ReadFunctions/GetOwnerOf'; @@ -51,6 +53,8 @@ const Container = () => {
+ +

Token Functions

diff --git a/apps/ethereum/erc721/components/WriteFunctions/SetBaseUri.tsx b/apps/ethereum/erc721/components/WriteFunctions/SetBaseUri.tsx new file mode 100644 index 00000000..ddac0784 --- /dev/null +++ b/apps/ethereum/erc721/components/WriteFunctions/SetBaseUri.tsx @@ -0,0 +1,77 @@ +import { useEffect, useState } from 'react'; +import * as Accordion from '@radix-ui/react-accordion'; +import { useEthereum } from '@decentology/hyperverse-ethereum'; +import { useERC721 } from '@decentology/hyperverse-evm-erc721'; +import { toast } from 'react-toastify'; +import { + Box, + Item, + TriggerContainer, + Trigger, + Parameters, + Input, + Content, + Button, +} from '../ComponentStyles'; +import { useMutation } from 'react-query'; + +const BaseURI = () => { + const { account } = useEthereum(); + const erc721 = useERC721(); + const { mutate, error, isLoading } = useMutation('transfer', erc721.setBaseURI); + + const [baseURI, setBaseURI] = useState(''); + + const setURI = async () => { + try { + mutate(baseURI); + } catch (error) { + console.log('e', error); + throw error; + } + }; + + useEffect(() => { + if (error) { + console.log(error); + if (error instanceof Error) { + toast.error(error.message, { + position: toast.POSITION.BOTTOM_CENTER, + }); + } + } + }, [error]); + + return ( + +

Base URI

+

Set the base URI for your ERC721

+ + + + + {!account ? 'Connect Wallet' : 'Set Base URI'} + + + + + setBaseURI(e.target.value)} + /> + + + + + + + ); +}; + +export default BaseURI; diff --git a/apps/ethereum/erc721/components/WriteFunctions/TenantMint.tsx b/apps/ethereum/erc721/components/WriteFunctions/TenantMint.tsx new file mode 100644 index 00000000..d1fd071d --- /dev/null +++ b/apps/ethereum/erc721/components/WriteFunctions/TenantMint.tsx @@ -0,0 +1,82 @@ +import { useState } from 'react'; +import * as Accordion from '@radix-ui/react-accordion'; +import { useEthereum } from '@decentology/hyperverse-ethereum'; +import { useERC721 } from '@decentology/hyperverse-evm-erc721'; +import { + Box, + Item, + TriggerContainer, + Trigger, + Parameters, + Input, + Content, + Button, +} from '../ComponentStyles'; +import { useMutation } from 'react-query'; + +const TenantMint = () => { + const { account } = useEthereum(); + + const erc721 = useERC721(); + const { mutate, isLoading } = useMutation('tenantMint', erc721.tenantMint); + const [imageFile, setImageFile] = useState(); + + const [receiver, setReceiver] = useState(''); + + const mint = async () => { + try { + const instanceData: { + image: File | undefined; + to: string; + } = { + image: imageFile, + to: receiver, + }; +console.log(instanceData) + mutate(instanceData); + } catch (error) { + throw error; + } + }; + + return ( + +

Mint

+

Mint an NFT (tenant only)

+ + + + + {!account ? 'Connect Wallet' : 'Mint'} + + + + + setReceiver(e.target.value)} + /> + setImageFile(e!.target!.files![0])} + /> + + + + + + + ); +}; + +export default TenantMint; diff --git a/apps/ethereum/erc721/components/WriteFunctions/TogglePublicMint.tsx b/apps/ethereum/erc721/components/WriteFunctions/TogglePublicMint.tsx index 828462d5..3cbe35fb 100644 --- a/apps/ethereum/erc721/components/WriteFunctions/TogglePublicMint.tsx +++ b/apps/ethereum/erc721/components/WriteFunctions/TogglePublicMint.tsx @@ -6,6 +6,11 @@ import { Box, Item, Button, + TriggerContainer, + Trigger, + Parameters, + Content, + Input, } from '../ComponentStyles'; import { useMutation } from 'react-query'; @@ -13,29 +18,48 @@ const TogglePublicMint = () => { const { account } = useEthereum(); const erc721 = useERC721(); - const { mutate, isLoading } = useMutation('togglePublicMint', erc721.togglePublicMint); - + const [boolMint, setBoolMint] = useState('false'); + const { mutate, isLoading } = useMutation('togglePublicMint', erc721.togglePublicMint); + const publicMint = async () => { + try { + mutate(boolMint === 'true' ? true : false); + } catch (error) { + console.log('e', error); + throw error; + } + }; return ( -

Toggle Public Mint

-

Set minting permission

- - - - - - - - +

Toggle Public Mint

+

Toggle Public Mint to activate or deactivate

+ + + + + {!account ? 'Connect Wallet' : 'Toggle Public Mint'} + + + + + + + + + + + ); }; diff --git a/apps/ethereum/erc721/pages/_app.tsx b/apps/ethereum/erc721/pages/_app.tsx index e7c3e40b..34a7a4b6 100644 --- a/apps/ethereum/erc721/pages/_app.tsx +++ b/apps/ethereum/erc721/pages/_app.tsx @@ -10,29 +10,6 @@ import type { AppProps } from 'next/app'; import { useLocalStorage } from 'react-use'; import { createContext } from 'react'; -// const globalStyles = globalCss({ -// '*': { -// margin: 0, -// padding: 0, -// }, -// html: { -// fontSize: 14, -// fontFamily: 'Proxima Nova, sans-serif', -// letterSpacing: '0.9px', -// }, -// body: { -// fontSize: '1rem', - -// backgroundColor: '$blue500', -// color: '$gray100', -// maxWidth: '1200px', - -// display: 'flex', -// justifyContent: 'center', -// alignItems: 'center', -// height: '100vh', -// }, -// }); const globalStyles = globalCss({ '*': { diff --git a/apps/ethereum/eth-hyperverse/package.json b/apps/ethereum/eth-hyperverse/package.json index fa755777..57650141 100644 --- a/apps/ethereum/eth-hyperverse/package.json +++ b/apps/ethereum/eth-hyperverse/package.json @@ -29,6 +29,7 @@ "react-query": "^3.38.0", "react-toastify": "^8.2.0", "shiki": "^0.10.1", + "unstated-next": "^1.1.0", "use-media": "^1.4.0" }, "devDependencies": { diff --git a/apps/ethereum/eth-hyperverse/src/components/Modules/ERC721.tsx b/apps/ethereum/eth-hyperverse/src/components/Modules/ERC721.tsx index 394dfa2f..374dd7f2 100644 --- a/apps/ethereum/eth-hyperverse/src/components/Modules/ERC721.tsx +++ b/apps/ethereum/eth-hyperverse/src/components/Modules/ERC721.tsx @@ -1,11 +1,25 @@ import { Dashboard } from './shared/Dashboard' import { Content, Root as Tabs } from '@radix-ui/react-tabs' import React, { useEffect } from 'react' -import { ModuleContainer, Header, PanelTrigger, Heading, ContentGrid, ModuleTabs } from './shared/ModuleStyles' +import { + ModuleContainer, + Header, + PanelTrigger, + Heading, + ModuleTabs, + ScrollArea, + ViewportStyled, + ScrollbarStyled, + ThumbStyled, +} from './shared/ModuleStyles' + import { useERC721 } from '@decentology/hyperverse-evm-erc721' import { useEthereum } from '@decentology/hyperverse-ethereum' +import { ERC721CodeSnippets } from '../../consts' +import { CodeContainer, SubHeader, DEFAULT_THEME, Code } from './shared/Dashboard' import { useMutation, useQuery } from 'react-query' +import { styled } from '../../../stitches.config' export const ERC721 = () => { const [activeTab, setActiveTab] = React.useState(ModuleTabs.DASHBOARD) @@ -16,28 +30,30 @@ export const ERC721 = () => { enabled: !!erc721.factoryContract && !!account, }) const { mutate, isLoading: txnLoading, isSuccess } = useMutation('createTokenInstance', erc721.createInstance) - + useEffect(() => { if (isSuccess) { refetch() } }, [isSuccess, refetch]) + return ( { - setActiveTab(value === ModuleTabs.DASHBOARD ? ModuleTabs.DASHBOARD : ModuleTabs.PLAYGROUND) - }} >
- + setActiveTab(ModuleTabs.DASHBOARD)} active={activeTab === ModuleTabs.DASHBOARD} value={ModuleTabs.DASHBOARD}> Dashboard - {/* - Playground - */} + setActiveTab(ModuleTabs.TENANT)} active={activeTab === ModuleTabs.TENANT} value={ModuleTabs.TENANT}> + Tenant Functions + + setActiveTab(ModuleTabs.PUBLIC)} active={activeTab === ModuleTabs.PUBLIC} value={ModuleTabs.PUBLIC}> + Functions +
+ { txnLoading={txnLoading} /> + + + + + Tenant Functions + + {ERC721CodeSnippets.ownerFunctions.map((snippet) => { + return ( + + +

{snippet.name}

+ {snippet?.description} + {snippet.snippet && ( + + )} + + ) + })} + + + + + + + + + + Functions + + {ERC721CodeSnippets.publicFunctions.map((snippet) => { + return ( + + +

{snippet.name}

+ {snippet?.description} + {snippet.snippet && ( + + )} + + ) + })} + + + + + + {/* @@ -60,3 +123,22 @@ export const ERC721 = () => { ) } + +const Info = styled('div', { + display: 'flex', + flexDirection: 'column', + alignItems: 'baseline', + fontSize: '12px', + + h3: { + fontSize: '15px', + fontFamily: `$mono`, + margin: '0 24px 0 0', + }, + + marginBottom: '10px', + + '@laptop': { + flexDirection: 'row', + } +}) \ No newline at end of file diff --git a/apps/ethereum/eth-hyperverse/src/components/Modules/erc721/InitializeCollection.tsx b/apps/ethereum/eth-hyperverse/src/components/Modules/erc721/InitializeCollection.tsx new file mode 100644 index 00000000..dd35d021 --- /dev/null +++ b/apps/ethereum/eth-hyperverse/src/components/Modules/erc721/InitializeCollection.tsx @@ -0,0 +1,237 @@ +import { styled, keyframes } from '../../../../stitches.config' +import { motion } from 'framer-motion' +import { Close, Root as Dialog, Trigger, Portal, Content as DialogContent, Overlay } from '@radix-ui/react-dialog' +import { Exit } from '../../icons' +import { useEffect, useState } from 'react' +import { useERC721 } from '@decentology/hyperverse-evm-erc721' +import { Loader } from '../../basics/Loader' +import { CenterContainer } from '../shared/Dashboard' +import { useMutation } from 'react-query' + +function Content({ children, ...props }: { children: React.ReactNode }) { + return ( + + + {children} + + ) +} + +export const InitializeCollection = () => { + const [price, setPrice] = useState(0) + const [maxSupply, setMaxSupply] = useState(0) + const [maxPerUser, setMaxPerUser] = useState(0) + + + const erc721 = useERC721() + const { mutate, isLoading, isSuccess } = useMutation('initializeCollection', erc721.initializeCollection) + + + + const initializeCollection = async () => { + try { + console.log({ + price, + maxSupply, + maxPerUser, + }) + mutate({ + price, + maxSupply, + maxPerUser, + }) + } catch (error) { + throw error + } + } + + useEffect(() => { + if (isSuccess) { + window.location.reload() + } + }, [isSuccess]) + + + return ( + + + + Initialize Collection + setup if you want an erc721 collection + + <> + + + + + + +

Initialize Collection

+ + + {isLoading ? ( + + + + ) : ( + + setPrice(e.target.valueAsNumber)}/> + setMaxSupply(e.target.valueAsNumber)} /> + setMaxPerUser(e.target.valueAsNumber)}/> + once you initialize your contract as a
collection, you cannot revert back + + + )} + + + + + + ) +} + +export const InstanceContainer = styled('div', { + display: 'flex', + alignItems: 'center', + background: '$blue200', + borderRadius: 14, + padding: 20, + boxShadow: '2px 2px 2px #342F4E', + width: 'calc(100% - 50px)', + flexDirection: 'row', + justifyContent: 'space-between', +}) + +const Info = styled('div', { + display: 'flex', + flexDirection: 'row', +}) + +const Name = styled('h2', { + fontFamily: '$mono', + fontWeight: '400', + fontSize: 14, +}) + +const Description = styled('p', { + fontSize: 12, + margin: 'auto 12px', +}) + +export const Button = styled(motion.button, { + fontFamily: '$mono', + color: '$white100', + border: 'none', + padding: '10px 16px', + background: 'linear-gradient(93deg, #8CC760 0%, #3898FF 100%)', + boxShadow: '2px 4px 12px rgba(140, 199, 96, 0.15)', + borderRadius: '14px', + cursor: 'pointer', + minWidth: 160, +}) + +const overlayShow = keyframes({ + '0%': { opacity: 0 }, + '100%': { opacity: 1 }, +}) + +const contentShow = keyframes({ + '0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' }, + '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' }, +}) + +const StyledOverlay = styled(Overlay, { + backgroundColor: 'rgba(0, 0, 0, 0.5)', + position: 'fixed', + inset: 0, + '@media (prefers-reduced-motion: no-preference)': { + animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`, + }, +}) + +const StyledContent = styled(DialogContent, { + backgroundColor: '$blue300', + borderRadius: 6, + boxShadow: 'hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px', + position: 'fixed', + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + minWidth: 250, + maxWidth: '450px', + maxHeight: '85vh', + padding: 25, + '@media (prefers-reduced-motion: no-preference)': { + animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1) forwards`, + }, + '&:focus': { outline: 'none' }, +}) + +const DialogClose = styled(Close, { + display: 'flex', + width: '100%', + justifyContent: 'space-between', + background: 'transparent', + border: 'none', + outline: 'none', + cursor: 'pointer', + h2: { + fontFamily: '$mono', + fontWeight: '400', + fontSize: 14, + color: '$white100', + }, + svg: { + width: '12px', + }, +}) + +const Input = styled('input', { + position: 'relative', + border: 'none', + outline: 'none', + padding: '18px 16px', + background: '$white100', + borderRadius: '8px', + cursor: 'pointer', + width: '90%', + marginBottom: '10px', + fontFamily: '$mono', + fontWeight: '400', + + '&:last-child': { + marginBottom: 0, + }, +}) + +const InputContainer = styled('div', { + position: 'relative', + display: 'flex', + flexDirection: 'column', + justifyContent: 'space-between', + marginTop: 18, +}) + + +const Warning = styled('div', { + display: 'flex', + textAlign: 'center', + color: 'red', + fontSize: 12, + marginBottom: 10, +}) \ No newline at end of file diff --git a/apps/ethereum/eth-hyperverse/src/components/Modules/shared/CreateInstance.tsx b/apps/ethereum/eth-hyperverse/src/components/Modules/shared/CreateInstance.tsx index 0b638e1c..25592331 100644 --- a/apps/ethereum/eth-hyperverse/src/components/Modules/shared/CreateInstance.tsx +++ b/apps/ethereum/eth-hyperverse/src/components/Modules/shared/CreateInstance.tsx @@ -37,7 +37,6 @@ export const CreateInstance = ({ createInstanceFn, txnLoading }: ReadFunctionPro const [test, setTest] = useState({}) - console.log(txnLoading); const createNewInstance = async () => { try { const orderedArgs = Object.assign( @@ -56,9 +55,8 @@ export const CreateInstance = ({ createInstanceFn, txnLoading }: ReadFunctionPro throw error } } - // Check Discordc - console.log() + return ( @@ -136,13 +134,14 @@ export const CreateInstance = ({ createInstanceFn, txnLoading }: ReadFunctionPro export const InstanceContainer = styled('div', { display: 'flex', - justifyContent: 'space-between', alignItems: 'center', background: '$blue200', borderRadius: 14, padding: 20, boxShadow: '2px 2px 2px #342F4E', - width: '95%', + width: 'calc(100% - 50px)', + flexDirection: 'row', + justifyContent: 'space-between', }) const Info = styled('div', { @@ -255,6 +254,3 @@ const InputContainer = styled('div', { marginTop: 18, }) -const Submit = styled('input', { - display: 'flex', -}) diff --git a/apps/ethereum/eth-hyperverse/src/components/Modules/shared/Dashboard.tsx b/apps/ethereum/eth-hyperverse/src/components/Modules/shared/Dashboard.tsx index f3fb208f..5cdf0f8a 100644 --- a/apps/ethereum/eth-hyperverse/src/components/Modules/shared/Dashboard.tsx +++ b/apps/ethereum/eth-hyperverse/src/components/Modules/shared/Dashboard.tsx @@ -1,22 +1,23 @@ import { styled } from '../../../../stitches.config' -import { CreateInstance } from './CreateInstance' import { ScrollArea, ViewportStyled, ScrollbarStyled, ThumbStyled } from './ModuleStyles' import { getHighlighter, setCDN } from 'shiki' import { useEthereum } from '@decentology/hyperverse-ethereum' -import { useERC721 } from '@decentology/hyperverse-evm-erc721' import { MODULES } from '../../../consts' -import React, { useState } from 'react' +import React from 'react' import { Skeleton } from '../../basics/Skeleton' import { Instance } from './Instance' -import { Loader } from '../../basics/Loader' +import { CreateInstance } from './CreateInstance' +import { InitializeCollection } from '../erc721/InitializeCollection' + + setCDN('https://unpkg.com/shiki/') -const DEFAULT_LANG = 'jsx' +export const DEFAULT_LANG = 'tsx' -const DEFAULT_THEME = 'material-darker' +export const DEFAULT_THEME = 'material-darker' const highlighterPromise = getHighlighter({ theme: DEFAULT_THEME, langs: [DEFAULT_LANG, 'sh'], @@ -32,7 +33,6 @@ type DashboardType = { export const Dashboard = ({ module, instance, isLoading, createInstance, txnLoading }: DashboardType) => { const { account } = useEthereum() - console.log(txnLoading); const dependencies = `yarn add @decentology/hyperverse @decentology/hyperverse-ethereum @decentology/hyperverse-${module}` //@ts-ignore @@ -75,6 +75,8 @@ export const Dashboard = ({ module, instance, isLoading, createInstance, txnLoad <> {/* */} + Set up collection + Get Started

Install Dependencies

@@ -104,7 +106,7 @@ export const Dashboard = ({ module, instance, isLoading, createInstance, txnLoad ) } -function Code({ code, theme, lang=DEFAULT_LANG }: { code: string; theme: string; lang?:string }) { +export function Code({ code, theme, lang=DEFAULT_LANG }: { code: string; theme: string; lang?:string }) { const [innerHtml, setHtml] = React.useState('Loading...') React.useEffect(() => { @@ -116,21 +118,21 @@ function Code({ code, theme, lang=DEFAULT_LANG }: { code: string; theme: string; return
} -const SubHeader = styled('h3', { +export const SubHeader = styled('h3', { fontFamily: '$mono', fontWeight: '400', fontSize: 16, margin: '20px 0', }) -const CodeContainer = styled('div', { +export const CodeContainer = styled('div', { background: '$blue200', width: '95%', borderRadius: 14, padding: 20, marginBottom: 20, boxShadow: '2px 2px 2px #342F4E', - maxWidth: 1000, + h3: { fontFamily: '$mono', fontWeight: '400', diff --git a/apps/ethereum/eth-hyperverse/src/components/Modules/shared/Instance.tsx b/apps/ethereum/eth-hyperverse/src/components/Modules/shared/Instance.tsx index 32c662ec..64324cad 100644 --- a/apps/ethereum/eth-hyperverse/src/components/Modules/shared/Instance.tsx +++ b/apps/ethereum/eth-hyperverse/src/components/Modules/shared/Instance.tsx @@ -4,14 +4,27 @@ import { styled } from '../../../../stitches.config' import { SmartModules } from '../../Playground/PlaygroundBody' import { InstanceContainer } from './CreateInstance' import { CopyIcon } from './ModuleStyles' +import { MediaQuery } from '../../../context/MediaQuery' + +const shortenHash = (hash: string = '', charLength: number = 6, postCharLength?: number) => { + let shortendHash; + if (postCharLength) { + shortendHash = + hash.slice(0, charLength) + + '...' + + hash.slice(hash.length - postCharLength, hash.length); + } else { + shortendHash = hash.slice(0, charLength); + } + return shortendHash; +}; export const Instance = ({ instance }: { instance: string }) => { const router = useRouter() const { module } = router.query const moduleDefault = module?.toString() ?? 'erc721' - const { account } = useEthereum() - + const { tablet } = MediaQuery.useContainer() return ( @@ -19,10 +32,10 @@ export const Instance = ({ instance }: { instance: string }) => { {/* @ts-ignore */} {SmartModules[moduleDefault].title} -  Tenant Contract +  {tablet && "Tenant "}Contract
-

{instance}

+

{tablet ? instance : shortenHash(instance, 4,4)}