@lifi/widget 3.25.0-beta.4 → 3.25.0

package/src/i18n/en.json

@@ -129,6 +129,7 @@
       "highValueLoss": "The value of the received tokens is significantly lower than the exchanged tokens and transaction cost.",
       "insufficientFunds": "You don't have enough funds to complete the transaction.",
       "insufficientGas": "You don't have enough gas to complete the transaction. You need to add at least:",
+      "minFromAmountUSD": "Minimum amount is {{amount, currencyExt(currency: USD)}}. Please enter a higher amount.",
       "rateChanged": "The exchange rate has changed. By continuing the transaction, you'll accept the new rate.",
       "resetSettings": "This will reset your route priority, slippage, gas price, enabled bridges and exchanges.",
       "slippageOutsideRecommendedLimits": "High slippage tolerance may result in unfavorable trade caused by front-running.",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "Current price",
-    "contractAddress": "Contract address"
+    "contractAddress": "Contract address",
+    "marketCap": "Market cap",
+    "volume24h": "Volume 24h"
   }
 }

package/src/i18n/es.json

@@ -129,6 +129,7 @@
       "highValueLoss": "El valor de los tokens recibidos es significativamente menor que los tokens intercambiados y el costo de la transacción.",
       "insufficientFunds": "No tiene fondos suficientes para ejecutar el intercambio.",
       "insufficientGas": "Debes agregar al menos:",
+      "minFromAmountUSD": "",
       "rateChanged": "La tasa de cambio ha cambiado. Continuar con el swap implica que estas de acuerdo con la nueva tasa.",
       "resetSettings": "Esto restablecerá su prioridad de ruta, deslizamiento, precio de gas, puentes e intercambios habilitados.",
       "slippageOutsideRecommendedLimits": "La tolerancia de los deslizamientos altos puede resultar en un comercio desfavorable causado por front-running.",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/fr.json

@@ -129,6 +129,7 @@
       "highValueLoss": "La valeur des jetons reçus est nettement inférieure à celle des jetons échangés et au coût de la transaction.",
       "insufficientFunds": "Vous n'avez pas assez de fonds pour finaliser l'échange.",
       "insufficientGas": "Vous n'avez pas assez de gaz pour finaliser l'échange. Vous devez avoir au moins:",
+      "minFromAmountUSD": "",
       "rateChanged": "Le taux de change a changé. En continuant l'échange, vous devrez accepter le nouveau taux.",
       "resetSettings": "Cela réinitialisera la priorité de votre itinéraire, l'effet de glissement, le prix du gaz, les ponts et les plateformes d'échanges activés.",
       "slippageOutsideRecommendedLimits": "Une tolérance élevée au glissement peut entraîner un échange défavorable causé par le front-running.",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/hi.json

@@ -129,6 +129,7 @@
       "highValueLoss": "",
       "insufficientFunds": "",
       "insufficientGas": "",
+      "minFromAmountUSD": "",
       "rateChanged": "",
       "resetSettings": "",
       "slippageOutsideRecommendedLimits": "",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/id.json

@@ -129,6 +129,7 @@
       "highValueLoss": "Nilai token yang diterima jauh lebih rendah daripada token yang ditukar dan biaya transaksi.",
       "insufficientFunds": "Anda tidak memiliki cukup dana untuk menyelesaikan penukaran.",
       "insufficientGas": "Anda tidak memiliki cukup gas untuk menyelesaikan penukaran. Anda perlu menambahkan setidaknya:",
+      "minFromAmountUSD": "",
       "rateChanged": "Nilai tukar telah berubah. Dengan melanjutkan penukaran, Anda akan menerima tarif baru.",
       "resetSettings": "Ini akan mengatur ulang prioritas rute Anda, slippage, harga gas, jembatan yang diaktifkan, dan pertukaran.",
       "slippageOutsideRecommendedLimits": "Toleransi selip yang tinggi dapat mengakibatkan perdagangan yang tidak menguntungkan yang disebabkan oleh front-running.",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/it.json

@@ -129,6 +129,7 @@
       "highValueLoss": "Il valore dei token ricevuti è significativamente inferiore ai token scambiati più il costo della transazione.",
       "insufficientFunds": "Non hai abbastanza fondi per completare lo scambio.",
       "insufficientGas": "Non hai abbastanza gas per completare lo scambio. Devi aggiungere almeno:",
