From 8e16d3960e7e8ad2e34b14f1981c14758a00ade9 Mon Sep 17 00:00:00 2001
From: Javier Bueno <javierbueno@emurgo.io>
Date: Thu, 21 Sep 2023 10:27:55 +0200
Subject: [PATCH 1/5] refactor: bottomsheet modal

---
 .../.storybook/storybook.requires.js          |  1 +
 apps/wallet-mobile/src/components/index.ts    |  1 +
 .../ConfirmTxScreen/ConfirmTxScreen.tsx       | 50 ++++++++++++-------
 3 files changed, 34 insertions(+), 18 deletions(-)

diff --git a/apps/wallet-mobile/.storybook/storybook.requires.js b/apps/wallet-mobile/.storybook/storybook.requires.js
index 746352407c..f1fc7e7b43 100644
--- a/apps/wallet-mobile/.storybook/storybook.requires.js
+++ b/apps/wallet-mobile/.storybook/storybook.requires.js
@@ -69,6 +69,7 @@ const getStories = () => {
     "./src/components/AmountItem/AmountItem.stories.tsx": require("../src/components/AmountItem/AmountItem.stories.tsx"),
     "./src/components/Analytics/Analytics.stories.tsx": require("../src/components/Analytics/Analytics.stories.tsx"),
     "./src/components/BlueCheckbox/BlueCheckbox.stories.tsx": require("../src/components/BlueCheckbox/BlueCheckbox.stories.tsx"),
+    "./src/components/BottomSheet/BottomSheet.stories.tsx": require("../src/components/BottomSheet/BottomSheet.stories.tsx"),
     "./src/components/BottomSheetModal/BottomSheetModal.stories.tsx": require("../src/components/BottomSheetModal/BottomSheetModal.stories.tsx"),
     "./src/components/Boundary/Boundary.stories.tsx": require("../src/components/Boundary/Boundary.stories.tsx"),
     "./src/components/Button/Button.stories.tsx": require("../src/components/Button/Button.stories.tsx"),
diff --git a/apps/wallet-mobile/src/components/index.ts b/apps/wallet-mobile/src/components/index.ts
index 762c9dd573..d4ed6ba8c4 100644
--- a/apps/wallet-mobile/src/components/index.ts
+++ b/apps/wallet-mobile/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from './Analytics'
 export * from './Banner'
+export * from './BottomSheet'
 export * from './BottomSheetModal'
 export * from './Boundary'
 export * from './BulletPointItem'
diff --git a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx
index d7fc085395..373189636d 100644
--- a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx
+++ b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx
@@ -3,8 +3,7 @@ import React from 'react'
 import {StyleSheet, View, ViewProps} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
-import {Button} from '../../../../components'
-import {BottomSheetModal} from '../../../../components/BottomSheetModal'
+import {BottomSheet, BottomSheetRef, Button, Spacer} from '../../../../components'
 import {LoadingOverlay} from '../../../../components/LoadingOverlay'
 import {useWalletNavigation} from '../../../../navigation'
 import {useSelectedWallet} from '../../../../SelectedWallet'
@@ -17,7 +16,15 @@ import {ConfirmTx} from './ConfirmTx'
 import {TransactionSummary} from './TransactionSummary'
 
 export const ConfirmTxScreen = () => {
-  const [confirmationModal, setConfirmationModal] = React.useState<boolean>(false)
+  const bottomSheetRef = React.useRef<null | BottomSheetRef>(null)
+
+  const openBottomSheet = () => {
+    bottomSheetRef.current?.openBottomSheet()
+  }
+
+  const closeBottomSheet = () => {
+    bottomSheetRef.current?.closeBottomSheet()
+  }
 
   const strings = useStrings()
   const wallet = useSelectedWallet()
@@ -62,27 +69,29 @@ export const ConfirmTxScreen = () => {
               authWithOs()
               return
             }
-            setConfirmationModal(true)
+            openBottomSheet()
           }}
         />
       </Actions>
 
-      <BottomSheetModal
-        isOpen={confirmationModal}
+      <BottomSheet
+        height={wallet.isHW ? 430 : 350}
+        ref={bottomSheetRef}
         title={wallet.isHW ? strings.chooseConnectionMethod : strings.signTransaction}
