@luxexchange/lx 1.0.0

package/src/components/misc/Scrollbar.web.tsx

@@ -0,0 +1,99 @@
+import { useState, useSyncExternalStore } from 'react'
+import { Flex, FlexProps } from '@luxfi/ui/src'
+import type { SharedValue } from '@luxfi/ui/src/animations'
+
+type ScrollbarProps = FlexProps & {
+  visibleHeight: number
+  contentHeight: number
+  scrollOffset: SharedValue<number>
+}
+
+// Create a subscription function for shared value polling
+function createSharedValueStore(sharedValue: SharedValue<number>): {
+  subscribe: (callback: () => void) => () => void
+  getSnapshot: () => number
+} {
+  let lastValue = sharedValue.value
+  let intervalId: ReturnType<typeof setInterval> | null = null
+  const listeners = new Set<() => void>()
+
+  return {
+    subscribe: (callback: () => void): (() => void) => {
+      listeners.add(callback)
+
+      // Start polling only when we have listeners
+      if (listeners.size === 1 && intervalId === null) {
+        intervalId = setInterval(() => {
+          const currentValue = sharedValue.value
+          if (currentValue !== lastValue) {
+            lastValue = currentValue
+            listeners.forEach((listener) => listener())
+          }
+        }, 16) // ~60fps
+      }
+
+      return () => {
+        listeners.delete(callback)
+        // Stop polling when no listeners remain
+        if (listeners.size === 0 && intervalId !== null) {
+          clearInterval(intervalId)
+          intervalId = null
+        }
+      }
+    },
+    getSnapshot: () => sharedValue.value,
+  }
+}
+
+/**
+ * Web implementation of Scrollbar using CSS-based positioning.
+ * Uses useSyncExternalStore pattern to subscribe to shared value changes.
+ */
+export function Scrollbar({ visibleHeight, contentHeight, scrollOffset, ...rest }: ScrollbarProps): JSX.Element {
+  const [scrollbarHeight, setScrollbarHeight] = useState(0)
+
+  // Create store for the shared value - memoized per scrollOffset instance
+  const [store] = useState(() => createSharedValueStore(scrollOffset))
+  const scrollOffsetValue = useSyncExternalStore(store.subscribe, store.getSnapshot)
+
+  const thumbHeight = (visibleHeight / contentHeight) * scrollbarHeight
+  const maxScroll = contentHeight - visibleHeight
+  const maxThumbTop = scrollbarHeight - thumbHeight
+  const thumbTop = maxScroll > 0 ? (scrollOffsetValue / maxScroll) * maxThumbTop : 0
+  const clampedThumbTop = Math.max(0, Math.min(thumbTop, maxThumbTop))
+
+  return (
+    <Flex
+      animation="quicker"
+      enterStyle={{
+        opacity: 0,
+        width: 0,
+      }}
+      width={6}
+      {...rest}
+    >
+      <Flex
+        fill
+        onLayout={({
+          nativeEvent: {
+            layout: { height },
+          },
+        }) => {
+          setScrollbarHeight(height)
+        }}
+      >
+        <Flex
+          position="absolute"
+          top={clampedThumbTop}
+          height={thumbHeight}
+          width="100%"
+          style={{
+            transition: 'top 0.1s ease-out',
+          }}
+        >
+          <Flex fill backgroundColor="$neutral3" borderRadius="$rounded12" />
+        </Flex>
+      </Flex>
+    </Flex>
+  )
+}

package/src/components/modals/ActionSheetModal.tsx

