fix formatting (#36)

README.md

@@ -148,7 +148,7 @@ Since [NearSocial/VM v1.3.0](https://github.com/NearSocial/VM/blob/master/CHANGE
 
 There already exists support for most common EVM chains, but to add a new chain to your web3 provider, find your chain on [ChainList](https://chainlist.org/) and then add the necessary details to the [chains.json](./src/utils/web4/chains.json). Be sure to include a testnet configuration as well. This will enable you to connect to the specified chain when using `<Web3Connect />` within a widget running inside your custom web component.
 
-You can configure the projectId and appMetadata in [ethersProvider.js](./src/utils/web4/ethersProvider.js) as well.
+You can configure the projectId and appMetadata in [utils/web4/ethers.js](./src/utils/web3/ethers.js) as well.
 
 For more information on how to utilize [Ethers.js](https://docs.ethers.org/v6/) in your widgets, see [NEAR for Ethereum developers](https://docs.near.org/tutorials/near-components/ethers-js). To see a list of existing EVM components built by the community, see [here](https://near.social/hackerhouse.near/widget/EVMComponents).
 

playwright-tests/storage-states/wallet-connected.json

@@ -28,4 +28,4 @@
     }
   ],
   "sessionStorage": []
-}
+}

playwright-tests/tests/code.spec.js

@@ -1,9 +1,7 @@
 import { describe, expect, test } from "@playwright/test";
 import { waitForSelectorToBeVisible } from "../testUtils";
 