-        onClose={() => {
-          setConfirmationModal(false)
-        }}
-        contentContainerStyle={{justifyContent: 'space-between'}}
+        isExtendable={false}
       >
-        <ConfirmTx
-          wallet={wallet}
-          unsignedTx={unsignedTx}
-          datum={{data: createOrder.datum}}
-          onSuccess={() => resetToTxHistory()}
-          onCancel={() => setConfirmationModal(false)}
-        />
-      </BottomSheetModal>
+        <View style={styles.modalContent}>
+          <ConfirmTx
+            wallet={wallet}
+            unsignedTx={unsignedTx}
+            datum={{data: createOrder.datum}}
+            onSuccess={() => resetToTxHistory()}
+            onCancel={closeBottomSheet}
+          />
+
+          <Spacer height={16} />
+        </View>
+      </BottomSheet>
 
       <LoadingOverlay loading={txIsLoading} />
     </SafeAreaView>
@@ -102,4 +111,9 @@ const styles = StyleSheet.create({
   actions: {
     paddingVertical: 16,
   },
+  modalContent: {
+    flex: 1,
+    alignSelf: 'stretch',
+    paddingHorizontal: 16,
+  },
 })

From 6bdea81ae2e827ca2aaf526b799ac7ec0f53cba0 Mon Sep 17 00:00:00 2001
From: Javier Bueno <javierbueno@emurgo.io>
Date: Thu, 21 Sep 2023 10:32:19 +0200
Subject: [PATCH 2/5] refactor: bottomsheet modal

---
 .../BottomSheet/BottomSheet.stories.tsx       | 114 ++++++++++++++
 .../components/BottomSheet/BottomSheet.tsx    | 144 ++++++++++++++++++
 .../src/components/BottomSheet/index.ts       |   1 +
 3 files changed, 259 insertions(+)
 create mode 100644 apps/wallet-mobile/src/components/BottomSheet/BottomSheet.stories.tsx
 create mode 100644 apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx
 create mode 100644 apps/wallet-mobile/src/components/BottomSheet/index.ts

