Sam/sepa info done button overlap redo PR

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- fixed: Fixed obscured "done" button display bug on Sepa info display scene for small-screen devices
+
 ## 4.15.0
 
 - added: Add Maya Protocol

src/plugins/gui/fiatPlugin.tsx

@@ -28,12 +28,9 @@ import { datelog } from '../../util/utils'
 import {
   FiatDirection,
   FiatPaymentType,
-  FiatPluginAddressFormParams,
   FiatPluginListModalParams,
   FiatPluginPermissions,
   FiatPluginRegionCode,
-  FiatPluginSepaFormParams,
-  FiatPluginSepaTransferParams,
   FiatPluginStartParams,
   FiatPluginUi,
   FiatPluginUtils,
@@ -173,7 +170,7 @@ export const executePlugin = async (params: {
       maybeNavigateToCorrectTabScene()
       navigation.navigate('guiPluginEnterAmount', params)
     },
-    addressForm: async (params: FiatPluginAddressFormParams) => {
+    addressForm: async params => {
       const { countryCode, headerTitle, headerIconUri, onSubmit } = params
       return await new Promise((resolve, reject) => {
         maybeNavigateToCorrectTabScene()
@@ -208,7 +205,7 @@ export const executePlugin = async (params: {
       maybeNavigateToCorrectTabScene()
       navigation.navigate('rewardsCardWelcome', params)
     },
-    sepaForm: async (params: FiatPluginSepaFormParams) => {
+    sepaForm: async params => {
       const { headerTitle, headerIconUri, doneLabel, onDone } = params
       return await new Promise((resolve, reject) => {
         maybeNavigateToCorrectTabScene()
@@ -226,7 +223,7 @@ export const executePlugin = async (params: {
         })
       })
     },
-    sepaTransferInfo: async (params: FiatPluginSepaTransferParams) => {
+    sepaTransferInfo: async params => {
       return await new Promise((resolve, reject) => {
         const { headerTitle, headerIconUri, promptMessage, transferInfo, onDone } = params
         maybeNavigateToCorrectTabScene()

src/plugins/gui/fiatPluginTypes.ts

@@ -14,9 +14,12 @@ import { GuiPlugin } from '../../types/GuiPluginTypes'
 import { AppParamList } from '../../types/routerTypes'
 import { EdgeAsset } from '../../types/types'
 import { BuyConversionValues, SellConversionValues, TrackingEventName } from '../../util/tracking'
+import { FiatPluginAddressFormParams } from './scenes/AddressFormScene'
 import { FiatPluginOpenWebViewParams } from './scenes/FiatPluginWebView'
+import { FiatPluginSepaTransferParams } from './scenes/InfoDisplayScene'
 import { RewardsCardDashboardParams } from './scenes/RewardsCardDashboardScene'
 import { RewardsCardWelcomeParams } from './scenes/RewardsCardWelcomeScene'
+import { FiatPluginSepaFormParams } from './scenes/SepaFormScene'
 
 export const asFiatDirection = asValue('buy', 'sell')
 export type FiatDirection = ReturnType<typeof asFiatDirection>
@@ -46,22 +49,7 @@ export const asFiatPaymentType = asValue(
 )
 export type FiatPaymentType = ReturnType<typeof asFiatPaymentType>
 
-export interface FiatPluginAddressFormParams {
-  countryCode: string
-  headerTitle: string
-  headerIconUri?: string
-  onSubmit: (homeAddress: HomeAddress) => Promise<void>
-  onClose: () => void
-}
-
 export type LinkHandler = (url: FiatProviderLink) => void
-export interface FiatPluginSepaFormParams {
-  headerTitle: string
-  doneLabel: string
-  headerIconUri?: string
-  onDone: (sepaInfo: SepaInfo) => Promise<void>
-  onClose: () => void
-}
 
 export interface FiatPluginSepaTransferInfo {
   input: {
@@ -82,14 +70,6 @@ export interface FiatPluginSepaTransferInfo {
   }
 }
 
-export interface FiatPluginSepaTransferParams {
-  headerTitle: string
-  promptMessage: string
-  transferInfo: FiatPluginSepaTransferInfo
-  headerIconUri?: string
-  onDone: () => Promise<void>
-}
-
 export interface FiatPluginListModalParams {
   title: string
   items: Array<{ icon: string | number | React.ReactNode; name: string; text?: string }> // Icon strings are image uri, numbers are local files

src/plugins/gui/scenes/AddressFormScene.tsx

@@ -23,6 +23,14 @@ import { getDiskletFormData, setDiskletForm } from '../../../util/formUtils'
 import { makePeriodicTask } from '../../../util/PeriodicTask'
 import { GuiFormField } from '../components/GuiFormField'
 
+export interface FiatPluginAddressFormParams {
+  countryCode: string
+  headerTitle: string
+  headerIconUri?: string
+  onSubmit: (homeAddress: HomeAddress) => Promise<void>
+  onClose: () => void
+}
+
 interface Props extends EdgeSceneProps<'guiPluginAddressForm'> {}
 
 const FUZZY_SEARCH_INTERVAL = 2000

src/plugins/gui/scenes/InfoDisplayScene.tsx

@@ -3,15 +3,24 @@ import * as React from 'react'
 import { View } from 'react-native'
 
 import { Fontello } from '../../../assets/vector/index'
+import { SceneButtons } from '../../../components/buttons/SceneButtons'
 import { EdgeTouchableOpacity } from '../../../components/common/EdgeTouchableOpacity'
 import { SceneWrapper } from '../../../components/common/SceneWrapper'
 import { cacheStyles, Theme, useTheme } from '../../../components/services/ThemeContext'
 import { EdgeText } from '../../../components/themed/EdgeText'
-import { MainButton } from '../../../components/themed/MainButton'
-import { SceneHeader } from '../../../components/themed/SceneHeader'
+import { SceneHeaderUi4 } from '../../../components/themed/SceneHeaderUi4'
 import { useHandler } from '../../../hooks/useHandler'
 import { lstrings } from '../../../locales/strings'
 import { EdgeSceneProps } from '../../../types/routerTypes'
+import { FiatPluginSepaTransferInfo } from '../fiatPluginTypes'
+
+export interface FiatPluginSepaTransferParams {
+  headerTitle: string
+  promptMessage: string
+  transferInfo: FiatPluginSepaTransferInfo
+  headerIconUri?: string
+  onDone: () => Promise<void>
+}
 
 interface InfoDisplayGroup {
   groupTitle: string
@@ -123,21 +132,21 @@ export const InfoDisplayScene = React.memo((props: Props) => {
     ))
 
   return (
-    <SceneWrapper scroll hasNotifications>
-      <SceneHeader title={headerTitle} underline withTopMargin />
+    <SceneWrapper hasTabs scroll hasNotifications padding={theme.rem(0.5)}>
+      <SceneHeaderUi4 title={headerTitle} />
       <View style={styles.promptContainer}>
         <EdgeText numberOfLines={12}>{promptMessage}</EdgeText>
       </View>
       {renderGroups()}
-      <MainButton label={lstrings.string_done_cap} marginRem={[4, 0, 1]} type="secondary" onPress={handleDone} />
+      <SceneButtons primary={{ label: lstrings.string_done_cap, onPress: handleDone }} />
     </SceneWrapper>
   )
 })
 
 const getStyles = cacheStyles((theme: Theme) => ({
   groupContainer: {
     marginTop: theme.rem(1),
-    marginHorizontal: theme.rem(1),
+    marginHorizontal: theme.rem(0.5),
     borderWidth: theme.thinLineWidth,
     borderColor: theme.cardBorderColor,
     borderRadius: theme.rem(0.5)
@@ -174,6 +183,6 @@ const getStyles = cacheStyles((theme: Theme) => ({
     flexWrap: 'wrap'
   },
   promptContainer: {
-    margin: theme.rem(1)
+    margin: theme.rem(0.5)
   }
 }))

src/plugins/gui/scenes/SepaFormScene.tsx

@@ -16,6 +16,14 @@ import { EdgeSceneProps } from '../../../types/routerTypes'
 import { getDiskletFormData, setDiskletForm } from '../../../util/formUtils'
 import { GuiFormField } from '../components/GuiFormField'
 
+export interface FiatPluginSepaFormParams {
+  headerTitle: string
+  doneLabel: string
+  headerIconUri?: string
+  onDone: (sepaInfo: SepaInfo) => Promise<void>
+  onClose: () => void
+}
+
 interface Props extends EdgeSceneProps<'guiPluginSepaForm'> {}
 
 export const SepaFormScene = React.memo((props: Props) => {

src/types/routerTypes.tsx

@@ -63,11 +63,13 @@ import type { WcConnectionsParams } from '../components/scenes/WcConnectionsScen
 import type { WcConnectParams } from '../components/scenes/WcConnectScene'
 import type { WcDisconnectParams } from '../components/scenes/WcDisconnectScene'
 import type { WebViewSceneParams } from '../components/scenes/WebViewScene'
-import type { FiatPluginAddressFormParams, FiatPluginSepaFormParams, FiatPluginSepaTransferParams } from '../plugins/gui/fiatPluginTypes'
+import type { FiatPluginAddressFormParams } from '../plugins/gui/scenes/AddressFormScene'
 import type { FiatPluginEnterAmountParams } from '../plugins/gui/scenes/FiatPluginEnterAmountScene'
 import type { FiatPluginOpenWebViewParams } from '../plugins/gui/scenes/FiatPluginWebView'
+import type { FiatPluginSepaTransferParams } from '../plugins/gui/scenes/InfoDisplayScene'
 import type { RewardsCardDashboardParams } from '../plugins/gui/scenes/RewardsCardDashboardScene'
 import type { RewardsCardWelcomeParams } from '../plugins/gui/scenes/RewardsCardWelcomeScene'
+import type { FiatPluginSepaFormParams } from '../plugins/gui/scenes/SepaFormScene'
 
 // -------------------------------------------------------------------------
 // Router types