@funkit/connect 3.4.4 → 3.4.5

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @funkit/connect
 
+## 3.4.5
+
+### Patch Changes
+
+- 81ea150: chore: copy tweaks
+- bccd3bf: feat: add pure side effect free quote
+- fd02d7a: fix: ensure compared amount is rounded
+- bccd3bf: feat: update loading state visuals of input screen
+- d1d7eb8: refactor: legalese copy changes
+- 60ae0c4: feat: update condition showing wallet connect option in sources
+- b34ccdd: fix: minimum order copy
+- a12d187: feat: update account modal for dydx
+- 30a2877: feat: move checkout limit to new max_checkout_usd flag
+- ba157d6: fix: remove custom margins when tagline not in use
+- b703b22: fix: show mesh execution errors where possible
+- 4069475: feat: hide You will pay when source and target assets are both stablecoins
+- bb7d1f9: feat: remove explicit continue from exchange selection screen
+- bccd3bf: feat: simplify login type checking
+- a8fa2ba: feat: merge mesh fees
+- 049f852: fix: fix native token normalization check
+- 177e40b: feat: remove select payment method page
+- 4d3c747: fix: unify border color for sections inside checkout history page
+
 ## 3.4.4
 
 ### Patch Changes

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

@@ -1,3 +1,2 @@
 export declare const containerStyle: string;
-export declare const assetContainerStyle: string;
 export declare const chainContainerStyle: string;

package/dist/components/FunCountdown/FunCountdown.d.ts

@@ -10,5 +10,6 @@ export interface FunCountdownProps {
     onCountdownLastSecond?: () => void;
     children?: ReactNode | ((remainingSeconds: number) => ReactNode);
     isHidden?: boolean;
+    showPending?: boolean;
 }
-export declare const FunCountdown: ({ countdownSeconds, initialRemainingSeconds, counterSize, onCountdownEnded, onBeforeCountdownEnds, onBeforeCountdownEndsSeconds, onCountdownLastSecond, strokeWidth, isHidden, children, }: FunCountdownProps) => React.JSX.Element | null;
+export declare const FunCountdown: ({ countdownSeconds, initialRemainingSeconds, counterSize, onCountdownEnded, onBeforeCountdownEnds, onBeforeCountdownEndsSeconds, onCountdownLastSecond, strokeWidth, isHidden, children, showPending, }: FunCountdownProps) => React.JSX.Element | null;

package/dist/components/FunDivider/FunDivider.d.ts

@@ -4,8 +4,7 @@ interface FunDividerProps {
     marginTop?: BoxProps['marginTop'];
     marginBottom?: BoxProps['marginBottom'];
     borderColor?: BoxProps['borderColor'];
-    transparent?: boolean;
     label?: string;
 }
-export declare function FunDivider({ marginTop, marginBottom, transparent, borderColor, label, }: FunDividerProps): React.JSX.Element;
+export declare function FunDivider({ marginTop, marginBottom, borderColor, label, }: FunDividerProps): React.JSX.Element;
 export {};

package/dist/components/FunInput/FunInput.d.ts

