# Sequence diagram for updated crypto checkout balance and swap checks

[Dargon789]

Reviewer's Guide

Bumps the Sequence Web SDK packages from 5.4.3 to 5.4.8 with corresponding sequence.js dependency/peer updates, adjusts swap route/quote and linked-wallet hooks to the latest API request types and parameter shapes, fixes checkout free-item and insufficient-balance logic using BigInt, updates Sequence logo coloring to use CSS variables, and tweaks workspace release configuration.

Sequence diagram for updated crypto checkout balance and swap checks

sequenceDiagram
  actor User
  participant PayWithCryptoTab
  participant useInitialBalanceCheck
  participant useGetSwapRoutes
  participant SequenceAPIClient

  User->>PayWithCryptoTab: Open crypto payment tab
  PayWithCryptoTab->>PayWithCryptoTab: Compute price
  PayWithCryptoTab->>PayWithCryptoTab: isFree = BigInt(price) === 0n
  PayWithCryptoTab->>PayWithCryptoTab: userBalance = BigInt(tokenBalance.balance || '0')
  PayWithCryptoTab->>PayWithCryptoTab: requiredBalance = BigInt(selectedCurrencyPrice)
  PayWithCryptoTab->>PayWithCryptoTab: isInsufficientBalance = !isFree && userBalance < requiredBalance

  PayWithCryptoTab->>useInitialBalanceCheck: useInitialBalanceCheck({ userAddress, buyCurrencyAddress, price, chainId, isInsufficientBalance, tokenBalancesIsLoading })
  useInitialBalanceCheck->>useInitialBalanceCheck: isFree = BigInt(price) === 0n
  alt Free item (isFree === true)
    useInitialBalanceCheck->>useInitialBalanceCheck: Disable initial balance and swap route checks
  else Paid item and insufficient balance
    useInitialBalanceCheck->>useInitialBalanceCheck: Trigger insufficient balance check query
    useInitialBalanceCheck->>useGetSwapRoutes: useGetSwapRoutes({ chainId, walletAddress, toTokenAddress, toTokenAmount })
    useGetSwapRoutes->>SequenceAPIClient: getLifiSwapRoutes({ params: { direction, chainId, walletAddress, tokenAddress, tokenAmount } })
    SequenceAPIClient-->>useGetSwapRoutes: routes
    useGetSwapRoutes-->>useInitialBalanceCheck: swap routes result
  end

  useInitialBalanceCheck-->>PayWithCryptoTab: Update navigation params.isInitialBalanceChecked
  PayWithCryptoTab-->>User: Show pay, top-up, or swap options based on balance and routes

Loading

Class diagram for updated swap, quote, and linked-wallet hooks

classDiagram
  class SequenceAPIClient {
    +getLifiSwapRoutes(request GetLifiSwapRoutesRequest) Promise~GetLifiSwapRoutesResponse~
    +getLifiSwapQuote(request GetLifiSwapQuoteRequest) Promise~GetLifiSwapQuoteResponse~
    +getLinkedWallets(request GetLinkedWalletsRequest, headers object, signal AbortSignal) Promise~LinkedWallet[]~
  }

  class GetSwapRoutesArgs {
    +number chainId
    +string walletAddress
    +string toTokenAddress
    +string toTokenAmount
  }

  class UseGetSwapRoutesArgs {
    +number chainId
    +string walletAddress
    +string toTokenAddress
    +string toTokenAmount
  }

  class LifiSwapRoute {
    +string id
    +string fromToken
    +string toToken
    +string toAmount
  }

  class GetLifiSwapRoutesRequest {
    +GetLifiSwapRouteDirection direction
    +number chainId
    +string walletAddress
    +string tokenAddress
    +string tokenAmount
  }

  class GetLifiSwapRoutesResponse {
    +LifiSwapRoute[] routes
  }

  class GetLifiSwapQuoteRequest {
    +number chainId
    +string fromTokenAddress
    +string toTokenAddress
    +string fromTokenAmount
    +string walletAddress
  }

  class GetLifiSwapQuoteResponse {
    +string estimatedToTokenAmount
    +string feeAmount
  }

  class LinkedWallet {
    +string walletAddress
    +number chainId
  }

  class GetLinkedWalletsRequest {
    +string parentWalletAddress
    +number signatureChainId
  }

  class useGetSwapRoutesHook {
    +useGetSwapRoutes(args UseGetSwapRoutesArgs, options HooksOptions) QueryResult~LifiSwapRoute[]~
  }

  class useGetSwapQuoteHook {
    +useGetSwapQuote(args GetLifiSwapQuoteRequest, options HooksOptions) QueryResult~GetLifiSwapQuoteResponse~
  }

  class useLinkedWalletsHook {
    +useLinkedWallets(args GetLinkedWalletsRequest, options UseLinkedWalletsOptions) UseLinkedWalletsResult
  }

  SequenceAPIClient --> GetLifiSwapRoutesRequest
  SequenceAPIClient --> GetLifiSwapRoutesResponse
  SequenceAPIClient --> GetLifiSwapQuoteRequest
  SequenceAPIClient --> GetLifiSwapQuoteResponse
  SequenceAPIClient --> GetLinkedWalletsRequest
  SequenceAPIClient --> LinkedWallet

  useGetSwapRoutesHook --> SequenceAPIClient
  useGetSwapRoutesHook --> UseGetSwapRoutesArgs
  UseGetSwapRoutesArgs --> GetSwapRoutesArgs

  useGetSwapQuoteHook --> SequenceAPIClient
  useGetSwapQuoteHook --> GetLifiSwapQuoteRequest

  useLinkedWalletsHook --> SequenceAPIClient
  useLinkedWalletsHook --> GetLinkedWalletsRequest
  useLinkedWalletsHook --> LinkedWallet

