Add color constants and update color usage

valory-xyz · Feb 22, 2024 · 6d11939 · 6d11939
1 parent 5129598
commit 6d11939
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 4 deletions.
diff --git a/frontend/components/Spawn/Funding/Funding.tsx b/frontend/components/Spawn/Funding/Funding.tsx
@@ -1,4 +1,5 @@
 import { Service } from '@/client';
+import { COLOR } from '@/constants';
 import { SpawnScreenState } from '@/enums';
 import { useSpawn } from '@/hooks';
 import { Address } from '@/types';
@@ -70,7 +71,7 @@ export const Funding = ({
               contractAddress={contractAddress}
             />
           ),
-          color: receivedFunds[address] ? 'green' : 'red',
+          color: receivedFunds[address] ? COLOR.GREEN_2 : COLOR.RED,
         };
       }) as TimelineItemProps[],
     [

diff --git a/frontend/components/Spawn/SpawnRPC.tsx b/frontend/components/Spawn/SpawnRPC.tsx
@@ -11,6 +11,7 @@ import {
 import { NODIES_URL } from '@/constants/urls';
 import {
   Dispatch,
+  ReactElement,
   SetStateAction,
   useCallback,
   useMemo,
@@ -20,7 +21,7 @@ import { useSpawn, useEthers } from '@/hooks';
 import { SpawnScreenState } from '@/enums';
 import { CheckSquareTwoTone, WarningFilled } from '@ant-design/icons';
 import { InputStatus } from 'antd/es/_util/statusUtils';
-import _ from 'lodash';
+import { debounce } from 'lodash';
 
 enum RPCState {
   LOADING,
@@ -54,7 +55,7 @@ export const SpawnRPC = ({ rpc, setRpc, nextPage }: SpawnRPCProps) => {
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debounceCheckRpc = useCallback(
-    _.debounce((_rpc: string) => {
+    debounce((_rpc: string) => {
       if (isCheckingRpc) return;
       if (!_rpc) return;
       setIsCheckingRpc(true);
@@ -98,7 +99,7 @@ export const SpawnRPC = ({ rpc, setRpc, nextPage }: SpawnRPCProps) => {
     [rpcState],
   );
 
-  const inputSuffix: JSX.Element = useMemo(() => {
+  const inputSuffix: ReactElement = useMemo(() => {
     switch (rpcState) {
       case RPCState.LOADING:
         return <Spin />;

diff --git a/frontend/constants/color.ts b/frontend/constants/color.ts
@@ -0,0 +1,4 @@
+export const COLOR = {
+  RED: '#EA3324',
+  GREEN_2: '#00F422',
+};
diff --git a/frontend/constants/index.ts b/frontend/constants/index.ts
@@ -3,3 +3,4 @@ export * from './contracts';
 export * from './serviceTemplates';
 export * from './tokens';
 export * from './urls';
+export * from './color';