fix(HW-678): fix RTL layout issues (#2097)

Co-authored-by: iGroza <[email protected]>

assets/locales/ar/ar.json

@@ -3,7 +3,7 @@
   "StakingInfoUnDelegationDay": " ({{day}} يوم متبقي؟)",
   "StakingInfoUnDelegationDays": " ({{days}} أيام متبقية)",
   "Welcome_haqq_pin": "مرحبًا بك في HAQQ Wallet",
-  "_hash": "156767e60088fb9f99945295971ed1fa9c0114edd4e2fb804d1de39f87b924b3",
+  "_hash": "687f6ed1700d2158b8ddf9ad3b57bd3d525a4e7eec40e20e3d14b34168e55041",
   "accept": "قبول",
   "accountInfoNftTabTitle": "العملات غير القابلة للاستبدال",
   "accountInfoTokensTabTitle": "العملات",
@@ -338,6 +338,22 @@
   "lockedTokensVested": "مؤجل: {{count}}",
   "lockedTokensVestedAvailableIn": " (سيكون متاحًا في: {{value}})",
   "low": "منخفض",
+  "mainAccount": "الحساب الرئيسي",
+  "markupAdAmbasadorTitle": "برنامج السفير",
+  "markupAdAmbassadorDescription": "نعمل معًا على إنشاء أكبر مجتمع على الإنترنت لتعزيز القيم الإسلامية في مجال العملات الرقمية.",
+  "markupAdBuyWithFiatDescription": "قم بشراء ISLM نقداً بأفضل سعر من خلال مزود موثوق به",
+  "markupAdBuyWithFiatTitle": "اشترِ ISLM بـ فيات",
+  "markupAdExpeditionDescription": "أكمل المهام واحصل على مكافآت\n",
+  "markupAdExpeditionTitle": "HAQQ Expedition Vol.2 انضم إلى",
+  "markupAdFruitTitle": "\"Fruits of Janna مجموعة NFT يتم سكها الآن",
+  "markupAdPurchaseOptionsDescription": "قائمة المنصات التي يمكنك شراء عملة إسلامية منها",
+  "markupAdPurchaseOptionsTitle": "خيارات الشراء من ISLM\n",
+  "markupAdQuizDescription": "اختبر معلوماتك وتعرف على المزيد عن هذه العملة الرقمية المبتكرة",
+  "markupAdQuizTitle": "اختبار: اكتشف وتعلم",
+  "markupAdStakingDescription": "قم بتفويض إدارة أمن الشبكات الدولية واحصل على مكافأة على مساهمتك في أمن الشبكات",
+  "markupAdStakingTitle": "التحصيص",
+  "markupAdSurveyDescription": "أكمل واحصل على مكافأة",
+  "markupAdSurveyTitle": "استبيان HAQQQبوصلة المجتمع",
   "maxBaseFee": "الحد الأقصى للرسوم الأساسية",
   "maxBaseFeeDescription": "الحد الأقصى للرسوم هي أعلى حد الذي ستدفعه (الرسوم الأساسية + الرسوم الإضافية). لقد قمنا بتحديث رسوم الغاز بناءً على ظروف الشبكة الحالية وزدناها بنسبة 10% على الأقل (كما تتطلب الشبكة).",
   "maxBaseFeeGWei": "الحد الأقصى للرسوم الأساسية (GWei)",
@@ -507,6 +523,7 @@
   "raffleRewardPrize": "الجائزة {{islm}} {{symbol}}",
   "raffleRewardUnderstood": "مفهوم",
   "raffleRewardWonTickets": "{{winner_tickets}} من أصل {{total_tickets}} تذاكر فازت",
+  "raffleRewardСongratulations": "تهانينا!",
   "raffleRewardСongratulations": "تهانينا!",
   "raffleTicketRecieved": "لقد قمت بالمطالبة بمكافأتك بنجاح",
   "recent": "الأحدث",

assets/locales/en/en.json

@@ -3,7 +3,7 @@
   "StakingInfoUnDelegationDay": " ({{day}} day left)",
   "StakingInfoUnDelegationDays": " ({{days}} days left)",
   "Welcome_haqq_pin": "Welcome to HAQQ Wallet",
-  "_hash": "24f6a3ed5f0c1c2eb36ac4f6dd85a8d71cd1daf476d6f43e494c54e5b9d81a06",
+  "_hash": "2b8a16ecd5763438794e425bf53f1e99556712ee085d4e4cd8a689c8474a9d94",
   "accept": "Accept",
   "accountInfoNftTabTitle": "NFTs",
   "accountInfoTokensTabTitle": "Tokens",
@@ -317,7 +317,7 @@
   "ledgerScanDescription2": "unlocked",
   "ledgerScanDescription3": "Bluetooth is enabled",
   "ledgerScanDescription4": " and ",
-  "ledgerScanDescription5": "Ledger app on your Ledger is installed",
+  "ledgerScanDescription5": "Ethereum app on your Ledger is installed",
   "ledgerScanDescription6": " and opened",
   "ledgerScanTitle": "Looking for devices",
   "ledgerStoreWalletSaving": "Account saving in progress",
@@ -338,19 +338,22 @@
   "lockedTokensVested": "Vested: {{count}}",
   "lockedTokensVestedAvailableIn": " (Will be available in: {{value}})",
   "low": "Low",
+  "mainAccount": "Main account",
   "markupAdAmbasadorTitle": "Ambassador Program",
   "markupAdAmbassadorDescription": "Together, we are creating the largest online community promoting Islamic values in crypto.",
   "markupAdBuyWithFiatDescription": "Purchase ISLM with cash at the best price through a reliable provider",
   "markupAdBuyWithFiatTitle": "Buy ISLM with fiat",
   "markupAdExpeditionDescription": "Complete quests & get rewards",
-  "markupAdExpeditionTitle": "Join HAQQ Expedition Vol.2",
+  "markupAdExpeditionTitle": "Join HAQQ Expedition\nVol.2",
   "markupAdFruitTitle": "Fruits of Jannah NFT collection is minting now",
   "markupAdPurchaseOptionsDescription": "List of platforms where you can purchase Islamic Coin",
   "markupAdPurchaseOptionsTitle": "ISLM Purchase Options",
+  "markupAdQuizDescription": "Test your knowledge, learn more about this innovative cryptocurrency",
+  "markupAdQuizTitle": "Quiz: Discover & Learn",
   "markupAdStakingDescription": "Delegate your ISLM and get rewarded for your contribution to network security",
   "markupAdStakingTitle": "Staking",
   "markupAdSurveyDescription": "Complete & Get Rewarded",
-  "markupAdSurveyTitle": "Survey: HAQQCommunity Compass",
+  "markupAdSurveyTitle": "Survey: HAQQ\nCommunity Compass",
   "maxBaseFee": "Max Base Fee",
   "maxBaseFeeDescription": "The max fee is the most you'll pay (base fee + priority fee. We have updated the gas fee based on current network conditions and have increased it by at least 10% (required by the network).",
   "maxBaseFeeGWei": "Max Base Fee (GWei)",
@@ -520,6 +523,7 @@
   "raffleRewardPrize": "Prize {{islm}} {{symbol}}",
   "raffleRewardUnderstood": "Understood",
   "raffleRewardWonTickets": "{{winner_tickets}} out of {{total_tickets}} tickets won",
+  "raffleRewardСongratulations": "Congratulations!",
   "raffleRewardСongratulations": "Сongratulations!",
   "raffleTicketRecieved": "You have successfully claimed your reward",
   "recent": "Recent",

assets/locales/id/id.json

@@ -3,7 +3,7 @@
   "StakingInfoUnDelegationDay": " ({{day}} hari tersisa)",
   "StakingInfoUnDelegationDays": " ({{days}} hari tersisa)",
   "Welcome_haqq_pin": "Selamat datang di HAQQ Wallet",
-  "_hash": "f79bcdc329e7ccd76d63234398286d2971eb77bdd54268b97f8a199134009448",
+  "_hash": "7e65c3e3fedcc16d79ccd1315446214ed42d419f53eb6c458f3bbed4acfffeac",
   "accept": "Terima",
   "accountInfoNftTabTitle": "NFTs",
   "accountInfoTokensTabTitle": "Token",
@@ -315,7 +315,7 @@
   "ledgerScanDescription2": "terbuka",
   "ledgerScanDescription3": "Bluetooth diaktifkan",
   "ledgerScanDescription4": " dan ",
-  "ledgerScanDescription5": "Aplikasi Ledger di Ledger Anda sudah diinstal",
+  "ledgerScanDescription5": "Aplikasi Ethereum di Ledger Anda sudah terpasang",
   "ledgerScanDescription6": " dan dibuka",
   "ledgerScanTitle": "Mencari perangkat",
   "ledgerStoreWalletSaving": "Penyimpanan akun sedang berlangsung",
@@ -336,6 +336,22 @@
   "lockedTokensVested": "Vested: {{count}}",
   "lockedTokensVestedAvailableIn": " (Akan tersedia dalam: {{value}})",
   "low": "Rendah",
+  "mainAccount": "Akun utama",
+  "markupAdAmbasadorTitle": "Program Duta Besar",
+  "markupAdAmbassadorDescription": "Bersama-sama, kami menciptakan komunitas online terbesar yang mempromosikan nilai-nilai Islam dalam kripto.",
+  "markupAdBuyWithFiatDescription": "Beli ISLM dengan uang tunai dengan harga terbaik melalui penyedia terpercaya",
+  "markupAdBuyWithFiatTitle": "Beli ISLM dengan fiat",
+  "markupAdExpeditionDescription": "Selesaikan misi & dapatkan hadiah",
+  "markupAdExpeditionTitle": "Bergabunglah dengan HAQQ expedition Vol.2",
+  "markupAdFruitTitle": "Koleksi Fruits of Jannah NFT mulai dicetak sekarang",
+  "markupAdPurchaseOptionsDescription": "Daftar platform tempat Anda dapat membeli Koin Islami",
+  "markupAdPurchaseOptionsTitle": "Opsi Pembelian ISLM",
+  "markupAdQuizDescription": "Uji pengetahuan Anda, pelajari lebih lanjut tentang mata uang kripto yang inovatif ini",
+  "markupAdQuizTitle": "Kuis: Temukan & Pelajari",
+  "markupAdStakingDescription": "Delegasikan ISLM Anda dan dapatkan imbalan atas kontribusi Anda terhadap keamanan jaringan",
+  "markupAdStakingTitle": "Staking",
+  "markupAdSurveyDescription": "Selesaikan & Dapatkan Hadiah",
+  "markupAdSurveyTitle": "Survei: HAQQCommunity Compass",
   "maxBaseFee": "Biaya Dasar Maksimal",
   "maxBaseFeeDescription": "Biaya maksimal adalah yang paling banyak Anda bayar (biaya dasar + biaya prioritas). Kami telah memperbarui biaya gas berdasarkan kondisi jaringan saat ini dan telah meningkatkannya setidaknya 10% (diperlukan oleh jaringan).",
   "maxBaseFeeGWei": "Biaya Dasar Maksimal (GWei)",
@@ -503,6 +519,7 @@
   "raffleRewardPrize": "Hadiah {{islm}} {{symbol}}",
   "raffleRewardUnderstood": "Dimengerti",
   "raffleRewardWonTickets": "{{winner_tickets}} dari {{total_tickets}} tiket dimenangkan",
+  "raffleRewardСongratulations": "Selamat!",
   "raffleRewardСongratulations": "Selamat!",
   "raffleTicketRecieved": "Anda telah berhasil mengklaim hadiah Anda",
   "recent": "Terbaru",

assets/locales/tr/tr.json

@@ -3,7 +3,7 @@
   "StakingInfoUnDelegationDay": "({{day}} gün kaldı)",
   "StakingInfoUnDelegationDays": "({{days}} gün kaldı)",
   "Welcome_haqq_pin": "HAQQ Cüzdanına Hoş Geldiniz",
-  "_hash": "3679f2a32c3760b653e61e4f155515f6a04fdd462112674e8893965473cfcf78",
+  "_hash": "f59e99c5e4ce8014fb81acb3507a70d4c31b7b406171a0171c3550252558acc5",
   "accept": "Kabul Et",
   "accountInfoNftTabTitle": "NFT’ler",
   "accountInfoTokensTabTitle": "Tokenlar",
@@ -317,7 +317,7 @@
   "ledgerScanDescription2": "kilidinin açık olduğundan",
   "ledgerScanDescription3": "Bluetooth’un etkin olduğundan",
   "ledgerScanDescription4": " ve ",
-  "ledgerScanDescription5": "Ledger uygulamasının yüklü olduğundan",
+  "ledgerScanDescription5": "Ledger'ınızda Ethereum uygulaması yüklü",
   "ledgerScanDescription6": " ve açık olduğundan emin olun",
   "ledgerScanTitle": "Cihazlar aranıyor",
   "ledgerStoreWalletSaving": "Hesap kaydediliyor",
@@ -338,8 +338,22 @@
   "lockedTokensVested": "Yatırılmış: {{count}}",
   "lockedTokensVestedAvailableIn": " (Kullanılabilir olacak: {{value}})",
   "low": "Düşük",
+  "mainAccount": "Ana hesap\n\n",
   "markupAdAmbasadorTitle": "Büyükelçi Programı",
   "markupAdAmbassadorDescription": "Birlikte, kriptoda İslami değerleri teşvik eden en büyük çevrimiçi topluluğu oluşturuyoruz.",
+  "markupAdBuyWithFiatDescription": "ISLM'yi güvenilir bir sağlayıcı aracılığıyla en iyi fiyata nakit olarak satın alın",
+  "markupAdBuyWithFiatTitle": "Fiat ile ISLM satın alın",
+  "markupAdExpeditionDescription": "Görevleri tamamla ve ödüller kazan",
+  "markupAdExpeditionTitle": "HAQQ Expedition Vol.2'ye katılın",
+  "markupAdFruitTitle": "Fruits of Jannah NFT koleksiyonu şimdi basılıyor",
+  "markupAdPurchaseOptionsDescription": "Islamic Coin satın alabileceğiniz platformların listesi",
+  "markupAdPurchaseOptionsTitle": "ISLM Satın Alma Seçenekleri",
+  "markupAdQuizDescription": "Bilginizi test edin, bu yenilikçi kripto para hakkında daha fazla bilgi edinin",
+  "markupAdQuizTitle": "Quiz: Keşfet ve Öğren",
+  "markupAdStakingDescription": "ISLM'nizi delege et ve ağ güvenliğine yaptığınız katkılardan dolayı ödüllendirilin",
+  "markupAdStakingTitle": "Staking",
+  "markupAdSurveyDescription": "Tamamlayın ve Ödüllendirilin",
+  "markupAdSurveyTitle": "Anket: HAQQCommunity Compass",
   "maxBaseFee": "Maksimum Taban Ücreti",
   "maxBaseFeeDescription": "Maksimum ücret, ödeyeceğiniz en fazla tutardır (taban ücreti + öncelik ücreti). Ağ koşullarına göre gas ücretini güncelledik ve en az %10 artırdık (ağ tarafından gerekli).",
   "maxBaseFeeGWei": "Maksimum Taban Ücreti (GWei)",

src/components/locked-tokens.tsx

@@ -129,6 +129,7 @@ export const LockedTokens = observer(
 const styles = createTheme({
   container: {
     paddingHorizontal: 20,
+    alignItems: 'flex-start',
   },
   row: {
     flexDirection: 'row',

src/components/swap/swap-input.tsx

@@ -140,7 +140,7 @@ const styles = createTheme({
     justifyContent: 'space-between',
   },
   amountInput: {
-    flex: 3.8,
+    flex: 3.5,
   },
   cryptoBlockImage: {
     maxHeight: 12,

src/components/swap/swap-route-path-icons.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {observer} from 'mobx-react';
-import {View} from 'react-native';
+import {I18nManager, View} from 'react-native';
 
 import {Color} from '@app/colors';
 import {createTheme} from '@app/helpers';
@@ -77,7 +77,7 @@ export const SwapRoutePathIcons = observer(
               {!isLast && (
                 <Text variant={TextVariant.t14} color={Color.textBase1}>
                   {STRINGS.NBSP}
-                  {'→'}
+                  {I18nManager.isRTL ? '←' : '→'}
                   {STRINGS.NBSP}
                 </Text>
               )}

src/components/transaction-sum/transaction-sum.tsx

@@ -23,7 +23,6 @@ import {I18N} from '@app/i18n';
 import {Contact} from '@app/models/contact';
 import {Provider} from '@app/models/provider';
 import {Balance} from '@app/services/balance';
-import {HapticEffects, vibrate} from '@app/services/haptic';
 import {IToken} from '@app/types';
 import {BALANCE_MULTIPLIER, FEE_AMOUNT} from '@app/variables/balance';
 
@@ -111,7 +110,6 @@ export const TransactionSum = observer(
     }, [amounts, onPressPreview]);
 
     const onPressMax = useCallback(() => {
-      vibrate(HapticEffects.impactLight);
       amounts.setMax();
     }, [amounts]);
 

src/components/ui/sum-block.tsx

@@ -78,7 +78,7 @@ export const SumBlock = observer(
 
     const onPressMax = useCallback(() => {
       vibrate(HapticEffects.impactLight);
-      onMax();
+      onMax?.();
     }, [onMax]);
 
     const fiatString = useMemo(() => {

src/components/ui/text-field.tsx

@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 
 import {
+  I18nManager,
   InteractionManager,
   Keyboard,
   LayoutChangeEvent,
@@ -172,6 +173,7 @@ export const TextField: React.FC<TextFieldProps> = memo(
 
     const labelAnimStyle = useAnimatedStyle(
       () => ({
+        alignItems: 'flex-start',
         transform: [
           {
             scale: interpolate(focusAnim.value, [0, 1], [1, 1.33]),
@@ -180,7 +182,11 @@ export const TextField: React.FC<TextFieldProps> = memo(
             translateY: interpolate(focusAnim.value, [0, 1], [0, 10]),
           },
           {
-            translateX: interpolate(focusAnim.value, [0, 1], [0, left.value]),
+            translateX: interpolate(
+              focusAnim.value,
+              [0, 1],
+              [0, I18nManager.isRTL ? -left.value : left.value],
+            ),
           },
         ],
       }),
@@ -298,6 +304,7 @@ const styles = createTheme({
   },
   inputContainer: {
     flex: 1,
+    alignItems: 'flex-start',
   },
   disabled: {
     opacity: 0.5,
@@ -313,6 +320,7 @@ const styles = createTheme({
     textAlignVertical: 'center',
     right: IS_IOS ? 0 : 4.5,
     flex: 1,
+    alignItems: 'flex-start',
   },
   error: {
     marginLeft: 4,

src/components/web3-browser/web3-browser-action-menu.tsx

@@ -71,18 +71,15 @@ export const Web3BrowserActionMenu = ({
   const insets = useSafeAreaInsets();
   const isRTL = useMemo(() => I18nManager.isRTL, []);
   const actionMenuStyle = useMemo(() => {
-    const x1 =
+    const x =
       moreIconLayout.x! -
       ACTION_MENU_WIDTH +
       moreIconLayout.width! * (IS_IOS ? 2 : 4);
-    const x2 =
-      moreIconLayout.x! +
-      ACTION_MENU_WIDTH -
-      moreIconLayout.width! * (IS_IOS ? 2 : 4);
+
     const y = moreIconLayout.height! + moreIconLayout.y! + 5 + insets.top;
 
     return {
-      left: isRTL ? x2 : x1,
+      left: isRTL ? -x : x,
       top: isRTL ? y + 5 : y,
     };
   }, [isRTL, moreIconLayout]);
@@ -217,7 +214,13 @@ export const Web3BrowserActionMenu = ({
 const styles = createTheme({
   moreButtonSeparator: {
     width: ACTION_MENU_WIDTH,
-    transform: [{translateX: -ACTION_MENU_PADDING_HORIZONTAL}],
+    transform: [
+      {
+        translateX: I18nManager.isRTL
+          ? ACTION_MENU_PADDING_HORIZONTAL
+          : -ACTION_MENU_PADDING_HORIZONTAL,
+      },
+    ],
     backgroundColor: Color.graphicSecond2,
     height: 1,
     opacity: 0.5,

src/components/web3-browser/web3-browser-header.tsx

@@ -1,7 +1,17 @@
 import React, {useCallback, useMemo, useRef} from 'react';
 
-import {LayoutChangeEvent, TouchableOpacity, View} from 'react-native';
-import Animated, {SlideInRight, SlideOutRight} from 'react-native-reanimated';
+import {
+  I18nManager,
+  LayoutChangeEvent,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Animated, {
+  SlideInLeft,
+  SlideInRight,
+  SlideOutLeft,
+  SlideOutRight,
+} from 'react-native-reanimated';
 import {WebViewNavigation} from 'react-native-webview';
 
 import {Color} from '@app/colors';
@@ -72,14 +82,14 @@ export const Web3BrowserHeader = ({
   const walletEnteringAnimation = useMemo(() => {
     if (!prevWalletAddress.current && walletAddress) {
       prevWalletAddress.current = walletAddress;
-      return SlideInRight;
+      return I18nManager.isRTL ? SlideInLeft : SlideInRight;
     }
     return undefined;
   }, [walletAddress]);
   const walletExitingAnimation = useMemo(() => {
     if (prevWalletAddress.current && !walletAddress) {
       prevWalletAddress.current = walletAddress;
-      return SlideOutRight;
+      return I18nManager.isRTL ? SlideOutLeft : SlideOutRight;
     }
     return undefined;
   }, [walletAddress]);

src/helpers/create-wallets-for-provider.ts

@@ -4,7 +4,7 @@ import {app} from '@app/contexts';
 import {I18N, getText} from '@app/i18n';
 import {Wallet} from '@app/models/wallet';
 import {WalletType} from '@app/types';
-import {ETH_HD_SHORT_PATH, MAIN_ACCOUNT_NAME} from '@app/variables/common';
+import {ETH_HD_SHORT_PATH} from '@app/variables/common';
 
 import {AddressUtils} from './address-utils';
 
@@ -20,7 +20,7 @@ export async function createWalletsForProvider(
 
     const name =
       total === 0
-        ? MAIN_ACCOUNT_NAME
+        ? getText(I18N.mainAccount)
         : getText(I18N.signinStoreWalletAccountNumber, {
             number: `${total + 1}`,
           });