Loading

Class diagram for connect exports including new metaMask connector

classDiagram
  class ConnectIndex {
    +sequence(options SequenceOptions) Connector
    +twitch(options TwitchOptions) Connector
    +walletConnect(options WalletConnectOptions) Connector
    +ecosystemWallet(options EcosystemWalletOptions) Connector
    +sequenceWaasWallet(options SequenceWaasWalletOptions) Connector
    +mock() Connector
    +metaMask() Connector
  }

  class metaMaskConnector {
    +metaMask() Connector
  }

  class sequenceConnector {
    +sequence(options SequenceOptions) Connector
  }

  class walletConnectConnector {
    +walletConnect(options WalletConnectOptions) Connector
  }

  class twitchConnector {
    +twitch(options TwitchOptions) Connector
  }

  class ecosystemWalletConnector {
    +ecosystemWallet(options EcosystemWalletOptions) Connector
  }

  class sequenceWaasWalletConnector {
    +sequenceWaasWallet(options SequenceWaasWalletOptions) Connector
  }

  class mockConnector {
    +mock() Connector
  }

  ConnectIndex --> metaMaskConnector
  ConnectIndex --> sequenceConnector
  ConnectIndex --> walletConnectConnector
  ConnectIndex --> twitchConnector
  ConnectIndex --> ecosystemWalletConnector
  ConnectIndex --> sequenceWaasWalletConnector
  ConnectIndex --> mockConnector

Loading

File-Level Changes

Change	Details	Files
Upgrade Web SDK packages and their sequence.js-related dependencies/peers from 5.4.3/2.3.23 to 5.4.8/2.3.38 and record the changes in changelogs.	Bump versions of @0xsequence/connect, @0xsequence/hooks, @0xsequence/checkout, @0xsequence/wallet-widget, and @0xsequence/immutable-connector from 5.4.3 to 5.4.8. Update peerDependencies and devDependencies across packages and example apps to require 0xsequence and @0xsequence/* libraries at >= or ^2.3.38 instead of 2.3.23. Add 5.4.4–5.4.8 patch entries in each package CHANGELOG documenting dependency upgrades and small fixes. Update WEB_SDK_VERSION constant in connect to 5.4.8.	packages/connect/package.json packages/hooks/package.json packages/checkout/package.json packages/wallet-widget/package.json packages/immutable-connector/package.json examples/next/package.json examples/react/package.json packages/wallet-widget/CHANGELOG.md packages/checkout/CHANGELOG.md packages/connect/CHANGELOG.md packages/immutable-connector/CHANGELOG.md packages/hooks/CHANGELOG.md packages/connect/src/constants/version.ts pnpm-lock.yaml
Align hook types and API client calls with the updated sequence.js API for swap routes, swap quotes, and linked wallets.	Introduce a GetSwapRoutesArgs interface and change getSwapRoutes to call apiClient.getLifiSwapRoutes with the new params object including direction, chainId, walletAddress, tokenAddress, and tokenAmount. Update useGetSwapQuote to accept GetLifiSwapQuoteRequest instead of GetLifiSwapQuoteArgs. Update useWallets and its helpers to use GetLinkedWalletsRequest instead of GetLinkedWalletsArgs for storage keys and API calls.	packages/hooks/src/hooks/Combination/useGetSwapRoutes.ts packages/hooks/src/hooks/Combination/useGetSwapQuote.ts packages/connect/src/hooks/useWallets.ts
Improve checkout crypto payment balance and free-item handling using BigInt and skip unnecessary balance checks for free purchases.	Change isFree computation in PayWithCrypto to compare BigInt(price) to 0n. Refactor balance comparison to compute userBalance and requiredBalance as BigInt and derive isInsufficientBalance as a simple comparison guarded by !isFree. In useInitialBalanceCheck, derive isFree from price using BigInt and disable both balance and swap-routes queries when the item is free, in addition to existing insufficient balance and loading checks.	packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.tsx packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/useInitialBalanceCheck.tsx
Update Sequence connector logos to use themeable CSS variable-based colors instead of hard-coded purple.	Change SVG path fill values from "#7C3AED" to "var(--seq-color-primary)" in the connect SequenceLogo component. Apply the same fill color change to the wallet-widget SequenceLogo component.	packages/connect/src/connectors/sequence/SequenceLogo.tsx packages/wallet-widget/src/components/ConnectorLogos/SequenceLogo.tsx
Expose the MetaMask connector from the connect package public API.	Export metaMask from ./connectors/metaMask/metaMask.js in the top-level @0xsequence/connect index file so consumers can import it directly.	packages/connect/src/index.ts
Adjust pnpm workspace release configuration to allow immediate releases for certain scoped packages.	Keep minimumReleaseAge at 20160 but document via a comment that changing it is forbidden. Introduce minimumReleaseAgeExclude to exempt @0xsequence/, @0xtrails/, 0xtrails, and 0xsequence from the minimum release age constraint.	pnpm-workspace.yaml

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

Originally posted by @sourcery-ai[bot] in #241 (comment)