@funkit/connect 5.4.1 → 5.5.1

package/CHANGELOG.md

@@ -1,5 +1,51 @@
 # @funkit/connect
 
+## 5.5.1
+
+### Patch Changes
+
+- 9729887: feat: new receiveDropdownTitle text customization
+- 9729887: feat(connect,apps): Katana QA
+- fe69bc2: fix wrong currency handling
+- f30f269: refactor: move types used in clientMetadata to @funkit/utils, split into 3 different files checkoutApi.ts, checkoutFees.ts and clientMetadata.ts
+- be89261: feat(connect,apps): katana copy updates
+- Updated dependencies [a6ce5cb]
+- Updated dependencies [f30f269]
+  - @funkit/fun-relay@0.1.6
+  - @funkit/api-base@1.9.1
+  - @funkit/utils@1.1.1
+  - @funkit/core@2.3.23
+  - @funkit/wagmi-tools@3.0.45
+
+## 5.5.0
+
+### Minor Changes
+
+- b18e3e2: feat: add meld quote/widgets
+
+### Patch Changes
+
+- d69cfe2: feat: prevent flickering of the checkout modal when it is closed and reopened due to closing animations
+- ab6f3f4: feat: adjust matching tokens to chains and vice-versa for Transfer crypto
+- d68387a: feat: use 1 as unit price for stablecoins
+- fc10b40: refactor: enrich pending screen for relay DEs
+- 48ab9be: feat: only fetch first five checkouts & direct executions for faster notification
+- 52937b6: fix fiat refetch on mount
+- 43cf1bf: feat: dynamic relay referrer
+- Updated dependencies [b18e3e2]
+- Updated dependencies [fc10b40]
+- Updated dependencies [6ea6b26]
+- Updated dependencies [48ab9be]
+- Updated dependencies [a273823]
+- Updated dependencies [1137afa]
+- Updated dependencies [43cf1bf]
+  - @funkit/api-base@1.9.0
+  - @funkit/utils@1.1.0
+  - @funkit/fun-relay@0.1.5
+  - @funkit/chains@0.3.1
+  - @funkit/core@2.3.22
+  - @funkit/wagmi-tools@3.0.44
+
 ## 5.4.1
 
 ### Patch Changes

package/dist/components/CurrencySelector/CurrencySelector.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CurrencySelectorProps {
+    selectedCurrency?: string;
+    isLoading?: boolean;
+    onClick?: (currency: string) => void;
+}
+export declare const CurrencySelector: ({ selectedCurrency, isLoading, onClick, }: CurrencySelectorProps) => React.JSX.Element;
+export {};

package/dist/components/Dialog/Dialog.css.d.ts

@@ -1,11 +1,8 @@
-export declare const DialogAnimationTimeIn = 250;
-export declare const DialogAnimationTimeOut = 120;
+export declare const easing: number[];
+export declare const DialogAnimationTimeIn = 0.25;
+export declare const DialogAnimationTimeOut = 0.12;
 export declare const overlay: string;
-export declare const overlayInAnimation: string;
-export declare const overlayOutAnimation: string;
 export declare const content: string;
-export declare const contentSlideUpAnimation: string;
-export declare const contentSlideOutAnimation: string;
 export declare const dydxTitle: string;
 export declare const titleContainer: string;
 /** Content that shouls overflow into topbar */

package/dist/components/Dialog/Dialog.d.ts

