1.1.28 • Published 10 months ago
@gotabit/react v1.1.28
React
React provider and hooks for Gotabit.
Connect wallet with React
import { GotabitProvider, useGotabitReact } from '@gotabit/react'
import { initializeConnectorWrapper } from '@gotabit/react'
import { KeplrWallet } from '@gotabit/wallet-keplr'
import { Walletconnect } from '@gotabit/wallet-walletconnect'
export const [walletconnectConnector, walletconnectHooks] =
initializeConnectorWrapper(() =>
Walletconnect.init('test', {
logger: 'debug',
relayUrl: 'wss://relay.gotabit.dev',
projectId: '2c921904d8ebc91517cd11c1cc4a267f',
metadata: {
name: 'Gotabit SDK WalletConnect test',
description: 'Gotabit SDK WalletConnect test',
url: 'https://sdk.gotabit.dev',
icons: [`https:\/\/res.gotabit.io\/svg\/icon.svg`],
},
}),
)
export const [keplrConnector, keplrHooks] = initializeConnectorWrapper(() =>
KeplrWallet.init('test'),
)
const {
useAccount: useKeplrAccount,
useActive: useKeplrActive,
useWallet: useKeplrWallet,
useDisconnect: useKeplrDisconnect,
} = keplrHooks
const {
useAccount: useWalletconnectAccount,
useActive: useWalletconnectActive,
useDisconnect: useWalletconnectDisconnect,
} = walletconnectHooks
function Card({ children }: { children: React.ReactNode }) {
return (
<div
style={{
padding: '16px',
margin: '24px',
border: '1px solid #000',
}}
>
{children}
</div>
)
}
function KeplrCard() {
const active = useKeplrActive()
const account = useKeplrAccount()
const wallet = useKeplrWallet()
const disconnect = useKeplrDisconnect()
const handleSwitch = (chain: 'main' | 'test') => {
wallet?.switchChain(chain)
}
return (
<Card>
<button onClick={keplrConnector}>connect keplr</button>
<button onClick={disconnect}>disconnect</button>
<p>active: {active ? 'true' : 'false'}</p>
<p>account: {account}</p>
<button onClick={() => handleSwitch('test')}>
Switch Keplr wallet to test
</button>
<button onClick={() => handleSwitch('main')}>
Switch Keplr wallet to main
</button>
</Card>
)
}
function WalletConnectCard() {
const active = useWalletconnectActive()
const account = useWalletconnectAccount()
const disconnect = useWalletconnectDisconnect()
return (
<Card>
<button onClick={walletconnectConnector}>connect walletconnect</button>
<p>active: {active ? 'true' : 'false'}</p>
<p>account: {account}</p>
<button onClick={disconnect}>disconnect</button>
</Card>
)
}
function SelectedState() {
const { active, accounts } = useGotabitReact()
return (
<Card>
<button>Current state</button>
<p>active: {active ? 'true' : 'false'}</p>
<p>account: {accounts?.[0]}</p>
</Card>
)
}
function App() {
return (
<GotabitProvider>
<SelectedState />
<KeplrCard />
<WalletConnectCard />
</GotabitProvider>
)
}
Credits
Code built with the help of these related projects:
1.1.28
10 months ago
1.1.27
10 months ago
1.1.25
1 year ago
1.1.24
1 year ago
1.1.1
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.12
2 years ago
1.1.11
2 years ago
1.1.10
2 years ago
1.1.16
2 years ago
1.1.15
2 years ago
1.1.14
2 years ago
1.1.13
2 years ago
1.1.19
2 years ago
1.1.18
2 years ago
1.1.17
2 years ago
1.1.23
1 year ago
1.1.22
1 year ago
1.1.21
1 year ago
1.1.20
2 years ago
1.1.0
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
0.1.0
2 years ago