@lifi/widget 4.6.0 → 4.7.1

package/src/utils/tokenListBands.ts

@@ -0,0 +1,181 @@
+import type { TokenAmount } from '../types/token.js'
+
+const bandHeaderAtListStart = 24
+const bandHeaderAfterBand = 32
+const toggleRowHeight = 26
+
+type BandLabelKey =
+  | 'main.pinnedTokens'
+  | 'main.featuredTokens'
+  | 'main.myTokens'
+  | 'main.popularTokens'
+  | 'main.allTokens'
+
+export type BandLabel =
+  | { kind: 'text'; key: BandLabelKey; atListStart: boolean }
+  | { kind: 'recent'; atListStart: boolean }
+
+export interface BandResolverOptions {
+  showCategories: boolean
+  showPinnedTokens: boolean
+  nativeHoisted: boolean
+  /** Ignored while `recentCount` is 0. */
+  recentStartIndex: number
+  recentCount: number
+  showRecentToggle: boolean
+}
+
+export interface BandResolver {
+  /** Called for every index by the virtualizer, so it allocates nothing. */
+  getRowExtraHeight: (index: number) => number
+  /** Called for visible rows only, so the label may be resolved lazily. */
+  getRowBandLabel: (index: number) => BandLabel | undefined
+  /** The row the toggle hangs below. Shares one definition with the height. */
+  isToggleRow: (index: number) => boolean
+}
+
+// Pinned and recent rows sit above the categories; transitions ignore both.
+const isPromoted = (token: TokenAmount | undefined): boolean =>
+  !!token?.pinned || !!token?.recent
+
+export const createBandResolver = (
+  tokens: TokenAmount[],
+  {
+    showCategories,
+    showPinnedTokens,
+    nativeHoisted,
+    recentStartIndex,
+    recentCount,
+    showRecentToggle,
+  }: BandResolverOptions
+): BandResolver => {
+  const listStartIndex = nativeHoisted ? 1 : 0
+  const recentEndIndex = recentStartIndex + recentCount - 1
+
+  const isFirstPinned = (index: number) =>
+    !!tokens[index]?.pinned && index === listStartIndex
+  const isFirstRecent = (index: number) =>
+    recentCount > 0 && index === recentStartIndex && !!tokens[index]?.recent
+  const isLastRecent = (index: number) =>
+    recentCount > 0 && index === recentEndIndex && !!tokens[index]?.recent
+  // The hoisted native sits above every band, so the list-start row follows none.
+  const previousOf = (index: number) =>
+    index === listStartIndex ? undefined : tokens[index - 1]
+  const isTransitionFromPromoted = (index: number) =>
+    isPromoted(tokens[index - 1]) && !isPromoted(tokens[index])
+  // Only the top row has no card above it; below the hoisted native one does.
+  const isTopRow = (index: number) => index === 0
+  const headerHeight = (index: number) =>
+    isTopRow(index) ? bandHeaderAtListStart : bandHeaderAfterBand
+
+  const getRowExtraHeight = (index: number): number => {
+    const current = tokens[index]
+    const previous = previousOf(index)
+    let extra = 0
+
+    if (showPinnedTokens && isFirstPinned(index)) {
+      extra += headerHeight(index)
+    }
+
+    if (isFirstRecent(index)) {
+      extra += headerHeight(index)
+    }
+
+    if (showRecentToggle && isLastRecent(index)) {
+      extra += toggleRowHeight
+    }
+
+    // The recent band needs its own term: all-networks has no categories.
+    if (
+      (showPinnedTokens || showCategories || recentCount > 0) &&
+      isTransitionFromPromoted(index)
+    ) {
+      extra += bandHeaderAfterBand
+    }
+
+    if (!showCategories) {
+      return extra
+    }
+
+    if (current?.featured && !isPromoted(current) && index === listStartIndex) {
+      extra += headerHeight(index)
+    }
+
+    const isNotPromoted = !isPromoted(current) && !isPromoted(previous)
+    if (
+      index !== listStartIndex &&
+      isNotPromoted &&
+      ((previous?.amount && !current?.amount) ||
+        (previous?.featured && !current?.featured) ||
+        (previous?.popular && !current?.popular))
+    ) {
+      extra += bandHeaderAfterBand
+    }
+
+    return extra
+  }
+
+  const getRowBandLabel = (index: number): BandLabel | undefined => {
+    const current = tokens[index]
+    const previous = previousOf(index)
+    const isListStart = index === listStartIndex
+    const notPromoted = !isPromoted(current)
+    const fromPromoted = isPromoted(previous) && notPromoted
+
+    if (showPinnedTokens && isFirstPinned(index)) {
+      return {
+        kind: 'text',
+        key: 'main.pinnedTokens',
+        atListStart: isTopRow(index),
+      }
+    }
+    if (isFirstRecent(index)) {
+      return { kind: 'recent', atListStart: isTopRow(index) }
+    }
+    if (
+      (showPinnedTokens || recentCount > 0) &&
+      !showCategories &&
+      fromPromoted
+    ) {
+      return { kind: 'text', key: 'main.allTokens', atListStart: false }
+    }
+    if (!showCategories) {
+      return undefined
+    }
+
+    const fromFeatured =
+      !!previous?.featured && !current?.featured && notPromoted
+    const fromMyTokens = !!previous?.amount && !current?.amount && notPromoted
+    const fromPopular = !!previous?.popular && !current?.popular && notPromoted
+
+    if (
+      (fromPromoted && current?.featured) ||
+      (current?.featured && notPromoted && isListStart)
+    ) {
+      return {
+        kind: 'text',
+        key: 'main.featuredTokens',
+        atListStart: isTopRow(index),
+      }
+    }
+    if ((fromFeatured || fromPromoted) && current?.amount && notPromoted) {
+      return { kind: 'text', key: 'main.myTokens', atListStart: false }
+    }
+    if (
+      (fromFeatured || fromMyTokens || fromPromoted) &&
+      current?.popular &&
+      notPromoted
+    ) {
+      return { kind: 'text', key: 'main.popularTokens', atListStart: false }
+    }
+    if (fromMyTokens || fromFeatured || fromPromoted || fromPopular) {
+      return { kind: 'text', key: 'main.allTokens', atListStart: false }
+    }
+    return undefined
+  }
+
+  const isToggleRow = (index: number): boolean =>
+    showRecentToggle && isLastRecent(index)
+
+  return { getRowExtraHeight, getRowBandLabel, isToggleRow }
+}

package/src/utils/url.ts

@@ -0,0 +1,17 @@
+export const isHttpUrl = (url: string | undefined): url is string => {
+  if (!url) {
+    return false
+  }
+  try {
+    const { protocol } = new URL(url)
+    return protocol === 'https:' || protocol === 'http:'
+  } catch {
+    return false
+  }
+}
+
+export const openInNewTab = (url: string | undefined): void => {
+  if (isHttpUrl(url)) {
+    window.open(url, '_blank', 'noopener,noreferrer')
+  }
+}