Merge pull request #224 from valory-xyz/fix/staking-info-interval

Staking Info interval, general refactor for DX and performance

frontend/client/types.ts

@@ -1,4 +1,4 @@
-import { Address } from '@/types';
+import { Address } from '@/types/Address';
 
 import { Chain, DeploymentStatus, Ledger } from './enums';
 

frontend/components/HelpAndSupport/HelpAndSupport.tsx → frontend/components/HelpAndSupport/index.tsx

@@ -2,13 +2,14 @@ import { CloseOutlined, QuestionCircleOutlined } from '@ant-design/icons';
 import { Button, Card, Flex, message, Typography } from 'antd';
 import { useCallback, useEffect, useState } from 'react';
 
-import { FAQ_URL, SUPPORT_URL } from '@/constants';
-import { UNICODE_SYMBOLS } from '@/constants/unicode';
-import { PageState } from '@/enums';
-import { useLogs, usePageState } from '@/hooks';
+import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { FAQ_URL, SUPPORT_URL } from '@/constants/urls';
+import { PageState } from '@/enums/PageState';
 import { useElectronApi } from '@/hooks/useElectronApi';
+import { useLogs } from '@/hooks/useLogs';
+import { usePageState } from '@/hooks/usePageState';
 
-import { CardTitle } from '../common/CardTitle';
+import { CardTitle } from '../Card/CardTitle';
 import { CardSection } from '../styled/CardSection';
 
 const { Title, Paragraph } = Typography;

frontend/components/Layout/TopBar.tsx

@@ -1,7 +1,7 @@
 import { Typography } from 'antd';
 import styled from 'styled-components';
 
-import { COLOR } from '@/constants';
+import { COLOR } from '@/constants/colors';
 import { useElectronApi } from '@/hooks/useElectronApi';
 import { useStore } from '@/hooks/useStore';
 

frontend/components/Layout/Layout.tsx → frontend/components/Layout/index.tsx

