@0xsequence/wallet-widget 0.0.0-20250314205219

package/dist/types/views/SendCollectible.d.ts

@@ -0,0 +1,8 @@
+interface SendCollectibleProps {
+    chainId: number;
+    contractAddress: string;
+    tokenId: string;
+}
+export declare const SendCollectible: ({ chainId, contractAddress, tokenId }: SendCollectibleProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=SendCollectible.d.ts.map

package/dist/types/views/SendCollectible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SendCollectible.d.ts","sourceRoot":"","sources":["../../../src/views/SendCollectible.tsx"],"names":[],"mappings":"AAmCA,UAAU,oBAAoB;IAC5B,OAAO,EAAE,MAAM,CAAA;IACf,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,eAAO,MAAM,eAAe,GAAI,uCAAuC,oBAAoB,mDAqZ1F,CAAA"}

package/dist/types/views/Settings/Currency.d.ts

@@ -0,0 +1,2 @@
+export declare const SettingsCurrency: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Currency.d.ts.map

package/dist/types/views/Settings/Currency.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Currency.d.ts","sourceRoot":"","sources":["../../../../src/views/Settings/Currency.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,gBAAgB,+CA0B5B,CAAA"}

package/dist/types/views/Settings/General.d.ts

@@ -0,0 +1,2 @@
+export declare const SettingsGeneral: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=General.d.ts.map

package/dist/types/views/Settings/General.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"General.d.ts","sourceRoot":"","sources":["../../../../src/views/Settings/General.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,eAAe,+CA+C3B,CAAA"}

package/dist/types/views/Settings/Menu.d.ts

@@ -0,0 +1,2 @@
+export declare const SettingsMenu: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/types/views/Settings/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/views/Settings/Menu.tsx"],"names":[],"mappings":"AAMA,eAAO,MAAM,YAAY,+CAqDxB,CAAA"}

package/dist/types/views/Settings/Network.d.ts

@@ -0,0 +1,2 @@
+export declare const SettingsNetwork: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Network.d.ts.map

package/dist/types/views/Settings/Network.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Network.d.ts","sourceRoot":"","sources":["../../../../src/views/Settings/Network.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,eAAe,+CAkD3B,CAAA"}

package/dist/types/views/Settings/index.d.ts

@@ -0,0 +1,5 @@
+export * from './Menu';
+export * from './General';
+export * from './Currency';
+export * from './Network';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/views/Settings/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/Settings/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,WAAW,CAAA"}

package/dist/types/views/SwapCoin/SwapList.d.ts

@@ -0,0 +1,8 @@
+interface SwapListProps {
+    chainId: number;
+    contractAddress: string;
+    amount: string;
+}
+export declare const SwapList: ({ chainId, contractAddress, amount }: SwapListProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SwapList.d.ts.map

package/dist/types/views/SwapCoin/SwapList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwapList.d.ts","sourceRoot":"","sources":["../../../../src/views/SwapCoin/SwapList.tsx"],"names":[],"mappings":"AAuBA,UAAU,aAAa;IACrB,OAAO,EAAE,MAAM,CAAA;IACf,eAAe,EAAE,MAAM,CAAA;IACvB,MAAM,EAAE,MAAM,CAAA;CACf;AAED,eAAO,MAAM,QAAQ,GAAI,sCAAsC,aAAa,4CAkS3E,CAAA"}

package/dist/types/views/SwapCoin/index.d.ts

@@ -0,0 +1,6 @@
+export interface SwapCoinProps {
+    contractAddress: string;
+    chainId: number;
+}
+export declare const SwapCoin: ({ contractAddress, chainId }: SwapCoinProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/views/SwapCoin/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/SwapCoin/index.tsx"],"names":[],"mappings":"AAaA,MAAM,WAAW,aAAa;IAC5B,eAAe,EAAE,MAAM,CAAA;IACvB,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,eAAO,MAAM,QAAQ,GAAI,8BAA8B,aAAa,mDAmInE,CAAA"}

package/dist/types/views/TransactionDetails/index.d.ts

@@ -0,0 +1,7 @@
+import { Transaction } from '@0xsequence/indexer';
+interface TransactionDetailProps {
+    transaction: Transaction;
+}
+export declare const TransactionDetails: ({ transaction }: TransactionDetailProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/types/views/TransactionDetails/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/views/TransactionDetails/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAe,MAAM,qBAAqB,CAAA;AAU9D,UAAU,sBAAsB;IAC9B,WAAW,EAAE,WAAW,CAAA;CACzB;AAED,eAAO,MAAM,kBAAkB,GAAI,iBAAiB,sBAAsB,4CAyLzE,CAAA"}

package/dist/types/views/index.d.ts

@@ -0,0 +1,14 @@
+export * from './Home';
+export * from './Receive';
+export * from './SendCoin';
+export * from './SendCollectible';
+export * from './History';
+export * from './Search';
+export * from './Settings';
+export * from './CoinDetails';
+export * from './CollectionDetails';
+export * from './CollectibleDetails';
+export * from './TransactionDetails';
+export * from './SwapCoin';
+export * from './SwapCoin/SwapList';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/views/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,mBAAmB,CAAA;AACjC,cAAc,WAAW,CAAA;AACzB,cAAc,UAAU,CAAA;AACxB,cAAc,YAAY,CAAA;AAC1B,cAAc,eAAe,CAAA;AAC7B,cAAc,qBAAqB,CAAA;AACnC,cAAc,sBAAsB,CAAA;AACpC,cAAc,sBAAsB,CAAA;AACpC,cAAc,YAAY,CAAA;AAC1B,cAAc,qBAAqB,CAAA"}

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "@0xsequence/wallet-widget",
+  "version": "0.0.0-20250314205219",
+  "description": "Wallet UI for Sequence Web SDK",
+  "repository": "https://github.com/0xsequence/web-sdk/tree/master/packages/wallet-widget",
+  "author": "Horizon Blockchain Games",
+  "license": "Apache-2.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "require": "./dist/cjs/index.js",
+      "import": "./dist/esm/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "files": [
+    "src",
+    "dist"
+  ],
+  "dependencies": {
+    "@radix-ui/react-popover": "^1.0.7",
+    "dayjs": "^1.11.11",
+    "fuse.js": "^6.6.2",
+    "qrcode.react": "^4.0.1",
+    "react-copy-to-clipboard": "^5.1.0"
+  },
+  "peerDependencies": {
+    "@0xsequence/api": ">= 2.2.13",
+    "@0xsequence/design-system": ">= 2.0.4",
+    "@0xsequence/indexer": ">= 2.2.13",
+    "@0xsequence/metadata": ">= 2.2.13",
+    "@0xsequence/network": ">= 2.2.13",
+    "@tanstack/react-query": ">= 5",
+    "ethers": ">= 6.13.0",
+    "motion": ">= 12",
+    "react": ">= 17",
+    "react-dom": ">= 17",
+    "viem": ">= 2.0.0",
+    "wagmi": ">= ^2.14.13",
+    "@0xsequence/react-hooks": "0.0.0-20250314205219",
+    "@0xsequence/connect": "0.0.0-20250314205219"
+  },
+  "devDependencies": {
+    "@0xsequence/design-system": "^2.0.9",
+    "@tanstack/react-query": "^5.62.0",
+    "@types/react-copy-to-clipboard": "^5.0.7",
+    "ethers": "^6.13.0",
+    "motion": "^12.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "viem": "^2.23.10",
+    "wagmi": "^2.14.13",
+    "@0xsequence/connect": "0.0.0-20250314205219",
+    "@0xsequence/react-hooks": "0.0.0-20250314205219"
+  },
+  "scripts": {
+    "build": "pnpm build:clean && pnpm build:esm && pnpm build:cjs && pnpm build:types",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs/",
+    "build:esm": "tsc --module es2022 --outDir dist/esm/",
+    "build:types": "tsc --declaration --declarationMap --emitDeclarationOnly --declarationDir dist/types/",
+    "build:clean": "rimraf -g ./dist",
+    "dev": "tsc --watch --module es2022 --declaration --declarationMap --outDir dist/esm/ --declarationDir dist/types/",
+    "test": "echo",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/src/components/Alert.tsx

@@ -0,0 +1,51 @@
+import { Button, cn, Text } from '@0xsequence/design-system'
+import React, { ComponentProps } from 'react'
+
+export type AlertProps = {
+  title: string
+  description: string
+  secondaryDescription?: string
+  variant: 'negative' | 'warning' | 'positive'
+  buttonProps?: ComponentProps<typeof Button>
+  children?: React.ReactNode
+}
+
+const variants = {
+  negative: 'bg-negative',
+  warning: 'bg-warning',
+  positive: 'bg-positive'
+}
+
+export const Alert = ({ title, description, secondaryDescription, variant, buttonProps, children }: AlertProps) => {
+  return (
+    <div className={cn('rounded-xl', variants[variant])}>
+      <div className="flex bg-background-overlay rounded-xl py-4 w-full flex-col gap-3">
+        <div className="flex w-full gap-2 justify-between">
+          <div className="flex flex-col gap-1">
+            <Text variant="normal" color="primary" fontWeight="medium">
+              {title}
+            </Text>
+
+            <Text variant="normal" color="muted" fontWeight="medium">
+              {description}
+            </Text>
+
+            {secondaryDescription && (
+              <Text variant="normal" color="secondary" fontWeight="medium">
+                {secondaryDescription}
+              </Text>
+            )}
+          </div>
+
+          {buttonProps ? (
+            <div className="rounded-lg w-min h-min">
+              <Button className="shrink-0" variant="emphasis" shape="square" {...buttonProps} />
+            </div>
+          ) : null}
+        </div>
+
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/components/CoinRow.tsx

@@ -0,0 +1,62 @@
+import { formatDisplay } from '@0xsequence/connect'
+import { Skeleton, Text, TokenImage } from '@0xsequence/design-system'
+import React from 'react'
+import { formatUnits } from 'viem'
+
+import { getPercentageColor } from '../utils'
+
+interface CoinRowProps {
+  name: string
+  symbol: string
+  decimals: number
+  balance: string
+  imageUrl?: string
+  fiatValue: string
+  priceChangePercentage: number
+}
+
+export const CoinRowSkeleton = () => {
+  return (
+    <div className="flex h-14 items-center justify-between bg-background-secondary rounded-xl py-2 px-3">
+      <div className="flex justify-center items-center gap-2">
+        <Skeleton className="rounded-full" style={{ width: 30, height: 30 }} />
+        <div className="flex flex-col gap-2 items-start">
+          <Skeleton style={{ width: 100, height: 14 }} />
+          <Skeleton style={{ width: 75, height: 14 }} />
+        </div>
+      </div>
+      <div className="flex flex-col gap-2 items-end">
+        <Skeleton style={{ width: 100, height: 14 }} />
+        <Skeleton style={{ width: 50, height: 12 }} />
+      </div>
+    </div>
+  )
+}
+
+export const CoinRow = ({ imageUrl, name, decimals, balance, symbol, fiatValue, priceChangePercentage }: CoinRowProps) => {
+  const formattedBalance = formatUnits(BigInt(balance), decimals)
+  const balanceDisplayed = formatDisplay(formattedBalance)
+
+  return (
+    <div className="flex h-14 items-center justify-between bg-background-secondary rounded-xl py-2 px-3">
+      <div className="flex justify-center items-center gap-2">
+        <TokenImage src={imageUrl} symbol={symbol} size="lg" />
+        <div className="flex flex-col items-start">
+          <Text variant="medium" color="primary">
+            {name}
+          </Text>
+          <Text color="muted" variant="normal">
+            {' '}
+            {`${balanceDisplayed} ${symbol}`}
+          </Text>
+        </div>
+      </div>
+      <div className="flex flex-col items-end">
+        <Text variant="normal" color="primary">{`$${fiatValue}`}</Text>
+        <Text variant="small" color={getPercentageColor(priceChangePercentage)}>
+          {priceChangePercentage.toFixed(2)}%
+        </Text>
+      </div>
+    </div>
+  )
+}

package/src/components/CollectibleTileImage.tsx

@@ -0,0 +1,14 @@
+import { Card, Image } from '@0xsequence/design-system'
+import React from 'react'
+
+interface CollectibleTileImageProps {
+  imageUrl?: string
+}
+
+export const CollectibleTileImage = ({ imageUrl }: CollectibleTileImageProps) => {
+  return (
+    <Card className="flex p-0 aspect-square justify-center items-center overflow-hidden rounded-lg bg-background-secondary">
+      <Image style={{ height: '100%' }} src={imageUrl} />
+    </Card>
+  )
+}

package/src/components/CopyButton.tsx

@@ -0,0 +1,41 @@
+import { Button, CopyIcon, CheckmarkIcon } from '@0xsequence/design-system'
+import React, { useEffect, useState, ComponentProps } from 'react'
+import { CopyToClipboard } from 'react-copy-to-clipboard'
+
+type ButtonProps = ComponentProps<typeof Button>
+
+interface CopyButtonProps extends ButtonProps {
+  text: string
+  buttonVariant: 'icon' | 'with-label'
+}
+
+export const CopyButton = (props: CopyButtonProps) => {
+  const { buttonVariant = 'icon', text, size = 'xs', ...rest } = props
+  const [isCopied, setCopy] = useState(false)
+
+  useEffect(() => {
+    if (isCopied) {
+      setTimeout(() => {
+        setCopy(false)
+      }, 4000)
+    }
+  }, [isCopied])
+
+  const handleCopy = () => {
+    setCopy(true)
+  }
+
+  const label = isCopied ? 'Copied!' : 'Copy'
+
+  return (
+    <CopyToClipboard text={text} onCopy={handleCopy}>
+      <Button
+        size={size!}
+        leftIcon={isCopied ? CheckmarkIcon : CopyIcon}
+        label={buttonVariant === 'with-label' ? label : undefined}
+        variant={buttonVariant === 'icon' ? 'ghost' : 'glass'}
+        {...rest}
+      />
+    </CopyToClipboard>
+  )
+}

package/src/components/DefaultIcon.tsx

@@ -0,0 +1,22 @@
+import { Text } from '@0xsequence/design-system'
+import React from 'react'
+
+interface DefaultIconProps {
+  size?: number
+}
+
+export const DefaultIcon = ({ size = 30 }: DefaultIconProps) => {
+  return (
+    <div
+      className="flex items-center justify-center rounded-full bg-background-inverse shrink-0"
+      style={{
+        width: `${size}px`,
+        height: `${size}px`
+      }}
+    >
+      <Text variant="large" color="inverse">
+        ?
+      </Text>
+    </div>
+  )
+}

package/src/components/FeeOptionSelector.tsx

@@ -0,0 +1,133 @@
+import { cn, Text, TokenImage } from '@0xsequence/design-system'
+import React from 'react'
+import { formatUnits, parseUnits, zeroAddress } from 'viem'
+
+import { Alert, AlertProps } from './Alert'
+
+export interface FeeOption {
+  token: FeeToken
+  to: string
+  value: string
+  gasLimit: number
+}
+export interface FeeToken {
+  chainId: number
+  name: string
+  symbol: string
+  decimals?: number
+  logoURL: string
+  contractAddress?: string
+  tokenID?: string
+}
+
+export interface FeeOptionBalance {
+  tokenName: string
+  decimals: number
+  balance: string
+}
+
+export interface FeeOptionSelectorProps {
+  txnFeeOptions: FeeOption[]
+  feeOptionBalances: FeeOptionBalance[]
+  selectedFeeOptionAddress: string | undefined
+  setSelectedFeeOptionAddress: (address: string) => void
+}
+
+const isBalanceSufficient = (balance: string, fee: string, decimals: number) => {
+  const balanceBN = parseUnits(balance, decimals)
+  const feeBN = parseUnits(fee, decimals)
+  return balanceBN >= feeBN
+}
+
+export const FeeOptionSelector: React.FC<FeeOptionSelectorProps> = ({
+  txnFeeOptions,
+  feeOptionBalances,
+  selectedFeeOptionAddress,
+  setSelectedFeeOptionAddress
+}) => {
+  const [feeOptionAlert, setFeeOptionAlert] = React.useState<AlertProps | undefined>()
+
+  const sortedOptions = [...txnFeeOptions].sort((a, b) => {
+    const balanceA = feeOptionBalances.find(balance => balance.tokenName === a.token.name)
+    const balanceB = feeOptionBalances.find(balance => balance.tokenName === b.token.name)
+    const isSufficientA = balanceA ? isBalanceSufficient(balanceA.balance, a.value, a.token.decimals || 0) : false
+    const isSufficientB = balanceB ? isBalanceSufficient(balanceB.balance, b.value, b.token.decimals || 0) : false
+    return isSufficientA === isSufficientB ? 0 : isSufficientA ? -1 : 1
+  })
+
+  return (
+    <div className="mt-3 w-full">
+      <Text variant="normal" color="primary" fontWeight="bold">
+        Select a fee option
+      </Text>
+      <div className="flex flex-col mt-2 gap-2">
+        {sortedOptions.map((option, index) => {
+          const isSelected = selectedFeeOptionAddress === (option.token.contractAddress ?? zeroAddress)
+          const balance = feeOptionBalances.find(b => b.tokenName === option.token.name)
+          const isSufficient = isBalanceSufficient(balance?.balance || '0', option.value, option.token.decimals || 0)
+          return (
+            <div
+              className={cn(
+                'px-3 py-2 rounded-xl border-2 border-solid bg-background-raised',
+                isSelected ? 'border-border-focus' : 'border-transparent'
+              )}
+              key={index}
+              onClick={() => {
+                if (isSufficient) {
+                  setSelectedFeeOptionAddress(option.token.contractAddress ?? zeroAddress)
+                  setFeeOptionAlert(undefined)
+                } else {
+                  setFeeOptionAlert({
+                    title: `Insufficient ${option.token.name} balance`,
+                    description: `Please select another fee option or add funds to your wallet.`,
+                    variant: 'warning'
+                  })
+                }
+              }}
+            >
+              <div className="flex flex-row justify-between items-center">
+                <div className="flex flex-row items-center gap-2">
+                  <TokenImage src={option.token.logoURL} symbol={option.token.name} />
+                  <div className="flex flex-col">
+                    <Text variant="small" color="primary" fontWeight="bold">
+                      {option.token.name}
+                    </Text>
+                    <Text variant="xsmall" color="secondary">
+                      Fee:{' '}
+                      {parseFloat(formatUnits(BigInt(option.value), option.token.decimals || 0)).toLocaleString(undefined, {
+                        maximumFractionDigits: 6
+                      })}
+                    </Text>
+                  </div>
+                </div>
+                <div className="flex flex-col items-end">
+                  <Text variant="xsmall" color="secondary">
+                    Balance:
+                  </Text>
+                  <Text variant="xsmall" color="primary">
+                    {parseFloat(formatUnits(BigInt(balance?.balance || '0'), option.token.decimals || 0)).toLocaleString(
+                      undefined,
+                      { maximumFractionDigits: 6 }
+                    )}
+                  </Text>
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+      <div className="flex mt-3 items-end justify-center flex-col">
+        {feeOptionAlert && (
+          <div className="mt-3">
+            <Alert
+              title={feeOptionAlert.title}
+              description={feeOptionAlert.description}
+              secondaryDescription={feeOptionAlert.secondaryDescription}
+              variant={feeOptionAlert.variant}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/InfiniteScroll.tsx

@@ -0,0 +1,56 @@
+import React, { RefObject, PropsWithChildren, useEffect, useRef, useState, useMemo } from 'react'
+
+export const useIntersectionObserver = (ref: RefObject<Element | null>, options?: IntersectionObserverInit) => {
+  const [entry, setEntry] = useState<IntersectionObserverEntry | null>(null)
+  const observer = useMemo(() => new IntersectionObserver(([entry]) => setEntry(entry), options), [])
+
+  useEffect(() => {
+    if (ref.current) {
+      observer.observe(ref.current)
+    }
+
+    return () => {
+      if (ref.current) {
+        observer.disconnect()
+      }
+    }
+  }, [ref.current, observer])
+
+  return entry?.isIntersecting ?? false
+}
+
+interface InfiniteScrollProps {
+  onLoad: (pageNumber: number) => Promise<any>
+  hasMore?: boolean
+}
+
+export const InfiniteScroll = (props: PropsWithChildren<InfiniteScrollProps>) => {
+  const { onLoad, hasMore = true, children } = props
+
+  const [pageNumber, setPageNumber] = useState(0)
+  const [isLoading, setLoading] = useState(false)
+  const bottomRef = useRef<HTMLDivElement>(null)
+  const isBottom = useIntersectionObserver(bottomRef)
+
+  useEffect(() => {
+    if (isBottom && hasMore && !isLoading) {
+      handleLoad()
+    }
+  }, [isBottom])
+
+  const handleLoad = async () => {
+    setLoading(true)
+
+    await onLoad(pageNumber)
+
+    setPageNumber(pageNumber => pageNumber + 1)
+    setLoading(false)
+  }
+
+  return (
+    <>
+      {children}
+      <div ref={bottomRef} />
+    </>
+  )
+}

package/src/components/Loader.tsx

@@ -0,0 +1,12 @@
+import { Spinner } from '@0xsequence/design-system'
+import React from 'react'
+
+export const Loader = () => {
+  return (
+    <div className="flex flex-col justify-center items-center gap-6 mt-4">
+      <div>
+        <Spinner size="lg" />
+      </div>
+    </div>
+  )
+}

package/src/components/NavigationHeader/index.tsx

@@ -0,0 +1,59 @@
+import { IconButton, ChevronLeftIcon, Text, ModalPrimitive } from '@0xsequence/design-system'
+
+import { HEADER_HEIGHT } from '../../constants'
+import { useNavigationContext } from '../../contexts/Navigation'
+import { useNavigation } from '../../hooks/useNavigation'
+
+interface NavigationHeaderProps {
+  primaryText?: string
+  secondaryText?: string
+}
+
+export const NavigationHeader = ({ secondaryText, primaryText }: NavigationHeaderProps) => {
+  const { goBack, history } = useNavigation()
+  const { isBackButtonEnabled } = useNavigationContext()
+
+  const onClickBack = () => {
+    if (!isBackButtonEnabled) {
+      return
+    }
+    goBack()
+  }
+
+  return (
+    <div
+      className="flex bg-background-primary z-20 fixed w-full flex-row items-center justify-between px-4"
+      style={{
+        height: HEADER_HEIGHT,
+        paddingTop: '6px'
+      }}
+    >
+      {history.length > 0 ? (
+        <IconButton
+          onClick={onClickBack}
+          icon={ChevronLeftIcon}
+          size="xs"
+          disabled={!isBackButtonEnabled}
+          style={{ opacity: isBackButtonEnabled ? 1 : 0.5 }}
+        />
+      ) : (
+        <div />
+      )}
+      <div>
+        <Text fontWeight="medium" variant="small" color="muted">
+          {secondaryText}
+        </Text>
+        <ModalPrimitive.Title asChild>
+          <Text fontWeight="medium" variant="small" color="primary">
+            {primaryText}
+          </Text>
+        </ModalPrimitive.Title>
+      </div>
+      <div
+        style={{
+          width: '44px'
+        }}
+      />
+    </div>
+  )
+}