'Swap' form: reduce queries amount (#362)

* Refactor 'Swap' form to reduce amount of queries (raw version)

* Hide most of tokens that are known but not exchangeable

public/_locales/en/messages.json

@@ -1983,5 +1983,16 @@
   },
   "ledgerLiveBridgeGuide": {
     "message": "To connect to Ledger, please activate the Ledger Live application on your device, open Tezos Wallet application and allow a WebSocket connection to your Temple account."
+  },
+  "noExchangerFoundForToken": {
+    "message": "No exchanger was found for token $symbol$ ($name$).",
+    "placeholders": {
+      "symbol": {
+        "content": "$1"
+      },
+      "name": {
+        "content": "$2"
+      }
+    }
   }
 }

src/app/pages/Swap.tsx

@@ -3,26 +3,29 @@ import React from "react";
 import { ReactComponent as SwapIcon } from "app/icons/swap.svg";
 import PageLayout from "app/layouts/PageLayout";
 import SwapForm from "app/templates/SwapForm";
+import { SwappableAssetsProvider } from "app/templates/SwapForm/useSwappableAssets";
 import { t } from "lib/i18n/react";
 
 type SwapProps = {
   assetSlug?: string | null;
 };
 
 const Swap: React.FC<SwapProps> = ({ assetSlug }) => (
-  <PageLayout
-    pageTitle={
-      <>
-        <SwapIcon className="w-auto h-4 mr-1 stroke-current" /> {t("swap")}
-      </>
-    }
-  >
-    <div className="py-4">
-      <div className="w-full max-w-sm mx-auto">
-        <SwapForm assetSlug={assetSlug} />
+  <SwappableAssetsProvider initialAssetKey={assetSlug ?? undefined}>
+    <PageLayout
+      pageTitle={
+        <>
+          <SwapIcon className="w-auto h-4 mr-1 stroke-current" /> {t("swap")}
+        </>
+      }
+    >
+      <div className="py-4">
+        <div className="w-full max-w-sm mx-auto">
+          <SwapForm assetSlug={assetSlug} />
+        </div>
       </div>
-    </div>
-  </PageLayout>
+    </PageLayout>
+  </SwappableAssetsProvider>
 );
 
 export default Swap;