Enable Ethers.js

package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "0.9.1",
+  "version": "0.10.0",
   "homepage": "/",
   "private": true,
   "dependencies": {
@@ -13,6 +13,11 @@
     "@near-wallet-selector/near-wallet": "^7.9.0",
     "@near-wallet-selector/neth": "^7.9.0",
     "@near-wallet-selector/sender": "^7.9.0",
+    "@web3-onboard/core": "^2.16.2",
+    "@web3-onboard/injected-wallets": "^2.8.4",
+    "@web3-onboard/ledger": "^2.4.4",
+    "@web3-onboard/react": "^2.7.2",
+    "@web3-onboard/walletconnect": "^2.3.5",
     "big.js": "^6.1.1",
     "bn.js": "^5.1.1",
     "bootstrap": "^5.2.1",
@@ -21,7 +26,7 @@
     "error-polyfill": "^0.1.2",
     "local-storage": "^2.0.0",
     "near-api-js": "^0.45.1",
-    "near-social-vm": "git+https://github.com/NearSocial/VM.git#1.2.0",
+    "near-social-vm": "git+https://github.com/NearSocial/VM.git#1.3.0",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",

src/App.js

@@ -16,10 +16,17 @@ import { setupMeteorWallet } from "@near-wallet-selector/meteor-wallet";
 import { setupNeth } from "@near-wallet-selector/neth";
 import { setupModal } from "@near-wallet-selector/modal-ui";
 import EmbedPage from "./pages/EmbedPage";
-import { useAccount, useInitNear, useNear, utils } from "near-social-vm";
+import {
+  useAccount,
+  useInitNear,
+  useNear,
+  utils,
+  EthersProviderContext,
+} from "near-social-vm";
 import Big from "big.js";
 import { NavigationWrapper } from "./components/navigation/NavigationWrapper";
 import { NetworkId, Widgets } from "./data/widgets";
+import { useEthersProviderContext } from "./data/web3";
 
 export const refreshAllowanceObj = {};
 const documentationHref = "https://social.near-docs.io/";
@@ -32,6 +39,8 @@ function App(props) {
   const [walletModal, setWalletModal] = useState(null);
   const [widgetSrc, setWidgetSrc] = useState(null);
 
+  const ethersProviderContext = useEthersProviderContext();
+
   const { initNear } = useInitNear();
   const near = useNear();
   const account = useAccount();
@@ -143,21 +152,23 @@ function App(props) {
 
   return (
     <div className="App">
-      <Router basename={process.env.PUBLIC_URL}>
-        <Switch>
-          <Route path={"/embed/:widgetSrc*"}>
-            <EmbedPage {...passProps} />
-          </Route>
-          <Route path={"/edit/:widgetSrc*"}>
-            <NavigationWrapper {...passProps} />
-            <EditorPage {...passProps} />
-          </Route>
-          <Route path={"/:widgetSrc*"}>
-            <NavigationWrapper {...passProps} />
-            <ViewPage {...passProps} />
-          </Route>
-        </Switch>
-      </Router>
+      <EthersProviderContext.Provider value={ethersProviderContext}>
+        <Router basename={process.env.PUBLIC_URL}>
+          <Switch>
+            <Route path={"/embed/:widgetSrc*"}>
+              <EmbedPage {...passProps} />
+            </Route>
+            <Route path={"/edit/:widgetSrc*"}>
+              <NavigationWrapper {...passProps} />
+              <EditorPage {...passProps} />
+            </Route>
+            <Route path={"/:widgetSrc*"}>
+              <NavigationWrapper {...passProps} />
+              <ViewPage {...passProps} />
+            </Route>
+          </Switch>
+        </Router>
+      </EthersProviderContext.Provider>
     </div>
   );
 }

src/data/web3.js

@@ -0,0 +1,130 @@
+import { singletonHook } from "react-singleton-hook";
+import { useEffect, useState } from "react";
+import { init, useConnectWallet } from "@web3-onboard/react";
+import injectedModule from "@web3-onboard/injected-wallets";
+import walletConnectModule from "@web3-onboard/walletconnect";
+import ledgerModule from "@web3-onboard/ledger";
+import { ethers } from "ethers";
+import ls from "local-storage";
+import icon from "../images/near_social_icon.svg";
+
+const web3onboardKey = "web3-onboard:connectedWallets";
+
+const wcV1InitOptions = {
+  qrcodeModalOptions: {
+    mobileLinks: ["metamask", "argent", "trust"],
+  },
+  connectFirstChainId: true,
+};
+
+const walletConnect = walletConnectModule(wcV1InitOptions);
+const ledger = ledgerModule();
+const injected = injectedModule();
+
+// initialize Onboard
+export const onboard = init({
+  wallets: [injected, walletConnect, ledger],
+  chains: [
+    {
+      id: 1,
+      token: "ETH",
+      label: "Ethereum Mainnet",
+      rpcUrl: "https://rpc.ankr.com/eth",
+    },
+    {
+      id: 3,
+      token: "ETH",
+      label: "Ropsten - Ethereum Testnet",
+      rpcUrl: "https://rpc.ankr.com/eth_ropsten",
+    },
+    {
+      id: 5,
+      token: "ETH",
+      label: "Goerli - Ethereum Testnet",
+      rpcUrl: "https://rpc.ankr.com/eth_goerli",
+    },
+    {
+      id: "0x4e454152",
+      token: "ETH",
+      label: "Aurora Mainnet",
+      rpcUrl: "https://mainnet.aurora.dev",
+    },
+    {
+      id: 137,
+      token: "MATIC",
+      label: "Matic Mainnet",
+      rpcUrl: "https://rpc.ankr.com/polygon",
+    },
+    {
+      id: 324,
+      token: "ETH",
+      label: "zkSync",
+      rpcUrl: "https://zksync2-mainnet.zksync.io",
+    },
+    {
+      id: 56,
+      token: "BNB",
+      label: "Binance Smart Chain Mainnet",
+      rpcUrl: "https://bsc.publicnode.com",
+    },
+    {
+      id: 42161,
+      token: "ETH",
+      label: "Arbitrum One Mainnet",
+      rpcUrl: "https://endpoints.omniatech.io/v1/arbitrum/one/public",
+    },
+  ],
+  appMetadata: {
+    name: "NEAR Social",
+    icon,
+    description: "NEAR Social",
+  },
+  theme: "dark",
+  containerElements: {
+    // connectModal: '#near-social-navigation-bar',
+    // accountCenter: "#near-social-web3-account",
+  },
+});
+
+const defaultEthersProviderContext = { useConnectWallet };
+
+export const useEthersProviderContext = singletonHook(
+  defaultEthersProviderContext,
+  () => {
+    const [{ wallet }] = useConnectWallet();
+    const [ethersProvider, setEthersProvider] = useState(
+      defaultEthersProviderContext
+    );
+
+    useEffect(() => {
+      (async () => {
+        const walletsSub = onboard.state.select("wallets");
+        const { unsubscribe } = walletsSub.subscribe((wallets) => {
+          const connectedWallets = wallets.map(({ label }) => label);
+          ls.set(web3onboardKey, connectedWallets);
+        });
+
+        const previouslyConnectedWallets = ls.get(web3onboardKey) || [];
+
+        if (previouslyConnectedWallets) {
+          // You can also auto connect "silently" and disable all onboard modals to avoid them flashing on page load
+          await onboard.connectWallet({
+            autoSelect: {
+              label: previouslyConnectedWallets[0],
+              disableModals: true,
+            },
+          });
+        }
+      })();
+    }, []);
+
+    useEffect(() => {
+      setEthersProvider({
+        provider: wallet?.provider,
+        useConnectWallet,
+      });
+    }, [wallet]);
+
+    return ethersProvider;
+  }
+);

src/index.css

@@ -10,4 +10,10 @@
 
   --font-weight-medium: 500;
   --font-weight-bold: 600;
-}
+
+  /* For web3 onboard */
+  --account-center-z-index: 999;
+  --account-center-position-top: 64px;
+  --account-center-position-right: -10px;
+}
+

webpack.config.js

@@ -47,6 +47,8 @@ module.exports = function (env) {
         fallback: {
           crypto: require.resolve("crypto-browserify"),
           stream: require.resolve("stream-browserify"),
+          http: require.resolve("stream-http"),
+          https: require.resolve("https-browserify"),
         },
         // Fix for using `yarn link "near-social-vm"`
         alias: {