+      "minFromAmountUSD": "",
       "rateChanged": "Il tasso di scambio è cambiato. Se procedi, confermi di accettare il nuovo tasso.",
       "resetSettings": "Questo porterà al ripristino della priorità di route, slittamento di prezzo, prezzo del gas, bridge abilitati ed exchanges.",
       "slippageOutsideRecommendedLimits": "",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/ja.json

@@ -129,6 +129,7 @@
       "highValueLoss": "受け取るトークンの価値は、交換されたトークンとトランザクションコストよりも大幅に低くなります。",
       "insufficientFunds": "トランザクションを完了するのに十分な資金がありません。",
       "insufficientGas": "トランザクションを完了するのに十分なガスがありません。少なくとも以下を追加する必要があります：",
+      "minFromAmountUSD": "",
       "rateChanged": "交換レートが変更されました。取引を続行すると、新しい為替レートを受け入れることになります。",
       "resetSettings": "これにより、ルートの優先順位、スリッページ、ガス価格、使用可能なブリッジ、取引所がリセットされます。",
       "slippageOutsideRecommendedLimits": "スリッページ許容度が高すぎると、フロントランニングによる不利なトレードをひき起こす可能性があります。",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/ko.json

@@ -129,6 +129,7 @@
       "highValueLoss": "받은 토큰의 가치가 스왑된 토큰 및 트랜잭션 비용보다 상당히 낮습니다.",
       "insufficientFunds": "스왑을 진행할 자금이 부족합니다.",
       "insufficientGas": "스왑을 진행할 가스가 부족합니다. 최소 다음과 같은 가스가 필요합니다:",
+      "minFromAmountUSD": "",
       "rateChanged": "거래 비율이 변경되었습니다. 스왑을 계속하면 새로운 비율이 적용됩니다.",
       "resetSettings": "우선 경로, 슬리피지, 가스 비용, 활성화된 브릿지 및 거래소가 재설정됩니다.",
       "slippageOutsideRecommendedLimits": "",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/pl.json

@@ -129,6 +129,7 @@
       "highValueLoss": "",
       "insufficientFunds": "",
       "insufficientGas": "",
+      "minFromAmountUSD": "",
       "rateChanged": "",
       "resetSettings": "",
       "slippageOutsideRecommendedLimits": "",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/pt.json

@@ -129,6 +129,7 @@
       "highValueLoss": "A quantidade de tokens a serem recebidos é significativamente menor do que os tokens convertidos e os custos da transação.",
       "insufficientFunds": "Você não possui fundos suficientes para completar a conversão.",
       "insufficientGas": "Você não tem gás suficiente para completar a conversão. É necessário adicionar pelo menos:",
+      "minFromAmountUSD": "Valor mínimo é {{amount, currencyExt(currency: USD)}}. Por favor, insira um valor maior.",
       "rateChanged": "A taxa de câmbio mudou. Ao continuar a conversão, você aceitará a nova taxa.",
       "resetSettings": "Isto redefinirá sua prioridade de rota, tolerância a derrapagem, preço de gás, pontes e trocas ativadas.",
       "slippageOutsideRecommendedLimits": "Alta tolerância na derrapagem pode resultar em negociação desfavorável ​​causada pelo front-running.",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "Preço atual",
-    "contractAddress": "Endereço do Contrato"
+    "contractAddress": "Endereço do Contrato",
+    "marketCap": "Capitalização de mercado",
+    "volume24h": "Volume 24h"
   }
 }

package/src/i18n/th.json

@@ -129,6 +129,7 @@
       "highValueLoss": "มูลค่าของโทเค็นที่ได้รับนั้นต่ำกว่าโทเค็นที่แลกเปลี่ยนและต้นทุนการทำธุรกรรมอย่างมาก.",
       "insufficientFunds": "คุณมีเงินไม่เพียงพอที่จะดำเนินการแลกเปลี่ยน.",
       "insufficientGas": "คุณมีแก๊สไม่เพียงพอที่จะแลกเปลี่ยนให้เสร็จสมบูรณ์ คุณต้องเพิ่มอย่างน้อย:",
+      "minFromAmountUSD": "",
       "rateChanged": "อัตราแลกเปลี่ยนมีการเปลี่ยนแปลง คุณจะยอมรับอัตราใหม่.",
       "resetSettings": "การดำเนินการนี้จะรีเซ็ตลำดับความสำคัญของเส้นทาง การคลาดเลื่อน ค่าแก็ส บริดจ์ที่เปิดใช้งานและการแลกเปลี่ยน",
       "slippageOutsideRecommendedLimits": "การยอมรับความผิดปกติในการสลิปเพจสูงอาจส่งผลให้เกิดการซื้อขายที่ไม่คุ้มค่า ซึ่งเกิดจากการดำเนินการขายก่อน",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/tr.json

