From 1148cc052f4e8825d9b4fdc2581211a765db986d Mon Sep 17 00:00:00 2001 From: Dr-Electron Date: Mon, 10 Feb 2025 20:41:25 +0100 Subject: [PATCH] Add button to connect IOTA wallet (#3204) Co-authored-by: marc2332 --- .../wallet-components/ConnectButton.mdx | 34 +--------- .../wallet-components/ConnectModal.mdx | 68 ++----------------- .../dapp-kit/wallet-hooks/useAccounts.mdx | 43 ++---------- .../wallet-hooks/useAutoConnectWallet.mdx | 56 +++------------ .../wallet-hooks/useConnectWallet.mdx | 41 +---------- .../wallet-hooks/useCurrentAccount.mdx | 41 +---------- .../wallet-hooks/useCurrentWallet.mdx | 43 ++---------- .../wallet-hooks/useDisconnectWallet.mdx | 41 +---------- .../useReportTransactionEffects.mdx | 38 +---------- .../useSignAndExecuteTransaction.mdx | 41 +---------- .../wallet-hooks/useSignPersonalMessage.mdx | 41 +---------- .../wallet-hooks/useSignTransaction.mdx | 37 +--------- .../wallet-hooks/useSwitchAccount.mdx | 41 +---------- .../dapp-kit/wallet-hooks/useWallets.mdx | 42 ++---------- docs/site/docusaurus.config.js | 4 ++ .../components/WalletConnectButton/index.tsx | 6 ++ .../src/theme/NavbarItem/ComponentTypes.tsx | 12 ++++ docs/site/src/theme/ReactLiveScope/index.tsx | 16 ++--- docs/site/src/theme/Root.tsx | 30 ++++++++ 19 files changed, 108 insertions(+), 567 deletions(-) create mode 100644 docs/site/src/components/WalletConnectButton/index.tsx create mode 100644 docs/site/src/theme/NavbarItem/ComponentTypes.tsx create mode 100644 docs/site/src/theme/Root.tsx diff --git a/docs/content/ts-sdk/dapp-kit/wallet-components/ConnectButton.mdx b/docs/content/ts-sdk/dapp-kit/wallet-components/ConnectButton.mdx index 68a6ec8e034..fe1379e6cc7 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-components/ConnectButton.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-components/ConnectButton.mdx @@ -8,38 +8,10 @@ teams: The `ConnectButton` shows the user a button to connect and disconnect a wallet. It automatically uses the connected state to show a **connect** or **disconnect** button. -```tsx live noInline -const NETWORKS = { - [getDefaultNetwork()]: { url: getFullnodeUrl(getDefaultNetwork()) }, -}; - -function withProviders(Component: () => React.JSX.Element) { - return () => { - - if(typeof window === 'undefined') { - return null - } - - // Work around server-side pre-rendering - const queryClient = useMemo(() => new QueryClient(), []); - - return ( - - - - - - - - ); - }; -} - -const ConnectButtonExample = withProviders(() => { +```tsx live +function ConnectButtonExample() { return ; -}); - -render(); +} ``` ### Props diff --git a/docs/content/ts-sdk/dapp-kit/wallet-components/ConnectModal.mdx b/docs/content/ts-sdk/dapp-kit/wallet-components/ConnectModal.mdx index 40d9de77d0b..347016ed474 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-components/ConnectModal.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-components/ConnectModal.mdx @@ -10,34 +10,8 @@ the dApp. ## Controlled example -```tsx live noInline -const NETWORKS = { - [getDefaultNetwork()]: { url: getFullnodeUrl(getDefaultNetwork()) }, -}; - -function withProviders(Component: () => React.JSX.Element) { - return () => { - - if(typeof window === 'undefined') { - return null - } - - // Work around server-side pre-rendering - const queryClient = useMemo(() => new QueryClient(), []); - - return ( - - - - - - - - ); - }; -} - -const ControlledConnectModalExample = withProviders(() => { +```tsx live +function ControlledConnectModalExample() { const currentAccount = useCurrentAccount(); const [open, setOpen] = useState(false); @@ -53,43 +27,15 @@ const ControlledConnectModalExample = withProviders(() => { onOpenChange={(isOpen) => setOpen(isOpen)} /> ); -}); - -render(); +} ``` Click **Connect** to connect your wallet and see the previous code in action ## Uncontrolled example -```tsx live noInline -const NETWORKS = { - [getDefaultNetwork()]: { url: getFullnodeUrl(getDefaultNetwork()) }, -}; - -function withProviders(Component: () => React.JSX.Element) { - return () => { - - if(typeof window === 'undefined') { - return null - } - - // Work around server-side pre-rendering - const queryClient = useMemo(() => new QueryClient(), []); - - return ( - - - - - - - - ); - }; -} - -const UncontrolledConnectModalExample = withProviders(() => { +```tsx live +function UncontrolledConnectModalExample() { const currentAccount = useCurrentAccount(); return ( @@ -102,9 +48,7 @@ const UncontrolledConnectModalExample = withProviders(() => { } /> ); -}); - -render(); +} ``` Click **Connect** to connect your wallet and see the previous code in action diff --git a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useAccounts.mdx b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useAccounts.mdx index 4f2e22cef93..054279f67da 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useAccounts.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useAccounts.mdx @@ -7,57 +7,22 @@ teams: The `useAccounts` hook retrieves a list of connected accounts the dApp authorizes. -```ts live noInline -function withProviders( - Component: React.FunctionComponent, - walletProviderProps?: Omit, 'children'>, -) { - // Work around server-side pre-rendering - const queryClient = new QueryClient(); - const networks = { - testnet: { url: getFullnodeUrl('testnet') }, - }; - - return () => { - const [shouldRender, setShouldRender] = useState(false); - useEffect(() => { - setShouldRender(true); - }, [setShouldRender]); - - if (!shouldRender) { - return null; - } - - return ( - - - - - - - - ); - }; -} - -const UseAccountsExample = withProviders(() => { +```ts live +function UseAccountsExample() { const accounts = useAccounts(); return (
-

Available accounts:

{accounts.length === 0 &&
No accounts detected
}
    {accounts.map((account) => ( -
  • - {account.address}
    • +
  • {account.address}
    • ))}
); -}); - -render() +} ``` ## Account properties diff --git a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useAutoConnectWallet.mdx b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useAutoConnectWallet.mdx index 5f9d921f54b..35dd8b7dc9b 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useAutoConnectWallet.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useAutoConnectWallet.mdx @@ -7,54 +7,16 @@ teams: The `useAutoConnectWallet` hook retrieves the status for the initial wallet auto-connection process. -```ts live noInline -function withProviders( - Component: React.FunctionComponent, - walletProviderProps?: Omit, 'children'>, -) { - // Work around server-side pre-rendering - const queryClient = new QueryClient(); - const networks = { - testnet: { url: getFullnodeUrl('testnet') }, - }; - - return () => { - const [shouldRender, setShouldRender] = useState(false); - useEffect(() => { - setShouldRender(true); - }, [setShouldRender]); - - if (!shouldRender) { - return null; - } - - return ( - - - - - - - - ); - }; +```ts live +function UseAutoConnectionStatusExample() { + const autoConnectionStatus = useAutoConnectWallet(); + + return ( +
+
Auto-connection status: {autoConnectionStatus}
+
+ ); } - -const UseAutoConnectionStatusExample = withProviders( - () => { - const autoConnectionStatus = useAutoConnectWallet(); - - return ( -
- -
Auto-connection status: {autoConnectionStatus}
-
- ); - }, - { autoConnect: true }, -); - -render() ``` ## Auto-connection status properties diff --git a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useConnectWallet.mdx b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useConnectWallet.mdx index e07be972f81..a498ac75745 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useConnectWallet.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useConnectWallet.mdx @@ -7,46 +7,13 @@ teams: The `useConnectWallet` hook is a mutation hook for establishing a connection to a specific wallet. -```ts live noInline -function withProviders( - Component: React.FunctionComponent, - walletProviderProps?: Omit, 'children'>, -) { - // Work around server-side pre-rendering - const queryClient = new QueryClient(); - const networks = { - testnet: { url: getFullnodeUrl('testnet') }, - }; - - return () => { - const [shouldRender, setShouldRender] = useState(false); - useEffect(() => { - setShouldRender(true); - }, [setShouldRender]); - - if (!shouldRender) { - return null; - } - - return ( - - - - - - - - ); - }; -} - -const UseConnectWalletExample = withProviders(() => { +```ts live +function UseConnectWalletExample() { const wallets = useWallets(); const { mutate: connect } = useConnectWallet(); return (
-
    {wallets.map((wallet) => (
  • @@ -67,9 +34,7 @@ const UseConnectWalletExample = withProviders(() => {
); -}); - -render() +} ``` ## Connect arguments diff --git a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useCurrentAccount.mdx b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useCurrentAccount.mdx index 2b410c0ba81..fa31c3e975d 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useCurrentAccount.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useCurrentAccount.mdx @@ -7,45 +7,12 @@ teams: The `useCurrentAccount` hook retrieves the wallet account that is currently selected, if one exists. -```ts live noInline -function withProviders( - Component: React.FunctionComponent, - walletProviderProps?: Omit, 'children'>, -) { - // Work around server-side pre-rendering - const queryClient = new QueryClient(); - const networks = { - testnet: { url: getFullnodeUrl('devnet') }, - }; - - return () => { - const [shouldRender, setShouldRender] = useState(false); - useEffect(() => { - setShouldRender(true); - }, [setShouldRender]); - - if (!shouldRender) { - return null; - } - - return ( - - - - - - - - ); - }; -} - -const UseCurrentAccountExample = withProviders(() => { +```ts live +function UseCurrentAccountExample() { const account = useCurrentAccount(); return (
- {!account &&
No account connected
} {account && (
@@ -55,9 +22,7 @@ const UseCurrentAccountExample = withProviders(() => { )}
); -}); - -render() +} ``` ## Account properties diff --git a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useCurrentWallet.mdx b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useCurrentWallet.mdx index 7cb305fe398..d84de29e216 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useCurrentWallet.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useCurrentWallet.mdx @@ -8,45 +8,12 @@ teams: The `useCurrentWallet` hook retrieves the wallet that is currently connected to the dApp, if one exists. -```ts live noInline -function withProviders( - Component: React.FunctionComponent, - walletProviderProps?: Omit, 'children'>, -) { - // Work around server-side pre-rendering - const queryClient = new QueryClient(); - const networks = { - testnet: { url: getFullnodeUrl('testnet') }, - }; - - return () => { - const [shouldRender, setShouldRender] = useState(false); - useEffect(() => { - setShouldRender(true); - }, [setShouldRender]); - - if (!shouldRender) { - return null; - } - - return ( - - - - - - - - ); - }; -} - -const UseCurrentWalletExample = withProviders(() => { +```ts live +function UseCurrentWalletExample() { const { currentWallet, connectionStatus } = useCurrentWallet(); return (
- {connectionStatus === 'connected' ? (

Current wallet:

@@ -55,7 +22,7 @@ const UseCurrentWalletExample = withProviders(() => { Accounts:
    {currentWallet.accounts.map((account) => ( -
  • - {account.address}
    • +
  • {account.address}
    • ))}
@@ -65,9 +32,7 @@ const UseCurrentWalletExample = withProviders(() => { )}
); -}); - -render() +} ``` ## Wallet properties diff --git a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useDisconnectWallet.mdx b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useDisconnectWallet.mdx index 91b14e3af0a..32fb028cd1d 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useDisconnectWallet.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useDisconnectWallet.mdx @@ -8,52 +8,17 @@ teams: The `useConnectWallet` hook is a mutation hook for disconnecting from an active wallet connection, if currently connected. -```ts live noInline -function withProviders( - Component: React.FunctionComponent, - walletProviderProps?: Omit, 'children'>, -) { - // Work around server-side pre-rendering - const queryClient = new QueryClient(); - const networks = { - testnet: { url: getFullnodeUrl('testnet') }, - }; - - return () => { - const [shouldRender, setShouldRender] = useState(false); - useEffect(() => { - setShouldRender(true); - }, [setShouldRender]); - - if (!shouldRender) { - return null; - } - - return ( - - - - - - - - ); - }; -} - -const UseDisconnectWalletExample = withProviders(() => { +```ts live +function UseDisconnectWalletExample() { const { mutate: disconnect } = useDisconnectWallet(); return (
-
); -}); - -render() +} ``` ## Arguments diff --git a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useReportTransactionEffects.mdx b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useReportTransactionEffects.mdx index 5e2690acec5..ff0f069164e 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useReportTransactionEffects.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useReportTransactionEffects.mdx @@ -10,48 +10,14 @@ connected wallet. The `useSignAndExecuteTransaction` hook automatically reports `useSignTransaction` hook provides a `reportTransactionEffects` callback to report effects manually, so this hook is only needed when using a non-standard flow for executing transactions. -```ts live noInline -function withProviders( - Component: React.FunctionComponent, - walletProviderProps?: Omit, 'children'>, -) { - // Work around server-side pre-rendering - const queryClient = new QueryClient(); - const networks = { - testnet: { url: getFullnodeUrl('testnet') }, - }; - - return () => { - const [shouldRender, setShouldRender] = useState(false); - useEffect(() => { - setShouldRender(true); - }, [setShouldRender]); - - if (!shouldRender) { - return null; - } - - return ( - - - - - - - - ); - }; -} - +```ts live function UseReportTransactionEffectsExample() { const { mutateAsync: reportTransactionEffects } = useReportTransactionEffects(); const [signature, setSignature] = useState(''); - const client = useIotaClient(); const currentAccount = useCurrentAccount(); return (
- {currentAccount && ( <>
@@ -70,8 +36,6 @@ function UseReportTransactionEffectsExample() {
); } - -render() ``` ## Arguments diff --git a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSignAndExecuteTransaction.mdx b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSignAndExecuteTransaction.mdx index 8177087858a..abf0eab3e64 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSignAndExecuteTransaction.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSignAndExecuteTransaction.mdx @@ -8,47 +8,14 @@ teams: Use the `useSignAndExecuteTransaction` hook to prompt the user to sign and execute a transaction with their wallet. -```ts live noInline -function withProviders( - Component: React.FunctionComponent, - walletProviderProps?: Omit, 'children'>, -) { - // Work around server-side pre-rendering - const queryClient = new QueryClient(); - const networks = { - mainnet: { url: getFullnodeUrl('testnet') }, - }; - - return () => { - const [shouldRender, setShouldRender] = useState(false); - useEffect(() => { - setShouldRender(true); - }, [setShouldRender]); - - if (!shouldRender) { - return null; - } - - return ( - - - - - - - - ); - }; -} - -const UseSignAndExecuteTransactionExample = withProviders(() => { +```ts live +function UseSignAndExecuteTransactionExample() { const { mutate: signAndExecuteTransaction } = useSignAndExecuteTransaction(); const [digest, setDigest] = useState(''); const currentAccount = useCurrentAccount(); return (
- {currentAccount && ( <>
@@ -75,9 +42,7 @@ const UseSignAndExecuteTransactionExample = withProviders(() => { )}
); -}); - -render() +} ``` ## Return additional data, or execute through GraphQL diff --git a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSignPersonalMessage.mdx b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSignPersonalMessage.mdx index 2aeab55073f..0c8bf1d0299 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSignPersonalMessage.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSignPersonalMessage.mdx @@ -7,40 +7,8 @@ teams: Use the `useSignPersonalMessage` hook to prompt the user to sign a message with their wallet. -```ts live noInline -function withProviders( - Component: React.FunctionComponent, - walletProviderProps?: Omit, 'children'>, -) { - // Work around server-side pre-rendering - const queryClient = new QueryClient(); - const networks = { - testnet: { url: getFullnodeUrl('testnet') }, - }; - - return () => { - const [shouldRender, setShouldRender] = useState(false); - useEffect(() => { - setShouldRender(true); - }, [setShouldRender]); - - if (!shouldRender) { - return null; - } - - return ( - - - - - - - - ); - }; -} - -const UseSignPersonalMessageExample = withProviders(() => { +```ts live +function UseSignPersonalMessageExample() { const { mutate: signPersonalMessage } = useSignPersonalMessage(); const [message, setMessage] = useState('hello, World!'); const [signature, setSignature] = useState(''); @@ -48,7 +16,6 @@ const UseSignPersonalMessageExample = withProviders(() => { return (
- {currentAccount && ( <>
@@ -83,9 +50,7 @@ const UseSignPersonalMessageExample = withProviders(() => { )}
); -}); - -render() +} ``` ## Arguments diff --git a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSignTransaction.mdx b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSignTransaction.mdx index 06fdc6a65e1..717a3a02086 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSignTransaction.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSignTransaction.mdx @@ -7,39 +7,7 @@ teams: Use the `useSignTransaction` hook to prompt the user to sign a transaction with their wallet. -```ts live noInline -function withProviders( - Component: React.FunctionComponent, - walletProviderProps?: Omit, 'children'>, -) { - // Work around server-side pre-rendering - const queryClient = new QueryClient(); - const networks = { - mainnet: { url: getFullnodeUrl('mainnet') }, - }; - - return () => { - const [shouldRender, setShouldRender] = useState(false); - useEffect(() => { - setShouldRender(true); - }, [setShouldRender]); - - if (!shouldRender) { - return null; - } - - return ( - - - - - - - - ); - }; -} - +```ts live function UseSignTransactionExample() { const { mutateAsync: signTransaction } = useSignTransaction(); const [signature, setSignature] = useState(''); @@ -48,7 +16,6 @@ function UseSignTransactionExample() { return (
- {currentAccount && ( <>
@@ -81,10 +48,8 @@ function UseSignTransactionExample() {
); } -render() ``` - ## Arguments - `transaction`: The transaction to sign. diff --git a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSwitchAccount.mdx b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSwitchAccount.mdx index c688842cce1..a8997d53edb 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSwitchAccount.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useSwitchAccount.mdx @@ -7,46 +7,13 @@ teams: The `useSwitchAccount` hook is a mutation hook for establishing a connection to a specific wallet. -```ts live noInline -function withProviders( - Component: React.FunctionComponent, - walletProviderProps?: Omit, 'children'>, -) { - // Work around server-side pre-rendering - const queryClient = new QueryClient(); - const networks = { - testnet: { url: getFullnodeUrl('testnet') }, - }; - - return () => { - const [shouldRender, setShouldRender] = useState(false); - useEffect(() => { - setShouldRender(true); - }, [setShouldRender]); - - if (!shouldRender) { - return null; - } - - return ( - - - - - - - - ); - }; -} - -const UseSwitchAccountExample = withProviders(() => { +```ts live +function UseSwitchAccountExample() { const { mutate: switchAccount } = useSwitchAccount(); const accounts = useAccounts(); return (
-
    {accounts.map((account) => (
  • @@ -68,9 +35,7 @@ const UseSwitchAccountExample = withProviders(() => {
); -}); - -render() +} ``` ## Arguments diff --git a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useWallets.mdx b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useWallets.mdx index 2f577001efa..03b7d07f792 100644 --- a/docs/content/ts-sdk/dapp-kit/wallet-hooks/useWallets.mdx +++ b/docs/content/ts-sdk/dapp-kit/wallet-hooks/useWallets.mdx @@ -8,40 +8,8 @@ teams: The `useWallets` hook returns an array of wallets that are available to the user. The wallets are sorted by their priority, with the highest priority wallet being the first in the array. -```ts live noInline -function withProviders( - Component: React.FunctionComponent, - walletProviderProps?: Omit, 'children'>, -) { - // Work around server-side pre-rendering - const queryClient = new QueryClient(); - const networks = { - testnet: { url: getFullnodeUrl('testnet') }, - }; - - return () => { - const [shouldRender, setShouldRender] = useState(false); - useEffect(() => { - setShouldRender(true); - }, [setShouldRender]); - - if (!shouldRender) { - return null; - } - - return ( - - - - - - - - ); - }; -} - -const UseWalletsExample = withProviders(() => { +```ts live +function UseWalletsExample() { const wallets = useWallets(); return ( @@ -50,14 +18,12 @@ const UseWalletsExample = withProviders(() => { {wallets.length === 0 &&
No wallets installed
}
    {wallets.map((wallet) => ( -
  • - {wallet.name}
    • +
  • {wallet.name}
    • ))}
); -}); - -render() +} ``` ## Wallet properties diff --git a/docs/site/docusaurus.config.js b/docs/site/docusaurus.config.js index 580b3e7fad7..cf8e459c46c 100644 --- a/docs/site/docusaurus.config.js +++ b/docs/site/docusaurus.config.js @@ -269,6 +269,10 @@ const config = { label: "IOTA Identity", to: "iota-identity", }, + { + type: 'custom-WalletConnectButton', + position: 'right', + } ], }, footer: { diff --git a/docs/site/src/components/WalletConnectButton/index.tsx b/docs/site/src/components/WalletConnectButton/index.tsx new file mode 100644 index 00000000000..a102ca1428d --- /dev/null +++ b/docs/site/src/components/WalletConnectButton/index.tsx @@ -0,0 +1,6 @@ +import React from 'react'; +import { ConnectButton } from '@iota/dapp-kit'; + +export default function WalletConnectButton(): JSX.Element { + return ; +} diff --git a/docs/site/src/theme/NavbarItem/ComponentTypes.tsx b/docs/site/src/theme/NavbarItem/ComponentTypes.tsx new file mode 100644 index 00000000000..561ddcbcb05 --- /dev/null +++ b/docs/site/src/theme/NavbarItem/ComponentTypes.tsx @@ -0,0 +1,12 @@ +/** + * SWIZZLED VERSION: 3.5.2 + * REASONS: + * - Extent ComponentTypes with custom-WalletConnectButton + */ +import ComponentTypes from '@theme-original/NavbarItem/ComponentTypes'; +import WalletConnectButton from '@site/src/components/WalletConnectButton'; + +export default { + ...ComponentTypes, + 'custom-WalletConnectButton': WalletConnectButton, +}; diff --git a/docs/site/src/theme/ReactLiveScope/index.tsx b/docs/site/src/theme/ReactLiveScope/index.tsx index ab8679ad1d4..dc117af6079 100644 --- a/docs/site/src/theme/ReactLiveScope/index.tsx +++ b/docs/site/src/theme/ReactLiveScope/index.tsx @@ -7,48 +7,44 @@ import React from 'react'; import { ConnectButton, ConnectModal, - IotaClientProvider, useAccounts, useAutoConnectWallet, useConnectWallet, useCurrentAccount, useCurrentWallet, useDisconnectWallet, + useIotaClient, useReportTransactionEffects, useSignAndExecuteTransaction, useSignPersonalMessage, useSignTransaction, useSwitchAccount, useWallets, - WalletProvider, } from '@iota/dapp-kit'; -import { getDefaultNetwork, getFullnodeUrl } from '@iota/iota-sdk/client'; -import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { Transaction } from '@iota/iota-sdk/transactions'; // Add react-live imports you need here const ReactLiveScope = { React, ...React, + ConnectButton, ConnectModal, - IotaClientProvider, useAccounts, useAutoConnectWallet, useConnectWallet, useCurrentAccount, useCurrentWallet, useDisconnectWallet, + useIotaClient, + useReportTransactionEffects, useSignAndExecuteTransaction, useSignPersonalMessage, useSignTransaction, useSwitchAccount, useWallets, - WalletProvider, - getDefaultNetwork, - getFullnodeUrl, - QueryClient, - QueryClientProvider, + Transaction, }; export default ReactLiveScope; diff --git a/docs/site/src/theme/Root.tsx b/docs/site/src/theme/Root.tsx new file mode 100644 index 00000000000..ebbd8a77c55 --- /dev/null +++ b/docs/site/src/theme/Root.tsx @@ -0,0 +1,30 @@ +/** + * SWIZZLED VERSION: 3.5.2 + * REASONS: + * - Wrap the docs with QueryClientProvider, IotaClientProvider and WalletProvider + */ +import React, { useMemo } from 'react'; +import { darkTheme, IotaClientProvider, WalletProvider } from '@iota/dapp-kit'; +import { getDefaultNetwork, getFullnodeUrl } from '@iota/iota-sdk/client'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; + +import '@iota/dapp-kit/dist/index.css'; + +const NETWORKS = { + [getDefaultNetwork()]: { url: getFullnodeUrl(getDefaultNetwork()) }, +}; + +export default function Root({ children }) { + // Work around server-side pre-rendering + const queryClient = useMemo(() => new QueryClient(), []); + + return ( + + + + {children} + + + + ); +} \ No newline at end of file