clean up

frontend/abi/index.ts

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

frontend/client/index.ts

@@ -1,3 +1,2 @@
-export * from "./client";
 export * from "./enums";
 export * from "./types";

frontend/client/types.ts

@@ -31,8 +31,6 @@ export type Service = {
   chain_data?: ChainData;
 };
 
-export type Services = Service[];
-
 export type ServiceTemplate = {
   name: string;
   hash: string;

frontend/components/Modals/QRModal/QRModal.tsx

@@ -1,5 +1,5 @@
 import { useModals } from "@/hooks";
-import { QRModalData } from "@/types/QRModalData";
+import { QRModalData } from "@/types";
 import { Flex, Modal, QRCode, Typography } from "antd";
 import { ethers } from "ethers";
 import { useMemo } from "react";

frontend/components/Modals/index.ts

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

frontend/components/Spawn/Funding/Funding.tsx

@@ -1,6 +1,6 @@
 import { Service } from "@/client";
 import { SpawnScreenState } from "@/enums";
-import { useSpawn } from "@/hooks/useSpawn";
+import { useSpawn } from "@/hooks";
 import { TimelineItemProps, Flex, Typography, Timeline } from "antd";
 import { useState, useMemo, useEffect, SetStateAction, Dispatch } from "react";
 

frontend/components/Spawn/SpawnHeader/SpawnHeader.tsx

@@ -1,5 +1,5 @@
-import { useSpawn } from "@/hooks/useSpawn";
-import { mainTheme } from "@/theme/mainTheme";
+import { useSpawn } from "@/hooks";
+import { mainTheme } from "@/theme";
 import { Flex, Progress, Typography } from "antd";
 import Image from "next/image";
 import { useMemo } from "react";

frontend/components/Spawn/SpawnStakingCheck/SpawnStakingCheck.tsx

@@ -1,8 +1,7 @@
 import { Service, ServiceTemplate } from "@/client";
-import { TOKENS } from "@/constants/tokens";
+import { TOKENS } from "@/constants";
 import { SpawnScreenState } from "@/enums";
-import { useEthers, useServices } from "@/hooks";
-import { useAppInfo } from "@/hooks/useAppInfo";
+import { useEthers, useServices, useAppInfo } from "@/hooks";
 import { Button, Flex, Typography, message } from "antd";
 import { ethers } from "ethers";
 import {
@@ -44,7 +43,10 @@ export const SpawnStakingCheck = ({
   const [isCreating, setIsCreating] = useState(false);
   const [buttonClicked, setButtonClicked] = useState<ButtonOptions>();
 
-  const publicKey = useMemo(() => getPublicKey(), [getPublicKey]);
+  const publicKey: string | undefined = useMemo(
+    () => getPublicKey(),
+    [getPublicKey],
+  );
 
   /**
    * Creates service, then performs relevant state updates
@@ -181,18 +183,26 @@ export const SpawnStakingCheck = ({
     setButtonClicked(undefined);
   };
 
+  const stakingRequirement = useMemo(
+    () =>
+      ethers.utils.formatUnits(
+        `${
+          serviceTemplate.configuration.olas_cost_of_bond +
+          serviceTemplate.configuration.olas_required_to_stake
+        }`,
+      ),
+    [
+      serviceTemplate.configuration.olas_cost_of_bond,
+      serviceTemplate.configuration.olas_required_to_stake,
+    ],
+  );
+
   return (
     <Flex gap={8} vertical>
       <Flex vertical justify="center" align="center">
         <Typography.Text strong>Would you like to stake OLAS?</Typography.Text>
         <Typography.Text type="secondary">
-          {ethers.utils.formatUnits(
-            `${
-              serviceTemplate.configuration.olas_cost_of_bond +
-              serviceTemplate.configuration.olas_required_to_stake
-            }`,
-          )}{" "}
-          OLAS required
+          {stakingRequirement} OLAS required
         </Typography.Text>
       </Flex>
       <Flex gap={8} justify="center">

frontend/components/Spawn/index.tsx

@@ -1,6 +1,7 @@
-export * from "./SpawnDone/SpawnDone";
+export * from "./Funding/Funding";
 export * from "./SpawnAgentFunding/SpawnAgentFunding";
+export * from "./SpawnDone/SpawnDone";
+export * from "./SpawnError/SpawnError";
 export * from "./SpawnHeader/SpawnHeader";
 export * from "./SpawnRPC/SpawnRPC";
 export * from "./SpawnStakingCheck/SpawnStakingCheck";
-export * from "./SpawnError/SpawnError";

frontend/components/YourAgents/HasAgents/HasAgents.tsx

@@ -0,0 +1,17 @@
+import { Service } from "@/client";
+import { Flex } from "antd";
+import { ServiceCard } from "../ServiceCard/ServiceCard";
+
+export const HasAgents = ({
+  services,
+}: {
+  services: Service[];
+}): JSX.Element => {
+  return (
+    <Flex vertical gap={16}>
+      {services.map((service: Service) => (
+        <ServiceCard key={service.hash} service={service} />
+      ))}
+    </Flex>
+  );
+};

frontend/components/YourAgents/NoAgents/NoAgents.tsx

@@ -0,0 +1,15 @@
+import { Tab } from "@/enums";
+import { useTabs } from "@/hooks";
+import { Flex, Typography, Button } from "antd";
+
+export const NoAgents = (): JSX.Element => {
+  const { setActiveTab } = useTabs();
+  return (
+    <Flex vertical justify="center" align="center">
+      <Typography.Text>No agents running.</Typography.Text>
+      <Button type="primary" onClick={() => setActiveTab(Tab.MARKETPLACE)}>
+        Browse Agents
+      </Button>
+    </Flex>
+  );
+};

frontend/components/YourAgents/ServiceCard/ServiceCardTotalBalance.tsx

@@ -1,5 +1,5 @@
 import { Service } from "@/client";
-import { useMulticall } from "@/hooks/useMulticall";
+import { useMulticall } from "@/hooks";
 import { Flex, Typography, message } from "antd";
 import { useMemo, useState } from "react";
 import { useInterval } from "usehooks-ts";
@@ -11,16 +11,14 @@ export const ServiceCardTotalBalance = ({ service }: { service: Service }) => {
   const [hasInitialLoaded, setHasInitialLoaded] = useState(false);
   const [balances, setBalances] = useState<{ [address: string]: number }>({});
 
-  const sumBalances: number = useMemo(
-    () =>
-      hasInitialLoaded && balances
-        ? Object.values(balances).reduce(
-            (acc: number, balance: number) => (acc += balance),
-            0,
-          )
-        : 0,
-    [balances, hasInitialLoaded],
-  );
+  const sumBalances: number | undefined = useMemo(() => {
+    if (hasInitialLoaded && balances) {
+      return Object.values(balances).reduce(
+        (acc: number, balance: number) => (acc += balance),
+        0,
+      );
+    }
+  }, [balances, hasInitialLoaded]);
 
   useInterval(() => {
     if (
@@ -29,7 +27,7 @@ export const ServiceCardTotalBalance = ({ service }: { service: Service }) => {
       service.ledger?.rpc
     )
       getETHBalances(
-        [...service.chain_data.instances, service.chain_data.multisig], // multisig not required?
+        [...service.chain_data.instances, service.chain_data.multisig],
         service.ledger.rpc,
       )
         .then((r) => {
@@ -40,10 +38,11 @@ export const ServiceCardTotalBalance = ({ service }: { service: Service }) => {
   }, BALANCE_POLLING_INTERVAL);
 
   return (
-    <Flex vertical>
-      <Typography.Text strong>TOTAL BALANCE</Typography.Text>
-      <Typography.Text>XDAI {sumBalances}</Typography.Text>{" "}
-      {/* hardcoded XDAI for now */}
-    </Flex>
+    sumBalances !== undefined && (
+      <Flex vertical>
+        <Typography.Text strong>TOTAL BALANCE</Typography.Text>
+        <Typography.Text>XDAI {sumBalances}</Typography.Text>
+      </Flex>
+    )
   );
 };