diff --git a/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.stories.tsx b/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.stories.tsx
new file mode 100644
index 0000000000..e285acda3f
--- /dev/null
+++ b/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.stories.tsx
@@ -0,0 +1,114 @@
+import {storiesOf} from '@storybook/react-native'
+import React from 'react'
+import {Button, ScrollView, StyleSheet, Text, TextInput, View} from 'react-native'
+
+import {Spacer} from '../Spacer'
+import {BottomSheet, BottomSheetRef} from './BottomSheet'
+
+storiesOf('BottomSheet', module)
+  .add('Default', () => <ComponentDefault />)
+  .add('Scroll + input (Keyboard) + extendable', () => <ComponentWithScrollAndInput />)
+
+const ComponentDefault = () => {
+  const bottomSheetRef = React.useRef<null | BottomSheetRef>(null)
+
+  const openBottomSheet = () => {
+    bottomSheetRef.current?.openBottomSheet()
+  }
+
+  const closeBottomSheet = () => {
+    bottomSheetRef.current?.closeBottomSheet()
+  }
+
+  const handleClick = () => {
+    if (bottomSheetRef.current?.isOpen) closeBottomSheet()
+    else openBottomSheet()
+  }
+
+  return (
+    <View style={{flex: 1}}>
+      <Button title="click" onPress={handleClick} />
+
+      <BottomSheet title="Fake Title" ref={bottomSheetRef} isExtendable={false}>
+        <View style={{flex: 1, alignSelf: 'stretch', paddingHorizontal: 16}}>
+          <Text style={{flex: 1}}>FAke content</Text>
+        </View>
+      </BottomSheet>
+    </View>
+  )
+}
+
+const ComponentWithScrollAndInput = () => {
+  const bottomSheetRef = React.useRef<null | BottomSheetRef>(null)
+
+  const openBottomSheet = () => {
+    bottomSheetRef.current?.openBottomSheet()
+  }
+
+  const closeBottomSheet = () => {
+    bottomSheetRef.current?.closeBottomSheet()
+  }
+
+  const handleClick = () => {
+    if (bottomSheetRef.current?.isOpen) closeBottomSheet()
+    else openBottomSheet()
+  }
+
+  return (
+    <View style={{flex: 1}}>
+      <Button title="click" onPress={handleClick} />
+
+      <BottomSheet title="Fake Title" ref={bottomSheetRef}>
+        <View style={{flex: 1, alignSelf: 'stretch', paddingHorizontal: 16}}>
+          <ScrollView style={{flex: 1, alignSelf: 'stretch', borderColor: 'grey', borderWidth: 1}}>
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+
+            <Text style={{flex: 1}}>FAke content</Text>
+          </ScrollView>
+
+          <Spacer height={20} />
+
+          <TextInput style={styles.input} placeholder="Fake input" />
+
+          <Spacer height={20} />
+        </View>
+      </BottomSheet>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  input: {
+    alignSelf: 'stretch',
+    height: 40,
+    borderWidth: 1,
+  },
+})
diff --git a/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx b/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx
new file mode 100644
index 0000000000..cd4d6d92d1
--- /dev/null
+++ b/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx
@@ -0,0 +1,144 @@
+import React from 'react'
+import {KeyboardAvoidingView, Modal, NativeTouchEvent, Platform, StyleSheet, Text, View} from 'react-native'
+
+import {Spacer} from '../Spacer'
+
+type BottomSheetProps = {
+  children: React.ReactNode
+  height?: number
+  debug?: boolean
+  isExtendable?: boolean
+  maxHeight?: `${number}%` | number
+  title: string
+}
+
+export type BottomSheetRef = {
+  openBottomSheet: () => void
+  closeBottomSheet: () => void
+  isOpen: boolean
+  onResponderMove: ({nativeEvent}: {nativeEvent: NativeTouchEvent}) => void // in case it needs to be used outside
+}
+
+export const BottomSheet = React.forwardRef<BottomSheetRef, BottomSheetProps>(
+  ({children, height = 300, debug = false, maxHeight = '80%', title, isExtendable = true}, ref) => {
+    const [isOpen, setIsOpen] = React.useState(false)
+    const [isExtended, setExtended] = React.useState(false)
+    const [swipeLocationY, setSwipeLocationY] = React.useState(height)
+    const [upDirectionCount, setUpDirectionCount] = React.useState(0)
+    const [downDirectionCount, setDownDirectionCount] = React.useState(0)
+
+    React.useImperativeHandle(ref, () => ({
+      openBottomSheet,
+      closeBottomSheet,
+      isOpen,
+      onResponderMove,
+    }))
+
+    const openBottomSheet = () => {
+      setIsOpen(true)
+    }
+
+    const closeBottomSheet = () => {
+      if (isExtended) setExtended(false)
+      setIsOpen(false)
+    }
+
+    const extendBottomSheet = () => {
+      setExtended(true)
+    }
+
+    const cleanDirectionCount = () => {
+      setDownDirectionCount(0)
+      setUpDirectionCount(0)
+    }
+
+    const onResponderMove = ({nativeEvent}: {nativeEvent: NativeTouchEvent}) => {
+      if (swipeLocationY < nativeEvent.locationY) {
+        const newState = downDirectionCount + 1
+        if (newState > 4) {
+          closeBottomSheet()
+          cleanDirectionCount()
+        } else setDownDirectionCount(newState)
+      } else if (swipeLocationY > nativeEvent.locationY) {
+        const newState = upDirectionCount + 1
+        if (newState > 4) {
+          extendBottomSheet()
+          cleanDirectionCount()
+        } else setUpDirectionCount(newState)
+      }
+      setSwipeLocationY(nativeEvent.locationY)
+    }
+
+    return (
+      <>
+        {isOpen && <View style={styles.backdrop} />}
+
+        <Modal animationType="slide" visible={debug || isOpen} onRequestClose={closeBottomSheet} transparent={true}>
+          <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'height' : undefined}>
+            <View style={[styles.sheet, {height: isExtended && isExtendable ? maxHeight : height}]}>
+              <Header title={title} onResponderMove={onResponderMove} />
+
+              {children}
+            </View>
+          </KeyboardAvoidingView>
+        </Modal>
+      </>
+    )
+  },
+)
+
+const Header = ({
+  onResponderMove,
+  title,
+}: {
+  onResponderMove: ({nativeEvent}: {nativeEvent: NativeTouchEvent}) => void
+  title: string
+}) => {
+  return (
+    <View onResponderMove={onResponderMove} onStartShouldSetResponder={() => true} style={styles.header}>
+      <Spacer height={8} />
+
+      <SliderIndicator />
+
+      <Spacer height={8} />
+
+      <Text style={styles.title}>{title}</Text>
+    </View>
+  )
+}
+
+const SliderIndicator = () => <View style={styles.slider} />
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+  },
+  sheet: {
+    backgroundColor: 'white',
+    borderTopRightRadius: 20,
+    borderTopLeftRadius: 20,
+    alignItems: 'center',
+    alignSelf: 'stretch',
+  },
+  title: {
+    fontWeight: 'bold',
+    fontSize: 20,
+    padding: 16,
+  },
+  header: {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+  },
+  slider: {
+    height: 4,
+    backgroundColor: 'black',
+    width: 32,
+    borderRadius: 10,
+  },
+})
diff --git a/apps/wallet-mobile/src/components/BottomSheet/index.ts b/apps/wallet-mobile/src/components/BottomSheet/index.ts
new file mode 100644
index 0000000000..06b6ba56fd
--- /dev/null
+++ b/apps/wallet-mobile/src/components/BottomSheet/index.ts
@@ -0,0 +1 @@
+export * from './BottomSheet'

