diff --git a/liquidity/ui/src/components/AccountBanner/AccountBanner.tsx b/liquidity/ui/src/components/AccountBanner/AccountBanner.tsx new file mode 100644 index 000000000..bc591fcdf --- /dev/null +++ b/liquidity/ui/src/components/AccountBanner/AccountBanner.tsx @@ -0,0 +1,40 @@ +import { Button, Flex, Heading } from '@chakra-ui/react'; +import { useAccounts, useCreateAccount } from '@snx-v3/useAccounts'; +import { FC } from 'react'; + +export const AccountBanner: FC = () => { + const { + data: accounts, + isLoading: isAccountsLoading, + isFetching: isAccountsFetching, + } = useAccounts(); + const { + mutation: { mutate: createAccount, isPending: isCreateAccountLoading }, + } = useCreateAccount(); + + if (!isAccountsFetching && !isAccountsLoading && accounts && accounts.length === 0) { + return ( + + Create an account to deposit liquidity + + + ); + } + + return null; +}; diff --git a/liquidity/ui/src/components/AccountBanner/index.ts b/liquidity/ui/src/components/AccountBanner/index.ts new file mode 100644 index 000000000..02ab4b128 --- /dev/null +++ b/liquidity/ui/src/components/AccountBanner/index.ts @@ -0,0 +1 @@ +export * from './AccountBanner'; diff --git a/liquidity/ui/src/pages/Home/Home.tsx b/liquidity/ui/src/pages/Home/Home.tsx index 8c342bdf4..3078ab7ec 100644 --- a/liquidity/ui/src/pages/Home/Home.tsx +++ b/liquidity/ui/src/pages/Home/Home.tsx @@ -1,8 +1,11 @@ import { Flex, Heading } from '@chakra-ui/react'; import { Helmet } from 'react-helmet'; import { AssetsList, PositionsList, StatsList } from '../../components'; +import { AccountBanner } from '../../components/AccountBanner'; +import { useWallet } from '@snx-v3/useBlockchain'; export function Home() { + const { activeWallet } = useWallet(); return ( <> @@ -10,6 +13,7 @@ export function Home() { + {activeWallet && }