@@ -129,6 +129,7 @@
       "highValueLoss": "Elde edilecek varlıkların değeri, takas edilen varlıklardan ve işlem maliyetinden önemli ölçüde düşüktür.",
       "insufficientFunds": "Takas işlemini gerçekleştirmek için yeterli bakiyeniz bulunmamaktadır.",
       "insufficientGas": "En azından şunları eklemelisiniz:",
+      "minFromAmountUSD": "",
       "rateChanged": "Takas oranı değişti. İşleme devam ederek yeni oranı kabul etmiş olursunuz.",
       "resetSettings": "Bu, rota önceliğinizi, slipajı, gaz fiyatını, etkin köprüleri ve takasları sıfırlayacaktır.",
       "slippageOutsideRecommendedLimits": "Yüksek slipaj, ani fiyat hareketleri nedeniyle zarara yol açabilir.",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/uk.json

@@ -129,6 +129,7 @@
       "highValueLoss": "Вартість отриманих токенів значно нижча, ніж обмінені токени та вартість транзакції.",
       "insufficientFunds": "У вас недостатньо коштів для здійснення свопу.",
       "insufficientGas": "Для завершення свопа у вас недостатньо газу. Вам необхідно додати хоча б:",
+      "minFromAmountUSD": "",
       "rateChanged": "Курс обміну змінився. Продовжуючи своп, ви приймете новий курс.",
       "resetSettings": "Це скине пріоритет вашого маршруту, прослизання, ціну газу, увімкнені бриджі та обмінники.",
       "slippageOutsideRecommendedLimits": "Високий допуск до прослизання може призвести до несприятливої торгівлі через фронт-біг.",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "Поточна ціна",
-    "contractAddress": "Адреса контракту"
+    "contractAddress": "Адреса контракту",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/vi.json

@@ -129,6 +129,7 @@
       "highValueLoss": "Giá trị của token nhận được đang thấp hơn rất nhiều so với token được swap và chi phí giao dịch.",
       "insufficientFunds": "Bạn không có đủ tiền để thực hiện tác vụ này.",
       "insufficientGas": "Bạn không đủ gas để thực hiện swap. Bạn cần thêm ít nhất:",
+      "minFromAmountUSD": "",
       "rateChanged": "Tỉ lệ hoán đổi đã thay đổi. Để tiếp tục Swap, bạn sẽ chấp nhận tỉ lệ mới.",
       "resetSettings": "Thao tác này sẽ đặt lại mức độ ưu tiên của tuyến đường, độ trượt giá, giá gas, bridge và sàn giao dịch.",
       "slippageOutsideRecommendedLimits": "Khả năng trượt giá cao có thể dẫn đến giao dịch không thành công do front-running.",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/i18n/zh.json

@@ -129,6 +129,7 @@
       "highValueLoss": "收到的代币的价值明显低于要被兑换的代币和交易成本。",
       "insufficientFunds": "你没有足够的资金来完成这笔交易。",
       "insufficientGas": "您没有足够的燃气费来完成此次交易。您至少需要添加：",
+      "minFromAmountUSD": "",
       "rateChanged": "兑换比例已经改变，如果继续兑换，您将接受新的兑换比例。",
       "resetSettings": "这将重置您的路由优先级，滑点，燃气费，选中的跨链桥和链上交易所。",
       "slippageOutsideRecommendedLimits": "过高的滑点可能会导致交易被抢跑，造成财产损失",
@@ -345,6 +346,8 @@
   },
   "tokenMetric": {
     "currentPrice": "",
-    "contractAddress": ""
+    "contractAddress": "",
+    "marketCap": "",
+    "volume24h": ""
   }
 }

package/src/stores/chains/ChainOrderStore.tsx