@@ -0,0 +1,94 @@
+import { ReactNode } from 'react'
+import { useTranslation } from 'react-i18next'
+import { Flex, flexStyles, ScrollView, Text, TouchableArea } from '@luxfi/ui/src'
+import { useDeviceDimensions } from '@luxfi/ui/src/hooks/useDeviceDimensions'
+import { BottomSheetDetachedModal } from '@luxexchange/lx/src/components/modals/Modal'
+import { ModalNameType } from '@luxexchange/lx/src/features/telemetry/constants'
+
+export interface MenuItemProp {
+  key: string
+  onPress: () => void
+  render: () => ReactNode
+}
+
+interface ActionSheetModalContentProps {
+  closeButtonLabel?: string
+  onClose: () => void
+  options: MenuItemProp[]
+  header?: ReactNode | string
+}
+
+/**
+ * Sheet modal with rows of actionable options.
+ */
+export function ActionSheetModalContent(props: ActionSheetModalContentProps): JSX.Element {
+  const { t } = useTranslation()
+  const { fullHeight } = useDeviceDimensions()
+
+  const { header, closeButtonLabel = t('common.button.close'), options, onClose } = props
+
+  return (
+    <Flex gap="$spacing12" justifyContent="flex-end">
+      <Flex centered backgroundColor="$surface2" borderRadius="$rounded16" overflow="hidden">
+        {typeof header === 'string' ? (
+          <Flex centered gap="$spacing4" py="$spacing16">
+            <Text variant="buttonLabel2">{header}</Text>
+          </Flex>
+        ) : (
+          header
+        )}
+
+        <Flex maxHeight={fullHeight * 0.5} width="100%">
+          <ScrollView bounces={false} style={flexStyles.grow}>
+            {options.map(({ key, onPress, render }) => {
+              return (
+                <TouchableArea key={key} testID={key} onPress={onPress}>
+                  {render()}
+                </TouchableArea>
+              )
+            })}
+          </ScrollView>
+        </Flex>
+      </Flex>
+      <Flex backgroundColor="$surface2" borderRadius="$rounded12">
+        <TouchableArea onPress={onClose}>
+          <Flex centered backgroundColor="$surface2" borderRadius="$rounded12" py="$spacing16">
+            <Text color="$neutral1" variant="buttonLabel2">
+              {closeButtonLabel}
+            </Text>
+          </Flex>
+        </TouchableArea>
+      </Flex>
+    </Flex>
+  )
+}
+
+interface ActionSheetModalProps extends ActionSheetModalContentProps {
+  isVisible: boolean
+  name: ModalNameType
+  isDismissible?: boolean
+}
+
+export function ActionSheetModal({
+  isVisible,
+  onClose,
+  name,
+  isDismissible = true,
+  ...rest
+}: ActionSheetModalProps): JSX.Element | null {
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <BottomSheetDetachedModal
+      hideHandlebar
+      backgroundColor="$transparent"
+      isDismissible={isDismissible}
+      name={name}
+      onClose={onClose}
+    >
+      <ActionSheetModalContent onClose={onClose} {...rest} />
+    </BottomSheetDetachedModal>
+  )
+}

package/src/components/modals/BottomSheetContext.tsx

@@ -0,0 +1,52 @@
+import { createContext, ReactNode, useContext, useMemo } from 'react'
+import { isWebPlatform } from '@luxfi/utilities/src/platform'
+
+type BottomSheetContextState = {
+  // `isSheetReady` is `true` as soon as the sheet has just begun animating from the bottom.
+  // When rendering a sheet with too much content, it would take too long for the sheet to begin animating, so we use this flag to delay rendering of some of the content inside the sheet.
+  // See any fullscreen modal in this repo for an example on how to use this (Swap, Explore, Send, Buy, etc).
+  // https://linear.app/lux/issue/MOB-1399/fix-lag-when-opening-bottom-sheets
+  isSheetReady: boolean
+}
+
+const BottomSheetContext = createContext<BottomSheetContextState | undefined>(undefined)
+
+export function BottomSheetContextProvider({
+  children,
+  isSheetReady,
+}: {
+  children: ReactNode
+  isSheetReady: boolean
+}): JSX.Element {
+  const state = useMemo<BottomSheetContextState>(
+    (): BottomSheetContextState => ({
+      isSheetReady,
+    }),
+    [isSheetReady],
+  )
+
+  return <BottomSheetContext.Provider value={state}>{children}</BottomSheetContext.Provider>
+}
+
+export const useBottomSheetContext = ({
+  forceSafeReturn,
+  // Use forceSafeReturn to conditionally use context with feature flags
+}: {
+  forceSafeReturn?: boolean
+} = {}): BottomSheetContextState => {
+  const bottomSheetContext = useContext(BottomSheetContext)
+
+  if (isWebPlatform) {
+    return { isSheetReady: true }
+  }
+
+  if (bottomSheetContext === undefined) {
+    if (forceSafeReturn) {
+      return { isSheetReady: true }
+    }
+
+    throw new Error('`useBottomSheetContext` must be used inside of `BottomSheetContextProvider`')
+  }
+
+  return bottomSheetContext
+}

package/src/components/modals/HandleBar.native.tsx

@@ -0,0 +1,41 @@
+import { Flex, useSporeColors } from '@luxfi/ui/src'
+import { spacing } from '@luxfi/ui/src/theme'
+import { HandleBarProps } from '@luxexchange/lx/src/components/modals/HandleBar'
+import { isAndroid } from '@luxfi/utilities/src/platform'
+
+const HANDLEBAR_HEIGHT = spacing.spacing4
+const HANDLEBAR_WIDTH = spacing.spacing36
+
+export const HandleBar = ({
+  indicatorColor = '$surface3',
+  backgroundColor,
+  hidden = false,
+  containerFlexStyles,
+}: HandleBarProps): JSX.Element => {
+  const colors = useSporeColors()
+  const bg = hidden ? 'transparent' : (backgroundColor ?? colors.surface1.get())
+
+  return (
+    <Flex mt={isAndroid ? '$spacing4' : '$none'}>
+      <Flex
+        alignItems="center"
+        borderTopLeftRadius="$rounded24"
+        borderTopRightRadius="$rounded24"
+        justifyContent="center"
+        style={{
+          ...containerFlexStyles,
+          backgroundColor: bg,
+        }}
+      >
+        <Flex
+          alignSelf="center"
+          backgroundColor={hidden ? '$transparent' : indicatorColor}
+          borderRadius="$rounded24"
+          height={HANDLEBAR_HEIGHT}
+          overflow="hidden"
+          width={HANDLEBAR_WIDTH}
+        />
+      </Flex>
+    </Flex>
+  )
+}

