feat: account banner (#279)

* feat: account banner

* fix: lintting issue

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 (
+      <Flex
+        mt={4}
+        flexGrow="1"
+        h="fit-content"
+        border="1px solid"
+        borderColor="gray.900"
+        rounded="base"
+        width="100%"
+        px="6"
+        py="8"
+        bg="navy.700"
+        alignItems="center"
+        justifyContent="space-between"
+      >
+        <Heading fontSize="18px">Create an account to deposit liquidity</Heading>
+        <Button onClick={() => createAccount()} isLoading={isCreateAccountLoading}>
+          Create Account
+        </Button>
+      </Flex>
+    );
+  }
+
+  return null;
+};

liquidity/ui/src/components/AccountBanner/index.ts

@@ -0,0 +1 @@
+export * from './AccountBanner';

liquidity/ui/src/pages/Home/Home.tsx

@@ -1,15 +1,19 @@
 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 (
     <>
       <Helmet>
         <title>Synthetix Liquidity V3</title>
         <meta name="description" content="Synthetix V3 - Dashboard" />
       </Helmet>
       <Flex flexDir="column" mb={16}>
+        {activeWallet && <AccountBanner />}
         <Heading
           mt={{
             base: 2,