Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add button to connect IOTA wallet #3204

Open
wants to merge 7 commits into
base: develop
Choose a base branch
from
Open

Add button to connect IOTA wallet #3204

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
e98d02c
Add button to connect IOTA wallet
Dr-Electron Oct 7, 2024
c10fa75
chore(docs): cleanup and fix interactive ts examples
Dr-Electron Oct 10, 2024
a35c6c1
Merge branch 'develop' into devx/wallet-connect
Dr-Electron Oct 29, 2024
a674cda
fix(docs): fix connect button style
Dr-Electron Oct 29, 2024
6cd9467
Merge branch 'develop' into devx/wallet-connect
Dr-Electron Dec 9, 2024
e4b2684
Merge branch 'develop' into devx/wallet-connect
Dr-Electron Dec 19, 2024
dd97a4a
Use dark theme
Dr-Electron Dec 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 3 additions & 31 deletions docs/content/references/ts-sdk/dapp-kit/wallet-components/ConnectButton.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,10 @@
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/references/ts-sdk/dapp-kit/wallet-components/ConnectModal.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,34 +5,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 @@ -48,43 +22,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 @@ -97,9 +43,7 @@ const UncontrolledConnectModalExample = withProviders(() => {
}
/>
);
});

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

Click **Connect** to connect your wallet and see the previous code in action
Expand Down
41 changes: 3 additions & 38 deletions docs/content/references/ts-sdk/dapp-kit/wallet-hooks/useAccounts.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,45 +2,12 @@

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 = {
mainnet: { url: getFullnodeUrl('mainnet') },
};

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>
Expand All @@ -50,9 +17,7 @@ const UseAccountsExample = withProviders(() => {
</ul>
</div>
);
});

render(<UseAccountsExample/>)
}
```

## Account properties
Expand Down
56 changes: 9 additions & 47 deletions docs/content/references/ts-sdk/dapp-kit/wallet-hooks/useAutoConnectWallet.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,54 +2,16 @@

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 = {
mainnet: { url: getFullnodeUrl('mainnet') },
};

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/references/ts-sdk/dapp-kit/wallet-hooks/useConnectWallet.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,46 +2,13 @@

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 = {
mainnet: { url: getFullnodeUrl('mainnet') },
};

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 @@ -62,9 +29,7 @@ const UseConnectWalletExample = withProviders(() => {
</ul>
</div>
);
});

render(<UseConnectWalletExample/>)
}
```

## Connect arguments
Expand Down
41 changes: 3 additions & 38 deletions docs/content/references/ts-sdk/dapp-kit/wallet-hooks/useCurrentAccount.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,45 +2,12 @@

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 = {
mainnet: { url: getFullnodeUrl('mainnet') },
};

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 @@ -50,9 +17,7 @@ const UseCurrentAccountExample = withProviders(() => {
)}
</div>
);
});

render(<UseCurrentAccountExample/>)
}
```

## Account properties
Expand Down
Loading
Loading