restore a default page for both xlm purchases and generic purchases

extension/src/popup/Router.tsx

@@ -68,7 +68,7 @@ import { Swap } from "popup/views/Swap";
 import { ManageNetwork } from "popup/views/ManageNetwork";
 import { LeaveFeedback } from "popup/views/LeaveFeedback";
 import { AccountMigration } from "popup/views/AccountMigration";
-import { AddXlm } from "popup/views/AddXlm";
+import { AddFunds } from "popup/views/AddFunds";
 
 import "popup/metrics/views";
 import { DEV_SERVER } from "@shared/constants/services";
@@ -574,10 +574,10 @@ export const Router = () => (
           }
         ></Route>
         <Route
-          path={ROUTES.addXlm}
+          path={ROUTES.addFunds}
           element={
             <PublicKeyRoute>
-              <AddXlm />
+              <AddFunds />
             </PublicKeyRoute>
           }
         />

extension/src/popup/components/account/AccountOptionsDropdown/index.tsx

@@ -3,7 +3,7 @@ import { createPortal } from "react-dom";
 import { useDispatch, useSelector } from "react-redux";
 import { useNavigate } from "react-router-dom";
 
-import { NavButton, Icon, Loader } from "@stellar/design-system";
+import { NavButton, Icon } from "@stellar/design-system";
 import { useTranslation } from "react-i18next";
 
 import { navigateTo, openTab } from "popup/helpers/navigate";
@@ -14,13 +14,7 @@ import {
   saveAssetSelectType,
   AssetSelectType,
 } from "popup/ducks/transactionSubmission";
-import { publicKeySelector } from "popup/ducks/accountServices";
-import { useGetOnrampToken } from "helpers/hooks/useGetOnrampToken";
 import { settingsNetworkDetailsSelector } from "popup/ducks/settings";
-import {
-  WarningMessage,
-  WarningMessageVariant,
-} from "popup/components/WarningMessages";
 
 import { LoadingBackground } from "popup/basics/LoadingBackground";
 import { AppDispatch } from "popup/App";