@@ -27,6 +27,7 @@ export function ChainOrderStoreProvider({
   const storeRef = useRef<ChainOrderStore>(null)
   const { chains } = useChains()
   const { setFieldValue, getFieldValues } = useFieldActions()
+  const { variant, subvariantOptions } = useWidgetConfig()
   const { externalChainTypes, useExternalWalletProvidersOnly } =
     useExternalWalletProvider()
 
@@ -58,15 +59,30 @@ export function ChainOrderStoreProvider({
             : true
           return passesChainsConfigFilter && passesWalletConfigFilter
         })
+
         const chainOrder = storeRef.current?.getState().initializeChains(
           filteredChains.map((chain) => chain.id),
           key
         )
-        if (chainOrder) {
-          const [chainValue] = getFieldValues(`${key}Chain`)
-          if (!chainValue) {
-            setFieldValue(`${key}Chain`, chainOrder[0])
-          }
+
+        const [chainValue] = getFieldValues(`${key}Chain`)
+        if (chainValue) {
+          return
+        }
+
+        const firstAllowedPinnedChain = storeRef.current
+          ?.getState()
+          .pinnedChains?.find((chainId) =>
+            filteredChains.some((chain) => chain.id === chainId)
+          )
+        if (
+          variant === 'wide' &&
+          subvariantOptions?.wide?.enableChainSidebar &&
+          firstAllowedPinnedChain
+        ) {
+          setFieldValue(`${key}Chain`, firstAllowedPinnedChain)
+        } else if (chainOrder?.length) {
+          setFieldValue(`${key}Chain`, chainOrder[0])
         }
       })
     }
@@ -77,6 +93,8 @@ export function ChainOrderStoreProvider({
     getFieldValues,
     setFieldValue,
     useExternalWalletProvidersOnly,
+    variant,
+    subvariantOptions?.wide?.enableChainSidebar,
   ])
 
   return (

package/src/stores/chains/createChainOrderStore.ts

@@ -17,6 +17,7 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
       (set, get) => ({
         chainOrder: defaultChainState,
         availableChains: defaultChainState,
+        pinnedChains: [],
         initializeChains: (chainIds, type) => {
           set((state: ChainOrderState) => {
             const chainOrder = state.chainOrder[type].filter((chainId) =>
@@ -76,11 +77,28 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
             }
           })
         },
+        setPinnedChain: (chainId) => {
+          set((state: ChainOrderState) => {
+            const pinnedChains = [...state.pinnedChains]
+            if (pinnedChains.includes(chainId)) {
+              return {
+                pinnedChains: pinnedChains.filter((id) => id !== chainId),
+              }
+            }
+            pinnedChains.push(chainId)
+            return {
+              pinnedChains,
+            }
+          })
+        },
       }),
       {
         name: `${namePrefix || 'li.fi'}-widget-chains-order`,
         version: 2,
-        partialize: (state) => ({ chainOrder: state.chainOrder }),
+        partialize: (state) => ({
+          chainOrder: state.chainOrder,
+          pinnedChains: state.pinnedChains,
+        }),
       }
     ) as StateCreator<ChainOrderState, [], [], ChainOrderState>,
     Object.is

package/src/stores/chains/types.ts

@@ -9,9 +9,11 @@ export interface ChainOrderProps {
     from: number[]
     to: number[]
   }
+  pinnedChains: number[]
 }
 
 export interface ChainOrderState extends ChainOrderProps {
   initializeChains(chainIds: number[], type: FormType): number[]
   setChain(chainId: number, type: FormType): void
+  setPinnedChain(chainId: number): void
 }

package/src/stores/header/useHeaderStore.tsx

@@ -1,5 +1,4 @@
 import { createContext, useContext, useRef } from 'react'
-import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import type { PersistStoreProviderProps } from '../types.js'
 import type { HeaderState, HeaderStore } from './types.js'
@@ -42,10 +41,7 @@ export function useHeaderStore<T>(
 // To prevent the remaining page content from appearing behind the header we need to
 // pass the headers height so that the position of the page content can be adjusted
 export function useHeaderHeight() {
-  const [headerHeight] = useHeaderStore(
-    (state) => [state.headerHeight],
-    shallow
-  )
+  const headerHeight = useHeaderStore((state) => state.headerHeight)
 
   return {
     headerHeight,
@@ -53,10 +49,7 @@ export function useHeaderHeight() {
 }
 
 export function useSetHeaderHeight() {
-  const [setHeaderHeight] = useHeaderStore(
-    (state) => [state.setHeaderHeight],
-    shallow
-  )
+  const setHeaderHeight = useHeaderStore((state) => state.setHeaderHeight)
 
   return {
     setHeaderHeight,

package/src/types/widget.ts

@@ -280,6 +280,7 @@ export interface WidgetConfig {
   toAddress?: ToAddress
   toAddresses?: ToAddress[]
   fromAmount?: number | string
+  minFromAmountUSD?: number
   toAmount?: number | string
   formUpdateKey?: string