XDEFI Wallet
Search…
Integrate XDEFI Wallet on a Terra dApp
Integrate XDEFI Wallet on a Terra decentralized application
By nature, XDEFI Wallet simulates Terra Station, so if you already have support of Terra Station, all you need is to copy-paste same components used to connect to Terra Station and change labels accordingly (XDEFI Wallet).
If you are integrating XDEFI Wallet from scratch, here is an example
1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import { getChainOptions, WalletProvider } from '@terra-money/wallet-provider';
4
5
import App from './App';
6
7
getChainOptions().then((chainOptions) => {
8
ReactDOM.render(
9
<React.StrictMode>
10
<WalletProvider {...chainOptions}>
11
<App />
12
</WalletProvider>
13
</React.StrictMode>,
14
document.getElementById('root')
15
);
16
});
Copied!
Here we are initializing the dApp and setting up WalletProvider which allow the dApp to connect and interact with XDEFI Wallet. To learn more about wallet-provider, please check out the official repository : https://github.com/terra-money/wallet-provider
1
import React, { useCallback } from 'react';
2
import { ConnectType, useWallet } from '@terra-money/wallet-provider';
3
4
import './App.css';
5
6
const App = () => {
7
const { connect } = useWallet();
8
9
const onConnect = useCallback(() => {
10
connect(ConnectType.CHROME_EXTENSION)
11
}, [connect]);
12
13
return (
14
<div className="App">
15
<h1>Welcome to XDeFi and Terra</h1>
16
<strong>
17
Please click button below to connect your XDeFi wallet to Terra!
18
</strong>
19
20
<div>
21
<button className="Button" onClick={onConnect}>Connect XDeFi Wallet</button>
22
</div>
23
</div>
24
);
25
}
26
27
export default App;
Copied!
The second part of the code is self-explanatory, we will just describe the user flow.​
After integration, when a user clicks on Connect XDEFI Wallet, the pop-up shows up and request permission from the XDEFI Wallet of the user. After permission is granted, the use can use other methods provided by useWallet hook to interact with his XDEFI Wallet and sign transactions.
NOTE : In case you need to verify if XDEFI Wallet is available, in addition to window.isTerraExtensionAvailable XDEFI Wallet defines window.xfi.terra provider, which will be undefined in case it's not available.
Last modified 1mo ago
Copy link