From 3bf4cfbfc410df6ceed4bfe8b88b87fe9021fd7c Mon Sep 17 00:00:00 2001 From: HerringtonDarkholme <2883231+HerringtonDarkholme@users.noreply.github.com> Date: Sat, 27 Jun 2026 14:44:23 -0400 Subject: [PATCH 1/3] refactor(sdk): convert convertViemChainToRelayChain to function declaration --- .changeset/convert-viem-chain-fn-declaration.md | 5 +++++ packages/sdk/src/utils/chain.ts | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) create mode 100644 .changeset/convert-viem-chain-fn-declaration.md diff --git a/.changeset/convert-viem-chain-fn-declaration.md b/.changeset/convert-viem-chain-fn-declaration.md new file mode 100644 index 000000000..26e267198 --- /dev/null +++ b/.changeset/convert-viem-chain-fn-declaration.md @@ -0,0 +1,5 @@ +--- +'@relayprotocol/relay-sdk': patch +--- + +Convert `convertViemChainToRelayChain` from an arrow function to a function declaration (no behavior change). diff --git a/packages/sdk/src/utils/chain.ts b/packages/sdk/src/utils/chain.ts index b3876af03..eddb40bac 100644 --- a/packages/sdk/src/utils/chain.ts +++ b/packages/sdk/src/utils/chain.ts @@ -8,9 +8,9 @@ export type RelayAPIChain = Required< >['0'] > -export const convertViemChainToRelayChain = ( +export function convertViemChainToRelayChain( chain: Chain -): RelayChain & Required> => { +): RelayChain & Required> { return { id: chain.id, name: chain.name.replace(' ', '-'), From 1100992fc69aa30a57d7c1ffd63a109297828789 Mon Sep 17 00:00:00 2001 From: HerringtonDarkholme <2883231+HerringtonDarkholme@users.noreply.github.com> Date: Mon, 29 Jun 2026 12:21:21 -0400 Subject: [PATCH 2/3] refactor: convert exported arrow consts to function declarations Replace `export const foo = (...) => {...}` with `export function foo(...) {...}` across all packages (sdk, ui, hooks, wallet adapters). Typed React components (`FC`) move the prop type onto the parameter and drop the now-unused FC import. Co-Authored-By: Claude Opus 4.8 (1M context) --- packages/hooks/src/fetcher.ts | 4 +- .../src/adapter.ts | 4 +- .../src/adapter.ts | 4 +- .../src/adapter.ts | 4 +- .../relay-svm-wallet-adapter/src/adapter.ts | 4 +- .../relay-tron-wallet-adapter/src/adapter.ts | 4 +- .../sdk/src/chain-utils/configureViemChain.ts | 4 +- .../sdk/src/chain-utils/fetchChainConfigs.ts | 5 +- packages/sdk/src/constants/address.ts | 4 +- packages/sdk/src/utils/getCurrentStepData.ts | 2 +- packages/sdk/src/utils/getTenderlyDetails.ts | 4 +- packages/sdk/src/utils/logger.ts | 2 +- packages/sdk/src/utils/viemWallet.ts | 4 +- packages/sdk/src/utils/websocket.ts | 2 +- .../src/components/common/BalanceDisplay.tsx | 5 +- .../src/components/common/CopyToClipBoard.tsx | 4 +- .../components/common/CustomAddressModal.tsx | 10 ++-- .../src/components/common/LoadingSpinner.tsx | 2 +- .../components/common/MultiWalletDropdown.tsx | 36 +++++++----- .../components/common/PercentageButtons.tsx | 5 +- .../common/SlippageToleranceConfig.tsx | 23 +++++--- .../ui/src/components/common/StepIcon.tsx | 7 +-- .../common/TokenSelector/ChainFilterRow.tsx | 9 +-- .../TokenSelector/ChainFilterSidebar.tsx | 50 +++++++++++------ .../common/TokenSelector/ChainShortcuts.tsx | 4 +- .../TokenSelector/CompactChainFilter.tsx | 16 ++++-- .../TokenSelector/MobileChainSelector.tsx | 24 +++----- .../common/TokenSelector/PaymentTokenList.tsx | 10 ++-- .../common/TokenSelector/SuggestedTokens.tsx | 5 +- .../common/TokenSelector/TagPill.tsx | 3 +- .../common/TokenSelector/TokenList.tsx | 10 ++-- .../triggers/PaymentMethodTrigger.tsx | 9 +-- .../TokenSelector/triggers/TokenTrigger.tsx | 5 +- .../TransactionModal/DepositAddressModal.tsx | 6 +- .../DepositAddressModalRenderer.tsx | 10 ++-- .../TransactionModal/TransactionModal.tsx | 4 +- .../TransactionModalRenderer.tsx | 5 +- .../steps/ApprovalPlusSwapStep.tsx | 9 +-- .../TransactionModal/steps/ErrorStep.tsx | 5 +- .../steps/SwapConfirmationStep.tsx | 55 +++++++----------- .../steps/SwapSuccessStep.tsx | 33 +++++------ .../steps/TransactionsByChain.tsx | 6 +- .../steps/WaitingForDepositStep.tsx | 17 +++--- .../common/UnverifiedTokenModal.tsx | 5 +- .../components/primitives/AccessibleList.tsx | 6 +- .../components/primitives/ChainTokenIcon.tsx | 5 +- .../components/primitives/SlippageButton.tsx | 5 +- .../OnrampWidget/modals/OnrampModal.tsx | 10 ++-- .../modals/steps/OnrampConfirmingStep.tsx | 18 ++---- .../modals/steps/OnrampMoonPayStep.tsx | 16 ++---- .../modals/steps/OnrampProcessingStepUI.tsx | 56 ++++++++----------- .../modals/steps/OnrampSuccessStep.tsx | 10 +--- .../components/widgets/PriceImpactTooltip.tsx | 16 +++--- .../components/widgets/WidgetErrorWell.tsx | 5 +- packages/ui/src/constants/address.ts | 2 +- .../ui/src/hooks/useEnhancedTokensList.ts | 4 +- .../ui/src/hooks/useHyperliquidAccountMode.ts | 5 +- .../ui/src/hooks/useInternalRelayChains.ts | 2 +- .../ui/src/hooks/useMultiWalletBalances.ts | 4 +- .../ui/src/hooks/widget/useSwapButtonCta.ts | 4 +- packages/ui/src/icons/ArrowLeftToLine.tsx | 4 +- packages/ui/src/icons/ArrowRightFromLine.tsx | 4 +- packages/ui/src/icons/FileSignature.tsx | 4 +- packages/ui/src/icons/RelayIcon.tsx | 4 +- packages/ui/src/icons/Shuffle.tsx | 4 +- packages/ui/src/icons/SwitchIcon.tsx | 4 +- packages/ui/src/icons/XIcon.tsx | 4 +- packages/ui/src/img/AllChainsLogo.tsx | 2 +- packages/ui/src/img/MoonPayLogo.tsx | 2 +- packages/ui/src/img/ReservoirText.tsx | 2 +- packages/ui/src/utils/address.ts | 16 +++--- packages/ui/src/utils/browser.ts | 11 ++-- packages/ui/src/utils/errors.ts | 4 +- packages/ui/src/utils/fetcher.ts | 2 +- .../ui/src/utils/getTxBlockExplorerUrl.ts | 4 +- packages/ui/src/utils/localStorage.ts | 2 +- packages/ui/src/utils/moonPay.ts | 4 +- packages/ui/src/utils/nativeMaxAmount.ts | 12 ++-- packages/ui/src/utils/qrcode.ts | 4 +- packages/ui/src/utils/quote.ts | 42 +++++++------- packages/ui/src/utils/relayTransaction.ts | 12 ++-- packages/ui/src/utils/slippage.ts | 2 +- packages/ui/src/utils/steps.ts | 4 +- packages/ui/src/utils/theme.ts | 12 +++- packages/ui/src/utils/time.ts | 8 +-- packages/ui/src/utils/tokenSelector.ts | 14 ++--- packages/ui/src/utils/tokens.ts | 28 ++++++---- 87 files changed, 398 insertions(+), 428 deletions(-) diff --git a/packages/hooks/src/fetcher.ts b/packages/hooks/src/fetcher.ts index 917ae770c..4545fd19e 100644 --- a/packages/hooks/src/fetcher.ts +++ b/packages/hooks/src/fetcher.ts @@ -13,11 +13,11 @@ const fetcher = async (url: string, headers?: HeadersInit) => { export default fetcher -export const axiosPostFetcher = async ( +export async function axiosPostFetcher( url: string, params: any, config?: AxiosRequestConfig -) => { +) { const { data } = await axios.post(url, params, config) return data } diff --git a/packages/relay-bitcoin-wallet-adapter/src/adapter.ts b/packages/relay-bitcoin-wallet-adapter/src/adapter.ts index abc415115..f6c92105a 100644 --- a/packages/relay-bitcoin-wallet-adapter/src/adapter.ts +++ b/packages/relay-bitcoin-wallet-adapter/src/adapter.ts @@ -15,7 +15,7 @@ type DynamicSignPsbtParams = { }> } -export const adaptBitcoinWallet = ( +export function adaptBitcoinWallet( walletAddress: string, signPsbt: ( address: string, @@ -23,7 +23,7 @@ export const adaptBitcoinWallet = ( dynamicParams: DynamicSignPsbtParams ) => Promise, publicKey?: string -): AdaptedWallet => { +): AdaptedWallet { return { vmType: 'bvm', getChainId: async () => { diff --git a/packages/relay-ethers-wallet-adapter/src/adapter.ts b/packages/relay-ethers-wallet-adapter/src/adapter.ts index b6c1bc38d..395065a96 100644 --- a/packages/relay-ethers-wallet-adapter/src/adapter.ts +++ b/packages/relay-ethers-wallet-adapter/src/adapter.ts @@ -16,10 +16,10 @@ import { type HttpTransport } from 'viem' -export const adaptEthersSigner = ( +export function adaptEthersSigner( signer: Signer, transport?: CustomTransport | HttpTransport -): AdaptedWallet => { +): AdaptedWallet { return { vmType: 'evm', transport, diff --git a/packages/relay-lighter-wallet-adapter/src/adapter.ts b/packages/relay-lighter-wallet-adapter/src/adapter.ts index f2b496202..f5e2d4a02 100644 --- a/packages/relay-lighter-wallet-adapter/src/adapter.ts +++ b/packages/relay-lighter-wallet-adapter/src/adapter.ts @@ -327,9 +327,9 @@ export type AdaptLighterWalletOptions = * dependency on `@relay-protocol/lighter-ts-sdk`. * */ -export const adaptLighterWallet = ( +export function adaptLighterWallet( options: AdaptLighterWalletOptions -): AdaptedWallet => { +): AdaptedWallet { const { l1Address, signL1Message, diff --git a/packages/relay-svm-wallet-adapter/src/adapter.ts b/packages/relay-svm-wallet-adapter/src/adapter.ts index fc2b17e9c..9a801a31d 100644 --- a/packages/relay-svm-wallet-adapter/src/adapter.ts +++ b/packages/relay-svm-wallet-adapter/src/adapter.ts @@ -38,7 +38,7 @@ const assertBase58TransactionSignature = ( * @param payerKey - Optional public key of the account that will pay for transaction fees (defaults to walletAddress) * @returns An AdaptedWallet object that conforms to the Relay SDK interface */ -export const adaptSolanaWallet = ( +export function adaptSolanaWallet( walletAddress: string, chainId: number, connection: Connection, @@ -51,7 +51,7 @@ export const adaptSolanaWallet = ( signature: TransactionSignature }>, payerKey?: string -): AdaptedWallet => { +): AdaptedWallet { let _chainId = chainId const getChainId = async () => { return _chainId diff --git a/packages/relay-tron-wallet-adapter/src/adapter.ts b/packages/relay-tron-wallet-adapter/src/adapter.ts index e920af3c9..c2af29b60 100644 --- a/packages/relay-tron-wallet-adapter/src/adapter.ts +++ b/packages/relay-tron-wallet-adapter/src/adapter.ts @@ -12,10 +12,10 @@ import type { TriggerSmartContractResponse } from './types.js' * @param tronWeb - The TronWeb instance for interacting with the Tron network * @returns An AdaptedWallet object that conforms to the Relay SDK interface */ -export const adaptTronWallet = ( +export function adaptTronWallet( walletAddress: string, tronWeb: TronWeb -): AdaptedWallet => { +): AdaptedWallet { const getChainId = async () => { return 728126428 } diff --git a/packages/sdk/src/chain-utils/configureViemChain.ts b/packages/sdk/src/chain-utils/configureViemChain.ts index 3ef4dccd6..09ca7c1f9 100644 --- a/packages/sdk/src/chain-utils/configureViemChain.ts +++ b/packages/sdk/src/chain-utils/configureViemChain.ts @@ -17,9 +17,9 @@ const viemChainMap = Object.values(viemChains).reduce( {} as Record ) -export const configureViemChain = ( +export function configureViemChain( chain: RelayAPIChain -): RelayChain & Required> => { +): RelayChain & Required> { let viemChain: Chain const overriddenChains = [999, 1337] const staticChain = overriddenChains.includes(chain.id) diff --git a/packages/sdk/src/chain-utils/fetchChainConfigs.ts b/packages/sdk/src/chain-utils/fetchChainConfigs.ts index 8231b0fcf..2c245cde7 100644 --- a/packages/sdk/src/chain-utils/fetchChainConfigs.ts +++ b/packages/sdk/src/chain-utils/fetchChainConfigs.ts @@ -3,11 +3,11 @@ import type { RelayChain } from '../types/index.js' import { axios } from '../utils/axios.js' import { isRelayApiUrl } from '../utils/apiKey.js' -export const fetchChainConfigs = async ( +export async function fetchChainConfigs( baseApiUrl: string, referrer?: string, apiKey?: string -): Promise => { +): Promise { let queryString = '' if (referrer) { const queryParams = new URLSearchParams() @@ -28,4 +28,3 @@ export const fetchChainConfigs = async ( } throw 'No Chain Data' } - diff --git a/packages/sdk/src/constants/address.ts b/packages/sdk/src/constants/address.ts index cf5f300ee..c8d8c1a30 100644 --- a/packages/sdk/src/constants/address.ts +++ b/packages/sdk/src/constants/address.ts @@ -15,7 +15,7 @@ export const tonDeadAddress = const eclipseId = 9286185 const zeroChainId = 543210 -export const getDeadAddress = (vmType?: ChainVM, chainId?: number) => { +export function getDeadAddress(vmType?: ChainVM, chainId?: number) { if (vmType === 'svm') { return chainId === eclipseId ? eclipseDeadAddress : solDeadAddress } else if (vmType === 'bvm') { @@ -31,7 +31,7 @@ export const getDeadAddress = (vmType?: ChainVM, chainId?: number) => { } } -export const isDeadAddress = (address?: string) => { +export function isDeadAddress(address?: string) { if (!address) { return false } diff --git a/packages/sdk/src/utils/getCurrentStepData.ts b/packages/sdk/src/utils/getCurrentStepData.ts index b0bcb75e0..e31cbc7e0 100644 --- a/packages/sdk/src/utils/getCurrentStepData.ts +++ b/packages/sdk/src/utils/getCurrentStepData.ts @@ -1,6 +1,6 @@ import type { Execute } from '../types/index.js' -export const getCurrentStepData = (steps: Execute['steps']) => { +export function getCurrentStepData(steps: Execute['steps']) { let currentStep: NonNullable['0'] | null = null let currentStepItem: NonNullable[0] | undefined let txHashes: { txHash: string; chainId: number }[] = [] diff --git a/packages/sdk/src/utils/getTenderlyDetails.ts b/packages/sdk/src/utils/getTenderlyDetails.ts index 0cd104dac..0a15c0b14 100644 --- a/packages/sdk/src/utils/getTenderlyDetails.ts +++ b/packages/sdk/src/utils/getTenderlyDetails.ts @@ -5,10 +5,10 @@ export type TenderlyErrorInfo = { error?: string } -export const getTenderlyDetails = ( +export function getTenderlyDetails( chainId: number, txHash: string -): Promise => { +): Promise { return new Promise((resolve) => { axios .get( diff --git a/packages/sdk/src/utils/logger.ts b/packages/sdk/src/utils/logger.ts index a05faf5fd..34282457e 100644 --- a/packages/sdk/src/utils/logger.ts +++ b/packages/sdk/src/utils/logger.ts @@ -6,7 +6,7 @@ export enum LogLevel { None = 0 } -export const log = (params: any[], level: LogLevel, currentLevel: LogLevel) => { +export function log(params: any[], level: LogLevel, currentLevel: LogLevel) { if (currentLevel >= level) { const data = params.reduce((params, param, i) => { if ((i + 1) % 2) { diff --git a/packages/sdk/src/utils/viemWallet.ts b/packages/sdk/src/utils/viemWallet.ts index 3cd8f4c28..2faa80a6c 100644 --- a/packages/sdk/src/utils/viemWallet.ts +++ b/packages/sdk/src/utils/viemWallet.ts @@ -44,10 +44,10 @@ export type AdaptViemWalletOptions = { disableCapabilitiesCheck?: boolean } -export const adaptViemWallet = ( +export function adaptViemWallet( wallet: WalletClient, options: AdaptViemWalletOptions = {} -): AdaptedWallet => { +): AdaptedWallet { const { disableCapabilitiesCheck } = options return { vmType: 'evm', diff --git a/packages/sdk/src/utils/websocket.ts b/packages/sdk/src/utils/websocket.ts index 93b969a55..78cd85962 100644 --- a/packages/sdk/src/utils/websocket.ts +++ b/packages/sdk/src/utils/websocket.ts @@ -28,7 +28,7 @@ export interface TrackRequestStatusOptions { } // @TODO: remove once requestId gets added to top level of quote response -export const extractDepositRequestId = (steps?: Execute['steps'] | null) => { +export function extractDepositRequestId(steps?: Execute['steps'] | null) { if (!steps?.length) return null // Find the first step that has a requestId diff --git a/packages/ui/src/components/common/BalanceDisplay.tsx b/packages/ui/src/components/common/BalanceDisplay.tsx index 9056f4517..cef083507 100644 --- a/packages/ui/src/components/common/BalanceDisplay.tsx +++ b/packages/ui/src/components/common/BalanceDisplay.tsx @@ -1,4 +1,3 @@ -import type { FC } from 'react' import { Flex, Skeleton, Text } from '../primitives/index.js' import { formatBN } from '../../utils/numbers.js' @@ -15,7 +14,7 @@ type BalanceDisplayProps = { size?: 'sm' | 'md' } -export const BalanceDisplay: FC = ({ +export function BalanceDisplay({ balance, decimals, symbol, @@ -26,7 +25,7 @@ export const BalanceDisplay: FC = ({ pending, hideBalanceLabel = false, size = 'sm' -}) => { +}: BalanceDisplayProps) { const compactBalance = Boolean( balance && decimals && balance.toString().length - decimals > 4 ) diff --git a/packages/ui/src/components/common/CopyToClipBoard.tsx b/packages/ui/src/components/common/CopyToClipBoard.tsx index fd3aef9ec..e66ad8d42 100644 --- a/packages/ui/src/components/common/CopyToClipBoard.tsx +++ b/packages/ui/src/components/common/CopyToClipBoard.tsx @@ -1,4 +1,4 @@ -import { type FC, useState } from 'react' +import { useState } from 'react' import { Button, Text } from '../primitives/index.js' import Tooltip from '../primitives/Tooltip.js' import { useCopyToClipboard } from 'usehooks-ts' @@ -10,7 +10,7 @@ type CopyToClipBoardProps = { text: string } -export const CopyToClipBoard: FC = ({ text }) => { +export function CopyToClipBoard({ text }: CopyToClipBoardProps) { const [value, copy] = useCopyToClipboard() const [isCopied, setIsCopied] = useState(false) const [open, setOpen] = useState(false) diff --git a/packages/ui/src/components/common/CustomAddressModal.tsx b/packages/ui/src/components/common/CustomAddressModal.tsx index 97a5162e7..ad081d27c 100644 --- a/packages/ui/src/components/common/CustomAddressModal.tsx +++ b/packages/ui/src/components/common/CustomAddressModal.tsx @@ -1,4 +1,4 @@ -import { type FC, useState, useEffect, useMemo, useContext } from 'react' +import { useState, useEffect, useMemo, useContext } from 'react' import { Text, Flex, Button, Input, Pill } from '../primitives/index.js' import { Modal } from '../common/Modal.js' import { type Address, isAddress } from 'viem' @@ -46,7 +46,7 @@ type Props = { onClear: () => void } -export const CustomAddressModal: FC = ({ +export function CustomAddressModal({ open, toAddress, toChain, @@ -58,7 +58,7 @@ export const CustomAddressModal: FC = ({ onOpenChange, onConfirmed, onClear -}) => { +}: Props) { const haptic = useHapticEvent() const connectedAddress = useWalletAddress(wallet, linkedWallets) const [address, setAddress] = useState('') @@ -182,9 +182,7 @@ export const CustomAddressModal: FC = ({ > To Address - + > = (props) => { ) } -export const LoadingSpinner: FC<{ className?: string }> = ({ className }) => { +export function LoadingSpinner({ className }: { className?: string }) { const providerOptionsContext = useContext(ProviderOptionsContext) if (providerOptionsContext.loader) { return ( diff --git a/packages/ui/src/components/common/MultiWalletDropdown.tsx b/packages/ui/src/components/common/MultiWalletDropdown.tsx index 47ff30f1e..f4be0afaa 100644 --- a/packages/ui/src/components/common/MultiWalletDropdown.tsx +++ b/packages/ui/src/components/common/MultiWalletDropdown.tsx @@ -1,4 +1,4 @@ -import { useContext, useMemo, useState, type FC } from 'react' +import { useContext, useMemo, useState } from 'react' import { Dropdown, DropdownMenuItem } from '../primitives/Dropdown.js' import { Box, Button, Flex, Text } from '../primitives/index.js' import type { LinkedWallet } from '../../types/index.js' @@ -32,7 +32,7 @@ type MultiWalletDropdownProps = { disableWalletFiltering?: boolean } -export const MultiWalletDropdown: FC = ({ +export function MultiWalletDropdown({ context, wallets, selectedWalletAddress, @@ -44,7 +44,7 @@ export const MultiWalletDropdown: FC = ({ onLinkNewWallet, setAddressModalOpen, disableWalletFiltering = false -}) => { +}: MultiWalletDropdownProps) { const [open, setOpen] = useState(false) const providerOptionsContext = useContext(ProviderOptionsContext) const connectorKeyOverrides = providerOptionsContext.vmConnectorKeyOverrides @@ -157,7 +157,10 @@ export const MultiWalletDropdown: FC = ({ className="relay:gap-2 relay:!px-2 relay:py-1 relay:cursor-pointer relay:flex relay:content-center" data-testid={testId} > - + {isSupportedSelectedWallet && selectedWallet?.walletLogoUrl ? ( = ({ style="subtitle2" className="relay:whitespace-nowrap relay:overflow-hidden relay:text-ellipsis" > - + {isSupportedSelectedWallet && selectedWalletAddress && selectedWalletAddress != '' @@ -191,9 +197,10 @@ export const MultiWalletDropdown: FC = ({
@@ -208,7 +215,10 @@ export const MultiWalletDropdown: FC = ({ className: 'relay:max-w-[248px] relay:p-0' }} > - + {filteredWallets.map((wallet, idx) => { return ( = ({ +export function PercentageButtons({ balance, onPercentageClick, getFeeBufferAmount, @@ -35,7 +34,7 @@ export const PercentageButtons: FC = ({ variant = 'desktop', percentages = [20, 50], buttonClassName: customButtonClassName -}) => { +}: PercentageButtonsProps) { const getExecutionBuffer = (amount: bigint) => { if (amount <= 0n) return 0n diff --git a/packages/ui/src/components/common/SlippageToleranceConfig.tsx b/packages/ui/src/components/common/SlippageToleranceConfig.tsx index d2b93ac0b..118aa12c1 100644 --- a/packages/ui/src/components/common/SlippageToleranceConfig.tsx +++ b/packages/ui/src/components/common/SlippageToleranceConfig.tsx @@ -112,9 +112,7 @@ const SlippageTabs: FC = ({ className="relay:flex relay:w-full relay:overflow-hidden relay:flex-col relay:gap-1" > {/* Mobile shortcut buttons */} - +
- + {isBitcoinOrigin || isBitcoinDestination ? `Bitcoin confirmation takes ${estimatedMinutes} minutes. Track progress on the transaction page.` : `Processing bridge, this will take ~${estimatedMinutes} ${estimatedMinutes === 1 ? 'min' : 'mins'}.`} @@ -217,7 +212,10 @@ export const SwapSuccessStep: FC = ({ {fromChain ? ( - + = ({ {toChain ? ( - + = ({ chainRadius={2.5} /> {isLoadingTransaction ? ( - + ) : ( {_fromAmountFormatted} {_fromToken.symbol} @@ -454,9 +453,7 @@ export const SwapSuccessStep: FC = ({ chainRadius={2.5} /> {isLoadingTransaction ? ( - + ) : ( {_toAmountFormatted} {_toToken.symbol} diff --git a/packages/ui/src/components/common/TransactionModal/steps/TransactionsByChain.tsx b/packages/ui/src/components/common/TransactionModal/steps/TransactionsByChain.tsx index 5a1bef454..9fe77ea99 100644 --- a/packages/ui/src/components/common/TransactionModal/steps/TransactionsByChain.tsx +++ b/packages/ui/src/components/common/TransactionModal/steps/TransactionsByChain.tsx @@ -1,4 +1,4 @@ -import { useMemo, type FC } from 'react' +import { useMemo } from 'react' import { useRelayClient } from '../../../../hooks/index.js' import type { TxHashes } from '../TransactionModalRenderer.js' import { @@ -26,14 +26,14 @@ type TransactionsByChainProps = { fillTx?: { txHash: string; chainId: number } | null } -export const TransactionsByChain: FC = ({ +export function TransactionsByChain({ allTxHashes, fromChain, toChain, refundData, isSolverStatusTimeout, fillTx -}) => { +}: TransactionsByChainProps) { const relayClient = useRelayClient() const refundChain = refundData ? relayClient?.chains.find( diff --git a/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx b/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx index 4fc7ac75c..2e32124c8 100644 --- a/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx +++ b/packages/ui/src/components/common/TransactionModal/steps/WaitingForDepositStep.tsx @@ -1,4 +1,3 @@ -import { type FC } from 'react' import { Button, ChainIcon, @@ -37,13 +36,13 @@ type WaitingForDepositStepProps = { depositAddress?: string } -export const WaitingForDepositStep: FC = ({ +export function WaitingForDepositStep({ fromToken, fromChain, fromAmountFormatted, isFetchingQuote, depositAddress -}) => { +}: WaitingForDepositStepProps) { const qrcodeUrl = generateQrWalletDeeplink( fromChain?.vmType, fromAmountFormatted, @@ -152,7 +151,13 @@ export const WaitingForDepositStep: FC = ({ boxShadow: '0px 1px 5px rgba(0,0,0,0.2)' }} > -
+
= ({ disabled={true} className="relay:text-[color:var(--relay-colors-button-disabled-color)_!important] relay:mt-2 relay:justify-center" > - + Waiting for you to transfer funds diff --git a/packages/ui/src/components/common/UnverifiedTokenModal.tsx b/packages/ui/src/components/common/UnverifiedTokenModal.tsx index f9e18e6af..e407ae110 100644 --- a/packages/ui/src/components/common/UnverifiedTokenModal.tsx +++ b/packages/ui/src/components/common/UnverifiedTokenModal.tsx @@ -1,4 +1,3 @@ -import type { FC } from 'react' import { Modal } from './Modal.js' import type { Token } from '../../types/index.js' import { Anchor, Box, Button, Flex, Text } from '../primitives/index.js' @@ -25,14 +24,14 @@ type UnverifiedTokenModalProps = { onAnalyticEvent?: (eventName: string, data?: any) => void } -export const UnverifiedTokenModal: FC = ({ +export function UnverifiedTokenModal({ open, onOpenChange, data, onAcceptToken, onDecline, onAnalyticEvent -}) => { +}: UnverifiedTokenModalProps) { const haptic = useHapticEvent() const client = useRelayClient() const chain = client?.chains?.find( diff --git a/packages/ui/src/components/primitives/AccessibleList.tsx b/packages/ui/src/components/primitives/AccessibleList.tsx index a039e383c..5742d6d04 100644 --- a/packages/ui/src/components/primitives/AccessibleList.tsx +++ b/packages/ui/src/components/primitives/AccessibleList.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, type FC } from 'react' +import React, { forwardRef } from 'react' import * as ToggleGroup from '@radix-ui/react-toggle-group' import { cn } from '../../utils/cn.js' @@ -8,11 +8,11 @@ type AccessibleListProps = { className?: string } -export const AccessibleList: FC = ({ +export function AccessibleList({ children, onSelect, className -}) => { +}: AccessibleListProps) { return ( = ({ +export function ChainTokenIcon({ chainId, tokenlogoURI, tokenSymbol, @@ -42,7 +41,7 @@ export const ChainTokenIcon: FC = ({ size = 'md', chainRadius = 4, chainIconSize -}) => { +}: ChainTokenProps) { const isValidTokenLogo = tokenlogoURI && tokenlogoURI !== 'missing.png' const dimensions = SIZES[size] const chainSize = chainIconSize ?? dimensions.chain diff --git a/packages/ui/src/components/primitives/SlippageButton.tsx b/packages/ui/src/components/primitives/SlippageButton.tsx index caccfc644..e2da6d57b 100644 --- a/packages/ui/src/components/primitives/SlippageButton.tsx +++ b/packages/ui/src/components/primitives/SlippageButton.tsx @@ -1,4 +1,3 @@ -import { type FC } from 'react' import Button from './Button.js' import Text from './Text.js' @@ -19,10 +18,10 @@ const convertBpsToPercent = (bps?: string) => { return formatted.replace(/\.0+$/, '').replace(/\.00$/, '') } -export const SlippageButton: FC = ({ +export function SlippageButton({ slippageTolerance, onOpenSlippageConfig -}) => { +}: SlippageButtonProps) { const resolvedValue = convertBpsToPercent(slippageTolerance) const displayValue = resolvedValue ? `${resolvedValue}%` : 'Auto' diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/OnrampModal.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/OnrampModal.tsx index 7f8dbe0cc..1cbbf0615 100644 --- a/packages/ui/src/components/widgets/OnrampWidget/modals/OnrampModal.tsx +++ b/packages/ui/src/components/widgets/OnrampWidget/modals/OnrampModal.tsx @@ -4,7 +4,7 @@ import { type Execute, type RelayChain } from '@relayprotocol/relay-sdk' -import { type FC, useCallback, useEffect, useMemo, useState } from 'react' +import { useCallback, useEffect, useMemo, useState } from 'react' import { Modal } from '../../../common/Modal.js' import type { FiatCurrency, Token } from '../../../../types/index.js' import useRelayClient from '../../../../hooks/useRelayClient.js' @@ -74,7 +74,7 @@ type OnrampModalProps = { type TxHashes = { txHash: string; chainId: number }[] -export const OnrampModal: FC = ({ +export function OnrampModal({ open, amount, amountFormatted, @@ -96,7 +96,7 @@ export const OnrampModal: FC = ({ onSuccess, onError, onOpenChange -}) => { +}: OnrampModalProps) { const haptic = useHapticEvent() const [swapError, setSwapError] = useState(null) const [step, setStep] = useState(OnrampStep.Confirming) @@ -230,9 +230,7 @@ export const OnrampModal: FC = ({ client?.baseApiUrl, { enabled: - depositAddress !== undefined && - step === OnrampStep.Processing && - open, + depositAddress !== undefined && step === OnrampStep.Processing && open, refetchInterval(query) { const observableStates = ['waiting', 'pending'] diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.tsx index 67c9ab716..2f1464d5d 100644 --- a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.tsx +++ b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampConfirmingStep.tsx @@ -1,4 +1,3 @@ -import type { FC } from 'react' import { Anchor, Button, @@ -29,7 +28,7 @@ type OnrampConfirmingStepProps = { setStep: (step: OnrampStep) => void } -export const OnrampConfirmingStep: FC = ({ +export function OnrampConfirmingStep({ toToken, fromToken, fromChain, @@ -43,13 +42,10 @@ export const OnrampConfirmingStep: FC = ({ isFetchingQuote, onAnalyticEvent, setStep -}) => { +}: OnrampConfirmingStepProps) { const haptic = useHapticEvent() return ( - + Buy {toToken?.symbol} ({toChain?.displayName}) @@ -68,9 +64,7 @@ export const OnrampConfirmingStep: FC = ({ your card -
+
= ({ }} > {!depositAddress || isFetchingQuote ? ( - + ) : ( `Purchase ${fromToken?.symbol} (${fromChain?.displayName})` )} diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.tsx index 1338e4ad8..82dda3735 100644 --- a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.tsx +++ b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampMoonPayStep.tsx @@ -1,9 +1,5 @@ -import { lazy, memo, Suspense, useEffect, type FC } from 'react' -import { - ChainTokenIcon, - Flex, - Text -} from '../../../../primitives/index.js' +import { lazy, memo, Suspense, useEffect } from 'react' +import { ChainTokenIcon, Flex, Text } from '../../../../primitives/index.js' import type { FiatCurrency, Token } from '../../../../../types/index.js' import { OnrampProcessingStep, OnrampStep } from '../OnrampModal.js' import type { RelayChain } from '@relayprotocol/relay-sdk' @@ -59,7 +55,7 @@ const MoonPayBuyWidget = memo( arbitrum -export const OnrampMoonPayStep: FC = ({ +export function OnrampMoonPayStep({ step, processingStep, toToken, @@ -84,7 +80,7 @@ export const OnrampMoonPayStep: FC = ({ moonpayOnUrlSignatureRequested, onPassthroughSuccess, onError -}) => { +}: OnrampMoonPayStepProps) { const moonPayExternalId = !isPassthrough ? (quoteRequestId ?? undefined) : passthroughExternalId @@ -200,9 +196,7 @@ export const OnrampMoonPayStep: FC = ({ align="center" className="relay:w-full relay:overflow-hidden relay:p-4 relay:gap-2 relay:mb-2 relay:rounded-widget-card relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)]" > -
+
= ({ +export function OnrampProcessingStepUI({ toToken, fromToken, fromChain, @@ -42,7 +42,7 @@ export const OnrampProcessingStepUI: FC = ({ processingStep, baseTransactionUrl, requestId -}) => { +}: OnrampProcessingStepUIProps) { const [delayedMoonpayTx, setDelayedMoonpayTx] = useState(false) useEffect(() => { @@ -65,10 +65,7 @@ export const OnrampProcessingStepUI: FC = ({ }, [processingStep]) return ( - + Processing Transaction @@ -77,12 +74,14 @@ export const OnrampProcessingStepUI: FC = ({ className="relay:w-full relay:overflow-hidden relay:p-4 relay:mb-4 relay:rounded-widget-card relay:border relay:border-solid relay:border-[var(--relay-colors-subtle-border-color)]" > -
+
= ({ ) : ( - + )} {processingStep === OnrampProcessingStep.Finalizing ? ( @@ -165,19 +162,16 @@ export const OnrampProcessingStepUI: FC = ({ ) ) : null} -
- -
+
+ +
= ({ ) : null} {processingStep === OnrampProcessingStep.Relaying ? ( - + ) : null} diff --git a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.tsx b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.tsx index c2417e671..2a1103953 100644 --- a/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.tsx +++ b/packages/ui/src/components/widgets/OnrampWidget/modals/steps/OnrampSuccessStep.tsx @@ -1,4 +1,3 @@ -import type { FC } from 'react' import { Anchor, Box, @@ -26,7 +25,7 @@ type OnrampSuccessStepProps = { onOpenChange: (open: boolean) => void } -export const OnrampSuccessStep: FC = ({ +export function OnrampSuccessStep({ toToken, moonpayTxUrl, isLoadingTransaction, @@ -35,12 +34,9 @@ export const OnrampSuccessStep: FC = ({ fillTxUrl, baseTransactionUrl, onOpenChange -}) => { +}: OnrampSuccessStepProps) { return ( - + Transaction Details diff --git a/packages/ui/src/components/widgets/PriceImpactTooltip.tsx b/packages/ui/src/components/widgets/PriceImpactTooltip.tsx index 33947610b..746591aa5 100644 --- a/packages/ui/src/components/widgets/PriceImpactTooltip.tsx +++ b/packages/ui/src/components/widgets/PriceImpactTooltip.tsx @@ -1,4 +1,4 @@ -import type { FC, ReactNode } from 'react' +import type { ReactNode } from 'react' import { Anchor, Flex, Text } from '../primitives/index.js' import Tooltip from '../primitives/Tooltip.js' import type { ChildrenProps } from '../widgets/SwapWidgetRenderer.js' @@ -14,11 +14,11 @@ const getFeeColor = (value: number | undefined) => { return value > 0 ? 'success' : undefined } -export const PriceImpactTooltip: FC = ({ +export function PriceImpactTooltip({ feeBreakdown, children, tooltipProps -}) => { +}: PriceImpactTooltipProps) { return ( = ({ ({feeBreakdown?.totalFees.priceImpactPercentage}) -
+
Swap Impact @@ -61,7 +59,11 @@ export const PriceImpactTooltip: FC = ({ } return ( - + {fee.name} {feeBreakdown.isGasSponsored && fee.usd.value === 0 ? ( diff --git a/packages/ui/src/components/widgets/WidgetErrorWell.tsx b/packages/ui/src/components/widgets/WidgetErrorWell.tsx index 0c2fe63b5..4219bcaf1 100644 --- a/packages/ui/src/components/widgets/WidgetErrorWell.tsx +++ b/packages/ui/src/components/widgets/WidgetErrorWell.tsx @@ -1,6 +1,5 @@ import { type Execute } from '@relayprotocol/relay-sdk' import { isDeadAddress, tronDeadAddress } from '@relayprotocol/relay-sdk' -import { type FC } from 'react' import { Box, Flex, Text } from '../primitives/index.js' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons/faExclamationCircle' @@ -29,7 +28,7 @@ type Props = { toChainVmType?: string } -export const WidgetErrorWell: FC = ({ +export function WidgetErrorWell({ error, hasInsufficientBalance, quote, @@ -44,7 +43,7 @@ export const WidgetErrorWell: FC = ({ toChainWalletVMSupported, recipientLinkedWallet, toChainVmType -}) => { +}: Props) { const isSmallDevice = useMediaQuery('(max-width: 600px)') const fetchQuoteErrorMessage = error ? error?.response?.data?.message diff --git a/packages/ui/src/constants/address.ts b/packages/ui/src/constants/address.ts index 19bac382e..219b88887 100644 --- a/packages/ui/src/constants/address.ts +++ b/packages/ui/src/constants/address.ts @@ -5,7 +5,7 @@ export const evmDeadAddress = export const solDeadAddress = 'CbKGgVKLJFb8bBrf58DnAkdryX6ubewVytn7X957YwNr' as const -export const getDeadAddress = (vmType?: ChainVM) => { +export function getDeadAddress(vmType?: ChainVM) { if (vmType === 'svm') { return solDeadAddress } else { diff --git a/packages/ui/src/hooks/useEnhancedTokensList.ts b/packages/ui/src/hooks/useEnhancedTokensList.ts index ad69a217e..6502961d1 100644 --- a/packages/ui/src/hooks/useEnhancedTokensList.ts +++ b/packages/ui/src/hooks/useEnhancedTokensList.ts @@ -23,14 +23,14 @@ export type EnhancedToken = { chain?: RelayChain } -export const useEnhancedTokensList = ( +export function useEnhancedTokensList( tokenLists: Currency[] | undefined, balanceMap: BalanceMap | undefined, context: 'from' | 'to', multiWalletSupportEnabled: boolean, chainId?: number, sortByBalance: boolean = true -): EnhancedToken[] => { +): EnhancedToken[] { const { chains } = useInternalRelayChains() const chainCurrencyMap = useMemo(() => { diff --git a/packages/ui/src/hooks/useHyperliquidAccountMode.ts b/packages/ui/src/hooks/useHyperliquidAccountMode.ts index 55ddf6fdd..001f0f0be 100644 --- a/packages/ui/src/hooks/useHyperliquidAccountMode.ts +++ b/packages/ui/src/hooks/useHyperliquidAccountMode.ts @@ -11,8 +11,9 @@ export type HyperliquidAccountMode = | 'default' | 'dexAbstraction' -export const isUnifiedMode = (mode?: HyperliquidAccountMode) => - mode === 'unifiedAccount' || mode === 'portfolioMargin' +export function isUnifiedMode(mode?: HyperliquidAccountMode) { + return mode === 'unifiedAccount' || mode === 'portfolioMargin' +} const useHyperliquidAccountMode = (address?: string, enabled = true) => { const isEvmAddress = isAddress(address ?? '') diff --git a/packages/ui/src/hooks/useInternalRelayChains.ts b/packages/ui/src/hooks/useInternalRelayChains.ts index 4ca53d1c4..af253875c 100644 --- a/packages/ui/src/hooks/useInternalRelayChains.ts +++ b/packages/ui/src/hooks/useInternalRelayChains.ts @@ -10,7 +10,7 @@ const DEFAULT_CACHE_OPTIONS = { refetchOnWindowFocus: false } as const -export const useInternalRelayChains = (): ReturnType => { +export function useInternalRelayChains(): ReturnType { const relayClient = useRelayClient() const providerOptions = useContext(ProviderOptionsContext) diff --git a/packages/ui/src/hooks/useMultiWalletBalances.ts b/packages/ui/src/hooks/useMultiWalletBalances.ts index dc5445abe..666edf5b7 100644 --- a/packages/ui/src/hooks/useMultiWalletBalances.ts +++ b/packages/ui/src/hooks/useMultiWalletBalances.ts @@ -11,11 +11,11 @@ import type { LinkedWallet } from '../types/index.js' /** * Fetches and merges balances for linked wallets */ -export const useMultiWalletBalances = ( +export function useMultiWalletBalances( linkedWallets?: LinkedWallet[], primaryAddress?: string, evmChainIds: 'mainnet' | 'testnet' = 'mainnet' -) => { +) { const walletAddresses = useMemo(() => { const addresses = new Set() diff --git a/packages/ui/src/hooks/widget/useSwapButtonCta.ts b/packages/ui/src/hooks/widget/useSwapButtonCta.ts index 68c7e6bcb..d838a6895 100644 --- a/packages/ui/src/hooks/widget/useSwapButtonCta.ts +++ b/packages/ui/src/hooks/widget/useSwapButtonCta.ts @@ -27,7 +27,7 @@ export type UseSwapButtonCtaParams = { * @param params - Configuration object containing swap state * @returns The appropriate button CTA text */ -export const useSwapButtonCta = ({ +export function useSwapButtonCta({ fromToken, toToken, multiWalletSupportEnabled, @@ -44,7 +44,7 @@ export const useSwapButtonCta = ({ isInsufficientLiquidityError, quote, operation -}: UseSwapButtonCtaParams): string => { +}: UseSwapButtonCtaParams): string { const firstStep = quote?.steps?.[0] const firstStepItem = firstStep?.items?.[0] diff --git a/packages/ui/src/icons/ArrowLeftToLine.tsx b/packages/ui/src/icons/ArrowLeftToLine.tsx index ba2449d5d..229f670d9 100644 --- a/packages/ui/src/icons/ArrowLeftToLine.tsx +++ b/packages/ui/src/icons/ArrowLeftToLine.tsx @@ -6,12 +6,12 @@ type ArrowLeftToLineProps = React.SVGProps & { fill?: string } -export const ArrowLeftToLine = ({ +export function ArrowLeftToLine({ width = 15, height = 13, fill = '#889096', ...props -}: ArrowLeftToLineProps) => { +}: ArrowLeftToLineProps) { return ( & { fill?: string } -export const ArrowRightFromLine = ({ +export function ArrowRightFromLine({ width = 15, height = 13, fill = '#5A45DF', ...props -}: ArrowRightFromLineProps) => { +}: ArrowRightFromLineProps) { return ( & { fill?: string } -export const FileSignature = ({ +export function FileSignature({ width = 19, height = 16, fill = '#5A45DF', ...props -}: FileSignatureProps) => { +}: FileSignatureProps) { return ( & { fill?: string } -export const RelayIcon = ({ +export function RelayIcon({ width = 41, height = 40, fill = 'none', ...props -}: RelayIconProps) => { +}: RelayIconProps) { return ( & { fill?: string } -export const Shuffle = ({ +export function Shuffle({ width = 17, height = 15, fill = '#889096', ...props -}: ShuffleProps) => { +}: ShuffleProps) { return ( & { fill?: string } -export const SwitchIcon = ({ +export function SwitchIcon({ width = 10, height = 10, fill = 'currentColor', ...props -}: SwitchIconProps) => { +}: SwitchIconProps) { return ( & { fill?: string } -export const XIcon = ({ +export function XIcon({ width = 10, height = 10, fill = 'currentColor', ...props -}: XIconProps) => { +}: XIconProps) { return ( ) => { +export function AllChainsLogo(props: React.HTMLAttributes) { return ( ) => { +export function MoonPayLogo(props: React.HTMLAttributes) { return ( ) => { +export function ReservoirText(props: React.HTMLAttributes) { return ( { +) { if (!walletVmType || !chainVmType) { return false } @@ -33,10 +33,10 @@ export const isWalletVmTypeCompatible = ( return chainVmType === 'hypevm' && walletVmType === 'evm' } -export const isChainVmTypeSupported = ( +export function isChainVmTypeSupported( chainVmType: ChainVM | undefined, supportedWalletVMs: Omit[] -) => { +) { if (!chainVmType) { return true } @@ -50,13 +50,13 @@ export const isChainVmTypeSupported = ( ) } -export const isValidAddress = ( +export function isValidAddress( vmType?: ChainVM, address?: string, chainId?: number, connector?: string, connectorKeyOverrides?: RelayKitProviderProps['options']['vmConnectorKeyOverrides'] -) => { +) { let eclipseConnectorKeys: string[] | undefined = undefined if (connectorKeyOverrides && connectorKeyOverrides[eclipse.id]) { eclipseConnectorKeys = connectorKeyOverrides[eclipse.id] @@ -97,13 +97,13 @@ export const isValidAddress = ( return false } -export const addressWithFallback = ( +export function addressWithFallback( vmType?: ChainVM, address?: string, chainId?: number, connector?: string, connectorKeyOverrides?: Parameters['4'] -) => { +) { return address && isValidAddress( vmType ?? 'evm', diff --git a/packages/ui/src/utils/browser.ts b/packages/ui/src/utils/browser.ts index fd41a0b8f..99cbab5de 100644 --- a/packages/ui/src/utils/browser.ts +++ b/packages/ui/src/utils/browser.ts @@ -1,4 +1,7 @@ -export const isSafariBrowser = () => - typeof window !== 'undefined' && - navigator.userAgent.indexOf('Safari') > -1 && - navigator.userAgent.indexOf('Chrome') <= -1 +export function isSafariBrowser() { + return ( + typeof window !== 'undefined' && + navigator.userAgent.indexOf('Safari') > -1 && + navigator.userAgent.indexOf('Chrome') <= -1 + ) +} diff --git a/packages/ui/src/utils/errors.ts b/packages/ui/src/utils/errors.ts index cf8408fc2..20967f46b 100644 --- a/packages/ui/src/utils/errors.ts +++ b/packages/ui/src/utils/errors.ts @@ -1,4 +1,4 @@ -export const errorToJSON = (error: any) => { +export function errorToJSON(error: any) { if (!(error instanceof Error)) { return error } @@ -16,7 +16,7 @@ export const errorToJSON = (error: any) => { } } -export const JSONToError = (json?: T): Error | T | undefined => { +export function JSONToError(json?: T): Error | T | undefined { if (!json || typeof json !== 'string') { return json } diff --git a/packages/ui/src/utils/fetcher.ts b/packages/ui/src/utils/fetcher.ts index daf1be6a7..3faa15d65 100644 --- a/packages/ui/src/utils/fetcher.ts +++ b/packages/ui/src/utils/fetcher.ts @@ -13,7 +13,7 @@ const fetcher = async (url: string, headers?: HeadersInit) => { export default fetcher -export const axiosPostFetcher = async (url: string, params: any) => { +export async function axiosPostFetcher(url: string, params: any) { const { data } = await axios.post(url, params) return data } diff --git a/packages/ui/src/utils/getTxBlockExplorerUrl.ts b/packages/ui/src/utils/getTxBlockExplorerUrl.ts index ca1118cf1..1d1311c22 100644 --- a/packages/ui/src/utils/getTxBlockExplorerUrl.ts +++ b/packages/ui/src/utils/getTxBlockExplorerUrl.ts @@ -12,11 +12,11 @@ const appendQueryParams = ( return url } -export const getTxBlockExplorerUrl = ( +export function getTxBlockExplorerUrl( chainId?: number, chains?: RelayChain[], txHash?: string -) => { +) { const chain = chains?.find((chain) => chain.id === chainId) let blockExplorerUrl = getChainBlockExplorerUrl(chainId, chains) diff --git a/packages/ui/src/utils/localStorage.ts b/packages/ui/src/utils/localStorage.ts index b6b7bd763..b5b2aff14 100644 --- a/packages/ui/src/utils/localStorage.ts +++ b/packages/ui/src/utils/localStorage.ts @@ -115,7 +115,7 @@ export function setCacheEntry( setRelayUiKitData({ genericCache: newCache }) } -export const alreadyAcceptedToken = (token: Token) => { +export function alreadyAcceptedToken(token: Token) { const tokenKey = `${token.chainId}:${token.address}` const relayUiKitData = getRelayUiKitData() // Ensure acceptedUnverifiedTokens exists before accessing includes diff --git a/packages/ui/src/utils/moonPay.ts b/packages/ui/src/utils/moonPay.ts index acaec27ad..a054c5d82 100644 --- a/packages/ui/src/utils/moonPay.ts +++ b/packages/ui/src/utils/moonPay.ts @@ -6,9 +6,9 @@ import defaultMoonPayCurrencies from '../constants/moonPayCurrencies.js' import { bitcoin } from './bitcoin.js' import { solana } from './solana.js' -export const convertSupportedCurrencies = ( +export function convertSupportedCurrencies( currencies?: [MoonPayCryptoCurrency | MoonPayFiatCurrency] | null -) => { +) { if (currencies) { return currencies .filter( diff --git a/packages/ui/src/utils/nativeMaxAmount.ts b/packages/ui/src/utils/nativeMaxAmount.ts index a8636fd38..7f00a0790 100644 --- a/packages/ui/src/utils/nativeMaxAmount.ts +++ b/packages/ui/src/utils/nativeMaxAmount.ts @@ -26,11 +26,11 @@ const fetchPromises: Record> = {} * @param gasLimit - Optional: The gas limit to use for estimation (defaults to 400000n). * @returns The calculated gas buffer amount as a bigint, or 0n if estimation fails or balance is zero. */ -export const calculateEvmNativeGasBuffer = async ( +export async function calculateEvmNativeGasBuffer( publicClient: PublicClient, balance: bigint, gasLimit: bigint = 400000n -): Promise => { +): Promise { if (!balance || balance <= 0n) { return 0n } @@ -88,9 +88,9 @@ export const calculateEvmNativeGasBuffer = async ( * @param chainId - The chain ID of the SVM or Eclipse network. * @returns The calculated fee buffer amount (in lamports for Solana, Wei for Eclipse) as a bigint, or a fallback buffer if estimation fails. */ -export const calculateSvmNativeFeeBuffer = async ( +export async function calculateSvmNativeFeeBuffer( chainId: number -): Promise => { +): Promise { const isEclipseChain = chainId === 9286185 const multiplier = isEclipseChain ? ECLIPSE_FEE_BUFFER_MULTIPLIER @@ -155,12 +155,12 @@ export const calculateSvmNativeFeeBuffer = async ( * @param publicClient - VIEM PublicClient (required for EVM calculation). * @returns A promise that resolves to the fee buffer amount as a bigint. */ -export const getFeeBufferAmount = async ( +export async function getFeeBufferAmount( vmType: ChainVM | undefined | null, chainId: number | undefined | null, balance: bigint, publicClient: PublicClient | null -): Promise => { +): Promise { const cacheKey = `${vmType}FeeBuffer:${chainId}` const cachedBufferStr = getCacheEntry(cacheKey) diff --git a/packages/ui/src/utils/qrcode.ts b/packages/ui/src/utils/qrcode.ts index 0e178157b..b62aef27d 100644 --- a/packages/ui/src/utils/qrcode.ts +++ b/packages/ui/src/utils/qrcode.ts @@ -1,13 +1,13 @@ import type { ChainVM } from '@relayprotocol/relay-sdk' import { solana } from './solana.js' -export const generateQrWalletDeeplink = ( +export function generateQrWalletDeeplink( vm?: ChainVM, amount: string = '0', tokenAddress?: string, toAddress?: string, chainId?: number -) => { +) { if (vm === 'evm') { return `ethereum:${toAddress}@${chainId}?value=${tokenAddress ? 0 : amount}` } else if (vm === 'svm') { diff --git a/packages/ui/src/utils/quote.ts b/packages/ui/src/utils/quote.ts index e0bdf4b59..63a2a5f5d 100644 --- a/packages/ui/src/utils/quote.ts +++ b/packages/ui/src/utils/quote.ts @@ -28,11 +28,11 @@ const formatUsdFee = ( } } -export const parseFees = ( +export function parseFees( selectedTo: RelayChain, selectedFrom: RelayChain, quote?: ReturnType['data'] -): FeeBreakdown => { +): FeeBreakdown { const fees = quote?.fees const expandedPriceImpact = quote?.details?.expandedPriceImpact @@ -145,7 +145,7 @@ export const parseFees = ( } } -export const calculateRelayerFeeProportionUsd = (quote?: QuoteResponse) => { +export function calculateRelayerFeeProportionUsd(quote?: QuoteResponse) { const usdIn = quote?.details?.currencyIn?.amountUsd ? Number(quote.details.currencyIn.amountUsd) : null @@ -160,10 +160,10 @@ export const calculateRelayerFeeProportionUsd = (quote?: QuoteResponse) => { return BigInt(Math.floor((relayerServiceFeeUsd * 100) / usdIn)) } -export const calculateRelayerFeeProportion = ( +export function calculateRelayerFeeProportion( totalAmount: { rawExcludingOriginGas: bigint }, feeBreakdown: BridgeFee[] -) => { +) { if (totalAmount.rawExcludingOriginGas > 0n) { const relayerFeeRaw = feeBreakdown.find((fee) => fee.id === 'relayer-fee')?.raw ?? 0n @@ -172,7 +172,7 @@ export const calculateRelayerFeeProportion = ( return 0n } -export const isHighRelayerServiceFeeUsd = (quote?: QuoteResponse) => { +export function isHighRelayerServiceFeeUsd(quote?: QuoteResponse) { const usdIn = quote?.details?.currencyIn?.amountUsd ? Number(quote.details.currencyIn.amountUsd) : null @@ -192,20 +192,18 @@ export const isHighRelayerServiceFeeUsd = (quote?: QuoteResponse) => { ) } -export const extractQuoteId = ( +export function extractQuoteId( steps?: Execute['steps'] | QuoteResponse['steps'] -) => { +) { return steps && steps[0] ? steps[0].requestId : undefined } -export const extractDepositAddress = (steps?: Execute['steps']) => { +export function extractDepositAddress(steps?: Execute['steps']) { const depositStep = steps?.find((step) => step.id === 'deposit') return depositStep?.depositAddress } -export const calculatePriceTimeEstimate = ( - details?: QuoteResponse['details'] -) => { +export function calculatePriceTimeEstimate(details?: QuoteResponse['details']) { const isBitcoin = details?.currencyIn?.currency?.chainId === bitcoin.id || details?.currencyOut?.currency?.chainId === bitcoin.id @@ -220,12 +218,12 @@ export const calculatePriceTimeEstimate = ( } } -export const appendMetadataToRequest = ( +export function appendMetadataToRequest( baseUrl?: string, requestId?: string, additionalMetadata?: paths['/requests/metadata']['post']['requestBody']['content']['application/json']['additionalMetadata'], referrer?: string -) => { +) { if (requestId && additionalMetadata) { const triggerData: paths['/requests/metadata']['post']['requestBody']['content']['application/json'] & { referrer?: string @@ -243,12 +241,10 @@ export const appendMetadataToRequest = ( } } -export const getCurrentStep = ( - steps?: Execute['steps'] | null -): { +export function getCurrentStep(steps?: Execute['steps'] | null): { step: ExecuteStep | null | undefined stepItem: ExecuteStepItem | null | undefined -} => { +} { if (!steps) { return { step: null, stepItem: null } } @@ -264,13 +260,13 @@ export const getCurrentStep = ( return { step, stepItem } } -export const getSwapEventData = ( +export function getSwapEventData( details: Execute['details'], fees: Execute['fees'], steps: Execute['steps'] | null, connector?: string, quoteParameters?: Parameters['2'] -) => { +) { let operation: string | undefined = details?.operation if (operation === 'swap') { @@ -350,10 +346,10 @@ export const getSwapEventData = ( } } -export const calculateUsdValue = ( +export function calculateUsdValue( price?: number, amountString?: string -): number | undefined => { +): number | undefined { if (price && price > 0 && amountString && Number(amountString) > 0) { try { return parseFloat(amountString) * price @@ -368,7 +364,7 @@ export const calculateUsdValue = ( return undefined } -export const isGasSponsored = (quote?: QuoteResponse) => { +export function isGasSponsored(quote?: QuoteResponse) { return ( quote?.fees?.subsidized?.amount != undefined && quote?.fees?.subsidized?.amount != '0' diff --git a/packages/ui/src/utils/relayTransaction.ts b/packages/ui/src/utils/relayTransaction.ts index 4249c43eb..f9bae7881 100644 --- a/packages/ui/src/utils/relayTransaction.ts +++ b/packages/ui/src/utils/relayTransaction.ts @@ -2,23 +2,23 @@ import { type Execute, RelayClient } from '@relayprotocol/relay-sdk' import { type RelayTransaction } from '../types/index.js' import { formatSeconds } from './time.js' -export const extractFromChain = ( +export function extractFromChain( transaction?: RelayTransaction | null, client?: RelayClient | null -) => { +) { const chainId = transaction?.data?.inTxs?.[0]?.chainId return client?.chains.find((chain) => chain.id === chainId) } -export const extractToChain = ( +export function extractToChain( transaction?: RelayTransaction | null, client?: RelayClient | null -) => { +) { const chainId = transaction?.data?.outTxs?.[0]?.chainId return client?.chains.find((chain) => chain.id === chainId) } -export const calculateFillTime = (transaction?: RelayTransaction | null) => { +export function calculateFillTime(transaction?: RelayTransaction | null) { let fillTime = '-' let seconds = 0 if (transaction?.status !== 'pending' && transaction?.status !== 'waiting') { @@ -51,7 +51,7 @@ export const calculateFillTime = (transaction?: RelayTransaction | null) => { return { fillTime, seconds } } -export const extractDepositRequestId = (steps?: Execute['steps'] | null) => { +export function extractDepositRequestId(steps?: Execute['steps'] | null) { if (!steps?.length) return null // Find the first step that has a requestId diff --git a/packages/ui/src/utils/slippage.ts b/packages/ui/src/utils/slippage.ts index 6adfddbe5..f055c9ac7 100644 --- a/packages/ui/src/utils/slippage.ts +++ b/packages/ui/src/utils/slippage.ts @@ -8,7 +8,7 @@ export const ratingToColor = { low: undefined } as const -export const getSlippageRating = (slippage: string): SlippageRating => { +export function getSlippageRating(slippage: string): SlippageRating { const slippageNumber = parseFloat(slippage) if (slippageNumber >= 40) return 'very-high' if (slippageNumber >= 6) return 'high' diff --git a/packages/ui/src/utils/steps.ts b/packages/ui/src/utils/steps.ts index 17a34933d..4b71aeb9a 100644 --- a/packages/ui/src/utils/steps.ts +++ b/packages/ui/src/utils/steps.ts @@ -150,7 +150,7 @@ type FormatTransactionStepsProps = { * - Showing clear action text with dynamic sub-text status updates * - Preserving transaction hash display and state management */ -export const formatTransactionSteps = ({ +export function formatTransactionSteps({ steps, fromToken, toToken, @@ -160,7 +160,7 @@ export const formatTransactionSteps = ({ quote, currentAddress, linkedWallets -}: FormatTransactionStepsProps) => { +}: FormatTransactionStepsProps) { if (!steps || steps.length === 0) return { formattedSteps: [] } // Get wallet display name for customizing action text diff --git a/packages/ui/src/utils/theme.ts b/packages/ui/src/utils/theme.ts index f99093736..db597761b 100644 --- a/packages/ui/src/utils/theme.ts +++ b/packages/ui/src/utils/theme.ts @@ -20,7 +20,13 @@ const TOKEN_REF_PATTERN = const RAW_CSS_PATTERN = /^(#|rgb|hsl|oklch|lch|lab|hwb|color\(|var\()|(\d+(\.\d+)?(px|rem|em|%|vh|vw|ch|ex|cap|ic|lh|rlh|vi|vb|vmin|vmax|svw|svh|lvw|lvh|dvw|dvh|cqw|cqh|deg|grad|rad|turn|s|ms))/i -const NAMED_COLORS = new Set(['white', 'black', 'transparent', 'currentColor', 'inherit']) +const NAMED_COLORS = new Set([ + 'white', + 'black', + 'transparent', + 'currentColor', + 'inherit' +]) function resolveThemeValue(value: string): string { if (NAMED_COLORS.has(value)) return value @@ -31,10 +37,10 @@ function resolveThemeValue(value: string): string { } // Generate CSS variables based on theme and overrides -export const generateCssVars = ( +export function generateCssVars( theme?: RelayKitTheme, themeOverrides?: ThemeOverridesMap -): string => { +): string { let cssString = '' if (!theme || !themeOverrides) { return cssString diff --git a/packages/ui/src/utils/time.ts b/packages/ui/src/utils/time.ts index 14a656770..0254bb62d 100644 --- a/packages/ui/src/utils/time.ts +++ b/packages/ui/src/utils/time.ts @@ -3,17 +3,17 @@ import time from 'dayjs/plugin/relativeTime.js' dayjs.extend(time) -export const relativeTime = ( +export function relativeTime( timeString?: string | number, from?: string | number, withoutSuffix?: boolean -): string => { +): string { return from ? `${dayjs(timeString).from(from, withoutSuffix)}` : `${dayjs(timeString).fromNow(withoutSuffix)}` } -export const formatSeconds = (seconds: number): string => { +export function formatSeconds(seconds: number): string { seconds = Number(seconds) const d = Math.floor(seconds / (3600 * 24)) const h = Math.floor((seconds % (3600 * 24)) / 3600) @@ -29,7 +29,7 @@ export const formatSeconds = (seconds: number): string => { return parts.join(' ') } -export const get15MinuteInterval = () => { +export function get15MinuteInterval() { const now = new Date() const minutes = now.getUTCMinutes() const interval = Math.floor(minutes / 15) diff --git a/packages/ui/src/utils/tokenSelector.ts b/packages/ui/src/utils/tokenSelector.ts index 694e0ac7e..cfb65e19c 100644 --- a/packages/ui/src/utils/tokenSelector.ts +++ b/packages/ui/src/utils/tokenSelector.ts @@ -2,12 +2,12 @@ import type { RelayChain } from '@relayprotocol/relay-sdk' import type { Token } from '../types/index.js' import { getStarredChainIds, setRelayUiKitData } from './localStorage.js' -export const isChainLocked = ( +export function isChainLocked( chainId: number | undefined, lockChainId: number | undefined, otherTokenChainId: number | undefined, lockToken: boolean -) => { +) { if (lockToken) { return true } @@ -31,11 +31,11 @@ type GroupedChains = { alphabeticalChains: RelayChain[] } -export const groupChains = ( +export function groupChains( chains: ChainOption[], popularChainIds?: number[], currentStarredChainIds?: number[] | undefined -): GroupedChains => { +): GroupedChains { // Get starred chains from localStorage or use provided ones let starredChainIds = currentStarredChainIds ?? getStarredChainIds() @@ -90,7 +90,7 @@ export const groupChains = ( } } -export const sortChains = (chains: RelayChain[]) => { +export function sortChains(chains: RelayChain[]) { return chains.sort((a, b) => { // First sort by priority chains const aIsPriority = POPULAR_CHAIN_IDS.has(a.id) @@ -109,13 +109,13 @@ export const sortChains = (chains: RelayChain[]) => { }) } -export const getInitialChainFilter = ( +export function getInitialChainFilter( chainFilterOptions: RelayChain[], context: 'from' | 'to', depositAddressOnly: boolean, token?: Token, alwaysShowAllChains?: boolean -) => { +) { const defaultFilter = { id: undefined, name: 'All Chains' } // If there is only one chain, return it diff --git a/packages/ui/src/utils/tokens.ts b/packages/ui/src/utils/tokens.ts index d5d009958..bcc053a3d 100644 --- a/packages/ui/src/utils/tokens.ts +++ b/packages/ui/src/utils/tokens.ts @@ -7,10 +7,10 @@ type ApiCurrency = NonNullable< paths['/chains']['get']['responses']['200']['content']['application/json']['chains'] >[0]['currency'] -export const convertApiCurrencyToToken = ( +export function convertApiCurrencyToToken( currency: ApiCurrency | undefined | null, chainId: number -): Token => { +): Token { return { chainId: Number(chainId), address: currency?.address ?? '', @@ -24,7 +24,7 @@ export const convertApiCurrencyToToken = ( } } -export const findBridgableToken = (chain?: RelayChain, token?: Token) => { +export function findBridgableToken(chain?: RelayChain, token?: Token) { if (chain && token && token.chainId === chain.id) { const toCurrencies = [ ...(chain?.erc20Currencies ?? []), @@ -47,18 +47,20 @@ export const findBridgableToken = (chain?: RelayChain, token?: Token) => { /** * Generates a standard token image URL from symbol or metadata */ -export const generateTokenImageUrl = (token: { - symbol?: string, - metadata?: { logoURI?: string } -}): string => { - return token.metadata?.logoURI || +export function generateTokenImageUrl(token: { + symbol?: string + metadata?: { logoURI?: string } +}): string { + return ( + token.metadata?.logoURI || `${ASSETS_RELAY_API}/icons/currencies/${token.symbol?.toLowerCase()}.png` + ) } /** * Compares two tokens for equality based on chainId and address */ -export const tokensAreEqual = (a?: Token, b?: Token): boolean => { +export function tokensAreEqual(a?: Token, b?: Token): boolean { if (!a && !b) return true if (!a || !b) return false return ( @@ -70,12 +72,16 @@ export const tokensAreEqual = (a?: Token, b?: Token): boolean => { /** * Normalizes token address for cross-chain consistency */ -export const normalizeTokenAddress = (chainId: number, address: string, vmType?: string): string => { +export function normalizeTokenAddress( + chainId: number, + address: string, + vmType?: string +): string { const normalizedAddress = vmType === 'evm' ? address.toLowerCase() : address return `${chainId}:${normalizedAddress}` } -export const mergeTokenLists = (lists: (CurrencyList | undefined)[]) => { +export function mergeTokenLists(lists: (CurrencyList | undefined)[]) { const mergedList: CurrencyList = [] const seenTokens = new Set() From bad76bf1069356b5d8f59e1c38dc040dd76a154f Mon Sep 17 00:00:00 2001 From: HerringtonDarkholme <2883231+HerringtonDarkholme@users.noreply.github.com> Date: Mon, 29 Jun 2026 12:23:41 -0400 Subject: [PATCH 3/3] chore: update changeset to cover all packages in refactor Co-Authored-By: Claude Opus 4.8 (1M context) --- .changeset/convert-viem-chain-fn-declaration.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/.changeset/convert-viem-chain-fn-declaration.md b/.changeset/convert-viem-chain-fn-declaration.md index 26e267198..2e74b33b6 100644 --- a/.changeset/convert-viem-chain-fn-declaration.md +++ b/.changeset/convert-viem-chain-fn-declaration.md @@ -1,5 +1,12 @@ --- '@relayprotocol/relay-sdk': patch +'@relayprotocol/relay-kit-ui': patch +'@relayprotocol/relay-kit-hooks': patch +'@relayprotocol/relay-bitcoin-wallet-adapter': patch +'@relayprotocol/relay-ethers-wallet-adapter': patch +'@relayprotocol/relay-lighter-wallet-adapter': patch +'@relayprotocol/relay-svm-wallet-adapter': patch +'@relayprotocol/relay-tron-wallet-adapter': patch --- -Convert `convertViemChainToRelayChain` from an arrow function to a function declaration (no behavior change). +Convert exported arrow-function consts to function declarations across all packages (no behavior change).