[FEATURE] Add FTX to live swap

package.json

@@ -49,7 +49,7 @@
     "@ledgerhq/hw-transport": "6.27.1",
     "@ledgerhq/hw-transport-http": "6.27.1",
     "@ledgerhq/hw-transport-node-hid-singleton": "6.27.1",
-    "@ledgerhq/live-common": "https://github.com/LedgerHQ/ledger-live-common.git#develop",
+    "@ledgerhq/live-common": "https://github.com/LedgerHQ/ledger-live-common.git#0b2c300bef76bfaab6268e9e79f567050a335098",
     "@ledgerhq/logs": "6.10.0",
     "@ledgerhq/react-ui": "^0.7.5",
     "@open-wc/webpack-import-meta-loader": "^0.4.7",

src/config/urls.js

@@ -178,6 +178,18 @@ export const urls = {
         support: "https://support.sendwyre.com/hc/en-us/requests/new",
         kyc: "https://support.ledger.com/hc/en-us/articles/4404422869265",
       },
+      ftx: {
+        main: "https://ftx.com",
+        tos: "",
+        support: "https://ftx.com/eu/support",
+        kyc: "",
+      },
+      ftxus: {
+        main: "https://ftx.us/",
+        tos: "",
+        support: "https://help.ftx.us/hc/en-us/articles/360043063474-Contact-Info",
+        kyc: "",
+      },
     },
   },
   exchange: {

src/env.js

@@ -2,5 +2,7 @@ import "dotenv/config";
 
 process.env = {
   ...process.env,
+  // FIXME: needed to build a workable test bundle of the app, to be removed one backend API is in prod
+  SWAP_API_BASE: "https://swap.aws.stg.ldg-tech.com/v3",
   NODE_ENV: (process.env || {}).NODE_ENV || "production",
 };

src/main/index.js

@@ -1,6 +1,6 @@
 // @flow
 import "./setup";
-import { app, Menu, ipcMain } from "electron";
+import { app, Menu, ipcMain, session } from "electron";
 import menu from "./menu";
 import {
   createMainWindow,
@@ -75,6 +75,23 @@ app.on("ready", async () => {
     await installExtensions();
   }
 
+  /**
+   * Clears the session’s HTTP cache
+   * Used to remove third party cached auth tokens, among other things
+   */
+  ipcMain.handle("clearStorageData", () => {
+    const defaultSession = session.defaultSession;
+
+    defaultSession.clearStorageData().then(
+      () => {
+        logger.log("session storageData cleared");
+      },
+      error => {
+        logger.error(error);
+      },
+    );
+  });
+
   db.init(userDataDirectory);
   app.dirname = __dirname;
   ipcMain.handle("getKey", (event, { ns, keyPath, defaultValue }) => {

src/renderer/actions/settings.js

@@ -194,11 +194,19 @@ export const setSwapHasAcceptedIPSharing = (hasAcceptedIPSharing: boolean) => ({
   payload: hasAcceptedIPSharing,
 });
 
-export const setSwapKYCStatus = (payload: { provider: string, id?: string, status?: string }) => ({
+export const setSwapKYCStatus = (payload: {
+  provider: string,
+  id?: string,
+  status?: string | null,
+}) => ({
   type: "SET_SWAP_KYC",
   payload,
 });
 
+export const resetSwapLoginAndKYCData = () => ({
+  type: "RESET_SWAP_LOGIN_AND_KYC_DATA",
+});
+
 export const addStarredMarketCoins = (payload: string) => ({
   type: "ADD_STARRED_MARKET_COINS",
   payload,

src/renderer/components/Alert.js

@@ -266,23 +266,27 @@ export default function Alert({
     </Text>
   );
 
-  return !isDismissed ? (
-    <Container type={type} small={small} {...rest}>
-      {left || (!noIcon && icon) ? <LeftContent>{left || icon}</LeftContent> : null}
-      <Content>
-        {title && <TitleContent>{title}</TitleContent>}
-        <div>
-          {description}
-          {!learnMoreOnRight && hasLearnMore ? <> {learnMore}</> : null}
-        </div>
-      </Content>
-      {bannerId ? (
-        <CloseContainer id={`dismiss-${bannerId || ""}-banner`} onClick={onDismiss}>
-          <IconCross size={14} />
-        </CloseContainer>
-      ) : null}
-      {!right && learnMoreOnRight && hasLearnMore ? <RightContent>{learnMore}</RightContent> : null}
-      {!!right && <RightContent>{right}</RightContent>}
-    </Container>
-  ) : null;
+  return (
+    !isDismissed && (
+      <Container type={type} small={small} {...rest}>
+        {left || (!noIcon && icon) ? <LeftContent>{left || icon}</LeftContent> : null}
+        <Content>
+          {title && <TitleContent>{title}</TitleContent>}
+          <div>
+            {description}
+            {!learnMoreOnRight && hasLearnMore ? <> {learnMore}</> : null}
+          </div>
+        </Content>
+        {bannerId ? (
+          <CloseContainer id={`dismiss-${bannerId || ""}-banner`} onClick={onDismiss}>
+            <IconCross size={14} />
+          </CloseContainer>
+        ) : null}
+        {!right && learnMoreOnRight && hasLearnMore ? (
+          <RightContent>{learnMore}</RightContent>
+        ) : null}
+        {!!right && <RightContent>{right}</RightContent>}
+      </Container>
+    )
+  );
 }

src/renderer/components/DeviceAction/index.js

@@ -1,24 +1,24 @@
 // @flow
-import React, { useEffect, Component } from "react";
-import { createStructuredSelector } from "reselect";
-import { Trans } from "react-i18next";
-import { connect } from "react-redux";
-import type { Device, Action } from "@ledgerhq/live-common/lib/hw/actions/types";
+import type { DeviceModelId } from "@ledgerhq/devices";
+import { ManagerNotEnoughSpaceError, TransportStatusError, UpdateYourApp } from "@ledgerhq/errors";
 import {
-  OutdatedApp,
-  LatestFirmwareVersionRequired,
   DeviceNotOnboarded,
+  LatestFirmwareVersionRequired,
   NoSuchAppOnProvider,
+  OutdatedApp,
 } from "@ledgerhq/live-common/lib/errors";
-import { getCurrentDevice } from "~/renderer/reducers/devices";
-import { setPreferredDeviceModel, setLastSeenDeviceInfo } from "~/renderer/actions/settings";
-import { preferredDeviceModelSelector } from "~/renderer/reducers/settings";
-import type { DeviceModelId } from "@ledgerhq/devices";
+import type { Action, Device } from "@ledgerhq/live-common/lib/hw/actions/types";
+import React, { Component, useEffect } from "react";
+import { Trans } from "react-i18next";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import { setLastSeenDeviceInfo, setPreferredDeviceModel } from "~/renderer/actions/settings";
 import AutoRepair from "~/renderer/components/AutoRepair";
-import TransactionConfirm from "~/renderer/components/TransactionConfirm";
 import SignMessageConfirm from "~/renderer/components/SignMessageConfirm";
+import TransactionConfirm from "~/renderer/components/TransactionConfirm";
 import useTheme from "~/renderer/hooks/useTheme";
-import { ManagerNotEnoughSpaceError, UpdateYourApp, TransportStatusError } from "@ledgerhq/errors";
+import { getCurrentDevice } from "~/renderer/reducers/devices";
+import { preferredDeviceModelSelector } from "~/renderer/reducers/settings";
 import {
   InstallingApp,
   renderAllowManager,
@@ -27,13 +27,13 @@ import {
   renderConnectYourDevice,
   renderError,
   renderInWrongAppForAccount,
+  renderListingApps,
   renderLoading,
   renderRequestQuitApp,
   renderRequiresAppInstallation,
-  renderListingApps,
-  renderWarningOutdated,
-  renderSwapDeviceConfirmationV2,
   renderSecureTransferDeviceConfirmation,
+  renderSwapDeviceConfirmationV2,
+  renderWarningOutdated,
 } from "./rendering";
 
 type OwnProps<R, H, P> = {

src/renderer/components/DeviceAction/rendering.js

@@ -12,6 +12,7 @@ import type {
   TransactionStatus,
 } from "@ledgerhq/live-common/lib/types";
 import type { ExchangeRate, Exchange } from "@ledgerhq/live-common/lib/exchange/swap/types";
+import { getProviderName } from "@ledgerhq/live-common/lib/exchange/swap/utils";
 import { WrongDeviceForAccount, UpdateYourApp } from "@ledgerhq/errors";
 import { LatestFirmwareVersionRequired } from "@ledgerhq/live-common/lib/errors";
 import type { DeviceModelId } from "@ledgerhq/devices";
@@ -718,7 +719,7 @@ export const renderSwapDeviceConfirmationV2 = ({
             provider: (
               <Box horizontal alignItems="center" style={{ gap: "6px" }}>
                 <ProviderIcon size={18} />
-                <Text style={{ textTransform: "capitalize" }}>{exchangeRate.provider}</Text>
+                <Text>{getProviderName(exchangeRate.provider)}</Text>
               </Box>
             ),
             fees: (

src/renderer/components/WebPlatformPlayer/index.js

@@ -1,5 +1,5 @@
 // @flow
-import { remote, WebviewTag, shell } from "electron";
+import { remote, WebviewTag } from "electron";
 import React, { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import styled from "styled-components";
 import { JSONRPCRequest } from "json-rpc-2.0";
@@ -47,6 +47,7 @@ import * as tracking from "./tracking";
 import TopBar from "./TopBar";
 
 import type { TopBarConfig } from "./type";
+import { handleMessageEvent, handleNewWindowEvent } from "./utils";
 
 const Container: ThemedComponent<{}> = styled.div`
   display: flex;
@@ -446,14 +447,9 @@ const WebPlatformPlayer = ({ manifest, onClose, inputs, config }: Props) => {
 
   const [receive] = useJSONRPCServer(handlers, handleSend);
 
-  const handleMessage = useCallback(
-    event => {
-      if (event.channel === "webviewToParent") {
-        receive(JSON.parse(event.args[0]));
-      }
-    },
-    [receive],
-  );
+  const handleMessage = useCallback(event => handleMessageEvent({ event, handler: receive }), [
+    receive,
+  ]);
 
   useEffect(() => {
     tracking.platformLoad(manifest);
@@ -483,12 +479,7 @@ const WebPlatformPlayer = ({ manifest, onClose, inputs, config }: Props) => {
     }
   }, [manifest]);
 
-  const handleNewWindow = useCallback(async e => {
-    const protocol = new URL(e.url).protocol;
-    if (protocol === "http:" || protocol === "https:") {
-      await shell.openExternal(e.url);
-    }
-  }, []);
+  const handleNewWindow = useCallback(handleNewWindowEvent, []);
 
   useEffect(() => {
     const webview = targetRef.current;

src/renderer/components/WebPlatformPlayer/utils.js

@@ -0,0 +1,14 @@
+import { shell } from "electron";
+
+export const handleMessageEvent = ({ event, handler }) => {
+  if (event.channel === "webviewToParent") {
+    handler(JSON.parse(event.args[0]));
+  }
+};
+
+export const handleNewWindowEvent = async e => {
+  const protocol = new URL(e.url).protocol;
+  if (protocol === "http:" || protocol === "https:") {
+    await shell.openExternal(e.url);
+  }
+};

src/renderer/drawers/SwapOperationDetails/index.js

@@ -14,6 +14,7 @@ import {
   getTransactionExplorer,
 } from "@ledgerhq/live-common/lib/explorers";
 import { operationStatusList } from "@ledgerhq/live-common/lib/exchange/swap";
+import { getProviderName } from "@ledgerhq/live-common/lib/exchange/swap/utils";
 import { useHistory } from "react-router-dom";
 import styled from "styled-components";
 import Box from "~/renderer/components/Box";
@@ -225,10 +226,9 @@ const SwapOperationDetails = ({
         <OpDetailsData>
           <LinkWithExternalIcon
             fontSize={12}
-            style={{ textTransform: "capitalize" }}
             onClick={() => openURL(urls.swap.providers[provider]?.main)}
           >
-            {provider}
+            {getProviderName(provider)}
           </LinkWithExternalIcon>
         </OpDetailsData>
       </OpDetailsSection>

src/renderer/icons/providers/FTX.js

@@ -0,0 +1,47 @@
+// @flow
+
+import React from "react";
+
+const FTX = (isUS: boolean = false) =>
+  function FTXLogo({ size }: { size: number }) {
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_1694_20090)">
+          <g clipPath="url(#clip1_1694_20090)">
+            <path
+              d="M6.78507 2.50132C12.5227 2.49956 18.2607 2.49956 23.999 2.50132C24.0008 4.35594 24.0008 6.21024 23.999 8.06423C18.2612 8.06599 12.5232 8.06599 6.78507 8.06423C6.78323 6.2096 6.78323 4.3553 6.78507 2.50132Z"
+              fill="#02A6C2"
+            />
+            <path
+              d="M0.00768817 10.1571C1.85878 10.1475 3.71019 10.1475 5.56192 10.1571C5.57152 12.0082 5.57152 13.8596 5.56192 15.7113C3.71027 15.7208 1.85886 15.721 0.00768817 15.7118C-0.00191168 13.8604 -0.00191168 12.0088 0.00768817 10.1571Z"
+              fill={isUS ? "#c81437" : "#5FCADE"}
+            />
+            <path
+              d="M6.78968 10.157C10.931 10.1482 15.072 10.1482 19.2128 10.157C19.2216 12.0081 19.2216 13.8595 19.2128 15.7113C15.0716 15.7199 10.9305 15.7199 6.78968 15.7113C6.78104 13.8601 6.78104 12.0087 6.78968 10.157Z"
+              fill="#5FCADE"
+            />
+            <path
+              d="M6.79493 17.8144C8.6429 17.7943 10.4905 17.7943 12.3379 17.8144C12.3571 19.6612 12.3573 21.5089 12.3387 23.3574C10.4907 23.3757 8.64314 23.3753 6.79589 23.3565C6.77669 21.5098 6.77637 19.6625 6.79493 17.8144Z"
+              fill="#ABEBF4"
+            />
+          </g>
+        </g>
+        <defs>
+          <clipPath id="clip0_1694_20090">
+            <rect width="24" height="24" fill="white" transform="translate(0.000488281)" />
+          </clipPath>
+          <clipPath id="clip1_1694_20090">
+            <rect width="24" height="20.8709" fill="white" transform="translate(0.000488281 2.5)" />
+          </clipPath>
+        </defs>
+      </svg>
+    );
+  };
+
+export default FTX;

src/renderer/icons/providers/index.js

@@ -4,5 +4,9 @@ import CoinifySquare from "./CoinifySquare";
 import MoonPay from "./MoonPay";
 import Paraswap from "./Paraswap";
 import Wyre from "./Wyre";
+import FTXLogo from "./FTX";
 
-export { Changelly, Coinify, CoinifySquare, MoonPay, Paraswap, Wyre };
+const FTX = FTXLogo();
+const FTXUS = FTXLogo(true);
+
+export { Changelly, Coinify, CoinifySquare, MoonPay, Paraswap, Wyre, FTX, FTXUS };