TW-1583: Buy with Debit & Credit card

README.md

@@ -102,3 +102,34 @@ redux-devtools --open --port=8000
 > Other UI options like `--open=browser` are available.
 
 Go to settings to specify port one more time.
+
+### Notes about countries flags
+
+- Do not compress the atlas with them, which is located at `public/misc/country-flags/atlas_original.png`, using tinypng; the compressed image has too low quality.
+- You can generate such an atlas with a script like below:
+```js
+const sharp = require('sharp');
+const fsPromises = require('fs/promises');
+const path = require('path');
+(async () => {
+  const imagesNames = await fsPromises.readdir(path.resolve('input'));
+  const atlasRowSize = 7;
+  const atlasRows = Math.ceil(imagesNames.length / atlasRowSize);
+  // Each image has a size of 40x30
+  const atlas = sharp({
+    create: {
+      width: 40 * atlasRowSize,
+      height: 30 * atlasRows,
+      channels: 4,
+      background: { r: 0, g: 0, b: 0, alpha: 0 }
+    }
+  }).composite(
+    imagesNames.map((imageName, index) => ({
+      input: path.resolve(`input/${imageName}`),
+      left: 40 * (index % atlasRowSize),
+      top: 30 * Math.floor(index / atlasRowSize)
+    }))
+  );
+  await atlas.png().toFile(path.resolve('output/atlas.png'));
+})();
+```

public/_locales/en/messages.json

@@ -2602,6 +2602,15 @@
   "PriceImpactInfo": {
     "message": "The difference between the market price and estimated price due to trade size"
   },
+  "newQuote": {
+    "message": "New quote:"
+  },
+  "selectProvider": {
+    "message": "Select Provider"
+  },
+  "selectCurrency": {
+    "message": "Select Currency"
+  },
   "selectToken": {
     "message": "Select Token"
   },
@@ -3130,6 +3139,12 @@
   "buyWithRampDescription": {
     "message": "Buy TEZ  using Visa, Mastercard, and all major debit and credit cards. Ramp is available in 160+ countries and territories."
   },
+  "provider": {
+    "message": "Provider"
+  },
+  "providers": {
+    "message": "Providers"
+  },
   "selectPaymentProvider": {
     "message": "Select payment provider"
   },
@@ -3208,7 +3223,7 @@
     "message": "Supports USDT"
   },
   "bestPrice": {
-    "message": "Best price"
+    "message": "Best Price"
   },
   "topUpCrypto": {
     "message": "Crypto"

src/app/PageRouter.tsx

@@ -3,7 +3,6 @@ import React, { memo, useLayoutEffect, useMemo } from 'react';
 import RootSuspenseFallback from 'app/a11y/RootSuspenseFallback';
 import { OpenInFullPage, useAppEnv } from 'app/env';
 import { AccountSettings } from 'app/pages/AccountSettings';
-import { BuyWithCreditCard } from 'app/pages/BuyWithCreditCard/BuyWithCreditCard';
 import CollectiblePage from 'app/pages/Collectibles/CollectiblePage';
 import ConnectLedger from 'app/pages/ConnectLedger/ConnectLedger';
 import Delegate from 'app/pages/Delegate';
@@ -102,7 +101,6 @@ const ROUTE_MAP = Woozie.createMap<RouteContext>([
   ],
   ['/settings/:tabSlug?', onlyReady(({ tabSlug }) => <Settings tabSlug={tabSlug} />)],
   ['/market', onlyReady(() => <Market />)],
-  ['/buy/debit', onlyReady(onlyInFullPage(() => <BuyWithCreditCard />))],
   ['/attention', onlyReady(onlyInFullPage(() => <AttentionPage />))],
   ['/notifications', onlyReady(() => <Notifications />)],
   ['/notifications/:id', onlyReady(({ id }) => <NotificationsItem id={Number(id) ?? 0} />)],

src/app/atoms/Flag.tsx

@@ -1,25 +1,120 @@
-import React, { HTMLAttributes, memo, useCallback, useState } from 'react';
+import React, { HTMLAttributes, memo, useCallback, useMemo, useState } from 'react';
 
 import classNames from 'clsx';
+import browser from 'webextension-polyfill';
 
-type FlagProps = {
+const atlasCountriesCodes = [
+  'ae',
+  'ar',
+  'au',
+  'az',
+  'bg',
+  'bh',
+  'br',
+  'ca',
+  'ch',
+  'cl',
+  'cn',
+  'co',
+  'cr',
+  'cz',
+  'de',
+  'dk',
+  'do',
+  'eg',
+  'eu',
+  'fr',
+  'gb',
+  'ge',
+  'gt',
+  'hk',
+  'hn',
+  'hr',
+  'hu',
+  'id',
+  'il',
+  'in',
+  'jo',
+  'jp',
+  'kn',
+  'kr',
+  'kw',
+  'kz',
+  'lk',
+  'md',
+  'mx',
+  'my',
+  'ng',
+  'no',
+  'nz',
+  'om',
+  'pe',
+  'ph',
+  'pl',
+  'pt',
+  'py',
+  'qa',
+  'ro',
+  'rw',
+  'sa',
+  'se',
+  'th',
+  'tr',
+  'tw',
+  'ua',
+  'us',
+  'uy',
+  'vn',
+  'za'
+];
+const atlasRowSize = 7;
+const imageWidth = 40;
+const imageHeight = 30;
+
+interface FlagProps {
   alt: string;
+  countryCode?: string;
   className?: string;
   src?: string;
-};
+}
 
-const Flag = memo<FlagProps>(({ alt, className, src }) => {
+export const Flag = memo<FlagProps>(({ alt, className, countryCode, src }) => {
   const [error, setError] = useState(false);
 
+  const bgFromAtlasStyle = useMemo(() => {
+    if (src || !countryCode) {
+      return undefined;
+    }
+
+    const index = atlasCountriesCodes.indexOf(countryCode);
+
+    if (index === -1) {
+      return undefined;
+    }
+
+    const row = Math.floor(index / atlasRowSize);
+    const col = index % atlasRowSize;
+
+    return {
+      backgroundImage: `url(${browser.runtime.getURL('/misc/country-flags/atlas.png')})`,
+      backgroundPosition: `${-(col * imageWidth) / 2}px ${-(row * imageHeight) / 2}px`,
+      backgroundSize: `${atlasRowSize * 1.25}rem`
+    };
+  }, [countryCode, src]);
+
   const handleError = useCallback(() => {
     setError(true);
   }, [setError]);
 
   return (
     <div className={classNames('w-6 h-6 flex justify-center items-center', className)}>
-      {src ? (
+      {src || bgFromAtlasStyle ? (
         <>
-          <img alt={alt} className={classNames({ hidden: error }, 'w-5 h-auto')} src={src} onError={handleError} />
+          {src ? (
+            <img alt={alt} className={classNames({ hidden: error }, 'w-5 h-auto')} src={src} onError={handleError} />
+          ) : (
+            <div className="w-5 aspect-[4/3]" style={bgFromAtlasStyle} />
+          )}
           {error && <FlagStub className="w-6 h-auto" />}
         </>
       ) : (
@@ -29,8 +124,6 @@ const Flag = memo<FlagProps>(({ alt, className, src }) => {
   );
 });
 
-export default Flag;
-
 const FlagStub = memo((props: HTMLAttributes<unknown>) => (
   <svg
     role="img"