tech-web3-connector v1.3.5
Connector for web3 wallets
npm i tech-web3-connector
GitHub Pages
https://techbandorg.github.io/web3ConnectorNPM/
Example Code
https://github.com/techbandorg/web3ConnectorNPM/tree/example-web3Connect
Usage
import { ConnectButton, setStyles , useSignMessage } from "tech-web3-connector"
- returns balance and address of user wallet , message signing function
For styling ConnectButton
- for styling use style extension styled-components.
setStyles
- hook for classnames styling a ModalWallet
useSignMessage
- takes a string , returns boolean if the signature took place
Supported Wallets
MetaMask
CoinBase
Fortmatic
Portis
WalletConnect ( Trust , SafePal ...)
use case setStyles
ConnectButton
useSignMessage
// App.jsx
import { ConnectButton, setStyles , useSignMessage } from "tech-web3-connector";
const customStyles = {
// styled modal
modalBackdrop: {},
modalContainer: {},
modalBtnClose: {},
modalConnectorsContainer: { "background-color": "color" }, // example code
modalConnectorsItem: {},
modalBtnProvider: {},
modalNameWallet: {color: "color"}, // example code
// styled Button
BtnBase:{},
BtnContainer:{},
BtnAddress:{},
SpanBalance{},
BtnLogout:{},
// hover Button
"BtnBase:hover": {
"background-color": "color", // example code
},
};
<!-- required RPC -->
const RPC = {
1: "https://mainnet.infura.io/v3/....",
3: "https://ropsten.infura.io/v3/....",
4: "https://rinkeby.infura.io/v3/....",
5: "https://goerly.infura.io/v3/....",
42: "https://kovan.infura.io/v3/....",
56: "https://bsc-dataseed.binance.org/",
97: "https://data-seed-prebsc-2-s3.binance.org:8545",
250: "https://rpc.ftm.tools",
};
const supportedConnectors =
[
"metamask",
"walletonnect",
"coinbase",
"formatic",
"portis",
]
function App() {
setStyles(customStyles);
const { signMessage, isVerify } = useSignMessage();
useEffect(() => {
if (!isVerify) {
signMessage("TEST");
}
setRpcObj({ ...rpcObj });
}, [isVerify]);
return (
<>
<ConnectButton RPC={RPC} portisId={"portisId-key-project"} supportedConnectors={supportedConnectors}/>
</>
);
}
We need to create a provider in the file index.jsx
import React from "react";
import ReactDOM from "react-dom";
import { Web3Provider } from "@ethersproject/providers";
import { Web3ReactProvider } from "@web3-react/core";
import App from "./App";
function getLibrary(provider: any) {
const library = new Web3Provider(provider);
library.pollingInterval = 12000;
return library;
}
ReactDOM.render(
<React.StrictMode>
<Web3ReactProvider getLibrary={getLibrary}>
<App />
</Web3ReactProvider>
</React.StrictMode>,
document.getElementById("root")
);
Web3 and Create-react-app
If you are using create-react-app version >=5 you may run into issues building. This is because NodeJS polyfills are not included in the latest version of create-react-app.
Install react-app-rewired and the missing modules
yarn add --dev react-app-rewired process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer
npm install --save-dev react-app-rewired crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer process
Create
config-overrides.jsin the root of your project folder with the content:
const webpack = require('webpack');
module.exports = function override(config) {
const fallback = config.resolve.fallback || {};
Object.assign(fallback, {
"crypto": require.resolve("crypto-browserify"),
"stream": require.resolve("stream-browserify"),
"assert": require.resolve("assert"),
"http": require.resolve("stream-http"),
"https": require.resolve("https-browserify"),
"os": require.resolve("os-browserify"),
"url": require.resolve("url")
})
config.resolve.fallback = fallback;
config.ignoreWarnings = [/node_module/];
config.plugins = (config.plugins || []).concat([
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer']
})
])
return config;
}
Within package.json change the scripts field for start, build and test. Instead of react-scripts replace it with react-app-rewired
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago