From 340eb12fa0865dc0187860c5b5e426b969bbfdc3 Mon Sep 17 00:00:00 2001
From: Dmitriy Kudasov <dev.kudasov@gmail.com>
Date: Thu, 15 Aug 2024 13:09:24 +0300
Subject: [PATCH] feat(HW-582): Hide bech32 if disabled through remote config

---
 src/components/account-detail.tsx      | 193 +++++++++++++------------
 src/models/provider/provider-config.ts |   4 +
 src/services/indexer/indexer.types.ts  |   1 +
 3 files changed, 105 insertions(+), 93 deletions(-)

diff --git a/src/components/account-detail.tsx b/src/components/account-detail.tsx
index b109d3eaa..e91dd754d 100644
--- a/src/components/account-detail.tsx
+++ b/src/components/account-detail.tsx
@@ -1,6 +1,7 @@
 import React, {useCallback, useMemo, useRef, useState} from 'react';
 
 import Clipboard from '@react-native-clipboard/clipboard';
+import {observer} from 'mobx-react';
 import {Share, View, useWindowDimensions} from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import QRCode from 'react-native-qrcode-svg';
@@ -22,6 +23,7 @@ import {
 } from '@app/components/ui';
 import {createTheme} from '@app/helpers';
 import {I18N} from '@app/i18n';
+import {RemoteProviderConfig} from '@app/models/provider';
 import {Wallet} from '@app/models/wallet';
 import {sendNotification} from '@app/services';
 import {GRADIENT_END, GRADIENT_START} from '@app/variables/common';
@@ -36,107 +38,112 @@ export interface DetailsQrModalProps {
   onClose: () => void;
 }
 
-export const AccountDetail = ({wallet, onClose}: DetailsQrModalProps) => {
-  const svg = useRef();
-  const {width} = useWindowDimensions();
+export const AccountDetail = observer(
+  ({wallet, onClose}: DetailsQrModalProps) => {
+    const svg = useRef();
+    const {width} = useWindowDimensions();
 
-  const [activeTab, setActiveTab] = useState(TabNames.evm);
-  const address = useMemo(
-    () => (activeTab === TabNames.evm ? wallet.address : wallet.cosmosAddress),
-    [activeTab, wallet.address],
-  );
+    const [activeTab, setActiveTab] = useState(TabNames.evm);
+    const address = useMemo(
+      () =>
+        activeTab === TabNames.evm ? wallet.address : wallet.cosmosAddress,
+      [activeTab, wallet.address],
+    );
 
-  const onCopy = useCallback(() => {
-    Clipboard.setString(address);
-    sendNotification(I18N.notificationCopied);
-  }, [address]);
+    const onCopy = useCallback(() => {
+      Clipboard.setString(address);
+      sendNotification(I18N.notificationCopied);
+    }, [address]);
 
-  const onShare = useCallback(() => {
-    Share.share({message: address});
-  }, [address]);
+    const onShare = useCallback(() => {
+      Share.share({message: address});
+    }, [address]);
 
-  const onTabChange = useCallback((tabName: TabNames) => {
-    setActiveTab(tabName);
-  }, []);
+    const onTabChange = useCallback((tabName: TabNames) => {
+      setActiveTab(tabName);
+    }, []);
 
-  return (
-    <BottomSheet onClose={onClose} i18nTitle={I18N.modalDetailsQRReceive}>
-      <View style={styles.tabs}>
-        <TopTabNavigator
-          contentContainerStyle={styles.tabsContentContainerStyle}
-          tabHeaderStyle={styles.tabHeaderStyle}
-          variant={TopTabNavigatorVariant.large}
-          onTabChange={onTabChange}>
-          <TopTabNavigator.Tab
-            name={TabNames.evm}
-            title={I18N.evmTitle}
-            component={null}
-          />
-          <TopTabNavigator.Tab
-            name={TabNames.bech32}
-            title={I18N.bech32Title}
-            component={null}
-          />
-        </TopTabNavigator>
-      </View>
-      <InfoBlock
-        warning
-        style={styles.info}
-        i18n={I18N.modalDetailsQRWarning}
-        icon={<Icon name="warning" color={Color.textYellow1} />}
-      />
-      <LinearGradient
-        colors={[wallet?.colorFrom, wallet?.colorTo]}
-        style={styles.qrContainer}
-        start={GRADIENT_START}
-        end={GRADIENT_END}>
-        <View style={styles.card}>
-          <Card
-            transparent
-            width={width - 113}
-            pattern={wallet?.pattern}
-            colorFrom={wallet?.colorFrom}
-            colorTo={wallet?.colorTo}
-            colorPattern={wallet?.colorPattern}
-          />
+    return (
+      <BottomSheet onClose={onClose} i18nTitle={I18N.modalDetailsQRReceive}>
+        <View style={styles.tabs}>
+          <TopTabNavigator
+            contentContainerStyle={styles.tabsContentContainerStyle}
+            tabHeaderStyle={styles.tabHeaderStyle}
+            variant={TopTabNavigatorVariant.large}
+            onTabChange={onTabChange}>
+            <TopTabNavigator.Tab
+              name={TabNames.evm}
+              title={I18N.evmTitle}
+              component={null}
+            />
+            {RemoteProviderConfig.isBech32Enabled && (
+              <TopTabNavigator.Tab
+                name={TabNames.bech32}
+                title={I18N.bech32Title}
+                component={null}
+              />
+            )}
+          </TopTabNavigator>
         </View>
-        <View style={styles.qrStyle}>
-          <QRCode
-            ecl={'H'}
-            logo={require('@assets/images/qr-logo.png')}
-            value={`haqq:${address}`}
-            size={width - 169}
-            getRef={c => (svg.current = c)}
-            logoSize={width / 5.86}
-            logoBorderRadius={8}
+        <InfoBlock
+          warning
+          style={styles.info}
+          i18n={I18N.modalDetailsQRWarning}
+          icon={<Icon name="warning" color={Color.textYellow1} />}
+        />
+        <LinearGradient
+          colors={[wallet?.colorFrom, wallet?.colorTo]}
+          style={styles.qrContainer}
+          start={GRADIENT_START}
+          end={GRADIENT_END}>
+          <View style={styles.card}>
+            <Card
+              transparent
+              width={width - 113}
+              pattern={wallet?.pattern}
+              colorFrom={wallet?.colorFrom}
+              colorTo={wallet?.colorTo}
+              colorPattern={wallet?.colorPattern}
+            />
+          </View>
+          <View style={styles.qrStyle}>
+            <QRCode
+              ecl={'H'}
+              logo={require('@assets/images/qr-logo.png')}
+              value={`haqq:${address}`}
+              size={width - 169}
+              getRef={c => (svg.current = c)}
+              logoSize={width / 5.86}
+              logoBorderRadius={8}
+            />
+          </View>
+          <Text t14 style={styles.title}>
+            {wallet?.name}
+          </Text>
+          <Text t10 style={styles.address}>
+            {address}
+          </Text>
+        </LinearGradient>
+
+        <View style={styles.buttons}>
+          <Button
+            i18n={I18N.share}
+            size={ButtonSize.middle}
+            onPress={onShare}
+            style={styles.button}
+          />
+          <Button
+            size={ButtonSize.middle}
+            style={styles.button}
+            variant={ButtonVariant.second}
+            i18n={I18N.copy}
+            onPress={onCopy}
           />
         </View>
-        <Text t14 style={styles.title}>
-          {wallet?.name}
-        </Text>
-        <Text t10 style={styles.address}>
-          {address}
-        </Text>
-      </LinearGradient>
-
-      <View style={styles.buttons}>
-        <Button
-          i18n={I18N.share}
-          size={ButtonSize.middle}
-          onPress={onShare}
-          style={styles.button}
-        />
-        <Button
-          size={ButtonSize.middle}
-          style={styles.button}
-          variant={ButtonVariant.second}
-          i18n={I18N.copy}
-          onPress={onCopy}
-        />
-      </View>
-    </BottomSheet>
-  );
-};
+      </BottomSheet>
+    );
+  },
+);
 
 const styles = createTheme({
   qrContainer: {
diff --git a/src/models/provider/provider-config.ts b/src/models/provider/provider-config.ts
index c17ed52e1..0d637b9d4 100644
--- a/src/models/provider/provider-config.ts
+++ b/src/models/provider/provider-config.ts
@@ -27,6 +27,10 @@ class ProviderConfigStore {
     return Boolean(this.config?.nft_exists);
   }
 
+  get isBech32Enabled() {
+    return Boolean(this.config?.bech32_exists);
+  }
+
   get swapEnabled() {
     return Boolean(this.config?.swap_enabled);
   }
diff --git a/src/services/indexer/indexer.types.ts b/src/services/indexer/indexer.types.ts
index d317e1ab8..85efad03c 100644
--- a/src/services/indexer/indexer.types.ts
+++ b/src/services/indexer/indexer.types.ts
@@ -55,6 +55,7 @@ export type SushiPoolEstimateRequest = {
 
 export type ProviderConfig = {
   nft_exists?: boolean;
+  bech32_exists?: boolean;
   swap_enabled: boolean;
   swap_router_v3: string;
   weth_address: string;