Create dashboard balance card design

src/pages/Dashboard/BalanceLineChart/BalanceChardCard.tsx

@@ -0,0 +1,32 @@
+import { Stack, XStack, YStack } from "tamagui";
+import DashboardCardWrapper from "../DashboardCardWrapper";
+import { Text } from "@status-im/components";
+import LineChart from "./LineChart";
+
+
+const BalanceChardCard = () => {
+    return (
+        <DashboardCardWrapper >
+            <Stack style={{ width: '536px' }}>
+                <YStack>
+
+                    <XStack justifyContent={'space-between'}>
+                        <YStack>
+                            <Text size={15} weight={'semibold'}> Balance</Text>
+                            <XStack style={{ alignItems: 'end' }} space={'$1'}>
+                                <Text size={27} weight={'semibold'}>24,273</Text>
+                                <Text size={11} color="#23ADA0" >1.56%</Text>
+                            </XStack>
+                        </YStack>
+                        <XStack style={{ border: '1px solid black', height: 'fit-content', padding: '3px', borderRadius: '15px' }}>
+                            <Text size={13}>01 APR 2022</Text>
+                            <Text size={13}> → 31 MAR 2023</Text>
+                        </XStack>
+                    </XStack>
+                    <LineChart />
+                </YStack>
+            </Stack>
+        </DashboardCardWrapper>
+    )
+}
+export default BalanceChardCard;

src/pages/Dashboard/Dashboard.tsx

@@ -2,12 +2,14 @@ import { YStack } from 'tamagui'
 
 import BasicInfoCards from './BasicInfoCards/BasicInfoCards'
 import AddCardsContainer from '../../components/General/AddCards/AddCardsContainer'
+import BalanceChardCard from './BalanceLineChart/BalanceChardCard'
 
 const Dashboard = () => {
   return (
     <YStack space={'$2'} alignItems="start">
       <AddCardsContainer />
       <BasicInfoCards />
+      <BalanceChardCard/>
     </YStack>
   )
 }