Add bottom sheet

iron-fish · Dec 12, 2024 · f7116b5 · f7116b5
1 parent 8aff9d4
commit f7116b5
Show file tree

Hide file tree

Showing 6 changed files with 278 additions and 56 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/mobile-app/app/(tabs)/balances.tsx b/packages/mobile-app/app/(tabs)/balances.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import {
   Box,
   HStack,
@@ -7,6 +8,8 @@ import {
   Text,
   VStack,
   Card,
+  useBottomSheet,
+  Button,
 } from "@ironfish/tackle-box";
 import { SafeAreaGradient } from "@/components/SafeAreaGradient/SafeAreaGradient";
 import { View } from "react-native";
@@ -58,11 +61,7 @@ export default function Balances() {
               </Tabs.Content>
               <Tabs.Content value="transactions">
                 <VStack flexGrow={1} p={4} pb={16}>
-                  <Text>Transactions</Text>
-                  <Text>Transactions</Text>
-                  <Text>Transactions</Text>
-                  <Text>Transactions</Text>
-                  <Text>Transactions</Text>
+                  <BottomSheetDemo />
                 </VStack>
               </Tabs.Content>
             </Tabs.Root>
@@ -128,3 +127,48 @@ function AssetRow() {
     </Card>
   );
 }
+
+function BottomSheetDemo() {
+  const bottomSheet = useBottomSheet();
+
+  return (
+    <VStack gap={2}>
+      <Button
+        title="Show Bottom Sheet"
+        onClick={() => {
+          bottomSheet.show({
+            title: "Account Syncing",
+            body: <AccountSyncingDetails onClose={bottomSheet.hide} />,
+          });
+        }}
+      />
+    </VStack>
+  );
+}
+
+function AccountSyncingDetails({ onClose }: { onClose: () => void }) {
+  return (
+    <Box>
+      <Text color="textSecondary" textAlign="center">
+        The blockchain is currently syncing with your accounts. Your balance may
+        be inaccurate and sending transactions will be disabled until the sync
+        is done.
+      </Text>
+      <VStack mt={8} mb={20} gap={4}>
+        <VStack>
+          <Text color="textSecondary">Node Status:</Text>
+          <Text size="lg">Syncing Blocks</Text>
+        </VStack>
+        <VStack>
+          <Text color="textSecondary">Progress:</Text>
+          <Text size="lg">42.3%</Text>
+        </VStack>
+        <VStack>
+          <Text color="textSecondary">Blocks Scanned:</Text>
+          <Text size="lg">33645/74346</Text>
+        </VStack>
+      </VStack>
+      <Button title="Close" onClick={onClose} />
+    </Box>
+  );
+}
diff --git a/packages/mobile-app/app/_layout.tsx b/packages/mobile-app/app/_layout.tsx
@@ -4,12 +4,7 @@ import {
   ThemeProvider,
 } from "@react-navigation/native";
 import { Stack } from "expo-router";
-import {
-  ActivityIndicator,
-  SafeAreaView,
-  StyleSheet,
-  Text,
-} from "react-native";
+import { ActivityIndicator, SafeAreaView, StyleSheet } from "react-native";
 import {
   MutationCache,
   QueryClient,
@@ -20,6 +15,7 @@ import { useColorScheme } from "react-native";
 import { FacadeProvider, useFacade } from "../data/facades";
 import { useEffect, useState } from "react";
 import { useFonts } from "expo-font";
+import { BottomSheetProvider, Text } from "@ironfish/tackle-box";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -75,20 +71,22 @@ export default function Layout() {
       <QueryClientProvider client={queryClient}>
         <FacadeProvider>
           <DatabaseLoader>
-            <Stack>
-              <Stack.Screen
-                name="(tabs)"
-                options={{
-                  headerShown: false,
-                }}
-              />
-              <Stack.Screen
-                name="onboarding"
-                options={{
-                  headerShown: false,
-                }}
-              />
-            </Stack>
+            <BottomSheetProvider>
+              <Stack>
+                <Stack.Screen
+                  name="(tabs)"
+                  options={{
+                    headerShown: false,
+                  }}
+                />
+                <Stack.Screen
+                  name="onboarding"
+                  options={{
+                    headerShown: false,
+                  }}
+                />
+              </Stack>
+            </BottomSheetProvider>
           </DatabaseLoader>
         </FacadeProvider>
       </QueryClientProvider>