Skip to content

Commit

Permalink
Add button to connect IOTA wallet (#3204)
Browse files Browse the repository at this point in the history 
Co-authored-by: marc2332 <mespinsanz@gmail.com>
  • Loading branch information
@Dr-Electron @marc2332
Dr-Electron and marc2332 authored Feb 10, 2025
1 parent 64e8125 commit 1148cc0
Show file tree
Hide file tree
Showing 19 changed files with 108 additions and 567 deletions.
34 changes: 3 additions & 31 deletions docs/content/ts-sdk/dapp-kit/wallet-components/ConnectButton.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<QueryClientProvider client={queryClient}>
<IotaClientProvider networks={NETWORKS}>
<WalletProvider>
<Component />
</WalletProvider>
</IotaClientProvider>
</QueryClientProvider>
);
};
}

const ConnectButtonExample = withProviders(() => {
```tsx live
function ConnectButtonExample() {
return <ConnectButton />;
});

render(<ConnectButtonExample />);
}
```

### Props
Expand Down
68 changes: 6 additions & 62 deletions docs/content/ts-sdk/dapp-kit/wallet-components/ConnectModal.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<QueryClientProvider client={queryClient}>
<IotaClientProvider networks={NETWORKS}>
<WalletProvider>
<Component />
</WalletProvider>
</IotaClientProvider>
</QueryClientProvider>
);
};
}

const ControlledConnectModalExample = withProviders(() => {
```tsx live
function ControlledConnectModalExample() {
const currentAccount = useCurrentAccount();
const [open, setOpen] = useState(false);

Expand All @@ -53,43 +27,15 @@ const ControlledConnectModalExample = withProviders(() => {
onOpenChange={(isOpen) => setOpen(isOpen)}
/>
);
});

render(<ControlledConnectModalExample />);
}
```

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 (
<QueryClientProvider client={queryClient}>
<IotaClientProvider networks={NETWORKS}>
<WalletProvider>
<Component />
</WalletProvider>
</IotaClientProvider>
</QueryClientProvider>
);
};
}

const UncontrolledConnectModalExample = withProviders(() => {
```tsx live
function UncontrolledConnectModalExample() {
const currentAccount = useCurrentAccount();

return (
Expand All @@ -102,9 +48,7 @@ const UncontrolledConnectModalExample = withProviders(() => {
}
/>
);
});

render(<UncontrolledConnectModalExample />);
}
```

Click **Connect** to connect your wallet and see the previous code in action
Expand Down
43 changes: 4 additions & 39 deletions docs/content/ts-sdk/dapp-kit/wallet-hooks/useAccounts.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<object>,
walletProviderProps?: Omit<ComponentProps<typeof WalletProvider>, '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 (
<QueryClientProvider client={queryClient}>
<IotaClientProvider networks={networks}>
<WalletProvider {...walletProviderProps}>
<Component />
</WalletProvider>
</IotaClientProvider>
</QueryClientProvider>
);
};
}

const UseAccountsExample = withProviders(() => {
```ts live
function UseAccountsExample() {
const accounts = useAccounts();

return (
<div style={{ padding: 20 }}>
<ConnectButton />
<h2>Available accounts:</h2>
{accounts.length === 0 && <div>No accounts detected</div>}
<ul>
{accounts.map((account) => (
<li key={account.address}>- {account.address}</li>
<li key={account.address}>{account.address}</li>
))}
</ul>
</div>
);
});

render(<UseAccountsExample/>)
}
```

## Account properties
Expand Down
56 changes: 9 additions & 47 deletions docs/content/ts-sdk/dapp-kit/wallet-hooks/useAutoConnectWallet.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<object>,
walletProviderProps?: Omit<ComponentProps<typeof WalletProvider>, '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 (
<QueryClientProvider client={queryClient}>
<IotaClientProvider networks={networks}>
<WalletProvider {...walletProviderProps}>
<Component />
</WalletProvider>
</IotaClientProvider>
</QueryClientProvider>
);
};
```ts live
function UseAutoConnectionStatusExample() {
const autoConnectionStatus = useAutoConnectWallet();

return (
<div style={{ padding: 20 }}>
<div>Auto-connection status: {autoConnectionStatus}</div>
</div>
);
}

const UseAutoConnectionStatusExample = withProviders(
() => {
const autoConnectionStatus = useAutoConnectWallet();

return (
<div style={{ padding: 20 }}>
<ConnectButton />
<div>Auto-connection status: {autoConnectionStatus}</div>
</div>
);
},
{ autoConnect: true },
);

render(<UseAutoConnectionStatusExample/>)
```

## Auto-connection status properties
Expand Down
41 changes: 3 additions & 38 deletions docs/content/ts-sdk/dapp-kit/wallet-hooks/useConnectWallet.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<object>,
walletProviderProps?: Omit<ComponentProps<typeof WalletProvider>, '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 (
<QueryClientProvider client={queryClient}>
<IotaClientProvider networks={networks}>
<WalletProvider {...walletProviderProps}>
<Component />
</WalletProvider>
</IotaClientProvider>
</QueryClientProvider>
);
};
}

const UseConnectWalletExample = withProviders(() => {
```ts live
function UseConnectWalletExample() {
const wallets = useWallets();
const { mutate: connect } = useConnectWallet();

return (
<div style={{ padding: 20 }}>
<ConnectButton />
<ul>
{wallets.map((wallet) => (
<li key={wallet.name}>
Expand All @@ -67,9 +34,7 @@ const UseConnectWalletExample = withProviders(() => {
</ul>
</div>
);
});

render(<UseConnectWalletExample/>)
}
```

## Connect arguments
Expand Down
41 changes: 3 additions & 38 deletions docs/content/ts-sdk/dapp-kit/wallet-hooks/useCurrentAccount.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<object>,
walletProviderProps?: Omit<ComponentProps<typeof WalletProvider>, '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 (
<QueryClientProvider client={queryClient}>
<IotaClientProvider networks={networks}>
<WalletProvider {...walletProviderProps}>
<Component />
</WalletProvider>
</IotaClientProvider>
</QueryClientProvider>
);
};
}

const UseCurrentAccountExample = withProviders(() => {
```ts live
function UseCurrentAccountExample() {
const account = useCurrentAccount();

return (
<div style={{ padding: 20 }}>
<ConnectButton />
{!account && <div>No account connected</div>}
{account && (
<div>
Expand All @@ -55,9 +22,7 @@ const UseCurrentAccountExample = withProviders(() => {
)}
</div>
);
});

render(<UseCurrentAccountExample/>)
}
```

## Account properties
Expand Down
Loading

0 comments on commit 1148cc0

Please sign in to comment.