Skip to content

Commit 124802d

Browse files
naz3ehnaz3eh
authored
feat(useWallet): Add custom Web3Modal Wallet Providers (#68)
* Add Coinbase and Ledger wallet providers to useWallet hook * code refactor and remove comments * Add custom-Wallet support * Add support for more than 1 custom providers * Add docs * Add params docs * fix merge conflicts in yarn.lock * Add kovan id
1 parent 424a6d7 commit 124802d

File tree

4 files changed

+1098
-54
lines changed

4 files changed

+1098
-54
lines changed

‎packages/hooks/package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,10 @@
3030
"module": "dist/web3-ui-hooks.esm.js",
3131
"types": "dist/web3-ui-hooks.cjs.d.ts",
3232
"dependencies": {
33+
"@rsksmart/rlogin-ledger-provider": "^1.0.1",
3334
"@walletconnect/web3-provider": "^1.6.6",
3435
"ethers": "^5.5.1",
36+
"walletlink": "^2.2.10",
3537
"web3modal": "^1.9.4"
3638
},
3739
"peerDependencies": {
@@ -40,6 +42,7 @@
4042
},
4143
"devDependencies": {
4244
"@babel/core": "^7.12.7",
45+
"@portis/web3": "^4.0.6",
4346
"@storybook/addon-actions": "^6.4.0",
4447
"@storybook/addon-essentials": "^6.4.0",
4548
"@storybook/addon-links": "^6.4.0",
@@ -49,6 +52,7 @@
4952
"@types/node": "^16.11.9",
5053
"@types/react": "^17.0.36",
5154
"@types/react-dom": "^16.9.10",
55+
"authereum": "^0.1.14",
5256
"babel-loader": "^8.2.1",
5357
"husky": "^7.0.0",
5458
"jest": "^26.6.3",

‎packages/hooks/src/Provider.tsx

Lines changed: 64 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { JsonRpcSigner } from '@ethersproject/providers/src.ts/json-rpc-provider';
2-
import React from 'react';
3-
import { ethers } from 'ethers';
2+
import { ledgerProviderOptions } from '@rsksmart/rlogin-ledger-provider';
43
import WalletConnectProvider from '@walletconnect/web3-provider';
5-
import Web3Modal from 'web3modal';
4+
import { ethers } from 'ethers';
5+
import React from 'react';
6+
import WalletLink from 'walletlink';
7+
import Web3Modal, { IProviderOptions } from 'web3modal';
68

79
export interface Web3ContextType {
810
connectWallet?: () => void;
@@ -29,15 +31,33 @@ export interface ProviderProps {
2931
* @type string
3032
*/
3133
infuraId?: string;
34+
/**
35+
* @dev An array of extra Wallet Providers you want to support.
36+
* @type [
37+
[id: string]: {
38+
package: any;
39+
options?: any;
40+
connector?: Connector;
41+
display?: Partial<IProviderDisplay>;
42+
};
43+
]
44+
*/
45+
extraWalletProviders?: [IProviderOptions];
3246
}
3347

3448
/**
3549
* @dev The global provider that handles and stores all the web3 connections. Wrap your entire App with this component.
3650
* @param children Your app.
3751
* @param network The network you want to connect to.
3852
* @param infuraId Your Infura project ID. This is required if you want to support WalletConnect.
53+
* @param extraWalletProviders An array of extra Wallet Providers you want to support.
3954
*/
40-
export const Provider: React.FC<ProviderProps> = ({ children, network, infuraId }) => {
55+
export const Provider: React.FC<ProviderProps> = ({
56+
children,
57+
network,
58+
infuraId,
59+
extraWalletProviders = [],
60+
}) => {
4161
const [signer, setSigner] = React.useState<null | JsonRpcSigner>();
4262
const [provider, setProvider] = React.useState<ethers.providers.Web3Provider | null>();
4363
const [userAddress, setUserAddress] = React.useState<null | string>();
@@ -48,15 +68,49 @@ export const Provider: React.FC<ProviderProps> = ({ children, network, infuraId
4868
const [connection, setConnection] = React.useState<any>();
4969

5070
const connectWallet = React.useCallback(async () => {
51-
const web3Modal = new Web3Modal({
52-
providerOptions: {
53-
walletconnect: {
54-
package: WalletConnectProvider,
55-
options: {
56-
infuraId,
71+
// Coinbase walletLink init
72+
const walletLink = new WalletLink({
73+
appName: 'coinbase',
74+
});
75+
76+
// WalletLink provider
77+
const walletLinkProvider = walletLink.makeWeb3Provider(
78+
`https://eth-mainnet.alchemyapi.io/v2/${infuraId}`,
79+
1
80+
);
81+
82+
const defaulProviderOptions = {
83+
walletconnect: {
84+
package: WalletConnectProvider,
85+
options: {
86+
bridge: 'https://polygon.bridge.walletconnect.org',
87+
infuraId,
88+
rpc: {
89+
1: `https://eth-mainnet.alchemyapi.io/v2/${infuraId}`, // mainnet // For more WalletConnect providers: https://docs.walletconnect.org/quick-start/dapps/web3-provider#required
90+
42: `https://kovan.infura.io/v3/${infuraId}`,
91+
100: 'https://dai.poa.network', // xDai
5792
},
5893
},
5994
},
95+
'custom-walletlink': {
96+
display: {
97+
logo: 'https://play-lh.googleusercontent.com/PjoJoG27miSglVBXoXrxBSLveV6e3EeBPpNY55aiUUBM9Q1RCETKCOqdOkX2ZydqVf0',
98+
name: 'Coinbase',
99+
description: 'Connect to Coinbase Wallet',
100+
},
101+
package: walletLinkProvider,
102+
connector: async (provider, options) => {
103+
await provider.enable();
104+
return provider;
105+
},
106+
},
107+
'custom-ledger': {
108+
...ledgerProviderOptions,
109+
},
110+
};
111+
112+
const web3Modal = new Web3Modal({
113+
providerOptions: Object.assign(defaulProviderOptions, ...extraWalletProviders),
60114
});
61115
setWeb3Modal(web3Modal);
62116
const connection = await web3Modal.connect();

‎packages/hooks/src/stories/ConnectWallet.stories.tsx

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11
import React, { useEffect } from 'react';
22
import { Button } from '@chakra-ui/react';
33
import { NETWORKS, Provider, useWallet } from '..';
4+
import Authereum from 'authereum';
5+
import Portis from '@portis/web3';
46

57
export default {
68
title: 'Hooks/useWallet',
79
};
10+
const portisDappId = '512893f6-6436-44c3-b0dc-6caccab984bb';
811

912
const DefaultUsingProvider = () => {
1013
const { connection, connectWallet, disconnectWallet, connected, correctNetwork } = useWallet();
@@ -33,3 +36,67 @@ export const Default = () => (
3336
<DefaultUsingProvider />
3437
</Provider>
3538
);
39+
40+
export const WithAuthereumProvider = () => (
41+
<Provider
42+
network={NETWORKS.rinkeby}
43+
extraWalletProviders={[
44+
{
45+
authereum: {
46+
package: Authereum,
47+
},
48+
},
49+
]}
50+
>
51+
<DefaultUsingProvider />
52+
</Provider>
53+
);
54+
55+
export const WithPortisProvider = () => (
56+
<Provider
57+
network={NETWORKS.rinkeby}
58+
extraWalletProviders={[
59+
{
60+
portis: {
61+
display: {
62+
logo: 'https://user-images.githubusercontent.com/9419140/128913641-d025bc0c-e059-42de-a57b-422f196867ce.png',
63+
name: 'Portis',
64+
description: 'Connect to Portis App',
65+
},
66+
package: Portis,
67+
options: {
68+
id: portisDappId,
69+
},
70+
},
71+
},
72+
]}
73+
>
74+
<DefaultUsingProvider />
75+
</Provider>
76+
);
77+
78+
export const PortisAuthereumProvider = () => (
79+
<Provider
80+
network={NETWORKS.rinkeby}
81+
extraWalletProviders={[
82+
{
83+
portis: {
84+
display: {
85+
logo: 'https://user-images.githubusercontent.com/9419140/128913641-d025bc0c-e059-42de-a57b-422f196867ce.png',
86+
name: 'Portis',
87+
description: 'Connect to Portis App',
88+
},
89+
package: Portis,
90+
options: {
91+
id: portisDappId,
92+
},
93+
},
94+
authereum: {
95+
package: Authereum,
96+
},
97+
},
98+
]}
99+
>
100+
<DefaultUsingProvider />
101+
</Provider>
102+
);

0 commit comments

Comments
 (0)