From ed49f38d317730a5fff03e902b9a8e8a734c3695 Mon Sep 17 00:00:00 2001
From: Javier Bueno <javierbueno@emurgo.io>
Date: Thu, 21 Sep 2023 10:51:03 +0200
Subject: [PATCH 3/5] refactor: bottomsheet modal

---
 apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx b/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx
index cd4d6d92d1..a901bb5440 100644
--- a/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx
+++ b/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx
@@ -127,7 +127,8 @@ const styles = StyleSheet.create({
     alignSelf: 'stretch',
   },
   title: {
-    fontWeight: 'bold',
+    fontWeight: '500',
+    fontFamily: 'Rubik-Medium',
     fontSize: 20,
     padding: 16,
   },

From 9133a03022f18624d59b685cc0adb35eeb886829 Mon Sep 17 00:00:00 2001
From: banklesss <105349292+banklesss@users.noreply.github.com>
Date: Thu, 21 Sep 2023 10:55:52 +0200
Subject: [PATCH 4/5] Update
 apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx

Co-authored-by: Juliano Lazzarotto <30806844+stackchain@users.noreply.github.com>
Signed-off-by: banklesss <105349292+banklesss@users.noreply.github.com>
---
 apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx b/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx
index a901bb5440..b7fb484b05 100644
--- a/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx
+++ b/apps/wallet-mobile/src/components/BottomSheet/BottomSheet.tsx
@@ -73,7 +73,7 @@ export const BottomSheet = React.forwardRef<BottomSheetRef, BottomSheetProps>(
       <>
         {isOpen && <View style={styles.backdrop} />}
 
-        <Modal animationType="slide" visible={debug || isOpen} onRequestClose={closeBottomSheet} transparent={true}>
+        <Modal animationType="slide" visible={debug || isOpen} onRequestClose={closeBottomSheet} transparent>
           <KeyboardAvoidingView style={styles.container} behavior={Platform.OS === 'ios' ? 'height' : undefined}>
             <View style={[styles.sheet, {height: isExtended && isExtendable ? maxHeight : height}]}>
               <Header title={title} onResponderMove={onResponderMove} />

From 526c1612e2372310b0acc7c186d2b94f21bfc60e Mon Sep 17 00:00:00 2001
From: banklesss <105349292+banklesss@users.noreply.github.com>
Date: Thu, 21 Sep 2023 11:01:43 +0200
Subject: [PATCH 5/5] Update
 apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx

Co-authored-by: Juliano Lazzarotto <30806844+stackchain@users.noreply.github.com>
Signed-off-by: banklesss <105349292+banklesss@users.noreply.github.com>
---
 .../features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx
index 373189636d..446a91cd21 100644
--- a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx
+++ b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/ConfirmTxScreen.tsx
@@ -85,7 +85,7 @@ export const ConfirmTxScreen = () => {
             wallet={wallet}
             unsignedTx={unsignedTx}
             datum={{data: createOrder.datum}}
-            onSuccess={() => resetToTxHistory()}
+            onSuccess={resetToTxHistory}
             onCancel={closeBottomSheet}
           />