Feat: Transak integration

locales/en/translation.json

@@ -429,6 +429,9 @@
   "There are no Ramp offers available, as the current purchase limits for this exchange must be between and": "There are no Ramp offers available, as the current purchase limits for this exchange must be between {{min}} {{fiatCurrency}} and {{max}} {{fiatCurrency}}",
   "There are no Sardine offers available, as the current purchase limits for this exchange must be between and": "There are no Sardine offers available, as the current purchase limits for this exchange must be between {{min}} {{fiatCurrency}} and {{max}} {{fiatCurrency}}",
   "There are no Simplex offers available, as the current purchase limits for this exchange must be between and": "There are no Simplex offers available, as the current purchase limits for this exchange must be between {{min}} {{fiatCurrency}} and {{max}} {{fiatCurrency}}",
+  "Transak currently does not support operations with the selected combination fiat(fiatCurrency)-paymentMethod(paymentMethod).": "Transak currently does not support operations with the selected combination fiat({{fiatCurrency}})-paymentMethod({{paymentMethod}}).",
+  "There are no Transak offers available, as the current purchase limits for this exchange must be between and": "There are no Transak offers available, as the current purchase limits for this exchange must be between {{min}} {{fiatCurrency}} and {{max}} {{fiatCurrency}}",
+  "Country not supported: ": "Country not supported: ",
   "It was not possible to generate the checkout URL correctly": "It was not possible to generate the checkout URL correctly",
   "No offers": "No offers",
   "There are currently no offers that satisfy your request. Please try again later.": "There are currently no offers that satisfy your request. Please try again later.",

locales/es/translation.json

@@ -432,6 +432,8 @@
   "It was not possible to generate the checkout URL correctly": "It was not possible to generate the checkout URL correctly",
   "No offers": "No offers",
   "There are currently no offers that satisfy your request. Please try again later.": "There are currently no offers that satisfy your request. Please try again later.",
+  "Transak currently does not support operations with the selected combination fiat(fiatCurrency)-paymentMethod(paymentMethod).": "Transak currently does not support operations with the selected combination fiat({{fiatCurrency}})-paymentMethod({{paymentMethod}}).",
+  "There are no Transak offers available, as the current purchase limits for this exchange must be between and": "There are no Transak offers available, as the current purchase limits for this exchange must be between {{min}} {{fiatCurrency}} and {{max}} {{fiatCurrency}}",
   "Crypto": "Cripto",
   "Payment Type": "Tipo de pago",
   "Error: ": "Error: ",

