feat: manage offers (#10)

* feat: add react-query and graphql-request to get info from subgraph * docs(useoffers.ts): add TODO * feat(useoffers.ts): change graphql query to retrieve one offer * feat: add offer pages and navigation * feat: add explore page to navigation * fix: fix colors<->colours variables * feat: add core-components packages * style(header.tsx): fix space left on the sides of the Header * style: fix cursor when hovering disabled inputs and when hovering enabled selects * style: minor style tweeks * refactor: sort imports * feat: update offer price with the new schema * feat: create account image based on address * build(package.json): add @bosonprotocol as npm dependencies * fix(createoffer.tsx): add types to form * ci(.github): deploy to staging when creating new release * feat: manage-offer widget * refactor(package.json): add new version of @bosonprotocol/widgets-sdk without react-use * fix(landing.spec.ts): remove .only * fix: add npm token to gh actions * fix: change name of env * fix: add persist credentials false * fix: change how we insall deps in ci * fix: add npm registry * feat: change BrowserRouter to HashRouter * feat: create REACT_APP_WIDGETS_URL env variable * test(createoffer.test.tsx): add test to test error while calling IpfsMetadata.storeMetadata Co-authored-by: reecejohnson <[email protected]>
bosonprotocol · Apr 26, 2022 · 1b7fcbe · 1b7fcbe
1 parent 9aee700
commit 1b7fcbe
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 47 deletions.
diff --git a/.env.example b/.env.example
@@ -1 +1,2 @@
-REACT_APP_SUBGRAPH_OFFERS_GRAPHQL_ENDPOINT=https://api.thegraph.com/subgraphs/name/dohaki/bosonccropsten
+REACT_APP_SUBGRAPH_OFFERS_GRAPHQL_ENDPOINT=https://api.thegraph.com/subgraphs/name/dohaki/bosonccropsten
+REACT_APP_WIDGETS_URL=https://boson-widgets-test.surge.sh
diff --git a/src/index.tsx b/src/index.tsx
@@ -3,7 +3,7 @@ import { BosonRoutes } from "lib/routes";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { HashRouter, Route, Routes } from "react-router-dom";
 
 import CreateOffer from "./pages/CreateOffer";
 import Landing from "./pages/Landing";
@@ -20,7 +20,7 @@ const root = createRoot(rootElement);
 root.render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
+      <HashRouter>
         <Routes>
           <Route path="/" element={<App />}>
             <Route path={BosonRoutes.Root} element={<Landing />} />
@@ -44,7 +44,7 @@ root.render(
             />
           </Route>
         </Routes>
-      </BrowserRouter>
+      </HashRouter>
     </QueryClientProvider>
   </React.StrictMode>
 );

diff --git a/src/lib/colors.ts b/src/lib/colors.ts
@@ -1,5 +1,6 @@
 export const colors = {
   navy: "#222539",
+  red: "red",
   green: "#0ffbad",
   cgBlue: "#247BA0",
   grey: "grey",

diff --git a/src/pages/CreateOffer.test.tsx b/src/pages/CreateOffer.test.tsx
@@ -0,0 +1,32 @@
+import { act, render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router-dom";
+
+import CreateOffer from "./CreateOffer";
+
+const storeMetadataErrorMsg = "storeMetadataErrorMsg";
+jest.mock("@bosonprotocol/ipfs-storage", () => {
+  class IpfsMetadataMock {
+    storeMetadata() {
+      return;
+    }
+  }
+  IpfsMetadataMock.prototype.storeMetadata = () =>
+    Promise.reject({
+      message: storeMetadataErrorMsg
+    });
+  return {
+    IpfsMetadata: IpfsMetadataMock
+  };
+});
+test("renders CreateOffer and expects an error to be displayed if IpfsMetadata.storeMetadata fails", async () => {
+  render(
+    <MemoryRouter>
+      <CreateOffer />
+    </MemoryRouter>
+  );
+  act(() => {
+    screen.getByText("Submit").click();
+  });
+  const error = await screen.findByText(storeMetadataErrorMsg);
+  expect(error).toBeInTheDocument();
+});
diff --git a/src/pages/CreateOffer.tsx b/src/pages/CreateOffer.tsx
@@ -3,7 +3,7 @@ import { IpfsMetadata } from "@bosonprotocol/ipfs-storage";
 import { createOffer } from "@bosonprotocol/widgets-sdk";
 import { parseEther } from "@ethersproject/units";
 import { useFormik } from "formik";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import styled from "styled-components";
 
 import { Layout } from "../components/Layout";
@@ -65,6 +65,10 @@ const FormElementsContainer = styled.div`
   }
 `;
 
+const ErrorMsg = styled.div`
+  color: ${colors.red};
+`;
+
 interface FormValues {
   name: string;
   description: string;
@@ -86,47 +90,7 @@ const dayInMs = 1000 * 60 * 60 * 24;
 const minuteInMS = 1000 * 60;
 
 export default function CreateOffer() {
-  const [values, setValues] = useState<FormValues>();
-
-  async function create() {
-    if (!values) {
-      return;
-    }
-    const storage = new IpfsMetadata({
-      url: CONFIG.ipfsMetadataUrl
-    });
-
-    console.log("storage", storage);
-
-    const metadataHash = await storage.storeMetadata({
-      name: values.name,
-      description: values.description,
-      externalUrl: values.externalUrl,
-      schemaUrl: values.schemaUrl,
-      type: MetadataType.BASE
-    });
-    const metadataUri = `${CONFIG.metadataBaseUrl}/${metadataHash}`;
-
-    console.log(metadataUri);
-
-    createOffer(
-      {
-        ...values,
-        price: parseEther(values.price).toString(),
-        deposit: parseEther(values.deposit).toString(),
-        penalty: parseEther(values.penalty).toString(),
-        metadataHash,
-        metadataUri
-      },
-      CONFIG
-    );
-  }
-
-  useEffect(() => {
-    if (!values) return;
-    create();
-  }, [values]);
-
+  const [errorMsg, setErrorMsg] = useState<string>("");
   const formik = useFormik({
     initialValues: {
       name: "Baggy jeans",
@@ -146,8 +110,39 @@ export default function CreateOffer() {
     } as FormValues,
     onSubmit: async (values) => {
       try {
-        setValues(values);
+        if (!values) {
+          return;
+        }
+        const storage = new IpfsMetadata({
+          url: CONFIG.ipfsMetadataUrl
+        });
+
+        const metadataHash = await storage.storeMetadata({
+          name: values.name,
+          description: values.description,
+          externalUrl: values.externalUrl,
+          schemaUrl: values.schemaUrl,
+          type: MetadataType.BASE
+        });
+        const metadataUri = `${CONFIG.metadataBaseUrl}/${metadataHash}`;
+
+        createOffer(
+          {
+            ...values,
+            price: parseEther(values.price).toString(),
+            deposit: parseEther(values.deposit).toString(),
+            penalty: parseEther(values.penalty).toString(),
+            metadataHash,
+            metadataUri
+          },
+          CONFIG
+        );
+        setErrorMsg("");
       } catch (error) {
+        setErrorMsg(
+          (error as { message: string })?.message ||
+            "There has been an error, please try again"
+        );
         console.error(error);
       }
     }
@@ -302,6 +297,7 @@ export default function CreateOffer() {
           </FormElement>
         </FormElementsContainer>
         <Button type="submit">Submit</Button>
+        {errorMsg && <ErrorMsg data-testid="error">{errorMsg}</ErrorMsg>}
       </StyledForm>
     </CreateOfferContainer>
   );