FIX: Inverted QR codes #1386

2025-02-22 15:04:50 +01:00 · 2020-08-03 13:26:16 -04:00 · 2020-08-03 13:26:16 -04:00 · d411c19196
commit d411c19196
parent 0acfbcccc0
8 changed files with 88 additions and 69 deletions
--- a/BlueComponents.js
+++ b/BlueComponents.js
@ -2626,9 +2626,9 @@ export class DynamicQRCode extends Component {
          <QRCode
            value={currentFragment.toUpperCase()}
            size={this.state.qrCodeHeight}
-            color={BlueCurrentTheme.colors.foregroundColor}
+            color="#000000"
            logoBackgroundColor={BlueCurrentTheme.colors.brandingColor}
-            backgroundColor={BlueCurrentTheme.colors.background}
+            backgroundColor="#FFFFFF"
            ecl="L"
          />
        </View>
@ -2677,6 +2677,9 @@ const animatedQRCodeStyle = StyleSheet.create({
  qrcodeContainer: {
    alignItems: 'center',
    justifyContent: 'center',
+    borderWidth: 6,
+    borderRadius: 8,
+    borderColor: '#FFFFFF',
  },
  controller: {
    width: '90%',
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@ -365,10 +365,10 @@ PODS:
    - React
  - RNSecureKeyStore (1.0.0):
    - React
-  - RNSentry (1.4.5):
+  - RNSentry (1.6.1):
    - React
-    - Sentry (~> 5.1.4)
-  - RNShare (3.5.0):
+    - Sentry (~> 5.1.8)
+  - RNShare (3.7.0):
    - React
  - RNSVG (12.1.0):
    - React
@ -376,9 +376,9 @@ PODS:
    - React
  - RNWatch (0.5.0):
    - React
-  - Sentry (5.1.9):
-    - Sentry/Core (= 5.1.9)
-  - Sentry/Core (5.1.9)
+  - Sentry (5.1.10):
+    - Sentry/Core (= 5.1.10)
+  - Sentry/Core (5.1.10)
  - swift_qrcodejs (1.1.2)
  - ToolTipMenu (5.2.0):
    - React
@ -689,12 +689,12 @@ SPEC CHECKSUMS:
  RNReactNativeHapticFeedback: 22c5ecf474428766c6b148f96f2ff6155cd7225e
  RNScreens: 62211832af51e0aebcf6e8c36bcf7dd65592f244
  RNSecureKeyStore: f1ad870e53806453039f650720d2845c678d89c8
-  RNSentry: 0a70359ddacbfb9b1cbbb0971e54065b9f70ac57
-  RNShare: 9e0ab1939761051b074c8eb5e7d746f4d5a8ee0e
+  RNSentry: 57824da1293d03966605d682d5868b11aa1b6e5a
+  RNShare: a1d5064df7a0ebe778d001869b3f0a124bf0a491
  RNSVG: ce9d996113475209013317e48b05c21ee988d42e
  RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
  RNWatch: 4de37878bbf071847e438b089c01d4ad8d4eddae
-  Sentry: 81f7f2bd3cb041137ea7efcde3aa5ad0d5a67632
+  Sentry: 8715e88b813bde9ad37aead365d5b04ac7302153
  swift_qrcodejs: 4d024fc98b0778b804ec6a5c810880fd092aec9d
  ToolTipMenu: 4d89d95ddffd7539230bdbe02ee51bbde362e37e
  Yoga: 3ebccbdd559724312790e7742142d062476b698e
--- a/screen/lnd/lndViewAdditionalInvoiceInformation.js
+++ b/screen/lnd/lndViewAdditionalInvoiceInformation.js
@ -36,6 +36,9 @@ const styles = StyleSheet.create({
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 16,
+    borderWidth: 6,
+    borderRadius: 8,
+    borderColor: '#FFFFFF',
  },
  share: {
    marginBottom: 25,
@ -74,9 +77,9 @@ export default class LNDViewAdditionalInvoiceInformation extends Component {
              logo={require('../../img/qr-code.png')}
              size={300}
              logoSize={90}
-              color={BlueCurrentTheme.colors.foregroundColor}
+              color="#000000"
              logoBackgroundColor={BlueCurrentTheme.colors.brandingColor}
-              backgroundColor={BlueCurrentTheme.colors.background}
+              backgroundColor="#FFFFFF"
            />
            <BlueSpacing20 />
            <BlueText>{loc.lndViewInvoice.open_direct_channel}</BlueText>
--- a/screen/lnd/lndViewInvoice.js
+++ b/screen/lnd/lndViewInvoice.js
@ -31,6 +31,7 @@ const styles = StyleSheet.create({
    justifyContent: 'center',
    alignItems: 'center',
  },
+  qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
  valueRoot: {
    flex: 2,
    flexDirection: 'column',
@ -108,6 +109,9 @@ const styles = StyleSheet.create({
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 16,
+    borderWidth: 6,
+    borderRadius: 8,
+    borderColor: '#FFFFFF',
  },
  additionalInfo: {
    backgroundColor: BlueCurrentTheme.colors.brandingColor,
@ -213,15 +217,17 @@ export default class LNDViewInvoice extends Component {
            <View style={styles.center}>
              <BlueText>{loc.lndViewInvoice.preimage}:</BlueText>
              <BlueSpacing20 />
-              <QRCode
-                value={invoice.payment_preimage && typeof invoice.payment_preimage === 'string' ? invoice.payment_preimage : 'none'}
-                logo={require('../../img/qr-code.png')}
-                size={this.state.qrCodeHeight}
-                logoSize={90}
-                color={BlueCurrentTheme.colors.foregroundColor}
-                backgroundColor={BlueCurrentTheme.colors.background}
-                logoBackgroundColor={BlueCurrentTheme.colors.brandingColor}
-              />
+              <View style={styles.qrCodeContainer}>
+                <QRCode
+                  value={invoice.payment_preimage && typeof invoice.payment_preimage === 'string' ? invoice.payment_preimage : 'none'}
+                  logo={require('../../img/qr-code.png')}
+                  size={this.state.qrCodeHeight}
+                  logoSize={90}
+                  color="#000000"
+                  logoBackgroundColor={BlueCurrentTheme.colors.brandingColor}
+                  backgroundColor="#FFFFFF"
+                />
+              </View>
              <BlueSpacing20 />
              <BlueCopyTextToClipboard
                text={invoice.payment_preimage && typeof invoice.payment_preimage === 'string' ? invoice.payment_preimage : 'none'}
@ -304,9 +310,9 @@ export default class LNDViewInvoice extends Component {
                logo={require('../../img/qr-code.png')}
                size={this.state.qrCodeHeight}
                logoSize={90}
-                color={BlueCurrentTheme.colors.foregroundColor}
+                color="#000000"
                logoBackgroundColor={BlueCurrentTheme.colors.brandingColor}
-                backgroundColor={BlueCurrentTheme.colors.background}
+                backgroundColor="#FFFFFF"
              />
            </View>

--- a/screen/receive/details.js
+++ b/screen/receive/details.js
@ -90,6 +90,7 @@ const ReceiveDetails = () => {
      color: BlueCurrentTheme.colors.foregroundColor,
      minHeight: 33,
    },
+    qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
    root: {
      flex: 1,
      backgroundColor: BlueCurrentTheme.colors.elevated,
@ -150,16 +151,18 @@ const ReceiveDetails = () => {
              </BlueText>
            </>
          )}
-          <QRCode
-            value={bip21encoded}
-            logo={require('../../img/qr-code.png')}
-            size={(is.ipad() && 300) || 300}
-            logoSize={90}
-            color={colors.foregroundColor}
-            logoBackgroundColor={colors.brandingColor}
-            backgroundColor={colors.background}
-            ecl="H"
-          />
+          <View style={styles.qrCodeContainer}>
+            <QRCode
+              value={bip21encoded}
+              logo={require('../../img/qr-code.png')}
+              size={(is.ipad() && 300) || 300}
+              logoSize={90}
+              color="#000000"
+              logoBackgroundColor={colors.brandingColor}
+              backgroundColor="#FFFFFF"
+              ecl="H"
+            />
+          </View>
          <BlueCopyTextToClipboard text={isCustom ? bip21encoded : address} />
        </View>
        <View style={styles.share}>
--- a/screen/wallets/export.js
+++ b/screen/wallets/export.js
@ -26,6 +26,7 @@ const styles = StyleSheet.create({
    justifyContent: 'center',
    flexGrow: 1,
  },
+  activeQrcode: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
  type: {
    fontSize: 17,
    fontWeight: '700',
@ -108,18 +109,18 @@ export default class WalletExport extends Component {
            }
          })()}
          <BlueSpacing20 />
-
-          <QRCode
-            value={this.state.wallet.getSecret()}
-            logo={require('../../img/qr-code.png')}
-            size={this.state.qrCodeHeight}
-            logoSize={70}
-            color={BlueCurrentTheme.colors.foregroundColor}
-            logoBackgroundColor={BlueCurrentTheme.colors.brandingColor}
-            backgroundColor={BlueCurrentTheme.colors.background}
-            ecl="H"
-          />
-
+          <View style={styles.activeQrcode}>
+            <QRCode
+              value={this.state.wallet.getSecret()}
+              logo={require('../../img/qr-code.png')}
+              size={this.state.qrCodeHeight}
+              logoSize={70}
+              color="#000000"
+              logoBackgroundColor={BlueCurrentTheme.colors.brandingColor}
+              backgroundColor="#FFFFFF"
+              ecl="H"
+            />
+          </View>
          <BlueSpacing20 />
          {this.state.wallet.type === LightningCustodianWallet.type || this.state.wallet.type === WatchOnlyWallet.type ? (
            <BlueCopyTextToClipboard text={this.state.wallet.getSecret()} />
--- a/screen/wallets/pleaseBackupLNDHub.js
+++ b/screen/wallets/pleaseBackupLNDHub.js
@ -34,6 +34,7 @@ const PleaseBackupLNDHub = () => {
      flexGrow: 1,
      backgroundColor: colors.elevated,
    },
+    qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
  });

  useEffect(() => {
@ -59,18 +60,18 @@ const PleaseBackupLNDHub = () => {
            <BlueTextCentered>{loc.pleasebackup.text_lnd}</BlueTextCentered>
          </View>
          <BlueSpacing20 />
-
-          <QRCode
-            value={wallet.secret}
-            logo={require('../../img/qr-code.png')}
-            logoSize={90}
-            size={qrCodeHeight}
-            color={colors.foregroundColor}
-            logoBackgroundColor={colors.brandingColor}
-            backgroundColor={colors.background}
-            ecl="H"
-          />
-
+          <View style={styles.qrCodeContainer}>
+            <QRCode
+              value={wallet.secret}
+              logo={require('../../img/qr-code.png')}
+              logoSize={90}
+              size={qrCodeHeight}
+              color="#000000"
+              logoBackgroundColor={colors.brandingColor}
+              backgroundColor="#FFFFFF"
+              ecl="H"
+            />
+          </View>
          <BlueSpacing20 />
          <BlueCopyTextToClipboard text={wallet.secret} />
          <BlueSpacing20 />
--- a/screen/wallets/xpub.js
+++ b/screen/wallets/xpub.js
@ -22,6 +22,7 @@ const styles = StyleSheet.create({
    flex: 1,
    justifyContent: 'center',
  },
+  qrCodeContainer: { borderWidth: 6, borderRadius: 8, borderColor: '#FFFFFF' },
 });

 export default class WalletXpub extends Component {
@ -88,17 +89,18 @@ export default class WalletXpub extends Component {
            <BlueText>{this.state.wallet.typeReadable}</BlueText>
          </View>
          <BlueSpacing20 />
-
-          <QRCode
-            value={this.state.xpub}
-            logo={require('../../img/qr-code.png')}
-            size={this.state.qrCodeHeight}
-            logoSize={90}
-            color={BlueCurrentTheme.colors.foregroundColor}
-            logoBackgroundColor={BlueCurrentTheme.colors.brandingColor}
-            backgroundColor={BlueCurrentTheme.colors.background}
-            ecl="H"
-          />
+          <View style={styles.qrCodeContainer}>
+            <QRCode
+              value={this.state.xpub}
+              logo={require('../../img/qr-code.png')}
+              size={this.state.qrCodeHeight}
+              logoSize={90}
+              color="#000000"
+              logoBackgroundColor={BlueCurrentTheme.colors.brandingColor}
+              backgroundColor="#FFFFFF"
+              ecl="H"
+            />
+          </View>

          <BlueSpacing20 />
          <BlueCopyTextToClipboard text={this.state.xpubText} />