Feat/ramp modal (#1780)

* feat: add ramp routes

* feat: initial BuyForm setup

* feat: added NumberInputWithDropdown component

* feat: getRampCurrencies, add ramp base path to env

* feat: consume useGetRampCurrencies, update form

* feat: added useGetRampAssetsByCurrency, updated buy form

* feat: debounced amount inputs to fetch up to date quotes

* feat: update token/fiat based on form interaction

* feat: select account UI

* chore: added RAMP base path, path and api to env vars

* feat: create url params and navigate on submit

* feat: format token plank before external navigation

* feat: move ramp routes to Portfolio routes and layout

* feat: added missing UI for NumberInputWithDropDown

* feat: added RampAccountOption

* feat: off ramp form

* feat: offramp assets hook

* feat: added ramp to popup routes

* feat: added ramp ui to popup

* fix: dropdown overflow on popup view

* fix: selected token should match chain

* feat: fetch ramp quote based on fiat or token amount

* feat: bi-directional onramp quote

* feat: bi-directional offramp quote

* fix: handle unsupported tokens when switching between buy/sell forms

* feat: searchable Dropdown

* feat: step decimals, throw error if bad quote, cleanup

* fix: searchInput import

* feat: select button placeholder

* feat: added Ramp url to mobile nav

* feat: added fiat currency info, logo and name

* chore: added SearchInput to components package

* chore: moved SearchInput from components to talisman-ui package, updated imports

* feat: add hostAppName and default flow to ramp url

* feat: cross reference supported tokens with chain data

* feat: convert address by chain, display asset chain name

* feat: support evm tokens, activate network/token to store, perf improve in useSupportedTokens

* feat: added evm token ids

* fix: minor form input UI fixes

* feat: added toggle buy switch to expanded view

* chore: display DashboardAccountsSidebar on Ramp routes

* chore: hide navigation chevron on expanded view

* chore: remove old buy components

* feat: updated fetch remote config, mocked values, log token/chain not found

* fix: circular dependency import

* fix: labels, styles & placeholders

* fix: network specific account icon

* feat: min fiat amount error message

* chore: center cols and buy btn

* fix: "popup view" on exapnded clipping

* chore: update ramp routes

* chore: moved ramp env vars to remote config

* feat: sort tokens/accounts depending on each others chain type,
fix: form invalid when selling

* feat: add account prompt

* fix: added shouldRevalidate to onClea

* Revert "chore: remove old buy components"

This reverts commit 792d95b.

* feat: inital BuySellModalSetup

* chore: removed old BuyTokens components

* chore: moved useBuyTokensModal to hooks folder

* feat: buy tokens wizard, context, layout, option switch and init form

* chore: moved hooks to BuyTokens hook folder

* feat: added ramp hooks to useBuyTokensWizard

* feat: buyTokensFiatAmountInput and extra components

* feat: buyTokensForm fiat currency inputs

* feat: buyTokensToken picker, fix invalid DOM nesting errors

* feat: token picker, layout updates

* refactor: made AccountRow a standalone component

* feat: buyTokens connect account and select account input

* feat: buy tokens account picker route

* chore: remove old PortfolioRamp route from popup

* fix: form type defaulting to buy when routes are rendered

* feat: update depent fields on quote

* fix: stale ramp asset and currency when toggling form type

* feat: added handle submit

* chore: improved UX when no token is available for swap

* fix: close modal on navigate to connect accont

* chore: remove old Ramp components

* fix: fund your account navigates to new Buy/Sell on popup mode

* fix: form getting stuck on invalid state

* fix: min purchase amount stale on currency change

* chore: moved route components to routes folder

* feat: buyTokensButton, stubbed SelectFiatButton

* refactor: buyTokensButton

* feat: fiat picker

* revert: dropdown changes

* fix: conver fiat currency search to lower case

* revert: layout changes not relevant to new modal UI

* chore: sort fiat currencies alphabetically

* chore: yeet close all models btn, all hail return chevron

* chore: increased button padding, add gap and remove justify between for placeholder

* fix: properly handle bad reponponses

* chore: removed mocked remote-config

* chore: handle geoblock

* chore: remove old modal subscriptions

* fix: set useGetRampQuote retry to false

* feat: not available drawer

* chore: remove old modal methods from packages

* Revert "chore: added SearchInput to components package"

This reverts commit f6107f8.

* Revert "chore: moved SearchInput from components to talisman-ui package, updated imports"

This reverts commit 0380561.

* fix: updated SearchInput imports

* chore: removed export from inner hook, added missing open modal method

apps/extension/src/ui/api/api.ts

@@ -36,8 +36,6 @@ export const api: MessageTypes = {
   allowPhishingSite: (url) => messageService.sendMessage("pri(app.phishing.addException)", { url }),
 
   // app messages -------------------------------------------------------
-  modalOpen: (request) => messageService.sendMessage("pri(app.modalOpen.request)", request),
-  modalOpenSubscribe: (cb) => messageService.subscribe("pri(app.modalOpen.subscribe)", null, cb),
   analyticsCapture: (request) => messageService.sendMessage("pri(app.analyticsCapture)", request),
   sendFundsOpen: (request = {}) => messageService.sendMessage("pri(app.sendFunds.open)", request),
   resetWallet: () => messageService.sendMessage("pri(app.resetWallet)"),

apps/extension/src/ui/api/types.ts

@@ -41,7 +41,6 @@ import {
   EvmAddress,
   LoggedinType,
   MetadataUpdateStatus,
-  ModalOpenRequest,
   NftData,
   ProviderType,
   RequestAccountCreateLedgerSubstrate,
@@ -119,8 +118,6 @@ export default interface MessageTypes {
   cancelEncryptRequest: (id: DecryptRequestId | EncryptRequestId) => Promise<boolean>
 
   // app message types -------------------------------------------------------
-  modalOpen: (modal: ModalOpenRequest) => Promise<boolean>
-  modalOpenSubscribe: (cb: (val: ModalOpenRequest) => void) => UnsubscribeFn
   analyticsCapture: (request: AnalyticsCaptureRequest) => Promise<boolean>
   sendFundsOpen: (request?: SendFundsOpenRequest) => Promise<boolean>
   resetWallet: () => Promise<boolean>

apps/extension/src/ui/apps/dashboard/index.tsx

@@ -9,7 +9,6 @@ import { SuspenseTracker } from "@talisman/components/SuspenseTracker"
 import { api } from "@ui/api"
 import { DatabaseErrorAlert } from "@ui/domains/Settings/DatabaseErrorAlert"
 import { useLoginCheck } from "@ui/hooks/useLoginCheck"
-import { useModalSubscription } from "@ui/hooks/useModalSubscription"
 
 import { AccountAddMenu } from "./routes/AccountAdd"
 import { AccountAddDcentDashboardWizard } from "./routes/AccountAdd/AccountAddDcentWizard"
@@ -46,8 +45,6 @@ import { TokensPage } from "./routes/Tokens/TokensPage"
 import { TxHistory } from "./routes/TxHistory"
 
 const DashboardInner = () => {
-  useModalSubscription()
-
   return (
     <Suspense fallback={<SuspenseTracker name="Dashboard" />}>
       <Routes>

apps/extension/src/ui/apps/dashboard/routes/Portfolio/index.tsx

@@ -3,7 +3,7 @@ import { Route, Routes, useSearchParams } from "react-router-dom"
 
 import { NavigateWithQuery } from "@talisman/components/NavigateWithQuery"
 import { DashboardLayout } from "@ui/apps/dashboard/layout"
-import { useBuyTokensModal } from "@ui/domains/Asset/Buy/useBuyTokensModal"
+import { useBuyTokensModal } from "@ui/domains/Asset/Buy/hooks/useBuyTokensModal"
 import { DashboardPortfolioHeader } from "@ui/domains/Portfolio/DashboardPortfolioHeader"
 import { PortfolioContainer } from "@ui/domains/Portfolio/PortfolioContainer"
 import { PortfolioToolbarNfts } from "@ui/domains/Portfolio/PortfolioToolbarNfts"

apps/extension/src/ui/apps/popup/components/TotalFiatBalance.tsx

@@ -15,6 +15,7 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "talisman-ui"
 
 import { api } from "@ui/api"
 import { AnalyticsEventName, AnalyticsPage, sendAnalyticsEvent } from "@ui/api/analytics"
+import { useBuyTokensModal } from "@ui/domains/Asset/Buy/hooks/useBuyTokensModal"
 import { currencyConfig } from "@ui/domains/Asset/currencyConfig"
 import { Fiat } from "@ui/domains/Asset/Fiat"
 import { useCopyAddressModal } from "@ui/domains/CopyAddress"
@@ -162,6 +163,7 @@ const ANALYTICS_PAGE: AnalyticsPage = {
 const TopActions = ({ disabled }: { disabled?: boolean }) => {
   const { t } = useTranslation()
   const { open: openCopyAddressModal } = useCopyAddressModal()
+  const { open: openBuyTokensModal } = useBuyTokensModal()
   const ownedAccounts = useAccounts("owned")
   const canBuy = useFeatureFlag("BUY_CRYPTO")
   const showQuestLink = useFeatureFlag("QUEST_LINK")
@@ -211,15 +213,23 @@ const TopActions = ({ disabled }: { disabled?: boolean }) => {
           ? {
               analyticsName: "Goto",
               analyticsAction: "Buy Crypto button",
-              label: t("Buy"),
+              label: t("Buy/Sell"),
               icon: CreditCardIcon,
-              onClick: () => api.modalOpen({ modalType: "buy" }).then(() => window.close()),
+              onClick: () => openBuyTokensModal(),
               disabled: disableActions,
               disabledReason,
             }
           : null,
       ].filter(Boolean) as Array<ActionProps>,
-    [canBuy, disableActions, disabledReason, handleSwapClick, openCopyAddressModal, t],
+    [
+      canBuy,
+      disableActions,
+      disabledReason,
+      handleSwapClick,
+      openBuyTokensModal,
+      openCopyAddressModal,
+      t,
+    ],
   )
 
   return (

apps/extension/src/ui/apps/popup/index.tsx

@@ -17,6 +17,7 @@ import { AccountExportModal } from "@ui/domains/Account/AccountExportModal"
 import { AccountExportPrivateKeyModal } from "@ui/domains/Account/AccountExportPrivateKeyModal"
 import { AccountRemoveModal } from "@ui/domains/Account/AccountRemoveModal"
 import { AccountRenameModal } from "@ui/domains/Account/AccountRenameModal"
+import { BuyTokensModal } from "@ui/domains/Asset/Buy/BuyTokensModal"
 import { CopyAddressModal } from "@ui/domains/CopyAddress"
 import { DatabaseErrorAlert } from "@ui/domains/Settings/DatabaseErrorAlert"
 import { BondModal } from "@ui/domains/Staking/Bond/BondModal"
@@ -88,6 +89,7 @@ const Popup = () => {
         <AccountExportModal />
         <AccountExportPrivateKeyModal />
         <CopyAddressModal />
+        <BuyTokensModal />
         <ExplorerNetworkPickerModal />
         <BackupWarningDrawer />
         <LedgerPolkadotUpgradeAlertDrawer />

apps/extension/src/ui/apps/popup/pages/Portfolio/index.tsx

@@ -4,6 +4,7 @@ import { Route, Routes, useLocation } from "react-router-dom"
 
 import { ScrollContainer } from "@talisman/components/ScrollContainer"
 import { SuspenseTracker } from "@talisman/components/SuspenseTracker"
+import { BuyTokensModal } from "@ui/domains/Asset/Buy/BuyTokensModal"
 import { PortfolioContainer } from "@ui/domains/Portfolio/PortfolioContainer"
 import BraveWarningPopupBanner from "@ui/domains/Settings/BraveWarning/BraveWarningPopupBanner"
 import MigratePasswordAlert from "@ui/domains/Settings/MigratePasswordAlert"
@@ -22,6 +23,7 @@ const PortfolioRoutes = () => (
       <Route path="nfts/:collectionId" element={<PortfolioNftCollection />} />
       <Route path="nfts" element={<PortfolioAssets />} />
       <Route path="tokens/:symbol" element={<PortfolioAsset />} />
+      <Route path="ramp/*" element={<BuyTokensModal />} />
       <Route path="*" element={<PortfolioAccounts />} />
     </Routes>
     <Suspense fallback={<SuspenseTracker name="HasAccountsPortfolioContent" />}>