From dfbbfc1c5b68476abaecc6de54f85e53901cea18 Mon Sep 17 00:00:00 2001 From: moskalyk Date: Fri, 22 Mar 2024 13:25:08 -0400 Subject: [PATCH] updated some sections and added a few componenents --- docs/components/CardGrid.tsx | 23 + docs/components/MintWidget.tsx | 101 +++ docs/components/TabGroup.tsx | 47 ++ docs/components/Table.tsx | 50 ++ docs/components/Video.tsx | 53 ++ docs/pages/solutions/builder/contracts.mdx | 31 +- docs/pages/solutions/builder/gas-tank.mdx | 24 +- docs/pages/solutions/builder/indexer.mdx | 18 +- docs/pages/solutions/builder/marketplaces.mdx | 16 +- docs/pages/solutions/builder/node-gateway.mdx | 17 +- docs/pages/solutions/builder/overview.mdx | 60 +- .../solutions/builder/project-management.mdx | 17 +- .../solutions/builder/project-settings.mdx | 85 +- docs/pages/solutions/builder/wallet-sdks.mdx | 18 +- ...er.mdx => 800-manage-metadata-builder.mdx} | 0 .../marketplaces/white-label-marketplace.mdx | 18 +- .../technical-references/chain-support.mdx | 121 ++- .../embedded-wallet/04-use-wallets.mdx | 220 ++--- .../wallets/universal-wallet/01-overview.mdx | 12 +- .../universal-wallet/02-quickstart.mdx | 17 +- .../03-guides/01-connect-wallet.mdx | 13 +- .../03-guides/03-sign-message.mdx | 378 ++++++++- ...7-sequence-kit.mdx => 04-sequence-kit.mdx} | 0 .../{04-platforms.mdx => 05-platforms.mdx} | 0 ...fiat-on-ramps.mdx => 06-fiat-on-ramps.mdx} | 0 ...y-management.mdx => 07-key-management.mdx} | 0 docs/scripts/entry.js | 18 + docs/styles.css | 211 +++++ nav.ts | 15 +- package.json | 5 + pnpm-lock.yaml | 794 ++++++++++++++++++ 31 files changed, 2126 insertions(+), 256 deletions(-) create mode 100644 docs/components/CardGrid.tsx create mode 100644 docs/components/MintWidget.tsx create mode 100644 docs/components/TabGroup.tsx create mode 100644 docs/components/Table.tsx create mode 100644 docs/components/Video.tsx rename docs/pages/solutions/collectibles/metadata/{800-manage-contract-metadata-builder.mdx => 800-manage-metadata-builder.mdx} (100%) rename docs/pages/solutions/wallets/universal-wallet/{07-sequence-kit.mdx => 04-sequence-kit.mdx} (100%) rename docs/pages/solutions/wallets/universal-wallet/{04-platforms.mdx => 05-platforms.mdx} (100%) rename docs/pages/solutions/wallets/universal-wallet/{05-fiat-on-ramps.mdx => 06-fiat-on-ramps.mdx} (100%) rename docs/pages/solutions/wallets/universal-wallet/{06-key-management.mdx => 07-key-management.mdx} (100%) create mode 100644 docs/scripts/entry.js diff --git a/docs/components/CardGrid.tsx b/docs/components/CardGrid.tsx new file mode 100644 index 0000000000..cf96e61a80 --- /dev/null +++ b/docs/components/CardGrid.tsx @@ -0,0 +1,23 @@ +const Card = ({ title, description, icon, link }: any) => { + const CardContent = ( +
+
{icon}
+
+

{title}

+

{description}

+
+
+ ); + + // If you're using client-side routing: + // return {CardContent}; + + // For regular links: + return {CardContent}; + }; + +const CardGrid = ({ children } : any) => { + return
{children}
; +}; + +export { Card, CardGrid }; \ No newline at end of file diff --git a/docs/components/MintWidget.tsx b/docs/components/MintWidget.tsx new file mode 100644 index 0000000000..b697eec4d8 --- /dev/null +++ b/docs/components/MintWidget.tsx @@ -0,0 +1,101 @@ + +import React, {useEffect, useState} from 'react'; + +import {sequence} from '0xsequence' +import { SequenceIndexer } from '@0xsequence/indexer' + +function MintWidget(props: any) { + + sequence.initWallet('AQAAAAAAADi4zbq6FAIlrlW4qD-o_xw0-5A', {defaultNetwork: props.network}) + + const [isMinting, setIsMinting] = useState(false) + const [isMintedInPresent, setIsMintedInPresent] = useState(false) + const [alreadyMinted, setAlreadyMinted] = useState(false) + const [txHash, setTxHash] = useState(null) + + const handleButtonClick = async () => { + try { + const wallet = await sequence.getWallet() + const details = await wallet.connect({app: 'Sequence Docs'}) + + if(details.connected){ + const indexer = new SequenceIndexer(`https://${props.network}-indexer.sequence.app`, 'AQAAAAAAADi4zbq6FAIlrlW4qD-o_xw0-5A') + + // try any contract and account address you'd like :) + const contractAddress = '0x58eb15e3b19545b5c01cbd38dac7497ef924b168' + const accountAddress = details.session?.accountAddress + + // query Sequence Indexer for all nft balances of the account on Polygon + const nftBalances = await indexer.getTokenBalances({ + contractAddress: contractAddress, + accountAddress: accountAddress, + includeMetadata: true + }) + + setIsMinting(true) + let isMintedBoolean = false + + nftBalances.balances.map((token) => { + if(token.tokenID == '0'){ + isMintedBoolean = true + setAlreadyMinted(true) + } + }) + + if(isMintedBoolean){ + setIsMintedInPresent(true) + document.getElementById('mint-button')!.style!.background! = '#3e3e3e' + } else { + const url = 'https://docs-collectible.tpin.workers.dev'; + const data = { + address: details.session?.accountAddress + }; + const res = await fetch(url, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify(data), + }) + setTxHash(await res.text()) + setIsMintedInPresent(true) + document.getElementById('mint-button')!.style!.background! = '#3e3e3e' + } + } + }catch(err){ + console.log('user closed the wallet') + } + }; + + const openWallet = () => { + console.log('opening wallet') + const wallet = sequence.getWallet() + const path = "wallet/collectibles/421614/0x58eB15E3B19545B5c01Cbd38Dac7497ef924B168/0"; + wallet.openWallet(path); + } + return ( +
+
+
+
+ + +
+
+ + { isMintedInPresent || alreadyMinted ? : null } +
+ +
+
+
+ {isMintedInPresent && txHash ?
+ {`arbiscan.io: ${txHash.slice(0,8)}`}... +
:

Create a wallet and mint a free collectible on {props.network.replace('-', ' ')} in seconds

} + +
+
+ ); +} + +export default MintWidget; diff --git a/docs/components/TabGroup.tsx b/docs/components/TabGroup.tsx new file mode 100644 index 0000000000..8a3c4687f1 --- /dev/null +++ b/docs/components/TabGroup.tsx @@ -0,0 +1,47 @@ +import React, { useState } from "react"; + +// Tab component for each tab heading +const Tab = ({ children, onClick, isActive }: any) => { + return ( + + ); +}; + +// TabPanel component +const TabPanel = ({ children, isActive }: any) => { + return isActive ?
{children}
: null; +}; + +// TabGroup component that wraps the Tab and TabPanel components +const TabGroup = ({ children }: any) => { + const [selectedTab, setSelectedTab] = useState(0); + const tabsAndPanels = React.Children.toArray(children); + const tabs = tabsAndPanels.filter((child: any) => child.type === Tab); + const tabPanels = tabsAndPanels.filter((child: any) => child.type === TabPanel); + + return ( +
+
+ {tabs.map((tab: any, index) => + React.cloneElement(tab, { + key: index, + onClick: () => setSelectedTab(index), + isActive: selectedTab === index, + }) + )} +
+
+ {tabPanels.map((panel: any, index) => + React.cloneElement(panel, { + key: index, + isActive: selectedTab === index, + }) + )} +
+
+ ); +}; + +export { TabGroup, TabPanel, Tab }; diff --git a/docs/components/Table.tsx b/docs/components/Table.tsx new file mode 100644 index 0000000000..c93ecb2694 --- /dev/null +++ b/docs/components/Table.tsx @@ -0,0 +1,50 @@ +import React from 'react'; + +const TableColumn = ({ title }: any) => { + return {title}; +}; + +const TableRow = ({ children, index }: any) => { + const backgroundColor = index % 2 === 0 ? '#3c393f' : '#1e1d1f'; + return ( + + {children} + + ); +}; + +const TableCell = ({ content, imgSrc }: any) => { + return ( + +
+ {imgSrc && } + {content} +
+ + ); + }; + +const Table = ({ rows, columns }: any) => { + return ( + + + + {columns.map((column: any) => { + return + })} + + + + {rows.map((rowData: any, index: any) => ( + + + + + + ))} + +
+ ); +}; + +export default Table; diff --git a/docs/components/Video.tsx b/docs/components/Video.tsx new file mode 100644 index 0000000000..e16335bb02 --- /dev/null +++ b/docs/components/Video.tsx @@ -0,0 +1,53 @@ +import React, { useEffect, useRef } from 'react'; + +const Video = (props: any) => { + // Using useRef to get direct references to the DOM elements + const imageRef = useRef(null); + const videoRef = useRef(null); + + useEffect(() => { + // Defining the click event handler function + const handleClick = () => { + if (videoRef.current && imageRef.current) { + videoRef.current.style.display = 'block'; + imageRef.current.style.display = 'none'; + // Modify the video src to start playing + videoRef.current.src += "?autoplay=1"; + } + }; + + // Adding the event listener to the image + const image = imageRef.current; + image.addEventListener('click', handleClick); + + // Cleanup function to remove the event listener + return () => { + image.removeEventListener('click', handleClick); + }; + }, []); // The empty dependency array ensures this effect runs only once after initial render + + return ( +
+ Preview +
+ ); +}; + +export default Video; diff --git a/docs/pages/solutions/builder/contracts.mdx b/docs/pages/solutions/builder/contracts.mdx index 09bf530f18..7ff679f96b 100644 --- a/docs/pages/solutions/builder/contracts.mdx +++ b/docs/pages/solutions/builder/contracts.mdx @@ -1,26 +1,26 @@ ---- -title: Contracts -hide_title: true -slug: /builder/contracts ---- +import Video from "../../../components/Video"; # Contracts in Builder Sequence Builder simplifies smart contract deployment and management with a suite of user-friendly features. Import, deploy, and add contract collaborators to a smart contract in the contracts dashboard and interact directly with your contract. ##### What are my deployment options? + Deployment of contracts with Sequence Builder is simplified through a streamlined process directly within our dashboard. Choose from various contract templates (ERC1155, ERC721, ERC20). The Builder also gives you the option to upload your own custom contracts - saved to your project - and can be deployed directly to a network of your choosing. ##### What contract interactions can I do? + Sequence Builder provides a comprehensive contract dashboard, allowing users to explore and monitor various smart contract activities like transactions, balance, and tokens. Performing read and executing write operations on contracts becomes effortless, making it easy for actions such as minting and collaborations. ## Watch a Contract be deployed with Builder -
- -
+ +