https://github.com/nixjs/wallet-connector
This SDK uses the web3 standard to enable developers to easily connect to a wide range of crypto wallets, such as Binance Chain Wallet, MetaMask, ConnectWallet, and Coin98. More wallets will come in the near future.
https://github.com/nixjs/wallet-connector
binance-wallet dapp metamask metamask-wallet react react-wallet typescript wallet-connect wallet-connector wallet-dapp web3
Last synced: 8 months ago
JSON representation
This SDK uses the web3 standard to enable developers to easily connect to a wide range of crypto wallets, such as Binance Chain Wallet, MetaMask, ConnectWallet, and Coin98. More wallets will come in the near future.
- Host: GitHub
- URL: https://github.com/nixjs/wallet-connector
- Owner: nixjs
- Created: 2022-07-02T06:25:09.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-11-09T04:31:04.000Z (almost 3 years ago)
- Last Synced: 2025-03-05T17:51:14.311Z (8 months ago)
- Topics: binance-wallet, dapp, metamask, metamask-wallet, react, react-wallet, typescript, wallet-connect, wallet-connector, wallet-dapp, web3
- Language: TypeScript
- Homepage: https://wallet-connector.vercel.app/
- Size: 89.8 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Wallet Connector @nixjs23n6/wallet-connector
A simple, maximally extensible, dependency minimized framework for building modern Ethereum and other dApps.
## @nixjs23n6/wc-core
### Install
Install these dependencies:
`yarn add @nixjs23n6/wc-core`
### Setup & Usage
```javascript
import React, { FC, useMemo, useState } from 'react';
import {
WALLET_TYPE,
WalletProvider,
BinanceProvider,
MetaMaskProvider
} from '@nixjs23n6/wc-core'
export const Wallet: FC = () => {
const [state, setState] = useState({
walletType: WALLET_TYPE.META_MASK,
loading: false
})
const fetchProviderInstance = useCallback(async (wt: WALLET_TYPE) => {
try {
provider = new WalletProvider([BinanceProvider, MetaMaskProvider], {
logger: {
debug: true,
},
})
provider.connect(wt)
provider.instance.connect()
} catch (error) {
console.log(error)
}
}, [])
useEffect(() => {
fetchProviderInstance(state.walletType)
}, [state.walletType, fetchProviderInstance])
useEffect(() => {
if (provider.instance) {
provider.instance.getChainId().then((res: any) => {
console.log('getChainId', res)
})
provider.instance.getNetwork().then((res: any) => {
console.log('getNetwork', res)
})
provider.instance.getGasPrice().then((res: any) => {
console.log('getGasPrice', res)
})
provider.instance.getAddress().then((res: any) => {
console.log('getAddress', res)
})
provider.instance.getBalance().then((res: any) => {
console.log('getBalance', res)
})
provider.instance.getTokenDecimal('0xf76205FB45B1c688EEA4423ab5fE386E6c7F78C8').then((res: any) => {
console.log('getTokenDecimal', res)
})
provider.instance.getTokenBalance('0xf76205FB45B1c688EEA4423ab5fE386E6c7F78C8', 18).then((res: any) => {
console.log('getTokenBalance', res)
})
provider.instance.getTransaction('0x3aafdd0dc30dc1965f22d3bdc5d3e6f15a88efd6f83dbbe613ddca5a0cb81d49').then((res: any) => {
console.log('getTransaction', res)
})
provider.instance.getTransactionReceipt('0x3aafdd0dc30dc1965f22d3bdc5d3e6f15a88efd6f83dbbe613ddca5a0cb81d49').then((res: any) => {
console.log('getTransactionReceipt', res)
})
provider.instance.onAccountChanged &&
provider.instance.onAccountChanged((data: any) => {
console.log('onAccountChanged')
console.log(data)
})
provider.instance.onDisconnect &&
provider.instance.onDisconnect((data: any) => {
console.log('onDisconnect')
console.log(data)
})
}
}, [provider, state.walletType])
return
};
```
## @nixjs23n6/wc-react
### Install
Install these dependencies:
`yarn add @nixjs23n6/wc-core @nixjs23n6/wc-react`
### Setup
```javascript
import React, { FC, useMemo } from 'react';
import {
WALLET_TYPE,
MetaMaskProvider,
WalletConnect,
BinanceProvider,
RPCS_DEFAULT,
MOBILE_LINKS_DEFAULT,
} from '@nixjs23n6/wc-core'
import { WalletConnectionProvider } from '@nixjs23n6/wc-react'
export const Wallet: FC = () => {
const wallets = useMemo(() => [MetaMaskProvider, BinanceProvider, WalletConnect], [])
return (
{ /* Your app's components go here, nested within the context providers. */ }
);
};
```
### Usage
```javascript
import React, { FC, useCallback } from 'react';
import { WalletConnectionProvider, useWallet } from '@nixjs23n6/wc-react'
export const WalletComponent: FC = () => {
const { instance, onConnect, providerConnected, instanceConnected } = useWallet()
console.log('providerConnected', providerConnected)
console.log('instanceConnected', instanceConnected)
useEffect(() => {
if (providerConnected) onConnect(WALLET_TYPE.META_MASK)
}, [providerConnected, onConnect])
useEffect(() => {
if (instance) {
instance.getChainId().then((res: any) => {
console.log('getChainId', res)
})
}
}, [instance])
useEffect(() => {
if (instance) {
instance.getChainId().then((res: any) => {
console.log('getChainId', res)
})
instance.getNetwork().then((res: any) => {
console.log('getNetwork', res)
})
instance.getGasPrice().then((res: any) => {
console.log('getGasPrice', res)
})
instance.getAddress().then((res: any) => {
console.log('getAddress', res)
})
instance.getBalance().then((res: any) => {
console.log('getBalance', res)
})
instance.getTokenDecimal('0xf76205FB45B1c688EEA4423ab5fE386E6c7F78C8').then((res: any) => {
console.log('getTokenDecimal', res)
})
instance.getTokenBalance('0xf76205FB45B1c688EEA4423ab5fE386E6c7F78C8', 18).then((res: any) => {
console.log('getTokenBalance', res)
})
instance.getTransaction('0x3aafdd0dc30dc1965f22d3bdc5d3e6f15a88efd6f83dbbe613ddca5a0cb81d49').then((res: any) => {
console.log('getTransaction', res)
})
instance.getTransactionReceipt('0x3aafdd0dc30dc1965f22d3bdc5d3e6f15a88efd6f83dbbe613ddca5a0cb81d49').then((res: any) => {
console.log('getTransactionReceipt', res)
})
instance.onAccountChanged &&
instance.onAccountChanged((data: any) => {
console.log('onAccountChanged')
console.log(data)
})
instance.onDisconnect &&
instance.onDisconnect((data: any) => {
console.log('onDisconnect')
console.log(data)
})
}
}, [instance])
return (
{WALLET_TYPE.META_MASK}
{ /* Your app's components go here, nested within the context providers. */ }
)
};
```