@lifi/widget 3.18.4 → 3.18.5

package/src/hooks/timer/time.ts

@@ -0,0 +1,49 @@
+export type TimeFromMillisecondsType = {
+  totalMilliseconds: number
+  totalSeconds: number
+  milliseconds: number
+  seconds: number
+  minutes: number
+  hours: number
+  days: number
+}
+
+export type AMPMType = '' | 'pm' | 'am'
+
+export type FormattedTimeFromMillisecondsType = {
+  milliseconds: number
+  seconds: number
+  minutes: number
+  hours: number
+  ampm?: AMPMType
+}
+
+export function getTimeFromMilliseconds(
+  millisecs: number,
+  isCountDown = true
+): TimeFromMillisecondsType {
+  const totalSeconds = isCountDown
+    ? Math.ceil(millisecs / 1000)
+    : Math.floor(millisecs / 1000)
+  const days = Math.floor(totalSeconds / (60 * 60 * 24))
+  const hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60))
+  const minutes = Math.floor((totalSeconds % (60 * 60)) / 60)
+  const seconds = Math.floor(totalSeconds % 60)
+  const milliseconds = Math.floor(millisecs % 1000)
+
+  return {
+    totalMilliseconds: millisecs,
+    totalSeconds,
+    milliseconds,
+    seconds,
+    minutes,
+    hours,
+    days,
+  }
+}
+
+export function getMillisecondsFromExpiry(expiry: Date): number {
+  const now = new Date().getTime()
+  const milliSecondsDistance = expiry?.getTime() - now
+  return milliSecondsDistance > 0 ? milliSecondsDistance : 0
+}

package/src/hooks/timer/useInterval.ts

@@ -1,11 +1,11 @@
 import { useEffect, useRef } from 'react'
 