src/components/icons/external-services/transak/transak-logo.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import {
+  Path,
+  Svg,
+  G,
+  Circle,
+  Polygon,
+  Defs,
+  LinearGradient,
+  Stop,
+} from 'react-native-svg';
+import {useTheme} from 'styled-components/native';
+import {White} from '../../../../styles/colors';
+
+const TransakLogoSvg: React.FC<{
+  isDark: boolean;
+  iconOnly: boolean;
+  width: number;
+  height: number;
+}> = ({isDark, iconOnly, width, height}) => {
+  return (
+    <Svg
+      width={width}
+      height={height}
+      viewBox={iconOnly ? '180 325 570 450' : '269 325 1347 430'}>
+      <Defs>
+        <LinearGradient
+          id="linear-gradient"
+          x1={297.72}
+          y1={432.94}
+          x2={669.52}
+          y2={647.59}
+          gradientUnits="userSpaceOnUse">
+          <Stop offset={0.13} stopColor="#348bed" />
+          <Stop offset={0.31} stopColor="#2b80e8" />
+          <Stop offset={0.64} stopColor="#1461db" />
+          <Stop offset={0.72} stopColor="#0e57d7" />
+        </LinearGradient>
+      </Defs>
+      <G fill="none" fill-rule="evenodd">
+        <Circle
+          id="transak-path-icon-bg"
+          fill={'url(#linear-gradient)'}
+          cx="483.62"
+          cy="540.27"
+          r="214.62"
+        />
+        <Path
+          id="transak-path-icon-arrows"
+          fill={White}
+          d="M619.14,527.15l-60.62-60.62h0l-.11-.11-.24-.21a15.17,15.17,0,0,0-1.23-1c-.3-.24-.6-.47-.92-.68-.14-.1-.28-.18-.43-.27a16.46,16.46,0,0,0-22,3.65l-94.28,94.29v-84a16.65,16.65,0,0,0-33.3,0v84l-34.42-34.42a16.65,16.65,0,0,0-23.54,23.54l62.84,62.84a14.82,14.82,0,0,0,1.25,1.13c.42.34.86.67,1.3,1l0,0A16.65,16.65,0,0,0,421,618.9h.07c.54.05,1.08.08,1.62.08h0l.25,0q.68,0,1.35-.06l.33,0c.43-.05.86-.1,1.28-.19l.19,0c.47-.1.94-.21,1.4-.35l.08,0a15.32,15.32,0,0,0,1.48-.53h0a15.62,15.62,0,0,0,2-1l.38-.22a15.91,15.91,0,0,0,1.8-1.28l.17-.15c.35-.3.7-.6,1-.94L530,518.6v83.74a16.65,16.65,0,0,0,33.3,0v-84L595.6,550.7a16.65,16.65,0,0,0,23.54-23.55Z"
+        />
+        {iconOnly ? null : (
+          <>
+            <Polygon
+              id="transak-path-t"
+              fill={isDark ? White : '#1461db'}
+              points="773.22 490.17 822.62 490.17 822.62 619.21 852.21 619.21 852.21 490.17 901.61 490.17 901.61 462.53 773.22 462.53 773.22 490.17"
+            />
+            <Path
+              id="transak-path-r"
+              fill={isDark ? White : '#1461db'}
+              d="M966.45,501.43a48.82,48.82,0,0,0-10.34,1.85,38.43,38.43,0,0,0-9.24,4.07,32.1,32.1,0,0,0-9.36,8.28,42.7,42.7,0,0,0-3.26,5V501.7H908.14V619.21H938V559.15A37.28,37.28,0,0,1,939.79,547a26.13,26.13,0,0,1,14.26-15.72,32.53,32.53,0,0,1,11.69-3,30.82,30.82,0,0,1,11.38,1V501.7A54.42,54.42,0,0,0,966.45,501.43Z"
+            />
+            <Path
+              id="transak-path-a"
+              fill={isDark ? White : '#1461db'}
+              d="M1089.4,519.76a34.49,34.49,0,0,0-18.28-16.53q-12.07-4.8-27.64-4.8-21.21,0-33.51,9.15a45.31,45.31,0,0,0-16.75,23.72l26.76,8.48q2.84-8.06,9.9-11.2a33.26,33.26,0,0,1,13.6-3.16q11.76,0,16.76,4.9c2.61,2.55,4.17,6.28,4.73,11.1-5,.75-9.75,1.46-14.2,2.11q-11.41,1.69-20.45,3.54a111.21,111.21,0,0,0-15.56,4.24A45.08,45.08,0,0,0,999.69,560a30.52,30.52,0,0,0-8.11,11.92,42.74,42.74,0,0,0-2.5,14.9,36.12,36.12,0,0,0,4.52,17.9,33.05,33.05,0,0,0,13.27,13q8.76,4.85,21.38,4.84,15.24,0,25.19-5.28a51.34,51.34,0,0,0,14.85-12.47v14.49h25.9V547.39a145.84,145.84,0,0,0-.66-14.57A35,35,0,0,0,1089.4,519.76Zm-27.64,63.76a28.78,28.78,0,0,1-4.51,6.2,30.55,30.55,0,0,1-8.92,6.58,29.78,29.78,0,0,1-13.77,2.88,23,23,0,0,1-8.81-1.52,12.53,12.53,0,0,1-5.71-4.4,11.72,11.72,0,0,1-2-6.91,11.27,11.27,0,0,1,1.26-5.33,13.35,13.35,0,0,1,3.91-4.41,30.67,30.67,0,0,1,7-3.75,76.24,76.24,0,0,1,8.81-2.61q5-1.2,13.17-2.67c3.47-.62,7.71-1.36,12.55-2.18-.06,2.09-.15,4.34-.31,7A29.64,29.64,0,0,1,1061.76,583.52Z"
+            />
+            <Path
+              id="transak-path-n"
+              fill={isDark ? White : '#1461db'}
+              d="M1229.64,529.72a49.46,49.46,0,0,0-6.9-15,37.34,37.34,0,0,0-13.55-11.86q-8.7-4.67-22.52-4.67-17.3,0-28.67,7.5a48.11,48.11,0,0,0-9.41,8.15V501.7h-26.33V619.21h30V559.59q0-11,2.44-17.63T1161,531.9a20.17,20.17,0,0,1,8.16-4.63,30.76,30.76,0,0,1,8.16-1.2q9.46,0,14.63,4.25a23.92,23.92,0,0,1,7.46,10.55,46.32,46.32,0,0,1,2.72,12.57q.44,6.25.43,10.28v55.49h30V553.27c0-2-.14-5.07-.43-9.36A75.59,75.59,0,0,0,1229.64,529.72Z"
+            />
+            <Path
+              id="transak-path-s"
+              fill={isDark ? White : '#1461db'}
+              d="M1340.46,557q-8.12-4.6-21.49-8.1-13.71-3.48-20.4-5.66t-8.81-4.24a6.84,6.84,0,0,1-2.13-5.12c0-3.41,1.65-6,4.95-7.83s7.68-2.53,13.11-2.17q8.38.65,13.28,4.46a14.71,14.71,0,0,1,5.66,10.34l30.25-5.45a36.16,36.16,0,0,0-8.11-18.5,42.62,42.62,0,0,0-17.25-12.07,65.82,65.82,0,0,0-24.48-4.25q-14.25,0-24.75,4.52A37,37,0,0,0,1264,515.79a33.66,33.66,0,0,0-5.76,19.64,29.52,29.52,0,0,0,3.8,15.39q3.81,6.38,12.41,10.94t23,8.27q12.72,3.38,18.76,5.44c4,1.38,6.62,2.77,7.78,4.19a8.54,8.54,0,0,1,1.74,5.6,10,10,0,0,1-4.35,8.65Q1317,597,1309,597q-9.8,0-16.16-4.68a21.16,21.16,0,0,1-8.21-13L1254.34,584q2.94,18.39,16.59,28.46t35.85,10.06q23.07,0,36.12-10.34T1356,583.74a31,31,0,0,0-3.7-15.62Q1348.57,561.66,1340.46,557Z"
+            />
+            <Path
+              id="transak-path-a"
+              fill={isDark ? White : '#1461db'}
+              d="M1473.69,519.76a34.52,34.52,0,0,0-18.28-16.53q-12.08-4.8-27.64-4.8-21.21,0-33.51,9.15a45.38,45.38,0,0,0-16.76,23.72l26.77,8.48q2.84-8.06,9.9-11.2a33.26,33.26,0,0,1,13.6-3.16q11.76,0,16.76,4.9c2.61,2.55,4.16,6.28,4.73,11.1-5,.75-9.75,1.46-14.2,2.11q-11.41,1.69-20.45,3.54a111.21,111.21,0,0,0-15.56,4.24q-9.46,3.5-15.07,8.65a30.52,30.52,0,0,0-8.11,11.92,42.51,42.51,0,0,0-2.5,14.9,36.12,36.12,0,0,0,4.52,17.9,33,33,0,0,0,13.27,13q8.76,4.85,21.38,4.84,15.24,0,25.19-5.28a51.34,51.34,0,0,0,14.85-12.47v14.49h25.9V547.39a145.84,145.84,0,0,0-.66-14.57A35,35,0,0,0,1473.69,519.76Zm-27.64,63.76a28.78,28.78,0,0,1-4.51,6.2,30.55,30.55,0,0,1-8.92,6.58,29.78,29.78,0,0,1-13.77,2.88,23,23,0,0,1-8.81-1.52,12.53,12.53,0,0,1-5.71-4.4,11.72,11.72,0,0,1-2-6.91,11.27,11.27,0,0,1,1.26-5.33,13.23,13.23,0,0,1,3.91-4.41,30.67,30.67,0,0,1,7-3.75,75.65,75.65,0,0,1,8.81-2.61q5-1.2,13.17-2.67c3.47-.62,7.71-1.36,12.55-2.18-.06,2.09-.16,4.34-.31,7A30,30,0,0,1,1446.05,583.52Z"
+            />
+            <Polygon
+              id="transak-path-k"
+              fill={isDark ? White : '#1461db'}
+              points="1570.74 560.45 1613.17 501.7 1576.61 501.7 1536.79 558.28 1536.79 462.53 1506.76 462.53 1506.54 619.21 1536.79 619.21 1536.79 562.63 1577.48 619.21 1616 619.21 1570.74 560.45"
+            />
+          </>
+        )}
+      </G>
+    </Svg>
+  );
+};
+
+const TransakLogo = ({
+  width,
+  height,
+  iconOnly = false,
+}: {
+  width?: number;
+  height?: number;
+  iconOnly?: boolean;
+}) => {
+  const theme = useTheme();
+  const widthSize = width ? width : iconOnly ? 33 : 96;
+  const heightSize = height ? height : 32;
+
+  return (
+    <TransakLogoSvg
+      isDark={theme.dark}
+      iconOnly={iconOnly}
+      width={widthSize}
+      height={heightSize}
+    />
+  );
+};
+
+export default TransakLogo;

