add evm-rpcs-list, use chainId as key
This commit is contained in:
19826
package-lock.json
generated
Normal file
19826
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -23,6 +23,7 @@
|
||||
"chakra-react-select": "^4.4.3",
|
||||
"ethereum-checksum-address": "^0.0.6",
|
||||
"ethers": "^5.4.5",
|
||||
"evm-rpcs-list": "^2.0.1",
|
||||
"framer-motion": "^4",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
|
||||
@@ -13,7 +13,6 @@ import {
|
||||
Text,
|
||||
Link,
|
||||
VStack,
|
||||
Select,
|
||||
useToast,
|
||||
CircularProgress,
|
||||
Center,
|
||||
@@ -60,9 +59,9 @@ import WalletConnect from "@walletconnect/client";
|
||||
import { IClientMeta } from "@walletconnect/types";
|
||||
import { ethers } from "ethers";
|
||||
import axios from "axios";
|
||||
import networksList from "evm-rpcs-list";
|
||||
import { useSafeInject } from "../../contexts/SafeInjectContext";
|
||||
import Tab from "./Tab";
|
||||
import networkInfo from "./networkInfo";
|
||||
|
||||
interface SafeDappInfo {
|
||||
id: number;
|
||||
@@ -76,6 +75,35 @@ interface SelectedNetworkOption {
|
||||
value: number;
|
||||
}
|
||||
|
||||
const primaryNetworkIds = [
|
||||
1, // ETH Mainnet
|
||||
42161, // Arbitrum One
|
||||
43114, // Avalanche
|
||||
56, // BSC
|
||||
250, // Fantom Opera
|
||||
5, // Goerli Testnet
|
||||
100, // Gnosis
|
||||
10, // Optimism
|
||||
137, // Polygon
|
||||
];
|
||||
|
||||
const primaryNetworkOptions = primaryNetworkIds.map((id) => {
|
||||
return { chainId: id, ...networksList[id.toString()] };
|
||||
});
|
||||
const secondaryNetworkOptions = Object.entries(networksList)
|
||||
.filter((id) => !primaryNetworkIds.includes(parseInt(id[0])))
|
||||
.map((arr) => {
|
||||
return {
|
||||
chainId: parseInt(arr[0]),
|
||||
name: arr[1].name,
|
||||
rpcs: arr[1].rpcs,
|
||||
};
|
||||
});
|
||||
const allNetworksOptions = [
|
||||
...primaryNetworkOptions,
|
||||
...secondaryNetworkOptions,
|
||||
];
|
||||
|
||||
const slicedText = (txt: string) => {
|
||||
return txt.length > 6
|
||||
? `${txt.slice(0, 4)}...${txt.slice(txt.length - 2, txt.length)}`
|
||||
@@ -112,13 +140,15 @@ function Body() {
|
||||
);
|
||||
const urlFromURL = new URLSearchParams(window.location.search).get("url");
|
||||
const chainFromURL = new URLSearchParams(window.location.search).get("chain");
|
||||
let networkIndexViaURL = 0;
|
||||
let networkIdViaURL = 1;
|
||||
if (chainFromURL) {
|
||||
for (let i = 0; i < networkInfo.length; i++) {
|
||||
for (let i = 0; i < allNetworksOptions.length; i++) {
|
||||
if (
|
||||
networkInfo[i].name.toLowerCase().includes(chainFromURL.toLowerCase())
|
||||
allNetworksOptions[i].name
|
||||
.toLowerCase()
|
||||
.includes(chainFromURL.toLowerCase())
|
||||
) {
|
||||
networkIndexViaURL = i;
|
||||
networkIdViaURL = allNetworksOptions[i].chainId;
|
||||
break;
|
||||
}
|
||||
}
|
||||
@@ -146,12 +176,12 @@ function Body() {
|
||||
const [address, setAddress] = useState(addressFromURL ?? ""); // internal resolved address
|
||||
const [isAddressValid, setIsAddressValid] = useState(true);
|
||||
const [uri, setUri] = useState("");
|
||||
const [networkIndex, setNetworkIndex] = useState(networkIndexViaURL);
|
||||
const [networkId, setNetworkId] = useState(networkIdViaURL);
|
||||
const [selectedNetworkOption, setSelectedNetworkOption] = useState<
|
||||
SingleValue<SelectedNetworkOption>
|
||||
>({
|
||||
label: networkInfo[networkIndexViaURL].name,
|
||||
value: networkIndexViaURL,
|
||||
label: networksList[networkIdViaURL].name,
|
||||
value: networkIdViaURL,
|
||||
});
|
||||
const [connector, setConnector] = useState<WalletConnect>();
|
||||
const [peerMeta, setPeerMeta] = useState<IClientMeta>();
|
||||
@@ -162,7 +192,7 @@ function Body() {
|
||||
const [selectedTabIndex, setSelectedTabIndex] = useState(urlFromURL ? 1 : 0);
|
||||
const [isIFrameLoading, setIsIFrameLoading] = useState(false);
|
||||
const [safeDapps, setSafeDapps] = useState<{
|
||||
[networkIndex: number]: SafeDappInfo[];
|
||||
[networkId: number]: SafeDappInfo[];
|
||||
}>({});
|
||||
const [searchSafeDapp, setSearchSafeDapp] = useState<string>();
|
||||
const [filteredSafeDapps, setFilteredSafeDapps] = useState<SafeDappInfo[]>();
|
||||
@@ -199,12 +229,7 @@ function Body() {
|
||||
(_connector.chainId as unknown as { chainID: number }).chainID ||
|
||||
_connector.chainId;
|
||||
|
||||
for (let i = 0; i < networkInfo.length; i++) {
|
||||
if (getChainId(i) === chainId) {
|
||||
setNetworkIndex(i);
|
||||
break;
|
||||
}
|
||||
}
|
||||
setNetworkId(chainId);
|
||||
} catch {
|
||||
console.log("Corrupt old session. Starting fresh");
|
||||
localStorage.removeItem("walletconnect");
|
||||
@@ -252,8 +277,9 @@ function Body() {
|
||||
}, [address]);
|
||||
|
||||
useEffect(() => {
|
||||
setRpcUrl(networkInfo[networkIndex].rpc);
|
||||
}, [networkIndex]);
|
||||
// TODO: use random rpc if this one is slow/down?
|
||||
setRpcUrl(networksList[networkId].rpcs[0]);
|
||||
}, [networkId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (latestTransaction) {
|
||||
@@ -294,25 +320,25 @@ function Body() {
|
||||
}, [latestTransaction, tenderlyForkId]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchSafeDapps = async (networkIndex: number) => {
|
||||
const fetchSafeDapps = async (networkId: number) => {
|
||||
const response = await axios.get<SafeDappInfo[]>(
|
||||
`https://safe-client.gnosis.io/v1/chains/${networkInfo[networkIndex].chainID}/safe-apps`
|
||||
`https://safe-client.gnosis.io/v1/chains/${networkId}/safe-apps`
|
||||
);
|
||||
setSafeDapps((dapps) => ({
|
||||
...dapps,
|
||||
[networkIndex]: response.data.filter((d) => ![29, 11].includes(d.id)), // Filter out Transaction Builder and WalletConnect
|
||||
[networkId]: response.data.filter((d) => ![29, 11].includes(d.id)), // Filter out Transaction Builder and WalletConnect
|
||||
}));
|
||||
};
|
||||
|
||||
if (isSafeAppsOpen && !safeDapps[networkIndex]) {
|
||||
fetchSafeDapps(networkIndex);
|
||||
if (isSafeAppsOpen && !safeDapps[networkId]) {
|
||||
fetchSafeDapps(networkId);
|
||||
}
|
||||
}, [isSafeAppsOpen, safeDapps, networkIndex]);
|
||||
}, [isSafeAppsOpen, safeDapps, networkId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (safeDapps[networkIndex]) {
|
||||
if (safeDapps[networkId]) {
|
||||
setFilteredSafeDapps(
|
||||
safeDapps[networkIndex].filter((dapp) => {
|
||||
safeDapps[networkId].filter((dapp) => {
|
||||
if (!searchSafeDapp) return true;
|
||||
|
||||
return (
|
||||
@@ -328,7 +354,7 @@ function Body() {
|
||||
} else {
|
||||
setFilteredSafeDapps(undefined);
|
||||
}
|
||||
}, [safeDapps, networkIndex, searchSafeDapp]);
|
||||
}, [safeDapps, networkId, searchSafeDapp]);
|
||||
|
||||
const resolveAndValidateAddress = async () => {
|
||||
let isValid;
|
||||
@@ -363,10 +389,6 @@ function Body() {
|
||||
return { isValid, _address: _address };
|
||||
};
|
||||
|
||||
const getChainId = (networkIndex: number) => {
|
||||
return networkInfo[networkIndex].chainID;
|
||||
};
|
||||
|
||||
const getCachedSession = () => {
|
||||
const local = localStorage ? localStorage.getItem("walletconnect") : null;
|
||||
const _showAddress = localStorage
|
||||
@@ -540,7 +562,7 @@ function Body() {
|
||||
const approveSession = () => {
|
||||
console.log("ACTION", "approveSession");
|
||||
if (connector) {
|
||||
let chainId = getChainId(networkIndex);
|
||||
let chainId = networkId;
|
||||
if (!chainId) {
|
||||
chainId = 1; // default to ETH Mainnet if no network selected
|
||||
}
|
||||
@@ -564,7 +586,7 @@ function Body() {
|
||||
newChainId?: number;
|
||||
newAddress?: string;
|
||||
}) => {
|
||||
let _chainId = newChainId || getChainId(networkIndex);
|
||||
let _chainId = newChainId || networkId;
|
||||
let _address = newAddress || address;
|
||||
|
||||
if (connector && connector.connected) {
|
||||
@@ -598,12 +620,12 @@ function Body() {
|
||||
}
|
||||
};
|
||||
|
||||
const updateNetwork = (_networkIndex: number) => {
|
||||
setNetworkIndex(_networkIndex);
|
||||
const updateNetwork = (_networkId: number) => {
|
||||
setNetworkId(_networkId);
|
||||
|
||||
if (selectedTabIndex === 0) {
|
||||
updateSession({
|
||||
newChainId: getChainId(_networkIndex),
|
||||
newChainId: _networkId,
|
||||
});
|
||||
} else {
|
||||
setIframeKey((key) => key + 1);
|
||||
@@ -714,15 +736,34 @@ function Body() {
|
||||
</FormControl>
|
||||
<Box mt={4} cursor="pointer">
|
||||
<RSelect
|
||||
options={networkInfo.map((network, i) => ({
|
||||
label: network.name,
|
||||
value: i,
|
||||
}))}
|
||||
options={[
|
||||
{
|
||||
label: "",
|
||||
options: primaryNetworkOptions.map((network) => ({
|
||||
label: network.name,
|
||||
value: network.chainId,
|
||||
})),
|
||||
},
|
||||
{
|
||||
label: "",
|
||||
options: secondaryNetworkOptions.map((network) => ({
|
||||
label: network.name,
|
||||
value: network.chainId,
|
||||
})),
|
||||
},
|
||||
]}
|
||||
value={selectedNetworkOption}
|
||||
onChange={setSelectedNetworkOption}
|
||||
size="md"
|
||||
placeholder="Select chain..."
|
||||
size="md"
|
||||
tagVariant="solid"
|
||||
chakraStyles={{
|
||||
groupHeading: (provided, state) => ({
|
||||
...provided,
|
||||
h: "1px",
|
||||
borderTop: "1px solid white",
|
||||
}),
|
||||
}}
|
||||
closeMenuOnSelect
|
||||
useBasicStyles
|
||||
/>
|
||||
@@ -895,13 +936,13 @@ function Body() {
|
||||
<ModalHeader>Select a dapp</ModalHeader>
|
||||
<ModalCloseButton />
|
||||
<ModalBody maxH="30rem" overflow={"clip"}>
|
||||
{(!safeDapps || !safeDapps[networkIndex]) && (
|
||||
{(!safeDapps || !safeDapps[networkId]) && (
|
||||
<Center py="3rem" w="100%">
|
||||
<Spinner />
|
||||
</Center>
|
||||
)}
|
||||
<Box pb="2rem" px={{ base: 0, md: "2rem" }}>
|
||||
{safeDapps && safeDapps[networkIndex] && (
|
||||
{safeDapps && safeDapps[networkId] && (
|
||||
<Center pb="0.5rem">
|
||||
<InputGroup maxW="30rem">
|
||||
<Input
|
||||
|
||||
@@ -6268,6 +6268,11 @@ eventsource@^1.0.7:
|
||||
dependencies:
|
||||
original "^1.0.0"
|
||||
|
||||
evm-rpcs-list@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/evm-rpcs-list/-/evm-rpcs-list-2.0.1.tgz#0f474746607d082294c4f7c0a718f3d90c92902b"
|
||||
integrity sha512-+jjhfc+Xtb4cM0Muata6kVMmDmORm5MQ+BHZlWcClFIy72i4UMiNcaqmuWptCs2aGC/SxTISTjmN76ArieU1yQ==
|
||||
|
||||
evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
|
||||
version "1.0.3"
|
||||
resolved "https://registry.yarnpkg.com/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz#7fcbdb198dc71959432efe13842684e0525acb02"
|
||||
|
||||
Reference in New Issue
Block a user