XDEFI Wallet
Searchโ€ฆ
๐Ÿ’ป How to show a list of available Terra wallets?
Starting from version 3.7.0 the terra wallet-provider provides a list of so called "whitelisted" wallets that are recommended and can be suggested to users to install if they are not available in the browser.
Showing the list of available wallets is pretty easy, you just need to take the availableInstallations variable from useWallet() and iterate over it to show the list.
In addition you can combine it with availableConnections to show the already installed wallets together with those that users can install.
Let's take a look at the example.
1
import { useWallet } from "@terra-money/wallet-provider";
2
โ€‹
3
export const InstallSample = () => {
4
const { availableInstallations, availableConnections, connect } = useWallet();
5
โ€‹
6
return (
7
<div>
8
<h1>Available Installations</h1>
9
โ€‹
10
<div>
11
{availableConnections
12
.map(({ type, identifier, name, icon }) => (
13
<button key={identifier} onClick={() => connect(type, identifier)}>
14
<img
15
src={icon}
16
alt={name}
17
style={{ width: "1em", height: "1em" }}
18
/>
19
Connect {name} [{identifier}]
20
</button>
21
))}
22
{availableInstallations.map(({ type, identifier, name, icon, url }) => (
23
<button key={identifier} onClick={() => (window.location.href = url)}>
24
<img
25
src={icon}
26
alt={name}
27
style={{ width: "1em", height: "1em" }}
28
/>
29
Install {name} [{identifier}]
30
</button>
31
))}
32
</div>
33
</div>
34
);
35
};
Copied!
Copy link