chore: Implementing the markets offers page.

packages/renderer/src/Routes.tsx

@@ -30,7 +30,7 @@ import {
   PaymentMethods,
 } from "@pages/Account";
 import { MyWallet } from "@pages/MyWallet";
-import { MarketsTransactions } from "@pages/Markets";
+import { MarketsTransactionsPage } from "@pages/Markets";
 
 export function AppRoutes() {
   return (
@@ -39,7 +39,7 @@ export function AppRoutes() {
       <Route path={ROUTES.Login} element={<Login />} />
       <Route path={ROUTES.Welcome} element={<Welcome />} />
       <Route path={ROUTES.CreateAccount} element={<CreateAccount />} />
-      <Route path={ROUTES.Markets} element={<MarketsTransactions />} />
+      <Route path={ROUTES.Markets} element={<MarketsTransactionsPage />} />
       <Route
         path={ROUTES.MyWallet}
         element={

packages/renderer/src/components/atoms/DetailItemCard/index.tsx

@@ -1 +1,17 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
 export * from "./DetailItemCard";

packages/renderer/src/components/atoms/Typography/Anchor.tsx

@@ -1,3 +1,19 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
 import { Anchor as MAnchor, createStyles } from "@mantine/core";
 import type { AnchorProps as MAnchorProps } from "@mantine/core";
 

packages/renderer/src/components/molecules/MarketTransactionsTable/MarketTransactionsTable.stories.tsx

@@ -15,16 +15,16 @@
 // =============================================================================
 
 import type { ComponentStory, ComponentMeta } from "@storybook/react";
-import { MarketTransactions } from "./MarketTransactions";
+import { MarketTransactionsTable } from "./MarketTransactionsTable";
 import { MarketTransactionPaymentMethod } from "./_types";
 
 export default {
-  title: "organisms/Markets/MarketsTransactions",
+  title: "molecules/MarketTransactionsTable",
-  component: MarketTransactions,
+  component: MarketTransactionsTable,
-} as ComponentMeta<typeof MarketTransactions>;
+} as ComponentMeta<typeof MarketTransactionsTable>;
 
-const Template: ComponentStory<typeof MarketTransactions> = () => {
+const Template: ComponentStory<typeof MarketTransactionsTable> = () => {
-  return <MarketTransactions data={data} />;
+  return <MarketTransactionsTable data={data} />;
 };
 
 export const Default = Template.bind({});

packages/renderer/src/components/molecules/MarketTransactionsTable/MarketTransactionsTable.test.tsx

@@ -16,15 +16,15 @@
 
 import { describe, expect, it } from "vitest";
 import { render, screen } from "@testing-library/react";
-import { MarketTransactions } from "./MarketTransactions";
+import { MarketTransactionsTable } from "./MarketTransactionsTable";
 import { AppProviders } from "@atoms/AppProviders";
 import { MarketTransactionPaymentMethod } from "./_types";
 
-describe("organisms::MarketTransactions", () => {
+describe("molecules::MarketTransactionsTable", () => {
   it("renders without exploding.", () => {
     const { asFragment, unmount } = render(
       <AppProviders>
-        <MarketTransactions data={data} />
+        <MarketTransactionsTable data={data} />
       </AppProviders>
     );
     expect(asFragment()).toMatchSnapshot();
@@ -34,7 +34,7 @@ describe("organisms::MarketTransactions", () => {
   it("renders all columns.", () => {
     const { unmount } = render(
       <AppProviders>
-        <MarketTransactions data={data} />
+        <MarketTransactionsTable data={data} />
       </AppProviders>
     );
     expect(screen.queryByText("Price")).toBeInTheDocument();
@@ -49,7 +49,7 @@ describe("organisms::MarketTransactions", () => {
   it("renders formatted price value with currency sign.", () => {
     const { unmount } = render(
       <AppProviders>
-        <MarketTransactions data={data} />
+        <MarketTransactionsTable data={data} />
       </AppProviders>
     );
     expect(screen.queryByText("€5,000.96")).toBeInTheDocument();
@@ -60,7 +60,7 @@ describe("organisms::MarketTransactions", () => {
   it("renders formatted amount value with currency code.", () => {
     const { unmount } = render(
       <AppProviders>
-        <MarketTransactions data={data} />
+        <MarketTransactionsTable data={data} />
       </AppProviders>
     );
     expect(screen.queryByText("7,564.94 XMR")).toBeInTheDocument();
@@ -71,7 +71,7 @@ describe("organisms::MarketTransactions", () => {
   it("renders formatted cost value with currency sign.", () => {
     const { unmount } = render(
       <AppProviders>
-        <MarketTransactions data={data} />
+        <MarketTransactionsTable data={data} />
       </AppProviders>
     );
     expect(screen.queryByText("$532.34")).toBeInTheDocument();
@@ -82,7 +82,7 @@ describe("organisms::MarketTransactions", () => {
   it("renders formatted account trades.", () => {
     const { unmount } = render(
       <AppProviders>
-        <MarketTransactions data={data} />
+        <MarketTransactionsTable data={data} />
       </AppProviders>
     );
     expect(screen.queryByText("3,412")).toBeInTheDocument();

packages/renderer/src/components/molecules/MarketTransactionsTable/MarketTransactionsTable.tsx

@@ -1,3 +1,19 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
 import { createStyles } from "@mantine/core";
 import { createTable } from "@tanstack/react-table";
 import { Table } from "@molecules/Table";
@@ -9,17 +25,19 @@ import {
   MarketTransactionsCostsCell,
   MarketTransactionsAccountAgeCell,
   MarketTransactionsPaymentCell,
-} from "./MarketTransactionsCell";
+} from "./MarketTransactionsTableCell";
 import { useIntl } from "react-intl";
 import { LangKeys } from "@constants/lang";
 
 const table = createTable().setRowType<MarketTransaction>();
 
-interface MarketTransactionsProps {
+interface MarketTransactionsTableProps {
   data: MarketTransaction[];
 }
 
-export function MarketTransactions({ data }: MarketTransactionsProps) {
+export function MarketTransactionsTable({
+  data,
+}: MarketTransactionsTableProps) {
   const { classes, cx } = useStyles();
   const columns = useMarketTransactionsColumns();
 

packages/renderer/src/components/molecules/MarketTransactionsTable/MarketTransactionsTableCell.tsx

@@ -1,3 +1,19 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
 import { Currency } from "@atoms/Currency";
 import { BodyText } from "@atoms/Typography";
 import { Group, Text } from "@mantine/core";

packages/renderer/src/components/molecules/MarketTransactionsTable/_types.ts

@@ -0,0 +1,32 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
+export interface MarketTransaction {
+  price: number;
+  priceComparison: number;
+  priceCurrency: string;
+  amount: number;
+  amountCurrency: string;
+  cost: number;
+  costCurrency: string;
+  paymentMethod: MarketTransactionPaymentMethod;
+  accountAge: number;
+  accountTrades: number;
+}
+
+export enum MarketTransactionPaymentMethod {
+  CashByMail = "CashByMail",
+}

packages/renderer/src/components/molecules/MarketTransactionsTable/index.ts

@@ -0,0 +1,17 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
+export * from "./MarketTransactionsTable";

packages/renderer/src/components/organisms/MarketTransactions/_types.ts

@@ -1,16 +0,0 @@
-export interface MarketTransaction {
-  price: number;
-  priceComparison: number;
-  priceCurrency: string;
-  amount: number;
-  amountCurrency: string;
-  cost: number;
-  costCurrency: string;
-  paymentMethod: MarketTransactionPaymentMethod;
-  accountAge: number;
-  accountTrades: number;
-}
-
-export enum MarketTransactionPaymentMethod {
-  CashByMail = "CashByMail",
-}

packages/renderer/src/components/organisms/MarketTransactions/index.ts

@@ -1 +0,0 @@
-export * from "./MarketTransactions";

packages/renderer/src/components/organisms/MarketsTransactions/MarketsTransactions.stories.tsx

@@ -0,0 +1,31 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
+import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import { MarketsTransactions } from "./MarketsTransactions";
+
+export default {
+  title: "organisms/MarketsTransactions",
+  component: MarketsTransactions,
+} as ComponentMeta<typeof MarketsTransactions>;
+
+const Template: ComponentStory<typeof MarketsTransactions> = () => {
+  return <MarketsTransactions />;
+};
+
+export const Default = Template.bind({});
+
+Default.args = {};

packages/renderer/src/components/organisms/MarketsTransactions/MarketsTransactions.tsx

@@ -0,0 +1,44 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
+import { useMarketsOffers } from "@hooks/haveno/useMarketsOffers";
+import { Loader } from "@mantine/core";
+import { MarketTransactionsTable } from "@molecules/MarketTransactionsTable";
+import type { FC } from "react";
+
+export function MarketsTransactionsLoaded() {
+  useMarketsOffers({
+    assetCode: "eth",
+    direction: "buy",
+  });
+  return <MarketTransactionsTable data={[]} />;
+}
+
+const MarketsTransactionsBoot: FC = ({ children }) => {
+  const { isLoading: isOffersLoading } = useMarketsOffers({
+    assetCode: "eth",
+    direction: "buy",
+  });
+  return isOffersLoading ? <Loader color="gray" /> : <>{children}</>;
+};
+
+export function MarketsTransactions() {
+  return (
+    <MarketsTransactionsBoot>
+      <MarketsTransactionsLoaded />
+    </MarketsTransactionsBoot>
+  );
+}

packages/renderer/src/components/organisms/MarketsTransactions/index.ts

@@ -0,0 +1,17 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
+export * from "./MarketsTransactions";

packages/renderer/src/constants/query-keys.ts

@@ -29,6 +29,8 @@ export enum QueryKeys {
   XmrSeed = "Haveno.XmrSeed",
   XmrPrimaryAddress = "Haveno.XmrPrimaryAddress",
   XmrTxs = "Haveno.XmrTransactions",
+  MarketsOffers = "Haveno.MarketsOffers",
+  MyOffers = "Haveno.MyOffers",
 
   // Storage
   StorageAccountInfo = "Storage.AccountInfo",

packages/renderer/src/hooks/haveno/useMarketsOffers.ts

@@ -27,8 +27,7 @@ interface MarketsOfferesQuery {
 export function useMarketsOffers(query: MarketsOfferesQuery) {
   const client = useHavenoClient();
 
-  return useQuery<OfferInfo[], Error>(
+  return useQuery<OfferInfo[], Error>([QueryKeys.MarketsOffers, query], () =>
-    [QueryKeys.MoneroNodeIsRunning, query],
+    client.getOffers(query.assetCode, query.direction)
-    () => client.getOffers(query.assetCode, query.direction)
   );
 }

packages/renderer/src/hooks/haveno/useMyOffers.ts

@@ -0,0 +1,33 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
+import { useQuery } from "react-query";
+import type { OfferInfo } from "haveno-ts";
+import { QueryKeys } from "@constants/query-keys";
+import { useHavenoClient } from "./useHavenoClient";
+
+interface MyOfferesQuery {
+  assetCode: string;
+  direction?: "buy" | "sell";
+}
+
+export function useMarketsOffers(query: MyOfferesQuery) {
+  const client = useHavenoClient();
+
+  return useQuery<OfferInfo[], Error>([QueryKeys.MyOffers, query], () =>
+    client.getMyOffers(query.assetCode, query.direction)
+  );
+}

packages/renderer/src/pages/Markets/MarketsTransactions.tsx

@@ -1,35 +1,26 @@
-import { NavbarLayout } from "@templates/NavbarLayout";
+// =============================================================================
-import { MarketTransactions } from "@organisms/MarketTransactions";
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
 
-export function MarketsTransactions() {
+import { NavbarLayout } from "@templates/NavbarLayout";
+import { MarketsTransactions } from "@organisms/MarketsTransactions";
+
+export function MarketsTransactionsPage() {
   return (
     <NavbarLayout>
-      <MarketTransactions data={data} />
+      <MarketsTransactions />
     </NavbarLayout>
   );
 }
-
-const data = [
-  {
-    price: 123,
-    priceComparison: 0.12,
-    amount: 123123,
-    amountCurrency: "EUR",
-    cost: 123,
-    costCurrency: "USD",
-    paymentMethod: "ASD",
-    accountAge: 12,
-    accountTrades: 1212,
-  },
-  {
-    price: 123,
-    priceComparison: 0.12,
-    amount: 123123,
-    amountCurrency: "EUR",
-    cost: 123,
-    costCurrency: "USD",
-    paymentMethod: "ASD",
-    accountAge: 12,
-    accountTrades: 1212,
-  },
-];

packages/renderer/src/pages/Markets/index.ts

@@ -1 +1,17 @@
+// =============================================================================
+//  Copyright 2022 Haveno
+//
+//  Licensed under the Apache License, Version 2.0 (the "License");
+//  you may not use this file except in compliance with the License.
+//  You may obtain a copy of the License at
+//
+//    http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+// =============================================================================
+
 export * from "./MarketsTransactions";