diff --git a/frontend/components/Spawn/Funding/Funding.tsx b/frontend/components/Spawn/Funding/Funding.tsx index 9ae17cf3a..69063d06b 100644 --- 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 index c715a4e12..e86e95ca6 100644 --- 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 ; diff --git a/frontend/constants/color.ts b/frontend/constants/color.ts new file mode 100644 index 000000000..4e59d24e4 --- /dev/null +++ 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 index 7cd14c438..b7d25f91e 100644 --- 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';