-export function useInterval(callback: () => void, delay: number) {
-  const callbacRef = useRef<() => void>(null)
+export function useInterval(callback: () => void, delay: number | null) {
+  const callbackRef = useRef(callback)
 
   // update callback function with current render callback that has access to latest props and state
   useEffect(() => {
-    callbacRef.current = callback
+    callbackRef.current = callback
   })
 
   useEffect(() => {
@@ -14,7 +14,7 @@ export function useInterval(callback: () => void, delay: number) {
     }
 
     const interval = setInterval(() => {
-      callbacRef.current?.()
+      callbackRef?.current?.()
     }, delay)
     return () => clearInterval(interval)
   }, [delay])

package/src/hooks/timer/useTimer.ts

@@ -1,41 +1,52 @@
-import { useCallback, useState } from 'react'
-import { useInterval } from './useInterval.js'
+import { useCallback, useEffect, useState } from 'react'
 import {
-  getDelayFromExpiryTimestamp,
-  getSecondsFromExpiry,
-  getTimeFromSeconds,
-  validateOnExpire,
-} from './utils.js'
+  type TimeFromMillisecondsType,
+  getMillisecondsFromExpiry,
+  getTimeFromMilliseconds,
+} from './time.js'
+import { useInterval } from './useInterval.js'
+import { validateExpiryTimestamp, validateOnExpire } from './validate.js'
 
-const DEFAULT_DELAY = 1000
+const SECOND_INTERVAL = 1000
 
-interface UseTimerProps {
+export type useTimerSettingsType = {
   expiryTimestamp: Date
-  onExpire: () => void
+  onExpire?: () => void
   autoStart?: boolean
+  interval?: number
+}
+
+export type useTimerResultType = TimeFromMillisecondsType & {
+  start: () => void
+  pause: () => void
+  resume: () => void
+  restart: (newExpiryTimestamp: Date, newAutoStart?: boolean) => void
+  isRunning: boolean
 }
 
-// This implementation was taken from the common js project - https://www.npmjs.com/package/react-timer-hook
-// modified to work in the Widget codebase with Typescript
+/**
+ * `useTimer` from https://github.com/amrlabib/react-timer-hook
+ */
 export function useTimer({
   expiryTimestamp: expiry,
-  onExpire,
+  onExpire = () => {},
   autoStart = true,
-}: UseTimerProps) {
+  interval: customInterval = SECOND_INTERVAL,
+}: useTimerSettingsType): useTimerResultType {
   const [expiryTimestamp, setExpiryTimestamp] = useState(expiry)
-  const [seconds, setSeconds] = useState(() =>
-    getSecondsFromExpiry(expiryTimestamp)
+  const [milliseconds, setMilliseconds] = useState(
+    getMillisecondsFromExpiry(expiryTimestamp)
   )
   const [isRunning, setIsRunning] = useState(autoStart)
   const [didStart, setDidStart] = useState(autoStart)
-  const [delay, setDelay] = useState(() =>
-    getDelayFromExpiryTimestamp(expiryTimestamp, DEFAULT_DELAY)
-  )
+  const [interval, setInterval] = useState<number | null>(customInterval)
 
   const handleExpire = useCallback(() => {
-    validateOnExpire(onExpire) && onExpire()
+    if (validateOnExpire(onExpire)) {
+      onExpire()
+    }
     setIsRunning(false)
-    setDelay(0)
+    setInterval(null)
   }, [onExpire])
 
   const pause = useCallback(() => {
@@ -44,24 +55,24 @@ export function useTimer({
 
   const restart = useCallback(
     (newExpiryTimestamp: Date, newAutoStart = true) => {
-      setDelay(getDelayFromExpiryTimestamp(newExpiryTimestamp, DEFAULT_DELAY))
+      setInterval(customInterval)
       setDidStart(newAutoStart)
       setIsRunning(newAutoStart)
       setExpiryTimestamp(newExpiryTimestamp)
-      setSeconds(getSecondsFromExpiry(newExpiryTimestamp))
+      setMilliseconds(getMillisecondsFromExpiry(newExpiryTimestamp))
     },
-    []
+    [customInterval]
   )
 
   const resume = useCallback(() => {
     const time = new Date()
-    time.setMilliseconds(time.getMilliseconds() + seconds * 1000)
+    time.setMilliseconds(time.getMilliseconds() + milliseconds)
     restart(time)
-  }, [seconds, restart])
+  }, [milliseconds, restart])
 
   const start = useCallback(() => {
     if (didStart) {
-      setSeconds(getSecondsFromExpiry(expiryTimestamp))
+      setMilliseconds(getMillisecondsFromExpiry(expiryTimestamp))
       setIsRunning(true)
     } else {
       resume()
@@ -70,20 +81,23 @@ export function useTimer({
 
   useInterval(
     () => {
-      if (delay !== DEFAULT_DELAY) {
-        setDelay(DEFAULT_DELAY)
-      }
-      const secondsValue = getSecondsFromExpiry(expiryTimestamp)
-      setSeconds(secondsValue)
-      if (secondsValue <= 0) {
+      const millisecondsValue = getMillisecondsFromExpiry(expiryTimestamp)
+      setMilliseconds(millisecondsValue)
+      if (millisecondsValue <= 0) {
         handleExpire()
+      } else if (interval && millisecondsValue < interval) {
+        setInterval(millisecondsValue)
       }
     },
-    isRunning ? delay : 0
+    isRunning ? interval : null
   )
 
+  useEffect(() => {
+    validateExpiryTimestamp(expiryTimestamp)
+  }, [expiryTimestamp])
+
   return {
-    ...getTimeFromSeconds(seconds),
+    ...getTimeFromMilliseconds(milliseconds),
     start,
     pause,
     resume,

package/src/hooks/timer/validate.ts

@@ -0,0 +1,15 @@
+export function validateExpiryTimestamp(expiryTimestamp: Date) {
+  const isValid = new Date(expiryTimestamp).getTime() > 0
+  if (!isValid) {
+    console.warn('useTimer Invalid expiryTimestamp settings', expiryTimestamp)
+  }
+  return isValid
+}
+
+export function validateOnExpire(onExpire: () => void) {
+  const isValid = onExpire && typeof onExpire === 'function'
+  if (onExpire && !isValid) {
+    console.warn('useTimer Invalid onExpire settings function', onExpire)
+  }
+  return isValid
+}

package/src/i18n/bn.json

@@ -6,7 +6,8 @@
   "format": {
     "currency": "",
     "number": "{{value, number(maximumFractionDigits: 9)}}",
-    "percent": ""
+    "percent": "",
+    "tokenAmount": ""
   },
   "button": {
     "auto": "স্বয়ংক্রিয়",
@@ -83,14 +84,13 @@
     "message": {
       "autoRefuel": "আপনার {{chainName}} গ্যাস কম। চালিয়ে যাওয়ার মাধ্যমে, আপনি সোওয়াপ সম্পূর্ণ করার জন্য পর্যাপ্ত গ্যাস পাবেন।",
       "emptyActiveTransactions": "",
-      "emptyTokenList": "",
-      "emptyChainList": "",
       "emptyBridgesList": "",
+      "emptyChainList": "",
       "emptyExchangesList": "",
+      "emptyTokenList": "",
       "emptyTransactionHistory": "",
-      "fundsToExchange": "",
-      "toAddressIsRequired": "",
-      "routeNotFound": ""
+      "routeNotFound": "",
+      "toAddressIsRequired": ""
     },
     "title": {
       "autoRefuel": "",
@@ -117,14 +117,18 @@
   },
   "warning": {
     "message": {
+      "accountNotDeployedMessage": "",
+      "lowAddressActivity": "",
       "deleteActiveTransactions": "",
       "deleteTransactionHistory": "",
+      "fundsLossPrevention": "",
       "highValueLoss": "প্রাপ্ত টোকেনগুলির মান সোওয়াপ করা টোকেন এবং লেনদেনের খরচের তুলনায় উল্লেখযোগ্যভাবে কম।",
       "insufficientFunds": "সোওয়াপ সম্পূর্ণ করার জন্য আপনার কাছে পর্যাপ্ত তহবিল নেই।",
       "insufficientGas": "সোওয়াপ সম্পূর্ণ করার জন্য আপনার কাছে পর্যাপ্ত গ্যাস নেই। আপনাকে অন্তত যোগ করতে হবে:",
       "rateChanged": "বিনিময় হার পরিবর্তিত হয়েছে। সোওয়াপ চালিয়ে যাওয়ার মাধ্যমে, আপনি নতুন হার গ্রহণ করবেন।",
       "resetSettings": "এটি আপনার রুটের অগ্রাধিকার, স্লিপেজ, গ্যাসের দাম, সক্ষম ব্রিজ এবং এক্সচেঞ্জ রিসেট করবে।",
-      "slippageOutsideRecommendedLimits": ""
+      "slippageOutsideRecommendedLimits": "",
+      "slippageUnderRecommendedLimits": ""
     },
     "title": {
       "deleteActiveTransactions": "",
@@ -133,7 +137,8 @@
       "highValueLoss": "উচ্চ মূল্য ক্ষতি",
       "insufficientGas": "অপর্যাপ্ত গ্যাস",
       "rateChanged": "হার পরিবর্তিত হয়েছে",
-      "resetSettings": "রিসেট সেটিংস?"
+      "resetSettings": "রিসেট সেটিংস?",
+      "lowAddressActivity": ""
     }
   },
   "error": {
@@ -146,6 +151,7 @@
       "transactionCanceled": "",
       "transactionConflict": "",
       "transactionExpired": "",
+      "transactionRejected": "",
       "transactionFailed": "আরও তথ্যের জন্য ব্লক এক্সপ্লোরার চেক করুন।",
       "transactionNotSent": "",
       "transactionSimulationFailed": "",
@@ -167,6 +173,7 @@
       "transactionConflict": "",
       "transactionExpired": "",
       "transactionFailed": "লেনদেন ব্যর্থ হয়েছে",
+      "transactionRejected": "",
       "transactionSimulationFailed": "",
       "transactionUnderpriced": "লেনদেনের দাম কম",
       "transactionUnprepared": "লেনদেন প্রস্তুত করতে অক্ষম",
@@ -187,6 +194,7 @@
       "text": "আমরা এই পৃষ্ঠাটি খুঁজে পাইনি।",
       "title": "৪০৪"
     },
+    "relayerService": "",
     "numberOfSteps": "",
     "priceImpact": "",
     "progressToNextUpdate": "প্রদর্শিত ডেটা {{value}} সেকেন্ড পরে স্বয়ংক্রিয়ভাবে রিফ্রেশ হবে। ম্যানুয়ালি আপডেট করতে এখানে ক্লিক করুন।",
@@ -203,7 +211,9 @@
     "featuredTokens": "বৈশিষ্ট্যযুক্ত টোকেন",
     "fees": {
       "defaultIntegrator": "",
+      "relayerService": "",
       "estimated": "",
+      "free": "",
       "integrator": "",
       "network": "",
       "paid": "",
@@ -238,19 +248,26 @@
         "refunded": "ব্রিজ লেনদেন ফেরত করা হয়েছে"
       },
       "swap": {
-        "actionRequired": "দয়াকরে লেনদেন স্বাক্ষর করুন",
+        "actionRequired": "",
         "done": "সোওয়াপ সম্পন্ন হয়েছে",
-        "pending": "সোওয়াপ লেনদেনের জন্য অপেক্ষা করা হচ্ছে",
+        "pending": "",
         "started": "সোয়াপ লেনদেন প্রস্তুত করা হচ্ছে"
       },
       "switchChain": {
-        "actionRequired": "চেইন সুইচ প্রয়োজন",
-        "done": "চেইন সফলভাবে সুইচ করা হয়েছে"
+        "actionRequired": "",
+        "done": ""
+      },
+      "permit": {
+        "actionRequired": "",
+        "done": "",
+        "pending": "",
+        "started": ""
       },
       "tokenAllowance": {
-        "done": "টোকেন অনুমতি অনুমোদিত",
-        "pending": "টোকেন অনুমতির অপেক্ষায়",
-        "started": "টোকেন অনুমতির অপেক্ষায়"
+        "actionRequired": "",
+        "done": "",
+        "pending": "",
+        "started": ""
       }
     },
     "quotedAmount": "উদ্ধৃত পরিমাণ",
@@ -278,11 +295,12 @@
     "transferId": "",
     "tags": {
       "cheapest": "",
-      "fastest": ""
+      "fastest": "",
+      "gasless": ""
     },
     "to": "প্রতি",
     "tokenOnChain": "{{chainName}} -এ {{tokenSymbol}}",
-    "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} {{chainName}} -এ",
+    "tokenOnChainAmount": "",
     "tokenSearch": "আপনার টোকেন অনুসন্ধান করুন",
     "valueLoss": "মান ক্ষতি",
     "searchChains": "",

package/src/i18n/de.json

@@ -6,7 +6,8 @@
   "format": {
     "currency": "",
     "number": "{{value, number(maximumFractionDigits: 4)}}",
-    "percent": ""
+    "percent": "",
+    "tokenAmount": ""
   },
   "button": {
     "auto": "Auto",
@@ -83,14 +84,13 @@
     "message": {
       "autoRefuel": "Sie haben nicht genug Gas auf {{chainName}}. Wenn Sie fortfahren, erhalten Sie zusätzlich genug Gas um den Swap abzuschließen.",
       "emptyActiveTransactions": "Laufende Swaps werden hier angezeigt. Sobald Sie fertig sind, finden Sie sie in der Transaktionshistorie.",
-      "emptyTokenList": "Es wurden keine Tokens auf der Chain {{chainName}} gefunden oder Sie haben keine. Bitte versuchen Sie die Suche erneut mit der Contract-Adresse falls Ihr Token nicht erscheint oder wechseln Sie die Chain.",
-      "emptyChainList": "",
       "emptyBridgesList": "",
+      "emptyChainList": "",
       "emptyExchangesList": "",
+      "emptyTokenList": "Es wurden keine Tokens auf der Chain {{chainName}} gefunden oder Sie haben keine. Bitte versuchen Sie die Suche erneut mit der Contract-Adresse falls Ihr Token nicht erscheint oder wechseln Sie die Chain.",
       "emptyTransactionHistory": "Die Transaktionshistorie wird nur lokal gespeichert und gelöscht, wenn Sie Ihre Browserdaten löschen.",
-      "fundsToExchange": "",
-      "toAddressIsRequired": "",
-      "routeNotFound": "Gründe dafür könnten lauten: geringe Liquidität, gewählter Betrag ist zu niedrig, die Gaskosten sind zu hoch oder es gibt keine Routen für die ausgewählte Kombination."
+      "routeNotFound": "Gründe dafür könnten lauten: geringe Liquidität, gewählter Betrag ist zu niedrig, die Gaskosten sind zu hoch oder es gibt keine Routen für die ausgewählte Kombination.",
+      "toAddressIsRequired": ""
     },
     "title": {
       "autoRefuel": "",
@@ -102,7 +102,7 @@
   "success": {
     "message": {
       "exchangePartiallySuccessful": "",
-      "exchangeSuccessful": "Es sind jetzt {{amount, number(maximumFractionDigits: 9)}} {{tokenSymbol}} in der Wallet {{walletAddress}} auf der {{chainName}}-Chain.",
+      "exchangeSuccessful": "",
       "checkoutSuccessful": ""
     },
     "title": {
@@ -117,14 +117,18 @@
   },
   "warning": {
     "message": {
+      "accountNotDeployedMessage": "",
+      "lowAddressActivity": "",
       "deleteActiveTransactions": "Aktive Swaps werden nur lokal gespeichert und können nicht wiederhergestellt werden, wenn Sie sie löschen.",
       "deleteTransactionHistory": "Die Transaktionshistorie wird nur lokal gespeichert und kann nicht wiederhergestellt werden, wenn Sie sie löschen.",
+      "fundsLossPrevention": "",
       "highValueLoss": "Der Wert der erhaltenen Token ist deutlich niedriger als die getauschten Token und die Transaktionskosten.",
       "insufficientFunds": "Sie haben nicht genug Token, um diesen Swap abzuschließen.",
       "insufficientGas": "Sie haben nicht genug Gas um diesen Swap abzuschließen. Sie müssen mindestens hinzufügen:",
       "rateChanged": "Der Wechselkurs hat sich geändert. Durch Fortsetzen des Swaps akzeptieren Sie den neuen Kurs.",
       "resetSettings": "Dies wird Ihre Routenpriorität, Slippage, Gaspreis, aktivierte Brücken und Exchanges zurücksetzen.",
-      "slippageOutsideRecommendedLimits": ""
+      "slippageOutsideRecommendedLimits": "",
+      "slippageUnderRecommendedLimits": ""
     },
     "title": {
       "deleteActiveTransactions": "Alle aktiven Transaktionen entfernen?",
@@ -133,7 +137,8 @@
       "highValueLoss": "Hoher Wertverlust",
       "insufficientGas": "Unzureichendes Gas",
       "rateChanged": "Wechselkurs geändert",
-      "resetSettings": "Einstellungen zurücksetzen?"
+      "resetSettings": "Einstellungen zurücksetzen?",
+      "lowAddressActivity": ""
     }
   },
   "error": {
@@ -146,6 +151,7 @@
       "transactionCanceled": "",
       "transactionConflict": "",
       "transactionExpired": "",
+      "transactionRejected": "",
       "transactionFailed": "Weitere Informationen finden Sie im Block-Explorer.",
       "transactionNotSent": "",
       "transactionSimulationFailed": "",
@@ -167,6 +173,7 @@
       "transactionConflict": "",
       "transactionExpired": "",
       "transactionFailed": "Transaktion ist fehlgeschlagen.",
+      "transactionRejected": "",
       "transactionSimulationFailed": "",
       "transactionUnderpriced": "Transaktion ist unterbewertet.",
       "transactionUnprepared": "Transaktion kann nicht vorbereitet werden.",
@@ -187,6 +194,7 @@
       "text": "Wir konnten diese Seite nicht finden.",
       "title": "404"
     },
+    "relayerService": "",
     "numberOfSteps": "",
     "priceImpact": "",
     "progressToNextUpdate": "Angezeigte Daten werden nach {{value}} Sekunden automatisch aktualisiert. Klicken Sie hier, um manuell zu aktualisieren.",
@@ -203,7 +211,9 @@
     "featuredTokens": "Ausgewählte Token",
     "fees": {
       "defaultIntegrator": "",
+      "relayerService": "",
       "estimated": "",
+      "free": "",
       "integrator": "",
       "network": "",
       "paid": "",
@@ -238,19 +248,26 @@
         "refunded": "Bridge Transaktion zurückerstattet"
       },
       "swap": {
-        "actionRequired": "Bitte signieren Sie die Transaktion.",
+        "actionRequired": "",
         "done": "Swap abgeschlossen",
-        "pending": "Warten auf Transaktion",
+        "pending": "",
         "started": "Swap vorbereiten"
       },
       "switchChain": {
-        "actionRequired": "Chainwechsel erforderlich",
-        "done": "Chain erfolgreich gewechselt."
+        "actionRequired": "",
+        "done": ""
+      },
+      "permit": {
+        "actionRequired": "",
+        "done": "",
+        "pending": "",
+        "started": ""
       },
       "tokenAllowance": {
-        "done": "Token-Zulassung genehmigt.",
-        "pending": "Warten auf Token-Genehmigung.",
-        "started": "Token-Freigabe festlegen."
+        "actionRequired": "",
+        "done": "",
+        "pending": "",
+        "started": ""
       }
     },
     "quotedAmount": "Angebotsbetrag",
@@ -278,11 +295,12 @@
     "transferId": "",
     "tags": {
       "cheapest": "",
-      "fastest": ""
+      "fastest": "",
+      "gasless": ""
     },
     "to": "Zu",
     "tokenOnChain": "{{tokenSymbol}} auf {{chainName}}",
-    "tokenOnChainAmount": "{{amount, number(maximumFractionDigits: 4)}} {{tokenSymbol}} auf {{chainName}}",
+    "tokenOnChainAmount": "",
     "tokenSearch": "Suchen Sie Ihren Token",
     "valueLoss": "Wertverlust",
     "searchChains": "",