.jpg%3Falt%3Dmedia%26token%3Da3336749-63dd-4f9f-92e0-7ec4807f6563)
.jpg%3Falt%3Dmedia%26token%3Da3336749-63dd-4f9f-92e0-7ec4807f6563)
💻 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 the support of Terra Station, all you need is to copy-paste the 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
import React from 'react';
import ReactDOM from 'react-dom';
import { getChainOptions, WalletProvider } from '@terra-money/wallet-provider';
import App from './App';
getChainOptions().then((chainOptions) => {
ReactDOM.render(
<React.StrictMode>
<WalletProvider {...chainOptions}>
<App />
</WalletProvider>
</React.StrictMode>,
document.getElementById('root')
);
});
Here we are initializing the dApp and setting up
WalletProvider which allows 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-providerimport React, { useCallback } from 'react';
import { ConnectType, useWallet } from '@terra-money/wallet-provider';
import './App.css';
const App = () => {
const { connect } = useWallet();
const onConnect = useCallback(() => {
connect(ConnectType.CHROME_EXTENSION)
}, [connect]);
return (
<div className="App">
<h1>Welcome to XDeFi and Terra</h1>
<strong>
Please click button below to connect your XDeFi wallet to Terra!
</strong>
<div>
<button className="Button" onClick={onConnect}>Connect XDeFi Wallet</button>
</div>
</div>
);
}
export default App;
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 requests permission from the user's XDEFI Wallet.
After permission is granted, the user can use other methods provided by the
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 the
window.isTerraExtensionAvailable XDEFI Wallet defines window.xfi.terra provider, which will be undefined if it's not available.