Update types, components, services, and constants

frontend/client/types.ts

@@ -1,3 +1,4 @@
+import { Address } from '@/types/Address';
 import { Ledger, Chain, DeploymentStatus } from './enums';
 
 export type ServiceHash = string;
@@ -8,22 +9,22 @@ export type LedgerConfig = {
   chain: Chain;
 };
 
-export type Key = {
-  address: string;
+export type ServiceKeys = {
+  address: Address;
   private_key: string;
   ledger: Chain;
 };
 
 export type ChainData = {
-  instances?: string[];
+  instances?: Address[];
   token?: number;
-  multisig?: string;
+  multisig?: Address;
 };
 
 export type Service = {
   name: string;
   hash: string;
-  keys: Key;
+  keys: ServiceKeys;
   readme?: string;
   ledger: LedgerConfig;
   chain_data: ChainData;
@@ -98,6 +99,6 @@ export type DeleteServicesResponse = {
 
 export type AppInfo = {
   account: {
-    key: string;
+    key: Address;
   };
 };

frontend/components/Layout/Navbar/Navbar.tsx

@@ -1,6 +1,6 @@
 import { Flex } from 'antd';
-import { SettingsButton } from './SettingsButton/SettingsButton';
-import { NotificationButton } from './NotificationButton/NotificationButton';
+import { SettingsButton } from './SettingsButton';
+import { NotificationButton } from './NotificationButton';
 import Image from 'next/image';
 
 export const Navbar = () => {

frontend/components/Layout/Navbar/SettingsButton/SettingsButton.tsx → frontend/components/Layout/Navbar/SettingsButton.tsx

@@ -1,10 +1,13 @@
 import { SettingOutlined } from '@ant-design/icons';
 import { Button, Dropdown, MenuProps } from 'antd';
-import { useMemo } from 'react';
 
-export const SettingsButton = ({ disabled }: { disabled: boolean }) => {
-  const items: MenuProps['items'] = useMemo(() => [], []);
+const items: MenuProps['items'] = []; //placeholder for now
 
+type SettingsButtonProps = {
+  disabled: boolean;
+};
+
+export const SettingsButton = ({ disabled }: SettingsButtonProps) => {
   return (
     <Dropdown menu={{ items }} placement="bottomLeft" disabled={disabled}>
       <Button type="text" icon={<SettingOutlined />} />

frontend/components/Marketplace/Marketplace.tsx

@@ -1,5 +1,5 @@
 import { Flex } from 'antd';
-import { MarketplaceItemCard } from './MarketplaceItemCard/MarketplaceItemCard';
+import { MarketplaceItemCard } from './MarketplaceItemCard';
 import { useMemo } from 'react';
 import { useMarketplace } from '@/hooks';
 

frontend/components/Modals/QRModal/QRModal.tsx → frontend/components/Modals/QRModal.tsx

@@ -4,11 +4,13 @@ import { Flex, Modal, QRCode, Typography } from 'antd';
 import { ethers } from 'ethers';
 import { useMemo } from 'react';
 
+type QRModalProps = {
+  data: QRModalData;
+};
+
 export const QRModal = ({
   data: { amount, chainId, address, open, isERC20 },
-}: {
-  data: QRModalData;
-}) => {
+}: QRModalProps) => {
   const { setQrModalData } = useModals();
 
   const handleCancel = () => {
@@ -25,22 +27,22 @@ export const QRModal = ({
     if (Number(amount)) return ethers.utils.parseUnits(`${amount}`).toString();
   }, [amount]);
 
-  const metamaskAddress: string | undefined = useMemo(() => {
+  const metamaskUrl: string = useMemo(() => {
     if (!address || !chainId || !parsedAmount) return '';
     if (isERC20) {
       return `https://metamask.app.link/send/token/${address}@${chainId}?value=${parsedAmount}`;
     }
     return `https://metamask.app.link/send/${address}@${chainId}?value=${parsedAmount}`;
   }, [address, chainId, isERC20, parsedAmount]);
 
-  const modalParamsValid: boolean = useMemo(
+  const isModalParamsValid: boolean = useMemo(
     () => Boolean(address && chainId && parsedAmount),
     [address, chainId, parsedAmount],
   );
 
   return (
     <Modal
-      open={open && modalParamsValid}
+      open={open && isModalParamsValid}
       footer={null}
       title="Scan QR code"
       onCancel={handleCancel}
@@ -51,7 +53,7 @@ export const QRModal = ({
           <strong>Metamask Mobile</strong>.
         </Typography.Text>
         <Flex justify="center">
-          <QRCode value={metamaskAddress} />
+          <QRCode value={metamaskUrl} />
         </Flex>
       </Flex>
     </Modal>

frontend/components/Modals/index.ts

@@ -1 +1 @@
-export * from './QRModal/QRModal';
+export * from './QRModal';

frontend/components/Spawn/Funding/FundRequirement/FundRequirement.tsx

@@ -1,5 +1,6 @@
 import { copyToClipboard } from '@/helpers/copyToClipboard';
 import { useModals, useServices } from '@/hooks';
+import { Address } from '@/types';
 import { Button, Flex, Typography, message } from 'antd';
 import {
   Dispatch,
@@ -10,10 +11,26 @@ import {
 } from 'react';
 import { useInterval } from 'usehooks-ts';
 
+type FundRequirementProps = {
+  serviceHash?: string;
+  address: Address;
+  requirement: number;
+  contractAddress?: Address;
+  symbol: string;
+  hasReceivedFunds: boolean;
+  isERC20: boolean;
+  getBalance: (
+    address: Address,
+    rpc: string,
+    contractAddress?: Address,
+  ) => Promise<number>;
+  setReceivedFunds: Dispatch<SetStateAction<{ [address: Address]: boolean }>>;
+};
+
 /**
  * Should be called by FundRequirementERC20 or FundRequirementETH only
  * @param { serviceHash, address, requirement, contractAddress, symbol, hasReceivedFunds, isERC20, getBalance, setReceivedFunds }
- * @returns JSX.Element
+ * @returns
  */
 export const FundRequirement = ({
   serviceHash,
@@ -25,21 +42,7 @@ export const FundRequirement = ({
   isERC20,
   getBalance,
   setReceivedFunds,
-}: {
-  serviceHash?: string;
-  address: string;
-  requirement: number;
-  contractAddress?: string;
-  symbol: string;
-  hasReceivedFunds: boolean;
-  isERC20: boolean;
-  getBalance: (
-    address: string,
-    rpc: string,
-    contractAddress?: string,
-  ) => Promise<number>;
-  setReceivedFunds: Dispatch<SetStateAction<{ [address: string]: boolean }>>;
-}) => {
+}: FundRequirementProps) => {
   const { qrModalOpen } = useModals();
   const { getServiceFromState } = useServices();
 
@@ -77,7 +80,7 @@ export const FundRequirement = ({
         .then((balance: number) => {
           if (balance >= requirement) {
             setIsPollingBalance(false);
-            setReceivedFunds((prev: { [address: string]: boolean }) => ({
+            setReceivedFunds((prev: { [address: Address]: boolean }) => ({
               ...prev,
               [address]: true,
             }));

frontend/components/Spawn/Funding/FundRequirement/FundRequirementERC20.tsx

@@ -1,16 +1,19 @@
 import { useEthers } from '@/hooks';
 import { Dispatch, SetStateAction } from 'react';
 import { FundRequirement } from './FundRequirement';
+import { Address } from '@/types';
 
-export const FundRequirementERC20 = (props: {
+type FundRequirementERC20Props = {
   serviceHash: string;
-  address: string;
+  address: Address;
   requirement: number;
   symbol: string;
-  contractAddress?: string;
+  contractAddress?: Address;
   hasReceivedFunds: boolean;
-  setReceivedFunds: Dispatch<SetStateAction<{ [address: string]: boolean }>>;
-}) => {
+  setReceivedFunds: Dispatch<SetStateAction<{ [address: Address]: boolean }>>;
+};
+
+export const FundRequirementERC20 = (props: FundRequirementERC20Props) => {
   const { getERC20Balance } = useEthers();
   return (
     <FundRequirement getBalance={getERC20Balance} isERC20={true} {...props} />

frontend/components/Spawn/Funding/FundRequirement/FundRequirementETH.tsx

@@ -1,15 +1,18 @@
 import { useEthers } from '@/hooks';
 import { Dispatch, SetStateAction } from 'react';
 import { FundRequirement } from './FundRequirement';
+import { Address } from '@/types';
 
-export const FundRequirementETH = (props: {
+type FundRequirementETHProps = {
   serviceHash?: string;
-  address: string;
+  address: Address;
   symbol: string;
   requirement: number;
   hasReceivedFunds: boolean;
-  setReceivedFunds: Dispatch<SetStateAction<{ [address: string]: boolean }>>;
-}) => {
+  setReceivedFunds: Dispatch<SetStateAction<{ [address: Address]: boolean }>>;
+};
+
+export const FundRequirementETH = (props: FundRequirementETHProps) => {
   const { getETHBalance } = useEthers();
   return (
     <FundRequirement getBalance={getETHBalance} isERC20={false} {...props} />

frontend/components/Spawn/Funding/Funding.tsx

@@ -1,8 +1,39 @@
 import { Service } from '@/client';
 import { SpawnScreenState } from '@/enums';
 import { useSpawn } from '@/hooks';
+import { Address } from '@/types';
+import { FundsReceivedMap } from '@/types/Maps';
 import { TimelineItemProps, Flex, Typography, Timeline } from 'antd';
-import { useState, useMemo, useEffect, SetStateAction, Dispatch } from 'react';
+import { isEmpty } from 'lodash';
+import {
+  useState,
+  useMemo,
+  useEffect,
+  SetStateAction,
+  Dispatch,
+  ReactElement,
+} from 'react';
+
+type FundRequirementComponentProps = {
+  setReceivedFunds: Dispatch<SetStateAction<{ [address: Address]: boolean }>>;
+  serviceHash: string;
+  address: Address;
+  requirement: number;
+  contractAddress?: Address;
+  symbol: string;
+  hasReceivedFunds: boolean;
+};
+
+type FundingProps = {
+  service: Service;
+  fundRequirements: { [address: Address]: number };
+  FundRequirementComponent: (
+    props: FundRequirementComponentProps,
+  ) => ReactElement;
+  nextPage: SpawnScreenState;
+  symbol: string;
+  contractAddress?: Address;
+};
 
 export const Funding = ({
   service,
@@ -11,30 +42,15 @@ export const Funding = ({
   nextPage,
   symbol,
   contractAddress,
-}: {
-  service: Service;
-  fundRequirements: { [address: string]: number };
-  FundRequirementComponent: (props: {
-    setReceivedFunds: Dispatch<SetStateAction<{ [address: string]: boolean }>>;
-    serviceHash: string;
-    address: string;
-    requirement: number;
-    contractAddress?: string;
-    symbol: string;
-    hasReceivedFunds: boolean;
-  }) => JSX.Element;
-  nextPage: SpawnScreenState;
-  symbol: string;
-  contractAddress?: string;
-}) => {
+}: FundingProps) => {
   const { setSpawnScreenState } = useSpawn();
 
   const [receivedFunds, setReceivedFunds] = useState<{
-    [address: string]: boolean;
+    [address: Address]: boolean;
   }>({
     ...Object.keys(fundRequirements).reduce(
-      (acc: { [address: string]: boolean }, address) => {
-        acc[address] = false;
+      (acc: FundsReceivedMap, address) => {
+        acc[address as Address] = false;
         return acc;
       },
       {},
@@ -43,20 +59,22 @@ export const Funding = ({
 
   const timelineItems: TimelineItemProps[] = useMemo(
     () =>
-      Object.keys(fundRequirements).map((address) => ({
-        children: (
-          <FundRequirementComponent
-            setReceivedFunds={setReceivedFunds}
-            serviceHash={service.hash}
-            address={address}
-            requirement={fundRequirements[address]}
-            symbol={symbol}
-            hasReceivedFunds={receivedFunds[address]}
-            contractAddress={contractAddress}
-          />
-        ),
-        color: receivedFunds[address] ? 'green' : 'red',
-      })) as TimelineItemProps[],
+      (Object.keys(fundRequirements) as Address[]).map((address) => {
+        return {
+          children: (
+            <FundRequirementComponent
+              setReceivedFunds={setReceivedFunds}
+              serviceHash={service.hash}
+              address={address}
+              requirement={fundRequirements[address]}
+              symbol={symbol}
+              hasReceivedFunds={receivedFunds[address]}
+              contractAddress={contractAddress}
+            />
+          ),
+          color: receivedFunds[address] ? 'green' : 'red',
+        };
+      }) as TimelineItemProps[],
     [
       FundRequirementComponent,
       contractAddress,
@@ -68,8 +86,8 @@ export const Funding = ({
   );
 
   const hasSentAllFunds = useMemo(() => {
-    if (Object.keys(fundRequirements).length === 0) return false;
-    return Object.keys(receivedFunds).reduce(
+    if (isEmpty(fundRequirements)) return false;
+    return (Object.keys(receivedFunds) as Address[]).reduce(
       (acc: boolean, address) => acc && receivedFunds[address],
       true,
     );

frontend/components/Spawn/SpawnAgentFunding/SpawnAgentFunding.tsx → frontend/components/Spawn/SpawnAgentFunding.tsx

@@ -1,13 +1,16 @@
 import { Service } from '@/client';
-import { Funding } from '../Funding/Funding';
+import { Funding } from './Funding/Funding';
 import { SpawnScreenState } from '@/enums';
-import { FundRequirementETH } from '../Funding/FundRequirement/FundRequirementETH';
+import { FundRequirementETH } from './Funding/FundRequirement/FundRequirementETH';
+import { Address } from '@/types';
 
-export const SpawnAgentFunding = (props: {
+type SpawnAgentFundingProps = {
   service: Service;
-  agentFundRequirements: { [address: string]: number };
+  agentFundRequirements: { [address: Address]: number };
   nextPage: SpawnScreenState;
-}) => (
+};
+
+export const SpawnAgentFunding = (props: SpawnAgentFundingProps) => (
   <Funding
     fundRequirements={props.agentFundRequirements}
     symbol={'XDAI'} // hardcoded while only trader is available