@@ -4,6 +4,7 @@ export { CHECKOUT_MODAL_BOTTOM_BAR_ID, CHECKOUT_MODAL_TITLE_COUNTDOWN_ID, useBot
 interface DialogProps {
     open: boolean;
     onClose: () => void;
+    onAnimationComplete?: () => void;
     titleId: string;
     onMountAutoFocus?: (event: Event) => void;
     children: ReactNode;
@@ -19,7 +20,7 @@ interface DialogProps {
 /**
  * Dialog components (title, content, bottom bar) must be rendered as direct children of Dialog for correct scrolling behavior
  */
-export declare function Dialog({ children, onClose, open, titleId, isHidden, isSmartCloseable, withoutInternalPadding, withTransition, }: DialogProps): React.JSX.Element;
+export declare function Dialog({ children, onClose, onAnimationComplete, open, titleId, isHidden, isSmartCloseable, withoutInternalPadding, withTransition, }: DialogProps): React.ReactPortal | null;
 export declare namespace Dialog {
     var Title: ({ title, titleMeta, hasCloseButton: hasCloseButtonProp, isCloseDisabled, onClose, hasBackButton: hasBackButtonProp, helpButtonUrl, isBackDisabled, onBack, dydxHideBack, className, }: DialogTitleProps) => React.JSX.Element;
     var Content: ({ children, fullHeight, paddingLeft, paddingBottom, paddingTop, className, withTopDivider, withBottomDivider, id, withoutInternalPadding, ...boxProps }: DialogContentProps) => React.JSX.Element;

package/dist/components/Dropdown/ReceiveTokenDropdown.d.ts

@@ -6,6 +6,7 @@ interface ReceiveTokenDropdownProps {
     onTokenSelected: (token: DynamicTargetAssetCandidate) => void;
     selectedToken?: string;
     label?: string;
+    activeItemLabel?: string;
 }
-export declare const ReceiveTokenDropdown: ({ tokens, chainId, selectedToken, onTokenSelected, label, }: ReceiveTokenDropdownProps) => React.JSX.Element;
+export declare const ReceiveTokenDropdown: ({ tokens, chainId, selectedToken, onTokenSelected, label, activeItemLabel, }: ReceiveTokenDropdownProps) => React.JSX.Element;
 export {};

package/dist/components/FunCheckoutHistory/FunCheckoutHistoryContent.d.ts

@@ -6,9 +6,10 @@ interface FunCheckoutHistoryContentProps {
     onHelp: () => void;
     onBackFromHelpPage: () => void;
     onClose: () => void;
+    onAnimationComplete?: (callback: () => void) => void;
     /** Element ID to be used to mount the CTA action bar */
     bottomBarId: string;
     includeGenerateActionsParams?: boolean;
 }
-export declare function FunCheckoutHistoryContent({ depositAddress, currentPage, bottomBarId, onHelp, onBackFromHelpPage, onClose, includeGenerateActionsParams, }: FunCheckoutHistoryContentProps): React.JSX.Element;
+export declare function FunCheckoutHistoryContent({ depositAddress, currentPage, bottomBarId, onHelp, onBackFromHelpPage, onClose, onAnimationComplete, includeGenerateActionsParams, }: FunCheckoutHistoryContentProps): React.JSX.Element;
 export {};

package/dist/components/FunCheckoutHistory/FunCheckoutHistoryDetail.d.ts

@@ -6,6 +6,7 @@ interface FunCheckoutHistoryDetailProps {
     onClose: (options?: {
         isNewDeposit?: boolean;
     }) => void;
+    onAnimationComplete?: (callback: () => void) => void;
     /** Element ID to be used to mount the CTA action bar */
     bottomBarId: string;
     includeGenerateActionsParams?: boolean;
@@ -13,5 +14,5 @@ interface FunCheckoutHistoryDetailProps {
 /**
  * Processing info about a checkout history item (already created in backend)
  */
-export declare function FunCheckoutHistoryDetail({ checkoutHistoryInfo, onHelp, onClose, bottomBarId, includeGenerateActionsParams, }: FunCheckoutHistoryDetailProps): React.JSX.Element;
+export declare function FunCheckoutHistoryDetail({ checkoutHistoryInfo, onHelp, onClose, onAnimationComplete, bottomBarId, includeGenerateActionsParams, }: FunCheckoutHistoryDetailProps): React.JSX.Element;
 export {};

package/dist/components/FunCheckoutHistory/FunDirectExecutionHistoryDetail.d.ts

@@ -1,14 +1,14 @@
-import { type DirectExecution } from '@funkit/api-base';
+import type { DirectExecution } from '@funkit/api-base';
 import React from 'react';
-export declare function FunDirectExecutionHistoryDetail({ bottomBarId, directExecution, includeGenerateActionsParams, onClose, }: {
+export declare function FunDirectExecutionHistoryDetail({ bottomBarId, directExecution, includeGenerateActionsParams, onClose, onAnimationComplete, }: {
     bottomBarId: string;
     directExecution: DirectExecution;
     includeGenerateActionsParams?: boolean;
     onClose: (options?: {
         isNewDeposit?: boolean;
     }) => void;
+    onAnimationComplete?: (callback: () => void) => void;
 }): React.JSX.Element;
-export declare function DirectExecutionOrderDetailSection({ directExecution, showRelayLink, }: {
+export declare function DirectExecutionOrderDetailSection({ directExecution, }: {
     directExecution: DirectExecution;
-    showRelayLink: boolean;
 }): React.JSX.Element;

package/dist/components/FunPaymentMethodItem/FunPaymentMethodItem.d.ts

@@ -10,11 +10,11 @@ export interface FunPaymentMethodItemProps {
     keyText: string;
     valueIcon?: ReactNode;
     disclaimerText?: string;
-    badgeText?: string;
+    badge?: ReactNode;
     onClick?: () => void;
     isError?: boolean;
     isDisabled?: boolean;
     isActive?: boolean;
 }
-export declare const FunPaymentMethodItem: ({ keyIcon, keyText, valueIcon, disclaimerText, badgeText, onClick, isError, isDisabled, isActive, }: FunPaymentMethodItemProps) => React.JSX.Element;
+export declare const FunPaymentMethodItem: ({ keyIcon, keyText, valueIcon, disclaimerText, badge, onClick, isError, isDisabled, isActive, }: FunPaymentMethodItemProps) => React.JSX.Element;
 export {};

package/dist/components/Icons/LockIcon.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const LockIcon: () => React.JSX.Element;
+export declare const LockIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/Icons/New/BankIcon.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export declare const BankIcon: ({ size }: {
-    size: number;
+    size?: number;
 }) => React.JSX.Element;
 export declare const BankIconActive: ({ size }: {
-    size: number;
+    size?: number;
 }) => React.JSX.Element;

package/dist/components/Icons/New/LinkExternalIcon.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const LinkExternalIcon: ({ size }: {
+    size?: number;
+}) => React.JSX.Element;

package/dist/components/MeldQuoteItem/MeldQuoteItem.d.ts

@@ -0,0 +1,12 @@
+import type { MeldQuote, MeldServiceProvider } from '@funkit/api-base';
+import React from 'react';
+export declare const providerLabelMap: Record<MeldServiceProvider, string>;
+export interface MeldQuoteItemProps {
+    badge?: string;
+    quote: MeldQuote | undefined;
+    onClick?: () => void;
+    isError?: boolean;
+    isDisabled?: boolean;
+    isActive?: boolean;
+}
+export declare const MeldQuoteItem: ({ quote, badge, onClick, isDisabled, isActive, }: MeldQuoteItemProps) => React.JSX.Element;

package/dist/components/SourceMeldQuoteItem/SourceMeldQuoteItem.d.ts

@@ -0,0 +1,13 @@
+import type { MeldQuote } from '@funkit/api-base';
+import React from 'react';
+interface SourceMeldQuoteItemProps {
+    quote?: MeldQuote;
+    onClick?: () => void;
+    isLoading?: boolean;
+    isBestQuote?: boolean;
+    isPreselected?: boolean;
+    disabled?: boolean;
+    error?: string;
+}
+export declare const SourceMeldQuoteItem: ({ quote, onClick, isLoading, isBestQuote, isPreselected, disabled, error, }: SourceMeldQuoteItemProps) => React.JSX.Element;
+export {};

package/dist/components/Tabs/Tabs.d.ts

@@ -5,7 +5,7 @@ export type Tab<T = string> = {
 };
 export type TabsProps = {
     tabs: Tab[];
-    activeTab: string;
-    onTabChange: (tab: string) => void;
+    activeTab: number;
+    onTabChange: (tab: number) => void;
 };
 export declare const Tabs: React.FC<TabsProps>;

package/dist/components/Tabs/tabs.css.d.ts

@@ -0,0 +1 @@
+export declare const activeTabStyle: string;

package/dist/components/VirtualFiatAccount/AccountDetailsTab/AccountDetailsTab.d.ts

@@ -0,0 +1,9 @@
+import type { BridgeVirtualBankAccount } from '@funkit/api-base';
+import React from 'react';
+interface AccountDetailsTabProps {
+    account: BridgeVirtualBankAccount['source_deposit_instructions'];
+    detailsExpanded: boolean;
+    handleToggleDetails: () => void;
+}
+export declare const AccountDetailsTab: React.FC<AccountDetailsTabProps>;
+export {};

package/dist/consts/meld.d.ts

@@ -0,0 +1,3 @@
+export declare const getMeldProviderIconUrl: (provider: string) => string;
+/** Utilizes locale formatting to get currency symbol out of a currency code */
+export declare const getCurrencySymbol: (currencyCode: string) => string;

package/dist/css/scrollStyles.css.d.ts

@@ -1 +1,2 @@
 export declare const hideScrollBar: string;
+export declare const selectWrapperStyle: string;

package/dist/domains/asset.d.ts

@@ -3,6 +3,7 @@ import type { FunkitCheckoutConfig } from '~/providers/FunkitCheckoutContext';
 import { LoginType } from '~/providers/GeneralWalletProvider';
 import type { AssetHoldingsItem } from '~/utils/assets';
 import { PaymentMethod } from '../domains/paymentMethods';
+export declare const isStablecoin: (symbol: string) => boolean;
 export declare function isNativeTokenAddress(address: Address): boolean;
 export declare function isDefaultToken(asset: AssetHoldingsItem, checkoutConfig: FunkitCheckoutConfig): boolean;
 export declare const isPolygonEcosystemToken: (chainId: string, tokenAddress: string) => boolean;

package/dist/domains/clientMetadata.d.ts

@@ -4,7 +4,7 @@
  *
  * Make sure it is SERIALIZABLE and BACKWARD COMPATIBLE!!
  */
-import type { ApiCheckoutClientMetadata, ApiSelectedPaymentMethodInfo } from '@funkit/api-base';
+import type { ApiCheckoutClientMetadata, ApiSelectedPaymentMethodInfo } from '@funkit/utils';
 import type { FunkitActiveCheckoutItem, FunkitCheckoutActionParams, FunkitCheckoutConfig } from '~/providers/FunkitCheckoutContext';
 import { type PaymentMethodInfo } from './paymentMethods';
 import type { FunkitCheckoutQuoteResult } from './quote';

package/dist/domains/fees.d.ts

@@ -1,4 +1,4 @@
-import { type CheckoutQuoteResponse } from '@funkit/api-base';
+import { type CheckoutQuoteResponse } from '@funkit/utils';
 import type { Config } from 'wagmi';
 import { LoginType } from '~/providers/GeneralWalletProvider';
 import type { FunkitActiveCheckoutItem } from '../providers/FunkitCheckoutContext';

package/dist/domains/paymentMethods.d.ts

@@ -2,7 +2,7 @@ import type { BridgeCustomer, BridgeVirtualBankAccount, PreviewTransferResult }
 import type { MeshConnectionInfo } from '~/providers/FunkitMeshProvider';
 /** Supported payment methods in FunkitConnect. **/
 export declare enum PaymentMethod {
-    /** MoonPay - Credit / Debit Card **/
+    /** Meld - Credit / Debit Card **/
     CARD = "card",
     /** Account Balance **/
     ACCOUNT_BALANCE = "balance",

package/dist/domains/quote.d.ts

@@ -1,4 +1,4 @@
-import { type ApiFunkitCheckoutQuoteResult, type CheckoutQuoteResponse } from '@funkit/api-base';
+import type { ApiFunkitCheckoutQuoteResult, CheckoutQuoteResponse } from '@funkit/utils';
 import type { Address } from 'viem';
 import type { Config } from 'wagmi';
 import type { FunkitActiveCheckoutItem } from '~/providers/FunkitCheckoutContext';

package/dist/hooks/queries/useMeldCryptoCurrencyCode.d.ts

@@ -0,0 +1 @@
+export declare function useMeldCryptoCurrencyCode(): string;

package/dist/hooks/queries/useMeldCurrencies.d.ts

@@ -0,0 +1 @@
+export declare const useMeldCurrencies: () => import("@tanstack/react-query").UseQueryResult<import("@funkit/api-base").MeldFiatCurrency[], Error>;

package/dist/hooks/queries/useMeldDefaultCurrency.d.ts

@@ -0,0 +1,5 @@
+import { PaymentMethod } from '~/domains/paymentMethods';
+/**
+ * @param paymentMethod - Only runs when PaymentMethod.CARD is provided
+ */
+export declare const useMeldDefaultCurrency: (paymentMethod: PaymentMethod) => import("@tanstack/react-query").UseQueryResult<string, Error>;

package/dist/hooks/queries/useMeldLimits.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @param fiatCurrency - fiat currency code used just to enable/disable this hook
+ * @returns limits for all fiat currencies
+ */
+export declare const useMeldLimits: (fiatCurrency?: string) => import("@tanstack/react-query").UseQueryResult<import("@funkit/api-base").MeldFiatCurrencyLimit[] | undefined, Error>;
+type MeldLimitError = {
+    issue: string;
+    suggestion: string;
+};
+export declare const useMeldLimitError: (amount: number, fiatCurrency?: string) => MeldLimitError | undefined;
+export {};

package/dist/hooks/useAnimatedNavigation.d.ts

@@ -3,7 +3,7 @@ export declare const ANIMATION_DELAY = 75;
  * @param isInitialStep utilizes the old scale-in for initial display. Based on this boolean and animation state.
  * @returns className to be applied on the animatable content
  */
-export declare const getContentAnimation: ({ isOut, isReversed, isSkipped }: AnimationState, isInitialStep: boolean) => string | undefined;
+export declare const getContentAnimation: ({ isOut, isReversed, isSkipped }: AnimationState, isInitialStep?: boolean) => string | undefined;
 interface AnimatedNavigationResponse<T> {
     animation: AnimationState;
     navigateTo: (page: T, params?: AnimationParams) => void;

package/dist/hooks/useCheckoutDirectExecution.d.ts

@@ -1,4 +1,5 @@
-import { type CheckoutQuoteResponse, DirectExecutionType } from '@funkit/api-base';
+import { DirectExecutionType } from '@funkit/api-base';
+import { type CheckoutQuoteResponse } from '@funkit/utils';
 import type { Address, Hex } from 'viem';
 import { PaymentMethod } from '~/domains/paymentMethods';
 import type { FunkitCheckoutQuoteResult } from '~/domains/quote';

package/dist/hooks/useCountdown.d.ts

@@ -5,4 +5,8 @@ export interface UseCountdownResult {
     isLastSecond: boolean;
     restartCountdown(): void;
 }
-export declare function useCountdown({ onCountdownEnded, ...props }: Omit<FunCountdownProps, 'onCountdownLastSecond'>): UseCountdownResult;
+interface UseCountdownOptions extends Omit<FunCountdownProps, 'onCountdownLastSecond'> {
+    autoRestart?: boolean;
+}
+export declare function useCountdown({ onCountdownEnded, autoRestart, ...props }: UseCountdownOptions): UseCountdownResult;
+export {};

package/dist/hooks/useDynamicFont.d.ts

@@ -1,4 +1,4 @@
-export declare const useDynamicFont: (inputValue: string, max: number, min?: number) => {
+export declare const useDynamicFont: (inputValue: string, max?: number, min?: number) => {
     ref: import("react").RefObject<HTMLInputElement>;
     fontSize: number;
     resetText: () => void;

package/dist/hooks/usePaymentSources.d.ts

@@ -1,6 +1,7 @@
 import { type ConnectablePaymentMethodInfo, PaymentMethod } from '~/domains/paymentMethods';
 import type { FunkitCheckoutConfig } from '~/providers/FunkitCheckoutContext';
 export declare const usePaymentSources: (paymentMethodInfo: ConnectablePaymentMethodInfo | null, targetChainId: string, checkoutConfig?: FunkitCheckoutConfig) => {
+    promoted: PaymentMethod | undefined;
     preferred: (import("~/domains/paymentMethods").PaymentMethodBrokerageInfo | import("~/domains/paymentMethods").PaymentMethodAccountInfo | import("~/domains/paymentMethods").PaymentMethodVirtualBankInfo)[] | PaymentMethod[];
     moreSources: PaymentMethod[];
 };

package/dist/index.css

@@ -8170,7 +8170,7 @@
   }
 }
 
-/* vanilla-extract-css-ns:src/components/Dialog/DialogContent.css.ts.vanilla.css?source=#H4sIAAAAAAAAE7VVy67aMBDd36+w1A0sjEIgXK7ZVP2G7quJPRALx45sB5JW/HuVB2leqLmqukI+zDlnnHl482Ob/fT7cLclv94ISaGgCcpL4hmJwigrTi14l8InjGyD4HavsPa8j4Iq5vG26XRYAm71RZSioBmUKWpP3V16nqBdTzwO79E835srauotaHdGSzO44JR9DF+wzxI8FehBqsXUsImR+nnX3TFo7j889yi7z1P2NSUDIaS+0Nh4b1JGglMPtE2GA0zhuYF6Uoexu9TSS1A9fw6Kr+qaEUp2QVasT+PvELhbMpT9VAGPQUVfqLmsqDOKH9ELxQWFXiR3rHnmhvaszJ0WjCRSCNSnPloyArk3Fea4NUrFYOkl9x4tI85DrHD4X1uFXDv0QzvG6B3jq/TV1+DX2j0Gfr1Yk2tBuVHGMnIDu6LUXpuzo6kRoL51YetXml0Gta6QLlNQdnl03XFoevU/+FKf5Gnc3MpYgZZaEDJ3PekKkI3yelkWHq2XYMvvWPhhCh9/SeHfLvhanSVVbyz0cMiNFrP5w7BOZ4V1YapfKqRF7qXRjHCj8rRuyWcjV6M9bOR4sF+6tTG3XXosXrPqwZSNl8mAS1+SYBM6guCQSk1NPmxjMaGBUiTYRCPKcPrCqF2Sz8H6M2w9bZxMcsua2u1bu9ZrTvZrikJCNZqImoAWZNVbnO+HY1Y0q2MzfA/HDx0hj35Q2AbNPQHjR2BE3U2p+3BM7ZDH2+M3T90ujKoHAAA= */
+/* vanilla-extract-css-ns:src/components/Dialog/DialogContent.css.ts.vanilla.css?source=#H4sIAAAAAAAAE7VVy67aMBDd8xWWuoGFUQiEyw2bqt/QfTWxJ8TCsSPbgaQV/17lQZoXalDVFfIw55yJ58x4+2OX/XQHf78jv1aEpFDQBMUlcSEJ/CArzm3wLrhLQrLzvNu9irXnQ+BVOY/VtuMJE7DrL7zkBc2gTFE5au/CsQTNZqJx/Ajm8U5fUVFnQNkYDc3gglP0yX+BjgU4ytGBkO9CmVaxMCk4odVirN/kCPW8p/3Ja+5ueO5B9u9DDjUkA86FutBIO6fTkHjnXtA0FQ5iEuMm1KM6jtWFEk6A7OkzkGxd95tQsveyYnMe34Nnb8mQ9q3mn7wKvpBzmSFmGD+DF4wLTLKI7lTj9A1NLPWdFiFJBOeozv1oGRLIna5ilhktZQSGXnLn0ITEOogkDv9ru5Ari24oF4b0jtFVuOo22LVWj4BdL0bnilOmpTYhuYFZU2quzdnSVHOQ37q0zSvOroKalwubSSi7Ojp3HBuv/gdd6pI8jZqv0oajoQa4yG2PugqIhnmzrAqHxgkw5Xcs3LCEz7+U8G8f+Jo9TCpvLNSwyLTis/XDsE+xxLox1S/lwiCrFllImJZ5WlvyaeRqtIdGjgb7pVsbc9ulh2I1qh5M0WjpDJhwJfG2viUIFqlQVOdDG/MJDKQk3jYYQYbT5wftknwO1p9h63HjZJJb1FTu0Mq1WnO0X1PkAqrRRFQEFCfr3uL8OJ6yolkd2+FbOn4kCXn0k/w2ae4JGD8CI+h+Cj34Y2gXeawevwFCTYtC5gcAAA== */
 [data-rk] ._1pzt4231 {
   max-height: 525px;
   max-width: 100vw;
@@ -8185,6 +8185,9 @@
 [data-rk] ._1pzt4231:has(#fiat-detail-page) {
   max-height: 825px;
 }
+[data-rk] ._1pzt4231:has(#confirmation-page) {
+  max-height: 825px;
+}
 [data-rk] ._1pzt4232 {
   min-width: 380px;
   width: 380px;
@@ -8363,40 +8366,8 @@
   --_7rkubb1: 0.9;
 }
 
-/* vanilla-extract-css-ns:src/components/Dialog/Dialog.css.ts.vanilla.css?source=#H4sIAAAAAAAAE52T3W6jMBCF7/MUc1MplXBkk0Aa96bPsTcrA0MyW2Mj7DQ/Vd99hcMGaEub7RXYHn/neHz89IynslEVOvgtmocyWXN4nQHwu/AB8I0yrrRNJcHlSuOcLzbJ/eMM4G0GIPh0oeiq3mZPH0TENyLiJoWBlc9E4rGIrVVO/iSBf8K+Lopp3nKCJ77i8X+8RUdJQkVmvbeVBBZzXh/bGo2lH45rVRRkthKuMw1td6MSb+vRsO9P+NXK4685Dx06MzIFHiXEYrVePSzTVfo4MJUGU8pQpTxZI/sWxgmvHOT7jHKW4ZmwmfPFMgIeAV/wNIL2qnrQegK0BBH/F2gTQJU6sgMVfifb5r4chhVqQorf4jn68QmzCVlxywmjH/cjD7KlNZ45OqOEOO5yQwbZDi/ZiDej8LBLqNJ2skcVAVWQq7U6SSg1hj1K09Yw8lg5CTkaj007/WfvPJUnllvj0XgJrlY5sgz9AdG0Fd0FlXut22HLY27XkHnu4l+RuTpM3pkpg5naOrp0U2XO6r3H/knwQfb5KMtiCNq+AzWolacXHKd/uINGL5F/oRge2libteJ/AUbqdJs+BQAA */
-@keyframes _1r8f570 {
-  0% {
-    transform: scale(0.95);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-@keyframes _1r8f571 {
-  0% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(0.95);
-  }
-}
-@keyframes _1r8f572 {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-@keyframes _1r8f573 {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-[data-rk] ._1r8f575 {
+/* vanilla-extract-css-ns:src/components/Dialog/Dialog.css.ts.vanilla.css?source=Ll8xcjhmNTcxIHsKICBib3R0b206IC0yMDBweDsKICBsZWZ0OiAtMjAwcHg7CiAgcGFkZGluZzogMjAwcHg7CiAgcmlnaHQ6IC0yMDBweDsKICB0b3A6IC0yMDBweDsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVooMCk7CiAgei1pbmRleDogMjE0NzQ4MzY0NjsKfQouXzFyOGY1NzMgewogIG1heC13aWR0aDogMTAwdnc7Cn0KLl8xcjhmNTc0IHsKICBmb250LXNpemU6IDIycHg7CiAgbGluZS1oZWlnaHQ6IDI5cHg7CiAgcGFkZGluZy1sZWZ0OiA2cHg7Cn0KLl8xcjhmNTc1IHsKICBkaXNwbGF5OiBmbGV4OwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAganVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuOwogIHdpZHRoOiBmdWxsOwogIGZsZXgtc2hyaW5rOiAwOwogIG1pbi1oZWlnaHQ6IDU2cHg7Cn0KLl8xcjhmNTc3IHsKICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgbGVmdDogMDsKICByaWdodDogMDsKICB6LWluZGV4OiAxOwp9Ci5fMXI4ZjU3OCB7CiAgcG9zaXRpb246IHJlbGF0aXZlOwogIHotaW5kZXg6IDI7Cn0KLl8xcjhmNTdhIHsKICBib3R0b206IDA7CiAgbGVmdDogMDsKICByaWdodDogMDsKICB0b3A6IDA7CiAgei1pbmRleDogLTE7Cn0= */
+[data-rk] ._1r8f571 {
   bottom: -200px;
   left: -200px;
   padding: 200px;
@@ -8405,27 +8376,15 @@
   transform: translateZ(0);
   z-index: 2147483646;
 }
-[data-rk] ._1r8f576 {
-  animation: _1r8f572 250ms cubic-bezier(0.3, 0, 0.06, 1);
-}
-[data-rk] ._1r8f577 {
-  animation: _1r8f573 120ms cubic-bezier(0.3, 0, 0.06, 1);
-}
-[data-rk] ._1r8f579 {
+[data-rk] ._1r8f573 {
   max-width: 100vw;
 }
-[data-rk] ._1r8f57a {
-  animation: _1r8f570 250ms cubic-bezier(0.3, 0, 0.06, 1), _1r8f572 250ms cubic-bezier(0.3, 0, 0.06, 1);
-}
-[data-rk] ._1r8f57b {
-  animation: _1r8f571 120ms cubic-bezier(0.3, 0, 0.06, 1), _1r8f573 120ms cubic-bezier(0.3, 0, 0.06, 1);
-}
-[data-rk] ._1r8f57c {
+[data-rk] ._1r8f574 {
   font-size: 22px;
   line-height: 29px;
   padding-left: 6px;
 }
-[data-rk] ._1r8f57d {
+[data-rk] ._1r8f575 {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -8433,17 +8392,17 @@
   flex-shrink: 0;
   min-height: 56px;
 }
-[data-rk] ._1r8f57f {
+[data-rk] ._1r8f577 {
   position: absolute;
   left: 0;
   right: 0;
   z-index: 1;
 }
-[data-rk] ._1r8f57g {
+[data-rk] ._1r8f578 {
   position: relative;
   z-index: 2;
 }
-[data-rk] ._1r8f57i {
+[data-rk] ._1r8f57a {
   bottom: 0;
   left: 0;
   right: 0;
@@ -8822,6 +8781,41 @@
   transform: rotate(-90deg);
 }
 
+/* vanilla-extract-css-ns:src/components/SourcePaymentMethodItem/SourcePaymentMethodItem.css.ts.vanilla.css?source=Ll8xeW9mZWZsMCB7CiAgZGlzcGxheTogaW5saW5lLWZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBtaW4td2lkdGg6IDdweDsKfQouXzF5b2ZlZmwxIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLl8xeW9mZWZsMSAuXzF5b2ZlZmwyIHsKICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoOTBkZWcsIHRyYW5zcGFyZW50IDYzLjE2JSwgdmFyKC0tcmstY29sb3JzLW1vZGFsQmFja2dyb3VuZCkgOTEuNDUlKTsKfQouXzF5b2ZlZmwxOmhvdmVyIC5fMXlvZmVmbDIgewogIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCg5MGRlZywgdHJhbnNwYXJlbnQgNjMuMTYlLCB2YXIoLS1yay1jb2xvcnMtb2ZmQmFja2dyb3VuZCkgOTEuNDUlKTsKfQ== */
+[data-rk] ._1yofefl0 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 7px;
+}
+[data-rk] ._1yofefl1 {
+  position: relative;
+}
+[data-rk] ._1yofefl1 ._1yofefl2 {
+  background:
+    linear-gradient(
+      90deg,
+      transparent 63.16%,
+      var(--rk-colors-modalBackground) 91.45%);
+}
+[data-rk] ._1yofefl1:hover ._1yofefl2 {
+  background:
+    linear-gradient(
+      90deg,
+      transparent 63.16%,
+      var(--rk-colors-offBackground) 91.45%);
+}
+
+/* vanilla-extract-css-ns:src/css/scrollStyles.css.ts.vanilla.css?source=Ll8xNjNlaG1rMDo6LXdlYmtpdC1zY3JvbGxiYXIgewogIGRpc3BsYXk6IG5vbmU7Cn0KLl8xNjNlaG1rMSB7CiAgbWF4LWhlaWdodDogMzYwcHg7CiAgb3ZlcmZsb3cteTogYXV0bzsKICBvdmVyZmxvdy14OiBoaWRkZW47Cn0= */
+[data-rk] ._163ehmk0::-webkit-scrollbar {
+  display: none;
+}
+[data-rk] ._163ehmk1 {
+  max-height: 360px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 /* vanilla-extract-css-ns:src/components/FunPayments/FunPaymentMoonpayType.css.ts.vanilla.css?source=Ll8xa21wZXlmMCB7CiAgaGVpZ2h0OiB1bnNldCAhaW1wb3J0YW50OwogIHdpZHRoOiB1bnNldCAhaW1wb3J0YW50OwogIGZsZXg6IDEgIWltcG9ydGFudDsKfQouXzFrbXBleWYwIGlmcmFtZSB7CiAgYm9yZGVyOiBub25lOwp9Ci5fMWttcGV5ZjEgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleDogMTsKfQ== */
 [data-rk] ._1kmpeyf0 {
   height: unset !important;
@@ -8883,43 +8877,6 @@
   opacity: 0.5;
 }
 
-/* vanilla-extract-css-ns:src/components/SourcePaymentMethodItem/SourcePaymentMethodItem.css.ts.vanilla.css?source=Ll8xeW9mZWZsMCB7CiAgZGlzcGxheTogaW5saW5lLWZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBtaW4td2lkdGg6IDdweDsKfQouXzF5b2ZlZmwxIHsKICBwb3NpdGlvbjogcmVsYXRpdmU7Cn0KLl8xeW9mZWZsMSAuXzF5b2ZlZmwyIHsKICBiYWNrZ3JvdW5kOiBsaW5lYXItZ3JhZGllbnQoOTBkZWcsIHRyYW5zcGFyZW50IDYzLjE2JSwgdmFyKC0tcmstY29sb3JzLW1vZGFsQmFja2dyb3VuZCkgOTEuNDUlKTsKfQouXzF5b2ZlZmwxOmhvdmVyIC5fMXlvZmVmbDIgewogIGJhY2tncm91bmQ6IGxpbmVhci1ncmFkaWVudCg5MGRlZywgdHJhbnNwYXJlbnQgNjMuMTYlLCB2YXIoLS1yay1jb2xvcnMtb2ZmQmFja2dyb3VuZCkgOTEuNDUlKTsKfQ== */
-[data-rk] ._1yofefl0 {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 7px;
-}
-[data-rk] ._1yofefl1 {
-  position: relative;
-}
-[data-rk] ._1yofefl1 ._1yofefl2 {
-  background:
-    linear-gradient(
-      90deg,
-      transparent 63.16%,
-      var(--rk-colors-modalBackground) 91.45%);
-}
-[data-rk] ._1yofefl1:hover ._1yofefl2 {
-  background:
-    linear-gradient(
-      90deg,
-      transparent 63.16%,
-      var(--rk-colors-offBackground) 91.45%);
-}
-
-/* vanilla-extract-css-ns:src/css/scrollStyles.css.ts.vanilla.css?source=Ll8xNjNlaG1rMDo6LXdlYmtpdC1zY3JvbGxiYXIgewogIGRpc3BsYXk6IG5vbmU7Cn0= */
-[data-rk] ._163ehmk0::-webkit-scrollbar {
-  display: none;
-}
-
-/* vanilla-extract-css-ns:src/components/FunSelectBrokerage/FunSelectBrokerage.css.ts.vanilla.css?source=Ll8xd2h1bGR2MCB7CiAgbWF4LWhlaWdodDogMjIwcHg7CiAgb3ZlcmZsb3cteTogYXV0bzsKICBvdmVyZmxvdy14OiBoaWRkZW47Cn0= */
-[data-rk] ._1whuldv0 {
-  max-height: 220px;
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
 /* vanilla-extract-css-ns:src/components/CopyAddress/CopyInputDisplayedAddress.css.ts.vanilla.css?source=Ll8xa2J6ZWk5MyB7CiAgb3V0bGluZS1jb2xvcjogdmFyKC0tcmstY29sb3JzLWFjdGlvbkNvbG9yRGlzYWJsZWQpOwogIGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IHZhcigtLXJrLXJhZGlpLWNvbm5lY3RCdXR0b24pOwogIGJvcmRlci1ib3R0b20tcmlnaHQtcmFkaXVzOiB2YXIoLS1yay1yYWRpaS1jb25uZWN0QnV0dG9uKTsKICB0cmFuc2l0aW9uOiBhbGwgMTUwbXMgY3ViaWMtYmV6aWVyKDAuMywgMCwgMC4wNiwgMSk7Cn0= */
 [data-rk] ._1kbzei93 {
   outline-color: var(--rk-colors-actionColorDisabled);
@@ -8934,6 +8891,12 @@
   transition: all 150ms cubic-bezier(0.3, 0, 0.06, 1);
 }
 
+/* vanilla-extract-css-ns:src/components/Tabs/tabs.css.ts.vanilla.css?source=LmVnaGkydDEgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICBpbnNldDogMDsKfQ== */
+[data-rk] .eghi2t1 {
+  position: absolute;
+  inset: 0;
+}
+
 /* vanilla-extract-css-ns:src/components/GradientLoader/GradientLoader.css.ts.vanilla.css?source=QGtleWZyYW1lcyBtMTd1d28wIHsKICB0byB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgxdHVybik7CiAgfQp9Ci5tMTd1d28xIHsKICBhbmltYXRpb246IG0xN3V3bzAgNHMgbGluZWFyIGluZmluaXRlOwogIG1hc2s6IGNvbmljLWdyYWRpZW50KCMwMDAwIDEwJSwjMDAwKSwgbGluZWFyLWdyYWRpZW50KCMwMDAgMCAwKSBjb250ZW50LWJveDsKICBtYXNrLWNvbXBvc2l0ZTogc3VidHJhY3Q7Cn0= */
 @keyframes m17uwo0 {
   to {