src/navigation/services/buy-crypto/components/PaymentMethodModal.tsx

@@ -22,6 +22,7 @@ import MoonpayLogo from '../../../../components/icons/external-services/moonpay/
 import RampLogo from '../../../../components/icons/external-services/ramp/ramp-logo';
 import SardineLogo from '../../../../components/icons/external-services/sardine/sardine-logo';
 import SimplexLogo from '../../../../components/icons/external-services/simplex/simplex-logo';
+import TransakLogo from '../../../../components/icons/external-services/transak/transak-logo';
 import {Action, LightBlack, SlateDark, White} from '../../../../styles/colors';
 import {useAppDispatch, useAppSelector} from '../../../../utils/hooks';
 import {useTranslation} from 'react-i18next';
@@ -167,6 +168,10 @@ const PaymentMethodsModal = ({
             heightIcon={20}
           />
         );
+      case 'transak':
+        return (
+          <TransakLogo key={exchange} iconOnly={true} width={30} height={17} />
+        );
       default:
         return null;
     }

src/navigation/services/buy-crypto/components/terms/TransakTerms.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import {useTranslation} from 'react-i18next';
+import {TouchableOpacity} from 'react-native';
+import {
+  ExchangeTermsContainer,
+  ExchangeTermsText,
+} from '../../styled/BuyCryptoTerms';
+import haptic from '../../../../../components/haptic-feedback/haptic';
+import {Link} from '../../../../../components/styled/Text';
+import {useAppDispatch} from '../../../../../utils/hooks';
+import {openUrlWithInAppBrowser} from '../../../../../store/app/app.effects';
+import {PaymentMethod} from '../../constants/BuyCryptoConstants';
+
+const TransakTerms: React.FC<{
+  paymentMethod: PaymentMethod;
+  country?: string;
+}> = ({paymentMethod, country = 'US'}) => {
+  const {t} = useTranslation();
+  const dispatch = useAppDispatch();
+
+  return (
+    <ExchangeTermsContainer>
+      <ExchangeTermsText>
+        {t('What service fees am I paying?')}
+      </ExchangeTermsText>
+      {['applePay', 'creditCard', 'debitCard', 'other'].includes(
+        paymentMethod.method,
+      ) ? (
+        <ExchangeTermsText>
+          {t(
+            'For card payments from 3.5% to 5.5% of the transaction depending on the fiat currency.',
+          )}
+        </ExchangeTermsText>
+      ) : null}
+      {['sepaBankTransfer', 'other'].includes(paymentMethod.method) ? (
+        <ExchangeTermsText>
+          {t(
+            'For bank transfers 0.99% of the transaction with a minimum of €1.00 or currency equivalent.',
+          )}
+        </ExchangeTermsText>
+      ) : null}
+      {['other'].includes(paymentMethod.method) ? (
+        <ExchangeTermsText>
+          {t(
+            'Other payment methods can range from 0.99% to 7.99% the transaction, depending on the country and the payment method selected.',
+          )}
+        </ExchangeTermsText>
+      ) : null}
+      <ExchangeTermsText>
+        {t(
+          'Transak also charges a dynamic network fee based on the blockchain network conditions, and a partner margin when purchasing crypto within their apps.',
+        )}
+        <TouchableOpacity
+          onPress={() => {
+            haptic('impactLight');
+            dispatch(
+              openUrlWithInAppBrowser(
+                'https://support.transak.com/en/articles/7845942-how-does-transak-calculate-prices-and-fees',
+              ),
+            );
+          }}>
+          <Link style={{fontSize: 12, marginLeft: 2, top: 2}}>
+            {t('Read more')}
+          </Link>
+        </TouchableOpacity>
+      </ExchangeTermsText>
+      <ExchangeTermsText style={{marginTop: 4}}>
+        {t(
+          'This service is provided by a third party, and you are subject to their',
+        )}
+        <TouchableOpacity
+          onPress={() => {
+            haptic('impactLight');
+            dispatch(
+              openUrlWithInAppBrowser(
+                country === 'US'
+                  ? 'https://transak.com/terms-of-service-us'
+                  : 'https://transak.com/terms-of-service',
+              ),
+            );
+          }}>
+          <Link style={{fontSize: 12, top: 2}}>{t('Terms of service')}</Link>
+        </TouchableOpacity>
+      </ExchangeTermsText>
+    </ExchangeTermsContainer>
+  );
+};
+
+export default TransakTerms;