@@ -36,20 +30,6 @@ const DropdownModal = ({ isFunded }: DropdownModalProps) => {
   const dispatch = useDispatch<AppDispatch>();
   const navigate = useNavigate();
   const networkDetails = useSelector(settingsNetworkDetailsSelector);
-  const publicKey = useSelector(publicKeySelector);
-
-  const {
-    isLoading: isTokenRequestLoading,
-    fetchData,
-    tokenError,
-    clearTokenError,
-  } = useGetOnrampToken({
-    publicKey,
-  });
-
-  const handleBuyClick = async () => {
-    await fetchData();
-  };
 
   return (
     <div className="AccountOptionsDropdown__modal">
@@ -68,13 +48,13 @@ const DropdownModal = ({ isFunded }: DropdownModalProps) => {
       {isMainnet(networkDetails) && (
         <div
           className="AccountOptionsDropdown__modal__item"
-          onClick={handleBuyClick}
+          onClick={() => navigateTo(ROUTES.addFunds, navigate)}
         >
           <div className="AccountOptionsDropdown__modal__item__title">
-            {t("Buy with Coinbase")}
+            {t("Add funds")}
           </div>
           <div className="AccountOptionsDropdown__modal__item__icon">
-            {isTokenRequestLoading ? <Loader /> : <Icon.PlusCircle />}
+            <Icon.PlusCircle />
           </div>
         </div>
       )}
@@ -118,19 +98,6 @@ const DropdownModal = ({ isFunded }: DropdownModalProps) => {
           <Icon.Expand04 />
         </div>
       </div>
-      {tokenError
-        ? createPortal(
-            <WarningMessage
-              header={t("Error fetching Coinbase token. Please try again.")}
-              isActive={!!tokenError}
-              variant={WarningMessageVariant.warning}
-              handleCloseClick={clearTokenError}
-            >
-              <div>{tokenError}</div>
-            </WarningMessage>,
-            document.querySelector("#modal-root")!,
-          )
-        : null}
     </div>
   );
 };

extension/src/popup/components/account/NotFundedMessage/index.tsx

@@ -57,7 +57,7 @@ export const NotFundedMessage = ({
         isFullWidth
         onClick={() =>
           isMainnet(networkDetails)
-            ? navigateTo(ROUTES.addXlm, navigate)
+            ? navigateTo(ROUTES.addFunds, navigate, "?isAddXlm=true")
             : navigateTo(ROUTES.viewPublicKey, navigate)
         }
       >

extension/src/popup/constants/metricsNames.ts

@@ -81,7 +81,7 @@ export const METRIC_NAMES = {
   viewAddNetwork: "loaded screen: add network",
   viewEditNetwork: "loaded screen: edit network",
   viewNetworkSettings: "loaded screen: network settings",
-  viewAddXlm: "loaded screen: add xlm",
+  viewAddFunds: "loaded screen: add fund",
 
   manageAssetAddAsset: "manage asset: add asset",
   manageAssetAddToken: "manage asset: add token",

extension/src/popup/constants/routes.ts

@@ -50,7 +50,7 @@ export enum ROUTES {
   manageAssetsLists = "/settings/manage-assets-lists",
   manageAssetsListsModifyAssetList = "/settings/manage-assets-lists/modify-asset-list",
   advancedSettings = "/settings/advanced-settings",
-  addXlm = "/add-xlm",
+  addFunds = "/add-funds",
 
   manageAssets = "/manage-assets",
   searchAsset = "/manage-assets/search-asset",

extension/src/popup/metrics/views.ts

@@ -78,7 +78,7 @@ const routeToEventName = {
   [ROUTES.accountMigrationMigrationComplete]:
     METRIC_NAMES.viewAccountMigrationMigrationComplete,
   [ROUTES.advancedSettings]: METRIC_NAMES.viewAdvancedSettings,
-  [ROUTES.addXlm]: METRIC_NAMES.viewAddXlm,
+  [ROUTES.addFunds]: METRIC_NAMES.viewAddFunds,
 };
 
 registerHandler<AppState>(navigate, (_, a) => {

extension/src/popup/views/AddFunds/index.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { useSelector } from "react-redux";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useLocation } from "react-router-dom";
+import { Icon, Text } from "@stellar/design-system";
+
+import { SubviewHeader } from "popup/components/SubviewHeader";
+import { Loading } from "popup/components/Loading";
+import { View } from "popup/basics/layout/View";
+import { publicKeySelector } from "popup/ducks/accountServices";
+import { ROUTES } from "popup/constants/routes";
+import { navigateTo } from "popup/helpers/navigate";
+import { useGetOnrampToken } from "helpers/hooks/useGetOnrampToken";
+
+import CoinbaseLogo from "popup/assets/coinbase-logo.svg";
+
+import "./styles.scss";
+
+export const AddFunds = () => {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { search } = useLocation();
+  const publicKey = useSelector(publicKeySelector);
+
+  const params = new URLSearchParams(search);
+  const isAddXlm = params.get("isAddXlm") === "true";
+
+  const {
+    isLoading: isTokenRequestLoading,
+    fetchData,
+    tokenError,
+  } = useGetOnrampToken({ publicKey, ...(isAddXlm ? { asset: "XLM" } : {}) });
+
+  const handleOnrampClick = async () => {
+    await fetchData();
+  };
+
+  const handleTransferClick = () => {
+    navigateTo(ROUTES.viewPublicKey, navigate);
+  };
+
+  if (isTokenRequestLoading) {
+    return <Loading />;
+  }
+
+  return (
+    <>
+      <SubviewHeader
+        title={isAddXlm ? t("Add XLM") : t("Add funds")}
+        subtitle={<div>{t("Choose your method")}</div>}
+      />
+      <View.Content>
+        <div className="AddFunds">
+          <div className="AddFunds__content">
+            <div className="AddFunds__button" onClick={handleOnrampClick}>
+              <img
+                className="AddFunds__onrampLogo"
+                src={CoinbaseLogo}
+                alt="Coinbase Logo"
+              />
+              <div>
+                <Text
+                  as="div"
+                  size="sm"
+                  weight="semi-bold"
+                  addlClassName="AddFunds__button__title"
+                >
+                  {isAddXlm
+                    ? t("Buy XLM with Coinbase")
+                    : t("Buy with Coinbase")}
+                </Text>
+                <Text
+                  as="div"
+                  size="sm"
+                  weight="medium"
+                  addlClassName="AddFunds__button__description"
+                >
+                  {t(
+                    "Transfer from Coinbase, buy with debit and credit cards or bank transfer *",
+                  )}
+                </Text>
+              </div>
+            </div>
+            <div className="AddFunds__button" onClick={handleTransferClick}>
+              <div className="AddFunds__button__qr">
+                <Icon.QrCode01 />
+              </div>
+              <div>
+                <Text
+                  as="div"
+                  size="sm"
+                  weight="semi-bold"
+                  addlClassName="AddFunds__button__title"
+                >
+                  {t("Transfer from another account")}
+                </Text>
+                <Text
+                  as="div"
+                  size="sm"
+                  weight="medium"
+                  addlClassName="AddFunds__button__description"
+                >
+                  {isAddXlm
+                    ? t("Send XLM to this account address")
+                    : t("Send funds to this account address")}
+                </Text>
+              </div>
+            </div>
+            {tokenError && <div className="AddFunds__error">{tokenError}</div>}
+          </div>
+          <div className="AddFunds__footer">
+            <Text as="div" size="xs" weight="medium">
+              {t("* payment methods may vary based on your location")}
+            </Text>
+          </div>
+        </div>
+      </View.Content>
+    </>
+  );
+};

extension/src/popup/views/AddFunds/styles.scss

@@ -0,0 +1,67 @@
+@use "../../styles/utils.scss" as *;
+
+.AddFunds {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: pxToRem(12);
+  }
+
+  &__onrampLogo {
+    width: pxToRem(32);
+    height: pxToRem(32);
+  }
+
+  &__error {
+    color: var(--sds-clr-red-09);
+    font-size: pxToRem(12);
+    line-height: pxToRem(16);
+    margin-top: pxToRem(8);
+    text-align: center;
+  }
+
+  &__button {
+    background: var(--sds-clr-gray-03);
+    border-radius: pxToRem(6);
+    cursor: pointer;
+    display: flex;
+    font-size: pxToRem(14);
+    font-weight: var(--sds-fw-semi-bold);
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: pxToRem(12);
+    padding: pxToRem(12) pxToRem(16);
+
+    &__description {
+      color: var(--sds-clr-gray-11);
+    }
+
+    &__qr {
+      align-items: flex;
+      background: var(--sds-clr-mint-03);
+      border-radius: pxToRem(100);
+      display: flex;
+      height: pxToRem(32);
+      justify-content: center;
+      padding: pxToRem(6);
+      width: pxToRem(32);
+
+      svg {
+        height: pxToRem(20);
+        stroke: var(--sds-clr-mint-09);
+        width: pxToRem(20);
+      }
+    }
+  }
+
+  &__footer {
+    color: var(--sds-clr-gray-10);
+    text-align: center;
+  }
+}