feat: added useGetRampAssetsByCurrency, updated buy form

apps/extension/src/ui/domains/Ramp/RampBuyForm.tsx

@@ -6,30 +6,32 @@ import * as yup from "yup"
 
 import { useSelectedCurrency } from "@ui/state"
 
-import { RampCurrency } from "./hooks/types"
+import { useGetRampAssetsByCurrency } from "./hooks/useGetRampAssetsByCurrency"
 import { useGetRampCurrencies } from "./hooks/useGetRampCurrencies"
 import { NumberInputWithDropDown } from "./NumberInputWithDropDown"
+import { RampAsset, RampCurrency } from "./types"
+import { truncateToSignificantDigits } from "./utils"
 
 type FormData = {
   address: string
   fiatAmount: number
-  tokenId: string
   fiatCurrency: string
+  tokenId: string
+  chain: string
+  tokenAmount: number
 }
 
 const schema = yup.object({
   address: yup.string().required(" "),
   fiatAmount: yup.number().required(" ").min(0),
+  tokenAmount: yup.number().required(" ").min(0),
   tokenId: yup.string().required(" "),
   fiatCurrency: yup.string().required(" "),
+  chain: yup.string().required(" "),
 })
 
 export const RampBuyForm = () => {
   const currency = useSelectedCurrency()
-  const { data: rampCurrencies } = useGetRampCurrencies()
-
-  const onrampCurrencies = rampCurrencies?.filter((curr) => curr.onrampAvailable) ?? []
-
   const {
     register,
     handleSubmit,
@@ -40,35 +42,55 @@ export const RampBuyForm = () => {
     mode: "all",
     defaultValues: {
       fiatCurrency: currency.toUpperCase(),
+      chain: "DOT",
+      tokenId: "DOT",
     },
     resolver: yupResolver(schema),
   })
+  const [fiatCurrency, tokenId, chain] = watch(["fiatCurrency", "tokenId", "chain"])
+
+  const { data: rampCurrencies } = useGetRampCurrencies()
+  const { data: rampCurrencyWithAssets } = useGetRampAssetsByCurrency({
+    currencyCode: fiatCurrency,
+  })
+
+  const onrampCurrencies = rampCurrencies?.filter((curr) => curr.onrampAvailable) ?? []
+  const tokenRateByCurrency = rampCurrencyWithAssets?.assets.find(
+    (asset) => asset.symbol === tokenId && asset.chain === chain,
+  )?.price[fiatCurrency]
 
-  const [fiatCurrency] = watch(["fiatCurrency"])
   // const submit = (data: FormData) => console.log({ data })
   const submit = (data: FormData) => data
 
   const handleFiatCurrencyChange = (fiatCurrency: RampCurrency | null) => {
     setValue("fiatCurrency", fiatCurrency?.fiatCurrency ?? "")
   }
 
+  const handleTokenChange = (rampAsset: RampAsset | null) => {
+    setValue("tokenId", rampAsset?.symbol ?? "")
+    setValue("chain", rampAsset?.chain ?? "")
+  }
+
   const selectedFiatCurrency = onrampCurrencies.find((curr) => curr.fiatCurrency === fiatCurrency)
+  const selectedToken = rampCurrencyWithAssets?.assets.find((asset) => asset.symbol === tokenId)
 
   const renderFiatCurrencyItem: DropdownOptionRender<RampCurrency> = (item) => {
     return <div className="flex flex-col justify-center">{item.fiatCurrency}</div>
   }
+  const renderTokenItem: DropdownOptionRender<RampAsset> = (item) => {
+    return <div className="flex flex-col justify-center">{item.symbol}</div>
+  }
 
   const { t } = useTranslation()
   return (
     <div className="text-body-secondary h-[30rem] w-[32rem] xl:w-[64rem]">
       <form onSubmit={handleSubmit(submit)}>
-        <div className="border-grey-750 space-y-8 rounded-2xl border-[1px] p-6">
+        <div className="border-grey-750 space-y-6 rounded-2xl border-[1px] p-6">
           <div className="flex gap-4">
             <div className="font-bold text-white">{t("Step1")}</div>
             <div>{t("Select Asset")}</div>
           </div>
           <div className="text-xs">{t("You Pay")}</div>
-
           <NumberInputWithDropDown
             inputFieldProps={register("fiatAmount")}
             inputFieldLabel={fiatCurrency}
@@ -81,6 +103,22 @@ export const RampBuyForm = () => {
             renderItem={renderFiatCurrencyItem}
             onChange={handleFiatCurrencyChange}
           />
+          <div className="flex justify-between">
+            <div className="text-xs">{t("You're receiving (estimate)")}</div>
+            <div className="text-xs">{`1 ${tokenId} ≈ ${truncateToSignificantDigits(tokenRateByCurrency ?? 0)} ${fiatCurrency}`}</div>
+          </div>
+          <NumberInputWithDropDown
+            inputFieldProps={register("tokenAmount")}
+            inputFieldLabel={"$"}
+            inputType="string"
+            inputPlaceholder="0"
+            propertyKey="address"
+            placeholder={t("Select token")}
+            items={rampCurrencyWithAssets?.assets ?? []}
+            value={selectedToken}
+            renderItem={renderTokenItem}
+            onChange={handleTokenChange}
+          />
         </div>
         <Button type="submit" primary disabled={!isValid}>
           {t("Continue")}

apps/extension/src/ui/domains/Ramp/hooks/useGetRampAssetsByCurrency.ts

@@ -0,0 +1,26 @@
+import { keepPreviousData, useQuery } from "@tanstack/react-query"
+import { RAMP_BASE_PATH } from "extension-shared"
+
+import { RampCurrencyWithAssets } from "../types"
+
+// note: currencyCode must be upper case
+const fetchRampAssetsByCurrency = async (currencyCode: string): Promise<RampCurrencyWithAssets> => {
+  try {
+    return await (
+      await fetch(`${RAMP_BASE_PATH}/assets?currencyCode=${currencyCode.toUpperCase()}`, {
+        method: "GET",
+      })
+    ).json()
+  } catch (cause) {
+    throw new Error("Failed to fetch Ramp assets", { cause })
+  }
+}
+
+export const useGetRampAssetsByCurrency = ({ currencyCode }: { currencyCode: string }) => {
+  return useQuery({
+    queryKey: ["useGetRampAssets", currencyCode],
+    queryFn: () => fetchRampAssetsByCurrency(currencyCode),
+    staleTime: 1000 * 60,
+    placeholderData: keepPreviousData,
+  })
+}

apps/extension/src/ui/domains/Ramp/hooks/useGetRampCurrencies.ts

@@ -1,7 +1,7 @@
 import { useQuery } from "@tanstack/react-query"
 import { RAMP_BASE_PATH } from "extension-shared"
 
-import { RampCurrency } from "./types"
+import { RampCurrency } from "../types"
 
 const fetchRampCurrencies = async (): Promise<RampCurrency[]> => {
   try {
@@ -19,6 +19,6 @@ export const useGetRampCurrencies = () => {
   return useQuery({
     queryKey: ["useGetRampCurrencies"],
     queryFn: () => fetchRampCurrencies(),
-    staleTime: 1000 * 60,
+    staleTime: 1000 * 60 * 5,
   })
 }

apps/extension/src/ui/domains/Ramp/types.ts

@@ -0,0 +1,36 @@
+export type RampCurrency = {
+  fiatCurrency: string
+  name: string
+  onrampAvailable: boolean
+  offrampAvailable: boolean
+}
+
+type AssetPrice = Record<string, number>
+
+export type RampAsset = {
+  address: string
+  symbol: string
+  chain: string
+  name: string
+  decimals: number
+  type: string
+  enabled: boolean
+  logoUrl: string
+  hidden: boolean
+  networkFee: number
+  price: AssetPrice
+  currencyCode: string
+  minPurchaseAmount: number
+  maxPurchaseAmount: number
+  minPurchaseCryptoAmount: string
+}
+
+export type RampCurrencyWithAssets = {
+  currencyCode: string
+  minPurchaseAmount: number
+  maxPurchaseAmount: number
+  minFeeAmount: number
+  minFeePercent: number
+  maxFeePercent: number
+  assets: RampAsset[]
+}

apps/extension/src/ui/domains/Ramp/utils.ts

@@ -0,0 +1,12 @@
+export const truncateToSignificantDigits = (input: number): number => {
+  const str = input.toString()
+  if (!str.includes(".")) return input
+
+  const [integerPart, decimalPart] = str.split(".")
+
+  const firstNonZeroIndex = decimalPart.split("").findIndex((digit) => digit !== "0")
+
+  const truncatedDecimal = decimalPart.slice(0, firstNonZeroIndex + 2)
+
+  return parseFloat(`${integerPart}.${truncatedDecimal}`)
+}

packages/talisman-ui/src/components/Dropdown.tsx

@@ -65,7 +65,7 @@ export const Dropdown = <T extends Record<string, unknown>>({
               <Listbox.Options>
                 {items.map((item, i, arr) => (
                   <Listbox.Option
-                    key={item[propertyKey] as string | number}
+                    key={`${item[propertyKey]}-${i}` as string | number}
                     value={item}
                     className={classNames(
                       "bg-grey-800 hover:bg-grey-750 hover:text-grey-300 w-full max-w-full cursor-pointer overflow-hidden p-8",