@@ -17,7 +17,6 @@ export interface FunInputProps<T = HTMLInputElement> {
     inputProps?: React.HTMLProps<T> & {
         type?: HTMLInputTypeAttribute;
     };
-    ref?: any;
     error?: string | boolean;
     alwaysFocused?: boolean;
     textColor?: BoxProps['color'];
@@ -26,4 +25,4 @@ export interface FunInputProps<T = HTMLInputElement> {
     overrideBackground?: BoxProps['background'];
     borderRadius?: BoxProps['borderRadius'];
 }
-export declare const FunInput: React.ForwardRefExoticComponent<Omit<FunInputProps<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export declare const FunInput: React.ForwardRefExoticComponent<FunInputProps<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;

package/dist/components/FunInput/FunTextAreaInput.d.ts

@@ -1,7 +1,3 @@
 import React from 'react';
 import { FunInputProps } from './FunInput';
-interface FunTextAreaInputProps extends FunInputProps<HTMLTextAreaElement> {
-    hasBackground?: boolean;
-}
-export declare function FunTextAreaInput({ placeholder, value, label, onChange, onKeyDown, onKeySubmit, textColor, inputStyle, inputProps, error, overrideBorderWidth, overrideBackground, }: FunTextAreaInputProps): React.JSX.Element;
-export {};
+export declare function FunTextAreaInput({ placeholder, value, label, onChange, onKeyDown, onKeySubmit, textColor, inputStyle, inputProps, error, overrideBorderWidth, overrideBackground, }: FunInputProps<HTMLTextAreaElement>): React.JSX.Element;

package/dist/components/FunNotification/FunNotification.d.ts

@@ -12,6 +12,10 @@ interface FunNotificationProps {
     isVisible?: boolean;
 }
 export type FunNotificationType = 'default' | 'error' | 'warning' | 'hint';
+export interface ErrorNotification {
+    message: ReactNode;
+    type: FunNotificationType;
+}
 /**
  * A notification/message component with height resizing animation.
  * Control visibility by enabling/disabling `isVisible` prop instead of doing an outer conditional rendering.

package/dist/components/FunPayments/FunPaymentMethods.d.ts

@@ -1,20 +1,21 @@
 import React, { ReactNode } from 'react';
 import { PaymentMethod, PaymentMethodInfo } from '../../domains/paymentMethods';
-import { SelectMethodPayloadData } from '../../modals/CheckoutModal/SelectPaymentMethod';
 import { FunkitActiveCheckoutItem } from '../../providers/FunkitCheckoutContext';
 import { FunkitTextCustomizationsConfig, FunkitUiCustomRecipientConfig } from '../../providers/FunkitConfigContext';
 export declare function ConnectWalletItem({ isClickable, }: {
     isClickable?: boolean;
 }): React.JSX.Element;
-export declare function AddPaymentMethodItem({ paymentMethod, isClickable, isActive, onClick, isSource, dynamicLimit, customValueIcon, }: {
-    paymentMethod: PaymentMethod;
+type BasePaymentMethodItemProps = {
     isActive: boolean;
+    onClick: () => void;
     isClickable?: boolean;
-    onClick?: () => void;
     isSource?: boolean;
-    dynamicLimit?: string;
     customValueIcon?: ReactNode;
-}): React.JSX.Element;
+};
+export declare function AddPaymentMethodItem({ paymentMethod, isClickable, isActive, onClick, isSource, dynamicLimit, customValueIcon, }: BasePaymentMethodItemProps & {
+    paymentMethod: PaymentMethod;
+    dynamicLimit?: string;
+}): React.JSX.Element | undefined;
 interface PaymentMethodSummaryProps {
     paymentMethodInfo: PaymentMethodInfo;
     walletAddress: string | undefined;
@@ -31,13 +32,4 @@ interface PaymentAmountSummaryProps {
     textCustomizations: FunkitTextCustomizationsConfig['confirmationScreen'];
 }
 export declare function PaymentAmountSummary({ isLoading, targetChainId, checkoutItem, textCustomizations, }: PaymentAmountSummaryProps): React.JSX.Element;
-/**
- * Handle selection and adding of payment methods
- */
-export declare function FunPaymentMethods({ onSelect, isDisabled, isLoadingGeoCheck, onCloseWrapper, }: {
-    onSelect: (selectMethodData: SelectMethodPayloadData) => void;
-    isDisabled?: boolean;
-    isLoadingGeoCheck: boolean;
-    onCloseWrapper: () => void;
-}): React.JSX.Element;
 export {};

package/dist/components/FunSelect/FunSelect.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-export interface FunSelectOption {
-    value: string;
+export interface FunSelectOption<T = string> {
+    value: T;
     label: ReactNode;
     isDisabled: boolean;
 }
@@ -8,7 +8,6 @@ interface FunSelectProps {
     initValue: string;
     options: FunSelectOption[];
     onChange: (newValue: string) => void;
-    label: string;
 }
-export declare const FunSelect: ({ initValue, options, onChange, label, }: FunSelectProps) => React.JSX.Element;
+export declare const FunSelect: ({ initValue, options, onChange }: FunSelectProps) => React.JSX.Element;
 export {};

package/dist/components/FunSelectBrokerage/FunSelectBrokerage.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
+import { MeshExchanges } from '~/consts/mesh';
 import { FunSelectOption } from '../FunSelect/FunSelect';
 interface FunSelectBrokerageProps {
-    handleSelect: (newValue: FunSelectOption['value']) => void;
-    options: FunSelectOption[];
+    onSelect: (value: MeshExchanges) => void;
+    options: FunSelectOption<MeshExchanges>[];
     selectedValue: FunSelectOption['value'];
 }
-export declare function FunSelectBrokerage({ handleSelect, options, selectedValue, }: FunSelectBrokerageProps): React.JSX.Element;
+export declare function FunSelectBrokerage({ onSelect, options, selectedValue, }: FunSelectBrokerageProps): React.JSX.Element;
 export {};

package/dist/components/FunSkeletonLoader/FunSkeletonBlock.d.ts

@@ -1,8 +1,13 @@
 import React from 'react';
 import { BoxProps } from '../Box/Box';
-export type FunSkeletonBlockProps = Pick<BoxProps, 'marginBottom' | 'marginTop' | 'style'> & {
+type FunSkeletonBlockProps = {
+    borderRadius?: BoxProps['borderRadius'];
+    marginBottom?: BoxProps['marginBottom'];
+    marginTop?: BoxProps['marginTop'];
+    style?: BoxProps['style'];
     height: BoxProps['height'];
     /** Defaults to full width */
     width?: BoxProps['width'];
 };
-export declare function FunSkeletonBlock({ width, ...props }: FunSkeletonBlockProps): React.JSX.Element;
+export declare function FunSkeletonBlock({ width, borderRadius, ...props }: FunSkeletonBlockProps): React.JSX.Element;
+export {};

package/dist/components/FunTransactionSummary/FunTxSummaryComponents.d.ts

@@ -1,7 +1,7 @@
 import './FunTxSummaryComponents.css';
-import React, { PropsWithChildren, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { BoxProps } from '../Box/Box';
-export declare function FunTxSummaryBox({ children }: PropsWithChildren): React.JSX.Element;
+export declare function FunTxSummaryBox({ children, ...otherProps }: BoxProps): React.JSX.Element;
 export declare function FunTxSummaryLineItem({ children, ...otherProps }: BoxProps): React.JSX.Element;
 export declare function FunTxSummaryLineItemCollapsibleTrigger({ children, isDisabled, onClick, }: {
     children: ReactNode;

package/dist/consts/funkit.d.ts

@@ -11,6 +11,7 @@ export declare const FUNKIT_CONNECT_WALLET_ID = "funkitConnectWallet";
 export declare const RESERVED_GROUP_NAME = "funkit-web2";
 export declare const DEFAULT_FUNWALLET_INDEX = 0;
 export declare const FUN_WORKER_EOA_ADDR = "0x61d048E5bECBd111c5D1e9BfFa1e284EBcb230Cc";
+export declare const FUN_ORG_NAME = "Fun.xyz";
 export declare const FROM_PROGRESS_CHECKOUT_STATES: CheckoutState[];
 export declare const TO_PROGRESS_CHECKOUT_STATES: CheckoutState[];
 export declare const IN_PROGRESS_CHECKOUT_STATES: CheckoutState[];

package/dist/domains/asset.d.ts

@@ -0,0 +1,2 @@
+import { Address } from 'viem';
+export declare function isNativeTokenAddress(address: Address): boolean;

package/dist/domains/checkoutFees.d.ts

@@ -1,5 +1,6 @@
 import { CheckoutQuoteResponse } from '@funkit/api-base';
 import type { Config } from 'wagmi';
+import { LoginType } from '~/providers/GeneralWalletProvider';
 import { PaymentMethod, PaymentMethodInfo } from '../domains/paymentMethods';
 import { FunkitActiveCheckoutItem } from '../providers/FunkitCheckoutContext';
 interface BaseCheckoutFees {
@@ -34,7 +35,7 @@ interface EvaluateFeeBreakdownItem {
     newPaymentMethodInfo: PaymentMethodInfo;
     wagmiConfig: Config;
     apiKey: string;
-    isWeb3Login: boolean;
+    loginType: LoginType;
 }
 export declare function evaluateFeeBreakdown(evalItem: EvaluateFeeBreakdownItem): Promise<CheckoutFees>;
 export {};

package/dist/{hooks/useCheckoutStateBooleans.d.ts → domains/checkoutState.d.ts}

@@ -9,5 +9,5 @@ type CheckoutStateBooleans = {
     isTerminal: boolean;
     status: CheckoutStatus;
 };
-export declare function useCheckoutStateBooleans(checkoutState: CheckoutState): CheckoutStateBooleans;
+export declare function getCheckoutStateBooleans(checkoutState: CheckoutState): CheckoutStateBooleans;
 export {};

package/dist/domains/quote.d.ts

@@ -2,17 +2,19 @@ import { CheckoutQuoteResponse } from '@funkit/api-base';
 import { Address } from 'viem';
 import { Config } from 'wagmi';
 import { FunkitActiveCheckoutItem } from '~/providers/FunkitCheckoutContext';
+import { LoginType } from '~/providers/GeneralWalletProvider';
 import { CheckoutFees } from './checkoutFees';
 import { PaymentMethodInfo } from './paymentMethods';
 export type FunkitCheckoutQuoteResult = {
     baseQuote: CheckoutQuoteResponse;
     finalTimeEstimationMs: number;
     finalPaymentTokenAmount: string;
+    finalPaymentFeeUsd: string;
     finalTotalUsd: string;
     finalFeesBreakdown: CheckoutFees;
 };
 export declare function getCheckoutBaseQuote(checkoutItem: FunkitActiveCheckoutItem, userId: string, walletAddress: Address, apiKey: string, sponsorInitialTransferGasLimit: number, wagmiConfig: Config): Promise<CheckoutQuoteResponse>;
-export declare function getQuoteFinalEstimation(baseQuote: CheckoutQuoteResponse, checkoutItem: FunkitActiveCheckoutItem, newPaymentMethodInfo: PaymentMethodInfo, wagmiConfig: Config, apiKey: string, isWeb3Login: boolean): Promise<FunkitCheckoutQuoteResult>;
+export declare function getQuoteFinalEstimation(baseQuote: CheckoutQuoteResponse, checkoutItem: FunkitActiveCheckoutItem, newPaymentMethodInfo: PaymentMethodInfo, wagmiConfig: Config, apiKey: string, loginType: LoginType): Promise<FunkitCheckoutQuoteResult>;
 export declare function getAvailableAssetAmount(checkoutItem: FunkitActiveCheckoutItem, newPaymentMethodInfo: PaymentMethodInfo, finalEstimation: FunkitCheckoutQuoteResult, wagmiConfig: Config, walletAddress: Address): Promise<number | undefined>;
 export interface CheckoutQuoteParams {
     checkoutItem: FunkitActiveCheckoutItem;
@@ -22,10 +24,10 @@ export interface CheckoutQuoteParams {
     sponsorInitialTransferGasLimit: number;
     newPaymentMethodInfo: PaymentMethodInfo;
     wagmiConfig: Config;
-    isWeb3Login: boolean;
+    loginType: LoginType;
 }
-export declare function getQuoteAndEstimation({ checkoutItem, userId, walletAddress, apiKey, sponsorInitialTransferGasLimit, newPaymentMethodInfo, wagmiConfig, isWeb3Login, }: CheckoutQuoteParams): Promise<{
+export declare function getQuoteAndEstimation({ checkoutItem, userId, walletAddress, apiKey, sponsorInitialTransferGasLimit, newPaymentMethodInfo, wagmiConfig, loginType, }: CheckoutQuoteParams): Promise<{
     baseQuote: CheckoutQuoteResponse;
     finalEstimation: FunkitCheckoutQuoteResult;
-    avialableAssetAmount: number | undefined;
+    availableAssetAmount: number | undefined;
 }>;

package/dist/hooks/useAutoClearState.d.ts

@@ -0,0 +1,4 @@
+export declare function useAutoClearState<T>(initialValue?: T | null): [
+    state: T | null,
+    setState: (newState: T | null, durationMs?: number) => void
+];

package/dist/hooks/useCountdown.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { FunCountdownProps } from '~/components/FunCountdown/FunCountdown';
+export interface UseCountdownResult {
+    countdown: ReactNode;
+    isLastSecond: boolean;
+    restartCountdown(): void;
+}
+export declare function useCountdown({ onCountdownEnded, ...props }: Omit<FunCountdownProps, 'onCountdownLastSecond'>): UseCountdownResult;

package/dist/hooks/useMesh.d.ts

@@ -10,7 +10,7 @@ export declare const useMeshExchanges: ({ fullInfo, iconSize, }: {
     fullInfo?: boolean;
     iconSize?: number;
 }) => {
-    options: FunSelectOption[];
+    options: FunSelectOption<MeshExchanges>[];
 };
 /**
  * Fetches mesh-related network information based on the active chain user is logged in on, given an exchange

package/dist/index.css

@@ -6174,7 +6174,7 @@
   }
 }
 
-/* vanilla-extract-css-ns:src/components/Dialog/DialogContent.css.ts.vanilla.css?source=#H4sIAAAAAAAAE7VUy47jIBC8z1cg7SU5EDnOU+Symm+Y+wpDJyBjsKAd2zvKv4+wPVachzbSaE+IpruqGqpZ/FmWf3Gdrpbk842QgjdUgT4pZGSTbsrmMARrLVExskyScx1jw369SWLO5W0x4jDFw+yXbGVDS94WYJGGWqNQ4Od3HNvd5nE9uhwsRc9tOIKnJT/BffUuva1O+xxtvwWveoGj4NWd4HVXMhwLbsSsa5JQskrKZn644dwn4awmANsOwJ3BH42racOI0lKCPVxHW0Z4hS7GgvDOmIx7eqoQwTMSkGcGpmeDoMoGwCkdY7SGLNcYr0fkHXvGRX7yrrKSCmecZ+TM/YxSn/f7QAsnuXkf0+bPMEcFHa7UoTS8HXWMF7Xtb/U/8FJUVZH1XTkvwVPPpa7CFXQM6B55/poKBI+a+/YDGpxK2P1Dws8afI7OVPTGixwBhLPyof799J2OBrqHiSuV2oNA7Swjwpmq6Cz5beTo8s7IvwuQmkfrAVjCrSSzqwHabfdl04/eYvpX3H4ChFyuk9Ih6dEw3o5jLL18AemffvKLBAAA */
+/* vanilla-extract-css-ns:src/components/Dialog/DialogContent.css.ts.vanilla.css?source=#H4sIAAAAAAAAE7VUy47jIBC8z1cg7SU5EDnOU+Symm+Y+wpDJyBjsKAd2zvKv4+wPVachzbSaE+IpruqGqpZ/FmWf3Gdrpbk842QgjdUgT4pZGSTbsrmMARrLVExskyScx1jw369SWLO5W0x4jDFw+yXbGVDS94WYJGGWqNQ4Od3HNvd5nE9uhwsRc9tOIKnJT/BffU+va1O+xxtvwWveoGj4NWd4HVXMhwLbsSsa5JQskrKZn645UzCWU0Ath2AO4M/GlfThhGlpQR7uI62jPAKXYwF4Z0xGff0VCGCZyQgzwxMzwZBlQ2AUzrGaA1ZrjFej8g79oyL/ORdZSUVzjjPyJn7GaU+7/eBFk5y8z6mzZ9hjgo6XKlDaXg76hgvatvf6n/gpaiqIuu7cl6Cp55LXYUr6BjQPfL8NRUIHjX37Qc0OJWw+4eEnzX4HJ2p6I0XOQIIZ+VD/fvpOx0NdA8TVyq1B4HaWUaEM1XRWfLbyNHlnZF/FyA1j9YDsIRbSWZXA7Tb7sumH73F9K+4/QQIuVwnpUPSo2G8HcdYevkCvpa0nosEAAA= */
 [data-rk] ._1pzt4231 {
   max-height: 525px;
   max-width: 100vw;
@@ -6184,7 +6184,7 @@
   max-height: 675px;
 }
 [data-rk] ._1pzt4231:has(#token-transfer-page) {
-  max-height: 725px;
+  max-height: 825px;
 }
 [data-rk] ._1pzt4232 {
   min-width: 350px;
@@ -6452,10 +6452,11 @@
   animation: _1tyx5nu7 1s;
 }
 
-/* vanilla-extract-css-ns:src/components/FunDivider/FunDivider.css.ts.vanilla.css?source=Ll8zZGtkc2MwIHsKICBib3JkZXItd2lkdGg6IDA7CiAgYm9yZGVyLXRvcC13aWR0aDogMXB4OwogIGZsZXg6IDE7Cn0= */
+/* vanilla-extract-css-ns:src/components/FunDivider/FunDivider.css.ts.vanilla.css?source=Ll8zZGtkc2MwIHsKICBib3JkZXItd2lkdGg6IDA7CiAgYm9yZGVyLXRvcC13aWR0aDogMXB4OwogIGJvcmRlci1zdHlsZTogc29saWQ7CiAgZmxleDogMTsKfQ== */
 [data-rk] ._3dkdsc0 {
   border-width: 0;
   border-top-width: 1px;
+  border-style: solid;
   flex: 1;
 }
 
@@ -6497,6 +6498,48 @@
   animation-name: stgjxl1;
 }
 
+/* vanilla-extract-css-ns:src/components/FunSkeletonLoader/FunSkeletonLoader.css.ts.vanilla.css?source=QGtleWZyYW1lcyBkajB4NjAwIHsKICAwJSB7CiAgICBvcGFjaXR5OiAxOwogIH0KICAxMDAlIHsKICAgIG9wYWNpdHk6IDAuNTsKICB9Cn0KLmRqMHg2MDIgewogIGFuaW1hdGlvbi1kaXJlY3Rpb246IGFsdGVybmF0ZTsKICBhbmltYXRpb24tZHVyYXRpb246IDcwMG1zOwogIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGxpbmVhcjsKICBhbmltYXRpb24taXRlcmF0aW9uLWNvdW50OiBpbmZpbml0ZTsKICBhbmltYXRpb24tZmlsbC1tb2RlOiBmb3J3YXJkczsKICBhbmltYXRpb24tbmFtZTogZGoweDYwMDsKfQouZGoweDYwMyB7CiAgZmxleDogMCAwIGF1dG87Cn0= */
+@keyframes dj0x600 {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+[data-rk] .dj0x602 {
+  animation-direction: alternate;
+  animation-duration: 700ms;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-fill-mode: forwards;
+  animation-name: dj0x600;
+}
+[data-rk] .dj0x603 {
+  flex: 0 0 auto;
+}
+
+/* src/components/FunTransactionSummary/FunTxSummaryComponents.css */
+.fun-container-content-expanded {
+  transition: all 0.5s ease-in-out;
+  max-height: 250px;
+  overflow: hidden;
+}
+.fun-container-content-collapsed {
+  max-height: 0px;
+  transition: all 0.4s ease-out;
+  overflow: hidden;
+}
+.fun-container-fee-line-show {
+  transition: all 0.2s linear;
+  transition-delay: 0.2s;
+  opacity: 1;
+}
+.fun-container-fee-line-hide {
+  transition: all 0.2s linear;
+  opacity: 0;
+}
+
 /* src/components/FunInput/FunInputBase.css */
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
@@ -6568,15 +6611,13 @@ input[type=number] {
   flex: 1;
 }
 
-/* vanilla-extract-css-ns:src/modals/FunCheckoutHistoryModal/FunCheckoutHistoryTransaction.css.ts.vanilla.css?source=Ll84djN6c3owIHsKICBtYXgtaGVpZ2h0OiAyNTBweDsKICBvdmVyZmxvdzogaGlkZGVuOwp9Ci5fOHYzenN6MSB7CiAgdHJhbnNpdGlvbjogYWxsIDAuNXMgZWFzZS1pbi1vdXQ7Cn0KLl84djN6c3oyIHsKICB0cmFuc2l0aW9uOiBhbGwgNDAwbXMgZWFzZS1vdXQ7CiAgbWF4LWhlaWdodDogMDsKICBvdmVyZmxvdzogaGlkZGVuOwp9 */
+/* vanilla-extract-css-ns:src/modals/FunCheckoutHistoryModal/FunCheckoutHistoryTransaction.css.ts.vanilla.css?source=Ll84djN6c3owIHsKICB0cmFuc2l0aW9uOiBhbGwgMC41cyBlYXNlLWluLW91dDsKICBtYXgtaGVpZ2h0OiAyNTBweDsKICBvdmVyZmxvdzogaGlkZGVuOwp9Ci5fOHYzenN6MSB7CiAgdHJhbnNpdGlvbjogYWxsIDQwMG1zIGVhc2Utb3V0OwogIG1heC1oZWlnaHQ6IDA7CiAgb3ZlcmZsb3c6IGhpZGRlbjsKfQ== */
 [data-rk] ._8v3zsz0 {
+  transition: all 0.5s ease-in-out;
   max-height: 250px;
   overflow: hidden;
 }
 [data-rk] ._8v3zsz1 {
-  transition: all 0.5s ease-in-out;
-}
-[data-rk] ._8v3zsz2 {
   transition: all 400ms ease-out;
   max-height: 0;
   overflow: hidden;
@@ -6631,7 +6672,7 @@ input[type=number] {
       transparent 10%);
 }
 
-/* vanilla-extract-css-ns:src/modals/FunCheckoutHistoryModal/FunCheckoutStatus.css.ts.vanilla.css?source=Ll8yaTl6eTAgewogIG1hcmdpbi10b3A6IC0zMHB4OwogIG1hcmdpbi1ib3R0b206IC0xMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBoZWlnaHQ6IDEyMHB4OwogIHdpZHRoOiAxODBweDsKICBiYWNrZ3JvdW5kOiByYWRpYWwtZ3JhZGllbnQoZWxsaXBzZSBjbG9zZXN0LXNpZGUsIHJnYmEoMjU1LCAxMzgsIDcyLCAwLjIpIDAlLCByZ2JhKDIyNSwgNTQsIDE3NywgMC4wNCkgODAlLCB0cmFuc3BhcmVudCk7Cn0KLl8yaTl6eTEgewogIG1hcmdpbi10b3A6IC0zMHB4OwogIG1hcmdpbi1ib3R0b206IC0xMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBoZWlnaHQ6IDEyMHB4OwogIHdpZHRoOiAxODBweDsKICBiYWNrZ3JvdW5kOiByYWRpYWwtZ3JhZGllbnQoZWxsaXBzZSBjbG9zZXN0LXNpZGUsIHJnYmEoMzcsIDE5MSwgOTksIDAuMikgMCUsIHJnYmEoNTQsIDIyNSwgMTQzLCAwLjA0KSA4MCUsIHRyYW5zcGFyZW50KTsKfQ== */
+/* vanilla-extract-css-ns:src/modals/FunCheckoutHistoryModal/FunCheckoutStatus.css.ts.vanilla.css?source=Ll8yaTl6eTAgewogIG1hcmdpbi10b3A6IC0zMHB4OwogIG1hcmdpbi1ib3R0b206IC0xMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBoZWlnaHQ6IDEyMHB4OwogIHdpZHRoOiAxODBweDsKICBiYWNrZ3JvdW5kOiByYWRpYWwtZ3JhZGllbnQoZWxsaXBzZSBjbG9zZXN0LXNpZGUsIHJnYmEoMjU1LCAxMzgsIDcyLCAwLjIpIDAlLCByZ2JhKDIyNSwgNTQsIDE3NywgMC4wNCkgODAlLCB0cmFuc3BhcmVudCk7Cn0KLl8yaTl6eTEgewogIG1hcmdpbi10b3A6IC0zMHB4OwogIG1hcmdpbi1ib3R0b206IC0xMHB4OwogIGRpc3BsYXk6IGZsZXg7CiAgYWxpZ24taXRlbXM6IGNlbnRlcjsKICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsKICBoZWlnaHQ6IDEyMHB4OwogIHdpZHRoOiAxODBweDsKICBiYWNrZ3JvdW5kOiByYWRpYWwtZ3JhZGllbnQoZWxsaXBzZSBjbG9zZXN0LXNpZGUsIHJnYmEoMzcsIDE5MSwgOTksIDAuMikgMCUsIHJnYmEoNTQsIDIyNSwgMTQzLCAwLjA0KSA4MCUsIHRyYW5zcGFyZW50KTsKfQouXzJpOXp5MiB7CiAgbWFyZ2luLXRvcDogLTMwcHg7CiAgbWFyZ2luLWJvdHRvbTogLTEwcHg7CiAgZGlzcGxheTogZmxleDsKICBhbGlnbi1pdGVtczogY2VudGVyOwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGhlaWdodDogMTIwcHg7CiAgd2lkdGg6IDE4MHB4OwogIGJhY2tncm91bmQ6IHJhZGlhbC1ncmFkaWVudChlbGxpcHNlIGNsb3Nlc3Qtc2lkZSwgcmdiYSgyMTEsMjExLDIxMSwwLjE4KSAwJSwgcmdiYSgxNzYsMTc2LDE3NiwwLjA0KSA4MCUsIHRyYW5zcGFyZW50KTsKfQ== */
 [data-rk] ._2i9zy0 {
   margin-top: -30px;
   margin-bottom: -10px;
@@ -6662,6 +6703,21 @@ input[type=number] {
       rgba(54, 225, 143, 0.04) 80%,
       transparent);
 }
+[data-rk] ._2i9zy2 {
+  margin-top: -30px;
+  margin-bottom: -10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 120px;
+  width: 180px;
+  background:
+    radial-gradient(
+      ellipse closest-side,
+      rgba(211, 211, 211, 0.18) 0%,
+      rgba(176, 176, 176, 0.04) 80%,
+      transparent);
+}
 
 /* src/components/FunNotification/FunNotification.css */
 .fun-notification-expanded {
@@ -6677,11 +6733,11 @@ input[type=number] {
   overflow: hidden;
 }
 
-/* vanilla-extract-css-ns:src/components/FunAssetAvatar/FunAssetAvatar.css.ts.vanilla.css?source=LnV3cmRjMjAgewogIHBvc2l0aW9uOiByZWxhdGl2ZTsKfQoudXdyZGMyMyB7CiAgcG9zaXRpb246IGFic29sdXRlOwogIGJvdHRvbTogMDsKICByaWdodDogMDsKfQ== */
+/* vanilla-extract-css-ns:src/components/FunAssetAvatar/FunAssetAvatar.css.ts.vanilla.css?source=LnV3cmRjMjAgewogIHBvc2l0aW9uOiByZWxhdGl2ZTsKfQoudXdyZGMyMiB7CiAgcG9zaXRpb246IGFic29sdXRlOwogIGJvdHRvbTogMDsKICByaWdodDogMDsKfQ== */
 [data-rk] .uwrdc20 {
   position: relative;
 }
-[data-rk] .uwrdc23 {
+[data-rk] .uwrdc22 {
   position: absolute;
   bottom: 0;
   right: 0;
@@ -6789,27 +6845,6 @@ input[type=number] {
   animation-name: _26hmws3;
 }
 
-/* vanilla-extract-css-ns:src/components/FunSkeletonLoader/FunSkeletonLoader.css.ts.vanilla.css?source=QGtleWZyYW1lcyBkajB4NjAwIHsKICAwJSB7CiAgICBvcGFjaXR5OiAxOwogIH0KICAxMDAlIHsKICAgIG9wYWNpdHk6IDAuNTsKICB9Cn0KLmRqMHg2MDIgewogIGFuaW1hdGlvbi1kaXJlY3Rpb246IGFsdGVybmF0ZTsKICBhbmltYXRpb24tZHVyYXRpb246IDcwMG1zOwogIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGxpbmVhcjsKICBhbmltYXRpb24taXRlcmF0aW9uLWNvdW50OiBpbmZpbml0ZTsKICBhbmltYXRpb24tZmlsbC1tb2RlOiBmb3J3YXJkczsKICBhbmltYXRpb24tbmFtZTogZGoweDYwMDsKfQouZGoweDYwMyB7CiAgZmxleDogMCAwIGF1dG87Cn0= */
-@keyframes dj0x600 {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0.5;
-  }
-}
-[data-rk] .dj0x602 {
-  animation-direction: alternate;
-  animation-duration: 700ms;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-fill-mode: forwards;
-  animation-name: dj0x600;
-}
-[data-rk] .dj0x603 {
-  flex: 0 0 auto;
-}
-
 /* vanilla-extract-css-ns:src/modals/ProfileDetails/FunProfileViews/Home/HomeCheckoutDisplayRow.css.ts.vanilla.css?source=LnVrY3Q0dDEgewogIG91dGxpbmU6IG5vbmU7Cn0KLnVrY3Q0dDE6Zm9jdXMgewogIG91dGxpbmU6IG5vbmU7Cn0= */
 [data-rk] .ukct4t1 {
   outline: none;
@@ -6857,27 +6892,6 @@ input[type=number] {
   outline: none;
 }
 
-/* src/components/FunTransactionSummary/FunTxSummaryComponents.css */
-.fun-container-content-expanded {
-  transition: all 0.5s ease-in-out;
-  max-height: 250px;
-  overflow: hidden;
-}
-.fun-container-content-collapsed {
-  max-height: 0px;
-  transition: all 0.4s ease-out;
-  overflow: hidden;
-}
-.fun-container-fee-line-show {
-  transition: all 0.2s linear;
-  transition-delay: 0.2s;
-  opacity: 1;
-}
-.fun-container-fee-line-hide {
-  transition: all 0.2s linear;
-  opacity: 0;
-}
-
 /* vanilla-extract-css-ns:src/components/FunPayments/FunPaymentMoonpayType.css.ts.vanilla.css?source=Ll8xa21wZXlmMCB7CiAgaGVpZ2h0OiB1bnNldCAhaW1wb3J0YW50OwogIHdpZHRoOiB1bnNldCAhaW1wb3J0YW50OwogIGZsZXg6IDEgIWltcG9ydGFudDsKfQouXzFrbXBleWYwIGlmcmFtZSB7CiAgYm9yZGVyOiBub25lOwp9Ci5fMWttcGV5ZjEgewogIGRpc3BsYXk6IGZsZXg7CiAgZmxleDogMTsKfQ== */
 [data-rk] ._1kmpeyf0 {
   height: unset !important;