src/navigation/services/buy-crypto/constants/BuyCryptoConstants.tsx

@@ -41,6 +41,7 @@ export const PaymentMethodsAvailable: PaymentMethods = {
       ramp: false,
       sardine: true,
       simplex: false,
+      transak: false,
     },
     enabled: true,
   },
@@ -54,6 +55,7 @@ export const PaymentMethodsAvailable: PaymentMethods = {
       ramp: true,
       sardine: false,
       simplex: true,
+      transak: true,
     },
     enabled: Platform.OS === 'ios',
   },
@@ -67,6 +69,7 @@ export const PaymentMethodsAvailable: PaymentMethods = {
       ramp: true,
       sardine: true,
       simplex: true,
+      transak: true,
     },
     enabled: true,
   },
@@ -80,6 +83,7 @@ export const PaymentMethodsAvailable: PaymentMethods = {
       ramp: true,
       sardine: true,
       simplex: true,
+      transak: true,
     },
     enabled: true,
   },
@@ -93,6 +97,7 @@ export const PaymentMethodsAvailable: PaymentMethods = {
       ramp: true,
       sardine: false,
       simplex: true, // EU Only
+      transak: true,
     },
     enabled: true,
   },
@@ -106,6 +111,7 @@ export const PaymentMethodsAvailable: PaymentMethods = {
       ramp: true,
       sardine: true,
       simplex: true,
+      transak: true,
     },
     enabled: true,
   },