-
 describe("code attribute", () => {
-
   test.beforeEach(async ({ page }) => {
     await page.goto("/");
   });
@@ -14,53 +12,57 @@ describe("code attribute", () => {
     const code = "return <p>{props.message}</p>";
     const initialProps = JSON.stringify({ message: "hello world" });
 
-    await page.evaluate(({ code, initialProps }) => {
-      document.body.innerHTML = `
+    await page.evaluate(
+      ({ code, initialProps }) => {
+        document.body.innerHTML = `
       <near-social-viewer code="${code}" initialprops='${initialProps}'></near-social-viewer>
       `;
-    }, { code, initialProps});
-
+      },
+      { code, initialProps }
+    );
+
     // Verify the viewer is visible
     await waitForSelectorToBeVisible(page, "near-social-viewer");
 
     const msg = await page.getByText("hello world");
     await expect(msg).toBeVisible();
   });
-
-  test("should render code with props when changing attributes of an existing element", async ({ page }) => {
-      const code = "return <p>{props.message}</p>";
-      const initialProps = JSON.stringify({ message: "hello world" });
-
-      // Set code and initialProps attribute
-      await page.evaluate(
-        ({ code, initialProps }) => {
-          const viewer = document.querySelector("near-social-viewer");
-          viewer.setAttribute("code", code);
-          viewer.setAttribute("initialprops", initialProps);
-        },
-        { code, initialProps }
-      );
 
-      await expect(await page.getByText("hello world")).toBeVisible();
-
-      // change props
-      await page.evaluate(
-        () => {
-          const viewer = document.querySelector("near-social-viewer");
-          viewer.setAttribute("initialprops", JSON.stringify({ message: "goodbye world" }));
-        }
-      );
+  test("should render code with props when changing attributes of an existing element", async ({
+    page,
+  }) => {
+    const code = "return <p>{props.message}</p>";
+    const initialProps = JSON.stringify({ message: "hello world" });
 
-      await expect(await page.getByText("goodbye world")).toBeVisible();
+    // Set code and initialProps attribute
+    await page.evaluate(
+      ({ code, initialProps }) => {
+        const viewer = document.querySelector("near-social-viewer");
+        viewer.setAttribute("code", code);
+        viewer.setAttribute("initialprops", initialProps);
+      },
+      { code, initialProps }
+    );
 
-      // change code
-      await page.evaluate(
-        () => {
-          const viewer = document.querySelector("near-social-viewer");
-          viewer.setAttribute("code", "return <p>working</p>;");
-        }
+    await expect(await page.getByText("hello world")).toBeVisible();
+
+    // change props
+    await page.evaluate(() => {
+      const viewer = document.querySelector("near-social-viewer");
+      viewer.setAttribute(
+        "initialprops",
+        JSON.stringify({ message: "goodbye world" })
       );
+    });
+
+    await expect(await page.getByText("goodbye world")).toBeVisible();
+
+    // change code
+    await page.evaluate(() => {
+      const viewer = document.querySelector("near-social-viewer");
+      viewer.setAttribute("code", "return <p>working</p>;");
+    });
 
-      await expect(await page.getByText("working")).toBeVisible();
+    await expect(await page.getByText("working")).toBeVisible();
   });
 });

playwright-tests/tests/vm/near-call.spec.js

@@ -183,7 +183,9 @@ describe("Near.call", () => {
           .locator("div.modal-body code")
           .allInnerTexts();
         const modalBody = await page.locator(".modal-body");
-        const transactionNumbers = await modalBody.locator("h4").allInnerTexts();
+        const transactionNumbers = await modalBody
+          .locator("h4")
+          .allInnerTexts();
         const values = await modalBody
           .locator(".font-monospace")
           .allInnerTexts();
@@ -192,7 +194,10 @@ describe("Near.call", () => {
 
         await pauseIfVideoRecording(page);
 
-        expect(transactionNumbers).toEqual(["Transaction #1", "Transaction #2"]);
+        expect(transactionNumbers).toEqual([
+          "Transaction #1",
+          "Transaction #2",
+        ]);
         expect(values).toEqual([
           "hello.near-examples.near",
           "set_greeting",

playwright-tests/tests/web3.spec.js

@@ -21,9 +21,13 @@ test("should be possible to interact with web3 widgets", async ({ page }) => {
     "body > near-social-viewer > div > div > div > div.LidoStakeForm"
   );
 
-  const Web3ConnectButton = await page.getByRole("button", { name: "Connect with Web3" });
+  const Web3ConnectButton = page.getByRole("button", {
+    name: "Connect with Web3",
+  });
 
   await Web3ConnectButton.click();
 
-  await expect(await page.getByRole("button", { name: "Connecting"})).toBeVisible();
+  await expect(
+    page.getByRole("button", { name: "Connecting" })
+  ).toBeVisible();
 });

src/App.js

@@ -5,19 +5,15 @@ import React, { useEffect, useMemo, useState } from "react";
 import "react-bootstrap-typeahead/css/Typeahead.css";
 
 import { isValidAttribute } from "dompurify";
-import {
-  useAccount,
-  useInitNear,
-  Widget,
-} from "near-social-vm";
+import { useAccount, useInitNear, Widget } from "near-social-vm";
 import {
   createBrowserRouter,
   Link,
   RouterProvider,
   useLocation,
 } from "react-router-dom";
 
-import { EthersProvider } from "./utils/web3/ethersProvider"
+import { EthersProvider } from "./utils/web3/ethers";
 
 const SESSION_STORAGE_REDIRECT_MAP_KEY = "nearSocialVMredirectMap";
 
@@ -115,11 +111,7 @@ function App(props) {
       path: "/*",
       element: (
         <EthersProvider>
-          <Viewer
-            widgetSrc={src}
-            code={code}
-            initialProps={initialProps}
-          />
+          <Viewer widgetSrc={src} code={code} initialProps={initialProps} />
         </EthersProvider>
       ),
     },

src/utils/web3/ethersProvider.js → src/utils/web3/ethers.js

@@ -24,7 +24,7 @@ const injected = injectedModule();
 // initialize Onboard
 const onboard = init({
   wallets: [injected, walletConnect, ledger],
-	chains,
+  chains,
   appMetadata: {
     name: "NEAR Social",
     description: "NEAR Social",
@@ -83,12 +83,12 @@ const useEthersProviderContext = singletonHook(
   }
 );
 
-export const EthersProvider = ({children}) => {
+export const EthersProvider = ({ children }) => {
   const ethersProviderContext = useEthersProviderContext();
 
-	return (
-		<EthersProviderContext.Provider value={ethersProviderContext}>
-			{children}
-		</EthersProviderContext.Provider>
-	)
-}
+  return (
+    <EthersProviderContext.Provider value={ethersProviderContext}>
+      {children}
+    </EthersProviderContext.Provider>
+  );
+};