wip

2025-02-21 14:34:55 +01:00 · 2024-07-06 17:55:03 -04:00 · 2024-07-06 17:55:03 -04:00 · 52e4be2f27
commit 52e4be2f27
parent 3518b7bf9d
4 changed files with 130 additions and 118 deletions
--- a/components/BottomModal.tsx
+++ b/components/BottomModal.tsx
@ -90,7 +90,6 @@ const BottomModal = forwardRef<BottomModalHandle, BottomModalProps>(

    const renderFooter = (): ReactElement<any, string | JSXElementConstructor<any>> | ComponentType<unknown> | undefined => {
      // Footer is not working correctly on Android yet.
-      if (Platform.OS === 'android') return undefined;
      if (!footer) return undefined;

      if (React.isValidElement(footer)) {
@ -104,6 +103,8 @@ const BottomModal = forwardRef<BottomModalHandle, BottomModalProps>(
      return undefined;
    };

+    const FooterComponent = Platform.OS !== 'android' && renderFooter();
+
    return (
      <TrueSheet
        name={name ?? 'BottomModal'}
@ -114,14 +115,15 @@ const BottomModal = forwardRef<BottomModalHandle, BottomModalProps>(
        onPresent={onPresent}
        onSizeChange={onSizeChange}
        grabber={isGrabberVisible}
-        FooterComponent={renderFooter()}
+        // Footer is not working correctly on Android yet.
+        FooterComponent={FooterComponent as ReactElement}
        {...props}
        blurTint="regular"
        accessibilityViewIsModal
      >
        {children}
        {renderTopRightButton()}
-        {renderFooter() as ReactNode}
+        {Platform.OS === 'android' && (renderFooter() as ReactNode)}
      </TrueSheet>
    );
  },
--- a/screen/send/SendDetails.tsx
+++ b/screen/send/SendDetails.tsx
@ -1284,32 +1284,36 @@ const SendDetails = () => {
          </TouchableOpacity>
        }
      >
-        {options.map(({ label, time, fee, rate, active, disabled }) => (
-          <TouchableOpacity
-            accessibilityRole="button"
-            key={label}
-            disabled={disabled}
-            onPress={() => {
-              setFeePrecalc(fp => ({ ...fp, current: fee }));
-              feeModalRef.current?.dismiss();
-              setCustomFee(rate.toString());
-            }}
-            style={[styles.feeModalItem, active && styles.feeModalItemActive, active && !disabled && stylesHook.feeModalItemActive]}
-          >
-            <View style={styles.feeModalRow}>
-              <Text style={[styles.feeModalLabel, disabled ? stylesHook.feeModalItemTextDisabled : stylesHook.feeModalLabel]}>{label}</Text>
-              <View style={[styles.feeModalTime, disabled ? stylesHook.feeModalItemDisabled : stylesHook.feeModalTime]}>
-                <Text style={stylesHook.feeModalTimeText}>~{time}</Text>
+        <View style={styles.paddingTop80}>
+          {options.map(({ label, time, fee, rate, active, disabled }) => (
+            <TouchableOpacity
+              accessibilityRole="button"
+              key={label}
+              disabled={disabled}
+              onPress={() => {
+                setFeePrecalc(fp => ({ ...fp, current: fee }));
+                feeModalRef.current?.dismiss();
+                setCustomFee(rate.toString());
+              }}
+              style={[styles.feeModalItem, active && styles.feeModalItemActive, active && !disabled && stylesHook.feeModalItemActive]}
+            >
+              <View style={styles.feeModalRow}>
+                <Text style={[styles.feeModalLabel, disabled ? stylesHook.feeModalItemTextDisabled : stylesHook.feeModalLabel]}>
+                  {label}
+                </Text>
+                <View style={[styles.feeModalTime, disabled ? stylesHook.feeModalItemDisabled : stylesHook.feeModalTime]}>
+                  <Text style={stylesHook.feeModalTimeText}>~{time}</Text>
+                </View>
              </View>
-            </View>
-            <View style={styles.feeModalRow}>
-              <Text style={disabled ? stylesHook.feeModalItemTextDisabled : stylesHook.feeModalValue}>{fee && formatFee(fee)}</Text>
-              <Text style={disabled ? stylesHook.feeModalItemTextDisabled : stylesHook.feeModalValue}>
-                {rate} {loc.units.sat_vbyte}
-              </Text>
-            </View>
-          </TouchableOpacity>
-        ))}
+              <View style={styles.feeModalRow}>
+                <Text style={disabled ? stylesHook.feeModalItemTextDisabled : stylesHook.feeModalValue}>{fee && formatFee(fee)}</Text>
+                <Text style={disabled ? stylesHook.feeModalItemTextDisabled : stylesHook.feeModalValue}>
+                  {rate} {loc.units.sat_vbyte}
+                </Text>
+              </View>
+            </TouchableOpacity>
+          ))}
+        </View>
      </BottomModal>
    );
  };
@ -1655,7 +1659,9 @@ const styles = StyleSheet.create({
  },
  modalContent: {
    margin: 22,
+    minHeight: 370,
  },
+  paddingTop80: { paddingTop: 80 },
  optionsContent: {
    padding: 22,
  },
--- a/screen/wallets/ViewEditMultisigCosigners.tsx
+++ b/screen/wallets/ViewEditMultisigCosigners.tsx
@ -400,7 +400,6 @@ const ViewEditMultisigCosigners: React.FC = () => {
            )}

            <MultipleStepsListItem
-              useActionSheet
              actionSheetOptions={{
                options: [loc._.cancel, loc.multisig.confirm],
                title: loc._.seed,
@ -561,15 +560,10 @@ const ViewEditMultisigCosigners: React.FC = () => {
      <BottomModal
        ref={shareModalRef}
        onClose={hideShareModal}
-        contentContainerStyle={[styles.modalContent, styles.alignItemsCenter]}
+        contentContainerStyle={[styles.modalContent, styles.alignItemsCenter, styles.shareModalHeight]}
        backgroundColor={colors.elevated}
-      >
-        <Text style={[styles.headerText, stylesHook.textDestination]}>
-          {loc.multisig.this_is_cosigners_xpub} {Platform.OS === 'ios' ? loc.multisig.this_is_cosigners_xpub_airdrop : ''}
-        </Text>
-        <QRCodeComponent value={exportStringURv2} size={260} isLogoRendered={false} />
-        <BlueSpacing20 />
-        <View style={styles.squareButtonWrapper}>
+        footerDefaultMargins
+        footer={
          <SaveFileButton
            style={[styles.exportButton, stylesHook.exportButton]}
            fileContent={exportString}
@ -578,7 +572,13 @@ const ViewEditMultisigCosigners: React.FC = () => {
          >
            <SquareButton title={loc.multisig.share} />
          </SaveFileButton>
-        </View>
+        }
+      >
+        <Text style={[styles.headerText, stylesHook.textDestination]}>
+          {loc.multisig.this_is_cosigners_xpub} {Platform.OS === 'ios' ? loc.multisig.this_is_cosigners_xpub_airdrop : ''}
+        </Text>
+        <QRCodeComponent value={exportStringURv2} size={260} isLogoRendered={false} />
+        <BlueSpacing20 />
      </BottomModal>
    );
  };
@ -661,8 +661,7 @@ const styles = StyleSheet.create({
  newKeyModalContent: {
    paddingHorizontal: 22,
    paddingTop: 32,
-    justifyContent: 'center',
-    minHeight: 300,
+    minHeight: 370,
  },
  modalContent: {
    padding: 22,
@ -679,14 +678,13 @@ const styles = StyleSheet.create({
  exportButton: {
    height: 48,
    borderRadius: 8,
-    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  headerText: { fontSize: 15, color: '#13244D' },
  mainBlock: { marginHorizontal: 16 },
  alignItemsCenter: { alignItems: 'center' },
-  squareButtonWrapper: { height: 50, width: 250 },
+  shareModalHeight: { minHeight: 300 },
  tipKeys: {
    fontSize: 15,
    fontWeight: '600',
--- a/screen/wallets/addMultisigStep2.js
+++ b/screen/wallets/addMultisigStep2.js
@ -567,42 +567,72 @@ const WalletsAddMultisigStep2 = () => {

  const renderMnemonicsModal = () => {
    return (
-      <BottomModal onClose={Keyboard.dismiss} ref={mnemonicsModalRef} isGrabberVisible={false} dismissible={false}>
-        <View style={[styles.newKeyModalContent, stylesHook.modalContent]}>
-          <View style={styles.itemKeyUnprovidedWrapper}>
-            <View style={[styles.vaultKeyCircleSuccess, stylesHook.vaultKeyCircleSuccess]}>
-              <Icon size={24} name="check" type="ionicons" color={colors.msSuccessCheck} />
-            </View>
-            <View style={styles.vaultKeyTextWrapper}>
-              <Text style={[styles.vaultKeyText, stylesHook.vaultKeyText]}>
-                {loc.formatString(loc.multisig.vault_key, { number: vaultKeyData.keyIndex })}
-              </Text>
-            </View>
+      <BottomModal
+        ref={mnemonicsModalRef}
+        isGrabberVisible={false}
+        dismissible={false}
+        showCloseButton={!isLoading}
+        footerDefaultMargins
+        contentContainerStyle={[styles.newKeyModalContent, stylesHook.modalContent]}
+        footer={
+          isLoading ? <ActivityIndicator /> : <Button title={loc.send.success_done} onPress={() => mnemonicsModalRef.current.dismiss()} />
+        }
+      >
+        <View style={styles.itemKeyUnprovidedWrapper}>
+          <View style={[styles.vaultKeyCircleSuccess, stylesHook.vaultKeyCircleSuccess]}>
+            <Icon size={24} name="check" type="ionicons" color={colors.msSuccessCheck} />
+          </View>
+          <View style={styles.vaultKeyTextWrapper}>
+            <Text style={[styles.vaultKeyText, stylesHook.vaultKeyText]}>
+              {loc.formatString(loc.multisig.vault_key, { number: vaultKeyData.keyIndex })}
+            </Text>
          </View>
-          <BlueSpacing20 />
-          <Text style={[styles.headerText, stylesHook.textDestination]}>{loc.multisig.wallet_key_created}</Text>
-          <BlueSpacing20 />
-          <Text style={[styles.textDestination, stylesHook.textDestination]}>{loc._.seed}</Text>
-          <BlueSpacing10 />
-          <View style={styles.secretContainer}>{renderSecret(vaultKeyData.seed.split(' '))}</View>
-          <BlueSpacing20 />
-          {isLoading ? <ActivityIndicator /> : <Button title={loc.send.success_done} onPress={() => mnemonicsModalRef.current.dismiss()} />}
        </View>
+        <BlueSpacing20 />
+        <Text style={[styles.headerText, stylesHook.textDestination]}>{loc.multisig.wallet_key_created}</Text>
+        <BlueSpacing20 />
+        <Text style={[styles.textDestination, stylesHook.textDestination]}>{loc._.seed}</Text>
+        <BlueSpacing10 />
+        <View style={styles.secretContainer}>{renderSecret(vaultKeyData.seed.split(' '))}</View>
+        <BlueSpacing20 />
      </BottomModal>
    );
  };

  const hideProvideMnemonicsModal = () => {
-    Keyboard.dismiss();
-    provideMnemonicsModalRef.current.dismiss();
-
    setImportText('');
    setAskPassphrase(false);
  };

  const renderProvideMnemonicsModal = () => {
    return (
-      <BottomModal onClose={hideProvideMnemonicsModal} ref={provideMnemonicsModalRef} isGrabberVisible={false}>
+      <BottomModal
+        footerDefaultMargins
+        footer={
+          isLoading ? (
+            <ActivityIndicator />
+          ) : (
+            <>
+              <Button
+                testID="DoImportKeyButton"
+                disabled={importText.trim().length === 0}
+                title={loc.wallets.import_do_import}
+                onPress={useMnemonicPhrase}
+              />
+              <BlueButtonLink
+                testID="ScanOrOpenFile"
+                ref={openScannerButton}
+                disabled={isLoading}
+                onPress={scanOrOpenFile}
+                title={loc.wallets.import_scan_qr}
+              />
+            </>
+          )
+        }
+        onClose={hideProvideMnemonicsModal}
+        ref={provideMnemonicsModalRef}
+        isGrabberVisible={false}
+      >
        <View style={[styles.modalContent, stylesHook.modalContent]}>
          <BlueTextCentered>{loc.multisig.type_your_mnemonics}</BlueTextCentered>
          <BlueSpacing20 />
@ -616,24 +646,6 @@ const WalletsAddMultisigStep2 = () => {
              </View>
            </>
          )}
-          <BlueSpacing20 />
-          {isLoading ? (
-            <ActivityIndicator />
-          ) : (
-            <Button
-              testID="DoImportKeyButton"
-              disabled={importText.trim().length === 0}
-              title={loc.wallets.import_do_import}
-              onPress={useMnemonicPhrase}
-            />
-          )}
-          <BlueButtonLink
-            testID="ScanOrOpenFile"
-            ref={openScannerButton}
-            disabled={isLoading}
-            onPress={scanOrOpenFile}
-            title={loc.wallets.import_scan_qr}
-          />
        </View>
      </BottomModal>
    );
@ -654,30 +666,33 @@ const WalletsAddMultisigStep2 = () => {

  const renderCosignersXpubModal = () => {
    return (
-      <BottomModal onClose={hideCosignersXpubModal} ref={renderCosignersXpubModalRef} isGrabberVisible={false}>
-        <View style={[styles.modalContent, stylesHook.modalContent, styles.alignItemsCenter]}>
-          <Text style={[styles.headerText, stylesHook.textDestination]}>
-            {loc.multisig.this_is_cosigners_xpub} {Platform.OS === 'ios' ? loc.multisig.this_is_cosigners_xpub_airdrop : ''}
-          </Text>
-          <BlueSpacing20 />
-          <QRCodeComponent value={cosignerXpubURv2} size={260} />
-          <BlueSpacing20 />
-          <View style={styles.squareButtonWrapper}>
-            {isLoading ? (
-              <ActivityIndicator />
-            ) : (
-              <SaveFileButton
-                style={[styles.exportButton, stylesHook.exportButton]}
-                fileName={cosignerXpubFilename}
-                fileContent={cosignerXpub}
-                beforeOnPress={exportCosignerBeforeOnPress}
-                afterOnPress={exportCosignerAfterOnPress}
-              >
-                <SquareButton title={loc.multisig.share} />
-              </SaveFileButton>
-            )}
-          </View>
-        </View>
+      <BottomModal
+        onClose={hideCosignersXpubModal}
+        ref={renderCosignersXpubModalRef}
+        footerDefaultMargins
+        contentContainerStyle={[styles.modalContent, stylesHook.modalContent, styles.alignItemsCenter]}
+        footer={
+          isLoading ? (
+            <ActivityIndicator />
+          ) : (
+            <SaveFileButton
+              style={[styles.exportButton, stylesHook.exportButton]}
+              fileName={cosignerXpubFilename}
+              fileContent={cosignerXpub}
+              beforeOnPress={exportCosignerBeforeOnPress}
+              afterOnPress={exportCosignerAfterOnPress}
+            >
+              <SquareButton title={loc.multisig.share} />
+            </SaveFileButton>
+          )
+        }
+      >
+        <Text style={[styles.headerText, stylesHook.textDestination]}>
+          {loc.multisig.this_is_cosigners_xpub} {Platform.OS === 'ios' ? loc.multisig.this_is_cosigners_xpub_airdrop : ''}
+        </Text>
+        <BlueSpacing20 />
+        <QRCodeComponent value={cosignerXpubURv2} size={260} />
+        <BlueSpacing20 />
      </BottomModal>
    );
  };
@ -742,19 +757,12 @@ const styles = StyleSheet.create({
    paddingHorizontal: 22,
    paddingVertical: 32,
    justifyContent: 'center',
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    borderColor: 'rgba(0, 0, 0, 0.1)',
-    minHeight: 400,
+    minHeight: 480,
  },
  newKeyModalContent: {
    paddingHorizontal: 22,
-    paddingBottom: 60,
-    paddingTop: 50,
    justifyContent: 'center',
-    borderTopLeftRadius: 16,
-    borderTopRightRadius: 16,
-    borderColor: 'rgba(0, 0, 0, 0.1)',
+    minHeight: 400,
  },
  vaultKeyCircleSuccess: {
    width: 42,
@ -784,13 +792,11 @@ const styles = StyleSheet.create({
  exportButton: {
    height: 48,
    borderRadius: 8,
-    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  headerText: { fontSize: 15, color: '#13244D' },
  alignItemsCenter: { alignItems: 'center' },
-  squareButtonWrapper: { height: 50, width: 250 },
  helpButtonWrapper: {
    alignItems: 'flex-end',
    flexDirection: I18nManager.isRTL ? 'row' : 'row-reverse',