@@ -3,7 +3,7 @@ import { message } from 'antd';
 import { PropsWithChildren, useContext, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 
-import { COLOR } from '@/constants';
+import { COLOR } from '@/constants/colors';
 import { OnlineStatusContext } from '@/context/OnlineStatusProvider';
 
 import { TopBar } from './TopBar';

frontend/components/Main/KeepAgentRunning.tsx

@@ -1,10 +1,10 @@
 import { Flex, Typography } from 'antd';
 
 import { DeploymentStatus } from '@/client';
-import { useServices } from '@/hooks';
+import { useServices } from '@/hooks/useServices';
 import { useStore } from '@/hooks/useStore';
 
-import { Alert } from '../common/Alert';
+import { Alert } from '../Alert';
 import { CardSection } from '../styled/CardSection';
 
 const { Text } = Typography;

frontend/components/Main/MainAddFunds.tsx

@@ -15,13 +15,14 @@ import Link from 'next/link';
 import { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { copyToClipboard, truncateAddress } from '@/common-util';
-import { COW_SWAP_GNOSIS_XDAI_OLAS_URL } from '@/constants';
-import { UNICODE_SYMBOLS } from '@/constants/unicode';
+import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { COW_SWAP_GNOSIS_XDAI_OLAS_URL } from '@/constants/urls';
 import { useWallet } from '@/hooks/useWallet';
-import { Address } from '@/types';
+import { Address } from '@/types/Address';
+import { copyToClipboard } from '@/utils/copyToClipboard';
+import { truncateAddress } from '@/utils/truncate';
 
-import { Alert } from '../common/Alert';
+import { Alert } from '../Alert';
 import { CardSection } from '../styled/CardSection';
 
 const { Text } = Typography;

frontend/components/Main/MainGasBalance.tsx

@@ -3,8 +3,9 @@ import { Skeleton, Tooltip, Typography } from 'antd';
 import { useMemo } from 'react';
 import styled from 'styled-components';
 
-import { COLOR, LOW_BALANCE } from '@/constants';
-import { useBalance } from '@/hooks';
+import { COLOR } from '@/constants/colors';
+import { LOW_BALANCE } from '@/constants/thresholds';
+import { useBalance } from '@/hooks/useBalance';
 import { useWallet } from '@/hooks/useWallet';
 
 import { CardSection } from '../styled/CardSection';

frontend/components/Main/MainHeader/CannotStartAgent.tsx

@@ -1,8 +1,9 @@
 import { InfoCircleOutlined } from '@ant-design/icons';
 import { Popover, PopoverProps, Typography } from 'antd';
 
-import { COLOR, SUPPORT_URL } from '@/constants';
-import { UNICODE_SYMBOLS } from '@/constants/unicode';
+import { COLOR } from '@/constants/colors';
+import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { SUPPORT_URL } from '@/constants/urls';
 import { useStakingContractInfo } from '@/hooks/useStakingContractInfo';
 
 const { Paragraph, Text } = Typography;

frontend/components/Main/MainHeader/constants.tsx

@@ -1,6 +1,6 @@
 import { formatUnits } from 'ethers/lib/utils';
 
-import { SERVICE_TEMPLATES } from '@/constants';
+import { SERVICE_TEMPLATES } from '@/constants/serviceTemplates';
 
 const olasCostOfBond = Number(
   formatUnits(`${SERVICE_TEMPLATES[0].configuration.olas_cost_of_bond}`, 18),

frontend/components/Main/MainHeader/MainHeader.tsx → frontend/components/Main/MainHeader/index.tsx

@@ -4,18 +4,19 @@ import Image from 'next/image';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { Chain, DeploymentStatus } from '@/client';
-import { COLOR, LOW_BALANCE } from '@/constants';
-import { useBalance, useServiceTemplates } from '@/hooks';
+import { COLOR } from '@/constants/colors';
+import { LOW_BALANCE } from '@/constants/thresholds';
+import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
 import { useReward } from '@/hooks/useReward';
 import { useServices } from '@/hooks/useServices';
+import { useServiceTemplates } from '@/hooks/useServiceTemplates';
 import { useStakingContractInfo } from '@/hooks/useStakingContractInfo';
 import { useStore } from '@/hooks/useStore';
 import { useWallet } from '@/hooks/useWallet';
-import { ServicesService } from '@/service';
+import { ServicesService } from '@/service/Services';
 import { WalletService } from '@/service/Wallet';
 
-import { CannotStartAgent } from './CannotStartAgent';
 import { requiredGas, requiredOlas } from './constants';
 import { FirstRunModal } from './FirstRunModal';
 
@@ -86,8 +87,7 @@ export const MainHeader = () => {
 
   const { minimumStakedAmountRequired } = useReward();
 
-  const { isStakingContractInfoLoading, canStartAgent } =
-    useStakingContractInfo();
+  const { canStartAgent } = useStakingContractInfo();
 
   // hook to setup tray icon
   useSetupTrayIcon();
@@ -299,9 +299,7 @@ export const MainHeader = () => {
   return (
     <Flex justify="start" align="center" gap={10}>
       {agentHead}
-      {isStakingContractInfoLoading ? null : (
-        <>{canStartAgent ? serviceToggleButton : <CannotStartAgent />}</>
-      )}
+      {serviceToggleButton}
       <FirstRunModal open={isModalOpen} onClose={handleModalClose} />
     </Flex>
   );

frontend/components/Main/MainNeedsFunds.tsx

@@ -2,13 +2,13 @@ import { Flex, Typography } from 'antd';
 import { formatUnits } from 'ethers/lib/utils';
 import { ReactNode, useEffect, useMemo } from 'react';
 
-import { SERVICE_TEMPLATES } from '@/constants';
-import { UNICODE_SYMBOLS } from '@/constants/unicode';
-import { useBalance } from '@/hooks';
+import { SERVICE_TEMPLATES } from '@/constants/serviceTemplates';
+import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
 import { useStore } from '@/hooks/useStore';
 
-import { Alert } from '../common/Alert';
+import { Alert } from '../Alert';
 import { CardSection } from '../styled/CardSection';
 
 const { Text, Paragraph } = Typography;

frontend/components/Main/MainOlasBalance.tsx

@@ -3,11 +3,11 @@ import { Flex, Skeleton, Tooltip, Typography } from 'antd';
 import { useMemo } from 'react';
 import styled from 'styled-components';
 
-import { balanceFormat } from '@/common-util/numberFormatters';
-import { COLOR } from '@/constants';
-import { UNICODE_SYMBOLS } from '@/constants/unicode';
-import { useBalance } from '@/hooks';
+import { COLOR } from '@/constants/colors';
+import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { useBalance } from '@/hooks/useBalance';
 import { useReward } from '@/hooks/useReward';
+import { balanceFormat } from '@/utils/numberFormatters';
 
 import { CardSection } from '../styled/CardSection';
 

frontend/components/Main/MainRewards.tsx

@@ -3,13 +3,13 @@ import { Button, Flex, Modal, Skeleton, Tag, Tooltip, Typography } from 'antd';
 import Image from 'next/image';
 import { useCallback, useEffect, useState } from 'react';
 
-import { balanceFormat } from '@/common-util';
-import { useBalance } from '@/hooks';
+import { useBalance } from '@/hooks/useBalance';
 import { useElectronApi } from '@/hooks/useElectronApi';
 import { useReward } from '@/hooks/useReward';
 import { useStore } from '@/hooks/useStore';
+import { balanceFormat } from '@/utils/numberFormatters';
 
-import { ConfettiAnimation } from '../common/ConfettiAnimation';
+import { ConfettiAnimation } from '../Confetti/ConfettiAnimation';
 import { CardSection } from '../styled/CardSection';
 
 const { Text, Title, Paragraph } = Typography;

frontend/components/Main/Main.tsx → frontend/components/Main/index.tsx

@@ -2,13 +2,15 @@ import { QuestionCircleOutlined, SettingOutlined } from '@ant-design/icons';
 import { Button, Card, Flex } from 'antd';
 import { useEffect } from 'react';
 
-import { PageState } from '@/enums';
-import { useBalance, usePageState, useServices } from '@/hooks';
+import { PageState } from '@/enums/PageState';
+import { useBalance } from '@/hooks/useBalance';
+import { usePageState } from '@/hooks/usePageState';
+import { useServices } from '@/hooks/useServices';
 
 import { KeepAgentRunning } from './KeepAgentRunning';
 import { MainAddFunds } from './MainAddFunds';
 import { MainGasBalance } from './MainGasBalance';
-import { MainHeader } from './MainHeader/MainHeader';
+import { MainHeader } from './MainHeader';
 import { MainNeedsFunds } from './MainNeedsFunds';
 import { MainOlasBalance } from './MainOlasBalance';
 import { MainRewards } from './MainRewards';

frontend/components/Settings/DebugInfoCard.tsx

@@ -13,13 +13,16 @@ import {
 import { useCallback, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
-import { balanceFormat, copyToClipboard, truncateAddress } from '@/common-util';
-import { COLOR } from '@/constants';
-import { UNICODE_SYMBOLS } from '@/constants/unicode';
-import { Token } from '@/enums';
-import { useBalance, useServices } from '@/hooks';
+import { COLOR } from '@/constants/colors';
+import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { Token } from '@/enums/Token';
+import { useBalance } from '@/hooks/useBalance';
+import { useServices } from '@/hooks/useServices';
 import { useWallet } from '@/hooks/useWallet';
-import { WalletAddressNumberRecord } from '@/types';
+import { WalletAddressNumberRecord } from '@/types/Records';
+import { copyToClipboard } from '@/utils/copyToClipboard';
+import { balanceFormat } from '@/utils/numberFormatters';
+import { truncateAddress } from '@/utils/truncate';
 
 import { CardSection } from '../styled/CardSection';
 

frontend/components/Settings/SettingsAddBackupWallet.tsx

@@ -3,12 +3,12 @@ import { Button, Form, Input, Typography } from 'antd';
 import { useMemo } from 'react';
 
 import { Chain } from '@/client';
-import { MIN_ETH_BALANCE_THRESHOLDS } from '@/constants';
-import { SettingsScreen } from '@/enums';
-import { useBalance } from '@/hooks';
+import { MIN_ETH_BALANCE_THRESHOLDS } from '@/constants/thresholds';
+import { SettingsScreen } from '@/enums/SettingsScreen';
+import { useBalance } from '@/hooks/useBalance';
 import { useSettings } from '@/hooks/useSettings';
 
-import { CardTitle } from '../common/CardTitle';
+import { CardTitle } from '../Card/CardTitle';
 import { CardFlex } from '../styled/CardFlex';
 
 export const SettingsAddBackupWallet = () => {

frontend/components/Settings/Settings.tsx → frontend/components/Settings/index.tsx

@@ -3,15 +3,16 @@ import { Button, Card, Flex, Typography } from 'antd';
 import Link from 'next/link';
 import { useMemo } from 'react';
 
-import { truncateAddress } from '@/common-util';
-import { UNICODE_SYMBOLS } from '@/constants/unicode';
-import { PageState, SettingsScreen } from '@/enums';
-import { usePageState } from '@/hooks';
+import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { PageState } from '@/enums/PageState';
+import { SettingsScreen } from '@/enums/SettingsScreen';
 import { useMasterSafe } from '@/hooks/useMasterSafe';
+import { usePageState } from '@/hooks/usePageState';
 import { useSettings } from '@/hooks/useSettings';
+import { truncateAddress } from '@/utils/truncate';
 
-import { Alert } from '../common/Alert';
-import { CardTitle } from '../common/CardTitle';
+import { Alert } from '../Alert';
+import { CardTitle } from '../Card/CardTitle';
 import { CardSection } from '../styled/CardSection';
 import { DebugInfoCard } from './DebugInfoCard';
 import { SettingsAddBackupWallet } from './SettingsAddBackupWallet';

frontend/components/Setup/Create/SetupBackupSigner.tsx

@@ -2,9 +2,9 @@ import { Button, Flex, Form, Input, Typography } from 'antd';
 
 import { CardFlex } from '@/components/styled/CardFlex';
 import { FormFlex } from '@/components/styled/FormFlex';
-import { SetupScreen } from '@/enums';
-import { useSetup } from '@/hooks';
-import { Address } from '@/types';
+import { SetupScreen } from '@/enums/SetupScreen';
+import { useSetup } from '@/hooks/useSetup';
+import { Address } from '@/types/Address';
 
 import { SetupCreateHeader } from './SetupCreateHeader';
 

frontend/components/Setup/Create/SetupCreateHeader.tsx

@@ -3,8 +3,8 @@ import { Button, Col, Flex, Row } from 'antd';
 import Image from 'next/image';
 import { memo } from 'react';
 
-import { SetupScreen } from '@/enums';
-import { useSetup } from '@/hooks';
+import { SetupScreen } from '@/enums/SetupScreen';
+import { useSetup } from '@/hooks/useSetup';
 
 export const SetupCreateHeader = memo(function SetupCreateHeader({
   prev,

frontend/components/Setup/Create/SetupCreateSafe.tsx

@@ -4,10 +4,11 @@ import { useEffect, useState } from 'react';
 
 import { Chain } from '@/client';
 import { CardSection } from '@/components/styled/CardSection';
-import { SUPPORT_URL } from '@/constants';
-import { UNICODE_SYMBOLS } from '@/constants/unicode';
-import { PageState } from '@/enums';
-import { usePageState, useSetup } from '@/hooks';
+import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { SUPPORT_URL } from '@/constants/urls';
+import { PageState } from '@/enums/PageState';
+import { usePageState } from '@/hooks/usePageState';
+import { useSetup } from '@/hooks/useSetup';
 import { useWallet } from '@/hooks/useWallet';
 import { WalletService } from '@/service/Wallet';
 

frontend/components/Setup/Create/SetupEoaFunding.tsx

@@ -15,18 +15,17 @@ import { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 
 import { Chain } from '@/client';
-import { copyToClipboard } from '@/common-util';
-import { Alert } from '@/components/common/Alert';
+import { Alert } from '@/components/Alert';
 import { CardFlex } from '@/components/styled/CardFlex';
 import { CardSection } from '@/components/styled/CardSection';
-import {
-  COW_SWAP_GNOSIS_XDAI_OLAS_URL,
-  MIN_ETH_BALANCE_THRESHOLDS,
-} from '@/constants';
-import { UNICODE_SYMBOLS } from '@/constants/unicode';
-import { SetupScreen } from '@/enums';
-import { useBalance, useSetup } from '@/hooks';
+import { UNICODE_SYMBOLS } from '@/constants/symbols';
+import { MIN_ETH_BALANCE_THRESHOLDS } from '@/constants/thresholds';
+import { COW_SWAP_GNOSIS_XDAI_OLAS_URL } from '@/constants/urls';
+import { SetupScreen } from '@/enums/SetupScreen';
+import { useBalance } from '@/hooks/useBalance';
+import { useSetup } from '@/hooks/useSetup';
 import { useWallet } from '@/hooks/useWallet';
+import { copyToClipboard } from '@/utils/copyToClipboard';
 
 import { SetupCreateHeader } from './SetupCreateHeader';
 

frontend/components/Setup/Create/SetupPassword.tsx

@@ -2,8 +2,8 @@ import { Button, Checkbox, Form, Input, message, Typography } from 'antd';
 import { useState } from 'react';
 
 import { Chain } from '@/client';
-import { SetupScreen } from '@/enums';
-import { useSetup } from '@/hooks';
+import { SetupScreen } from '@/enums/SetupScreen';
+import { useSetup } from '@/hooks/useSetup';
 import { AccountService } from '@/service/Account';
 import { WalletService } from '@/service/Wallet';