export const Web3ContextProvider: React.FC<{ children: ReactElement }> = ({ children }) => {
const dispatch = useDispatch();
const [connected, setConnected] = useState(false);
const [chainID, setChainID] = useState(DEFAULD_NETWORK);
const [providerChainID, setProviderChainID] = useState(DEFAULD_NETWORK);
const [address, setAddress] = useState("");
const [uri, setUri] = useState(getMainnetURI());
const [provider, setProvider] = useState<JsonRpcProvider>(new StaticJsonRpcProvider(uri));
const [web3Modal] = useState<Web3Modal>(
new Web3Modal({
cacheProvider: true,
providerOptions: {
walletconnect: {
package: WalletConnectProvider,
options: {
rpc: {
[Networks.AVAX]: getMainnetURI(),
},
},
},
},
}),
);
const hasCachedProvider = (): boolean => {
if (!web3Modal) return false;
if (!web3Modal.cachedProvider) return false;
return true;
};
const _initListeners = useCallback(
(rawProvider: JsonRpcProvider) => {
if (!rawProvider.on) {
return;
}
rawProvider.on("accountsChanged", () => setTimeout(() => window.location.reload(), 1));
rawProvider.on("chainChanged", async (chain: number) => {
changeNetwork(chain);
});
rawProvider.on("network", (_newNetwork, oldNetwork) => {
if (!oldNetwork) return;
window.location.reload();
});
},
[provider],
);
const changeNetwork = async (otherChainID: number) => {
const network = Number(otherChainID);
setProviderChainID(network);
};
const connect = useCallback(async () => {
const rawProvider = await web3Modal.connect();
_initListeners(rawProvider);
const connectedProvider = new Web3Provider(rawProvider, "any");
const chainId = await connectedProvider.getNetwork().then(network => Number(network.chainId));
const connectedAddress = await connectedProvider.getSigner().getAddress();
setAddress(connectedAddress);
setProviderChainID(chainId);
if (chainId === Networks.AVAX) {
setProvider(connectedProvider);
}
setConnected(true);
return connectedProvider;
}, [provider, web3Modal, connected]);
const checkWrongNetwork = async (): Promise<boolean> => {
if (providerChainID !== DEFAULD_NETWORK) {
const shouldSwitch = window.confirm(messages.switch_to_avalanche);
if (shouldSwitch) {
await swithNetwork();
window.location.reload();
}
return true;
}
return false;
};
const disconnect = useCallback(async () => {
web3Modal.clearCachedProvider();
setConnected(false);
setTimeout(() => {
window.location.reload();
}, 1);
}, [provider, web3Modal, connected]);
const onChainProvider = useMemo(
() => ({
connect,
disconnect,
hasCachedProvider,
provider,
connected,
address,
chainID,
web3Modal,
providerChainID,
checkWrongNetwork,
}),
[connect, disconnect, hasCachedProvider, provider, connected, address, chainID, web3Modal, providerChainID],
);
//@ts-ignore
return <Web3Context.Provider value={{ onChainProvider }}>{children}</Web3Context.Provider>;
};
So the dev make his code open source. and i was watching his code to understand. But i saw that he uses destructuration props but in the function why there is not the world children used? like in the example i saw when the dev uses destruction like ({name, value}) then in the function, he uses the word name and value. So why in the function there is uses of the word “children”