package/src/components/modals/HandleBar.tsx

@@ -0,0 +1,15 @@
+import type { ColorValue, FlexStyle } from 'react-native'
+import type { FlexProps } from '@luxfi/ui/src'
+import { PlatformSplitStubError } from '@luxfi/utilities/src/errors'
+
+export type HandleBarProps = {
+  // string instead of keyof Theme['colors] because this is sometimes a raw hex value when used with BottomSheet components
+  backgroundColor?: ColorValue
+  hidden?: boolean
+  containerFlexStyles?: FlexStyle
+  indicatorColor?: FlexProps['backgroundColor']
+}
+
+export function HandleBar(_: HandleBarProps): JSX.Element {
+  throw new PlatformSplitStubError('HandleBar')
+}

package/src/components/modals/HandleBar.web.tsx

@@ -0,0 +1,6 @@
+import { HandleBarProps } from '@luxexchange/lx/src/components/modals/HandleBar'
+import { NotImplementedError } from '@luxfi/utilities/src/errors'
+
+export function HandleBar(_: HandleBarProps): JSX.Element {
+  throw new NotImplementedError('HandleBar')
+}

package/src/components/modals/InfoLinkModal.tsx

@@ -0,0 +1,97 @@
+import { ReactNode } from 'react'
+import { Button, Flex, Text, TouchableArea, useSporeColors } from '@luxfi/ui/src'
+import { X } from '@luxfi/ui/src/components/icons/X'
+import { zIndexes } from '@luxfi/ui/src/theme'
+import { Modal } from '@luxexchange/lx/src/components/modals/Modal'
+import { ModalProps } from '@luxexchange/lx/src/components/modals/ModalProps'
+import { ModalNameType } from '@luxexchange/lx/src/features/telemetry/constants'
+import { openUri } from '@luxexchange/lx/src/utils/linking'
+import { logger } from '@luxfi/utilities/src/logger/logger'
+import { isMobileWeb, isWebPlatform } from '@luxfi/utilities/src/platform'
+
+interface InfoModalProps {
+  name: ModalNameType
+  isOpen: boolean
+  showCloseButton?: boolean
+  icon: ReactNode
+  title: string
+  description: string
+  buttonText: string
+  linkText?: string
+  linkUrl?: string
+  onDismiss?: () => void
+  onButtonPress?: () => void
+  onAnalyticsEvent?: () => void
+  height?: ModalProps['height']
+}
+
+export function InfoLinkModal({
+  name,
+  isOpen,
+  showCloseButton,
+  icon,
+  title,
+  description,
+  buttonText,
+  linkText,
+  linkUrl,
+  onDismiss,
+  onButtonPress,
+  onAnalyticsEvent,
+  height,
+}: React.PropsWithChildren<InfoModalProps>): JSX.Element {
+  const colors = useSporeColors()
+
+  const openLuxURL = async (): Promise<void> => {
+    if (!linkUrl) {
+      return
+    }
+
+    try {
+      await openUri({ uri: linkUrl })
+      onAnalyticsEvent?.()
+    } catch (error) {
+      logger.error(error, { tags: { file: 'InfoLinkModal.tsx', function: 'openLuxURL' } })
+    }
+  }
+
+  return (
+    <Modal backgroundColor={colors.surface1.val} isModalOpen={isOpen} name={name} height={height} onClose={onDismiss}>
+      {showCloseButton && (
+        <TouchableArea
+          p="$spacing16"
+          position="absolute"
+          right={0}
+          top={0}
+          zIndex={zIndexes.default}
+          onPress={onDismiss}
+        >
+          {isWebPlatform && !isMobileWeb && <X color="$neutral2" size="$icon.16" />}
+        </TouchableArea>
+      )}
+      <Flex alignItems="center" gap="$spacing8" mx={isWebPlatform ? '$none' : '$spacing36'} pt="$spacing16">
+        {icon}
+        <Flex centered gap="$spacing8" p="$spacing16">
+          <Text color="$neutral1" variant={isWebPlatform ? 'subheading2' : 'subheading1'}>
+            {title}
+          </Text>
+          <Text color="$neutral2" textAlign="center" variant="body3">
+            {description}
+          </Text>
+        </Flex>
+        <Flex row width="100%">
+          <Button fill emphasis="secondary" size="medium" onPress={onButtonPress}>
+            {buttonText}
+          </Button>
+        </Flex>
+        {linkText && linkUrl && (
+          <Flex row width="100%">
+            <Button fill emphasis="text-only" size="medium" onPress={openLuxURL}>
+              {linkText}
+            </Button>
+          </Flex>
+        )}
+      </Flex>
+    </Modal>
+  )
+}