@funkit/connect 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @funkit/connect
 
+## 4.0.1
+
+### Patch Changes
+
+- e43d84c: refactor: move mesh meta to only brokerages
+- a6ee027: fix: fix asset chain icon
+- 4738aae: fix: remove incorrect tab navigation animation in profile details
+- 9ed6697: feat: utilize new animations in all modals
+- 441a08b: refactor: more robust error handling in useCheckoutQuote
+- 99198d5: feat: use assets/allow endpoint
+- f363a3a: refactor: simplify quote refresh interface
+- 78405a8: chore: fix some biome warnings
+- 1b296d9: refactor: fallback chain switched from arbitrum to base
+- ee2a73e: feat: use dollar amounts for LP cost in transaction breakdown
+- Updated dependencies [e43d84c]
+- Updated dependencies [99198d5]
+- Updated dependencies [1b296d9]
+- Updated dependencies [ee2a73e]
+  - @funkit/api-base@1.4.0
+  - @funkit/core@2.2.7
+  - @funkit/utils@1.0.1
+  - @funkit/wagmi-tools@3.0.18
+
 ## 4.0.0
 
 ### Major Changes

package/dist/components/ConnectButton/ConnectButtonRenderer.d.ts

@@ -1,27 +1,29 @@
 import React, { type ReactNode } from 'react';
 import { type AuthenticationStatus } from '../../providers/AuthenticationContext';
+export interface AccountData {
+    address: string;
+    balanceDecimals?: number;
+    balanceFormatted?: string;
+    balanceSymbol?: string;
+    balanceNativeAmount?: string;
+    displayBalance?: string;
+    displayName: string;
+    displayAvatar: string;
+    ensAvatar?: string;
+    ensName?: string;
+}
+export interface ChainData {
+    hasIcon: boolean;
+    iconUrl?: string;
+    iconBackground?: string;
+    id: number;
+    name?: string;
+    unsupported?: boolean;
+}
 export interface ConnectButtonRendererProps {
     children: (renderProps: {
-        account?: {
-            address: string;
-            balanceDecimals?: number;
-            balanceFormatted?: string;
-            balanceSymbol?: string;
-            balanceNativeAmount?: string;
-            displayBalance?: string;
-            displayName: string;
-            displayAvatar: string;
-            ensAvatar?: string;
-            ensName?: string;
-        };
-        chain?: {
-            hasIcon: boolean;
-            iconUrl?: string;
-            iconBackground?: string;
-            id: number;
-            name?: string;
-            unsupported?: boolean;
-        };
+        account?: AccountData;
+        chain?: ChainData;
         mounted: boolean;
         authenticationStatus?: AuthenticationStatus;
         openAccountModal: () => void;

package/dist/components/FunButton/FunButton.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { type MouseEventHandler } from 'react';
 import { type BoxProps } from '../Box/Box';
 export type FunButtonTypes = 'primary' | 'secondary' | 'tertiary';
 export interface FunButtonProps {
     id?: string;
     title: string;
-    onClick?: (e?: any) => void;
+    onClick?: MouseEventHandler;
     type?: FunButtonTypes;
     isDisabled?: boolean;
     isLoading?: boolean;

package/dist/components/FunGuarantees/FunGuarantees.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MeshExchangeType } from '~/consts/mesh';
+import type { MeshExchangeType } from '~/consts/mesh';
 interface FunGuaranteesProps {
     brokerType: MeshExchangeType;
 }

package/dist/components/FunKeyValue/FunKeyValue.d.ts

@@ -1,4 +1,4 @@
-import React, { type ReactNode } from 'react';
+import React, { type MouseEventHandler, type ReactNode } from 'react';
 import { type BoxProps } from '../Box/Box';
 import { type TextProps } from '../Text/Text';
 export interface FunKeyValueProps {
@@ -7,7 +7,7 @@ export interface FunKeyValueProps {
     valueIcon?: ReactNode;
     valueText: ReactNode;
     disclaimerText?: string;
-    onClick?: null | (() => void);
+    onClick?: MouseEventHandler | null;
     hasBorder?: boolean;
     keyTextColor?: BoxProps['color'];
     keyTextSize?: TextProps['size'];
@@ -21,9 +21,9 @@ export interface FunKeyValueProps {
     reverseValueItems?: boolean;
     customValueComponent?: ReactNode;
     disclaimerTextColor?: BoxProps['color'];
-    backgroundBaseColor?: BoxProps['background'] | undefined | any;
-    borderColorBase?: BoxProps['borderColor'] | undefined | any;
-    borderColorHover?: BoxProps['borderColor'] | undefined | any;
+    backgroundBaseColor?: Extract<BoxProps['background'], string>;
+    borderColorBase?: Extract<BoxProps['borderColor'], string>;
+    borderColorHover?: Extract<BoxProps['borderColor'], string>;
     paddingY?: BoxProps['paddingY'];
     paddingX?: BoxProps['paddingX'];
     isDisabled?: boolean;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MeshExchangeType } from '~/consts/mesh';
+import type { MeshExchangeType } from '~/consts/mesh';
 import type { FunSelectOption } from '../FunSelect/FunSelect';
 interface FunSelectBrokerageProps {
     onSelect: (value: MeshExchangeType) => void;

package/dist/components/FunTooltip/FunTooltip.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 interface FunTooltipProps {
     content: string;
     children: ReactNode;

package/dist/components/ModalSelection/ModalSelection.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 type Props = {
     onClick?: React.MouseEventHandler<HTMLElement> | undefined;
-    as?: React.ElementType<any>;
+    as?: React.ElementType;
     currentlySelected?: boolean;
     ready?: boolean;
     recent?: boolean;

package/dist/consts/moonpay.d.ts

@@ -1,3 +1,10 @@
 export declare const MOONPAY_TOKENS_SUPPORTED_REGIONS: {
-    [x: string]: any;
+    [token: string]: {
+        isSupportedInUS: boolean;
+        notAllowedUSStates: string[];
+        notAllowedCountries: string[];
+        minBuyAmount: number;
+        maxBuyAmount: number;
+        precision: number;
+    };
 };

package/dist/css/modalTransitionStyles.css.d.ts

@@ -1,8 +1,8 @@
 export declare const animateContentInClass: string;
 export declare const animateContentOutClass: string;
-export declare const animateCheckoutContentIn: string;
-export declare const animateCheckoutContentOut: string;
-export declare const animateCheckoutContentInReverse: string;
-export declare const animateCheckoutContentOutReverse: string;
+export declare const slideContentIn: string;
+export declare const slideContentOut: string;
+export declare const slideContentInReverse: string;
+export declare const slideContentOutReverse: string;
 export declare const animateTitleInClass: string;
 export declare const animateTitleOutClass: string;

package/dist/domains/checkoutFees.d.ts

@@ -6,7 +6,7 @@ import type { FunkitActiveCheckoutItem } from '../providers/FunkitCheckoutContex
 interface BaseCheckoutFees {
     paymentMethod: PaymentMethod;
     marketMakerFeeUsd: number;
-    liquidityProviderFeePercentage: number;
+    liquidityProviderFeeUsd: number;
     totalFeesUsd: number;
     /** does not include the gas fee since it can be in a
      * different token than the source token */

package/dist/domains/clientMetadata.d.ts

@@ -5,7 +5,7 @@
  * Make sure it is SERIALIZABLE and BACKWARD COMPATIBLE!!
  */
 import type { FunkitActiveCheckoutItem, FunkitCheckoutConfig } from '~/providers/FunkitCheckoutContext';
-import { ApiCheckoutClientMetadata } from '@funkit/api-base';
+import type { ApiCheckoutClientMetadata } from '@funkit/api-base';
 /** Historical Checkout Configuration stored in the server
  * This is similar to FunkitCheckoutConfig but with some fields changed to serializable types
  * */

package/dist/domains/paymentMethods.d.ts

@@ -1,6 +1,6 @@
 import type { PreviewTransferResult } from '@funkit/api-base';
 import type { LinkPayload } from '@meshconnect/web-link-sdk';
-import { MeshExchangeType } from '~/consts/mesh';
+import { type MeshExchangeType } from '~/consts/mesh';
 /** Supported payment methods in FunkitConnect. **/
 export declare enum PaymentMethod {
     /** Moonpay - Credit / Debit Card **/
@@ -11,7 +11,7 @@ export declare enum PaymentMethod {
     BROKERAGE = "brokerage",
     TOKEN_TRANSFER = "token_transfer"
 }
-type PaymentMethodInfoMeta = LinkPayload & {
+type MeshMeta = LinkPayload & {
     checkoutMeshNetworkId?: string;
     computedPreviewExpirationMs?: number;
     previewTransferResult?: PreviewTransferResult;
@@ -19,11 +19,8 @@ type PaymentMethodInfoMeta = LinkPayload & {
 /** Full payment method information used in frontend during payment flows. **/
 interface PaymentMethodInfoBase {
     description: string;
-    meta: PaymentMethodInfoMeta;
     paymentMethod: PaymentMethod;
     title: string;
-    /** Only defined for brokerages */
-    brokerType?: MeshExchangeType;
 }
 export interface PaymentMethodCardInfo extends PaymentMethodInfoBase {
     paymentMethod: PaymentMethod.CARD;
@@ -31,6 +28,7 @@ export interface PaymentMethodCardInfo extends PaymentMethodInfoBase {
 export interface PaymentMethodBrokerageInfo extends PaymentMethodInfoBase {
     paymentMethod: PaymentMethod.BROKERAGE;
     brokerType: MeshExchangeType;
+    meta: MeshMeta;
 }
 export interface PaymentMethodAccountInfo extends PaymentMethodInfoBase {
     paymentMethod: PaymentMethod.ACCOUNT_BALANCE;

package/dist/domains/quote.d.ts

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

package/dist/hooks/useAllowedAssets.d.ts

@@ -0,0 +1,8 @@
+import type { Address } from 'viem';
+export declare function useAllowedAssets(): {
+    allowedAssets: {
+        [chainId in string]?: Address[];
+    } | undefined;
+    isAllowed: (chainId: number | string, tokenAddress: Address) => boolean;
+    isLoading: boolean;
+};

package/dist/hooks/useAnimatedNavigation.d.ts

@@ -1,4 +1,9 @@
 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;
 interface AnimatedNavigationResponse<T> {
     animation: AnimationState;
     navigateTo: (page: T, params?: AnimationParams) => void;
@@ -15,7 +20,8 @@ interface AnimationParams {
     skip?: boolean;
 }
 export interface AnimationState {
-    isOut: boolean | undefined;
+    isOut: boolean;
+    isSkipped: boolean;
     isReversed: boolean;
 }
 export {};

package/dist/hooks/useEffectEvent.d.ts

@@ -1,3 +1,3 @@
-type Fn = (...a: any[]) => any;
+type Fn = (...a: any[]) => unknown;
 export declare function useEffectEvent<F extends Fn>(fn: F): F;
 export {};

package/dist/hooks/useMesh.d.ts

@@ -1,6 +1,6 @@
 import { MeshExchangeType } from '~/consts/mesh';
-import { LinkPayload } from '@meshconnect/web-link-sdk';
-import { FunSelectOption } from '../components/FunSelect/FunSelect';
+import type { LinkPayload } from '@meshconnect/web-link-sdk';
+import type { FunSelectOption } from '../components/FunSelect/FunSelect';
 export declare const useSupportedExchanges: () => MeshExchangeType[];
 export declare const useMeshExchanges: ({ fullInfo, iconSize, }: {
     fullInfo?: boolean;

package/dist/index.css

@@ -6395,65 +6395,6 @@
   min-height: 56px;
 }
 
-/* vanilla-extract-css-ns:src/components/FunButton/FunButton.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfMXR5eDVudTcgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpOwogIH0KICAzMyUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMjAwZGVnKTsKICB9CiAgNjYlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDE2MGRlZyk7CiAgfQogIDEwMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTsKICB9Cn0KLl8xdHl4NW51MSB7CiAgY3Vyc29yOiBwb2ludGVyOwp9Ci5fMXR5eDVudTE6aG92ZXIgewogIHRleHQtZGVjb3JhdGlvbi1saW5lOiB1bmRlcmxpbmU7Cn0KLl8xdHl4NW51MiB7CiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGN1YmljLWJlemllcigwLjMsIDAsIDAuMDYsIDEpOwp9Ci5fMXR5eDVudTM6YWN0aXZlIHsKICB0cmFuc2Zvcm06IHNjYWxlKDAuOTgpOwp9Ci5fMXR5eDVudTQgewogIGN1cnNvcjogcG9pbnRlcjsKfQouXzF0eXg1bnU0OmZvY3VzLXZpc2libGUgewogIGJvcmRlci13aWR0aDogMnB4Owp9Ci5fMXR5eDVudTUgewogIGN1cnNvcjogZGVmYXVsdDsKfQouXzF0eXg1bnU2IHsKICBjdXJzb3I6IG5vdC1hbGxvd2VkOwp9Ci5fMXR5eDVudTggewogIGFuaW1hdGlvbjogXzF0eXg1bnU3IDFzOwp9 */
-@keyframes _1tyx5nu7 {
-  0% {
-    transform: rotate(0deg);
-  }
-  33% {
-    transform: rotate(200deg);
-  }
-  66% {
-    transform: rotate(160deg);
-  }
-  100% {
-    transform: rotate(180deg);
-  }
-}
-[data-rk] ._1tyx5nu1 {
-  cursor: pointer;
-}
-[data-rk] ._1tyx5nu1:hover {
-  text-decoration-line: underline;
-}
-[data-rk] ._1tyx5nu2 {
-  transition: all 150ms cubic-bezier(0.3, 0, 0.06, 1);
-}
-[data-rk] ._1tyx5nu3:active {
-  transform: scale(0.98);
-}
-[data-rk] ._1tyx5nu4 {
-  cursor: pointer;
-}
-[data-rk] ._1tyx5nu4:focus-visible {
-  border-width: 2px;
-}
-[data-rk] ._1tyx5nu5 {
-  cursor: default;
-}
-[data-rk] ._1tyx5nu6 {
-  cursor: not-allowed;
-}
-[data-rk] ._1tyx5nu8 {
-  animation: _1tyx5nu7 1s;
-}
-
-/* vanilla-extract-css-ns:src/components/FunBottomBar/FunBottomBar.css.ts.vanilla.css?source=Lm41cXdpMCB7CiAgcGFkZGluZy10b3A6IDEycHg7CiAgJjpub3QoOmVtcHR5KSA+IDpmaXJzdC1jaGlsZCB7CiAgICBtYXJnaW4tdG9wOiAtNnB4OwogIH0KfQ== */
-[data-rk] .n5qwi0 {
-  padding-top: 12px;
-  [data-rk] &:not(:empty) > :first-child {
-    margin-top: -6px;
-  }
-}
-
-/* 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;
-}
-
 /* vanilla-extract-css-ns:src/css/modalTransitionStyles.css.ts.vanilla.css?source=#H4sIAAAAAAAAE83U3WqDMBgG4HOv4jsZONAQ2/p/0svYaYyxZDWxRGXthvc+poymtnFu3ZhHBpP35ckHut2zU6GIYDXUze75WGJ4swDwQ/8AaBSRdVEpkUBNSclsjMLHtN+qDoTy5pQARquPN50F4GFz0hvnvCHVWdsxwvsCYaoCiKfk0Q/lGPlXSaN9Y7T3y5I07Mn2gsPRUGmiaGk8f5L+HI2pbwbFnbjJDU40hzPV+bvTif94Ot8bDr3UTF59xuVyQ90t/rUODSWr/gCRXJCGV9LNW9UvEgh9UacXew0XXO7copV0OELbjFM3Y6+cKRujtQPYAYxw4MDwBZ+zBS9LV1Q5S6Co1AtR+ahcEsGSz39Uegaulwj0NGCwROBGA4ZLBPoakCwRGGnAbInAWAOye4All4yoOyRUkxT/KslTq3sHeXaGf/IIAAA= */
 @keyframes stgjxl0 {
   0% {
@@ -6584,6 +6525,65 @@
   animation-name: stgjxld;
 }
 
+/* vanilla-extract-css-ns:src/components/FunButton/FunButton.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfMXR5eDVudTcgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpOwogIH0KICAzMyUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMjAwZGVnKTsKICB9CiAgNjYlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDE2MGRlZyk7CiAgfQogIDEwMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTsKICB9Cn0KLl8xdHl4NW51MSB7CiAgY3Vyc29yOiBwb2ludGVyOwp9Ci5fMXR5eDVudTE6aG92ZXIgewogIHRleHQtZGVjb3JhdGlvbi1saW5lOiB1bmRlcmxpbmU7Cn0KLl8xdHl4NW51MiB7CiAgdHJhbnNpdGlvbjogYWxsIDE1MG1zIGN1YmljLWJlemllcigwLjMsIDAsIDAuMDYsIDEpOwp9Ci5fMXR5eDVudTM6YWN0aXZlIHsKICB0cmFuc2Zvcm06IHNjYWxlKDAuOTgpOwp9Ci5fMXR5eDVudTQgewogIGN1cnNvcjogcG9pbnRlcjsKfQouXzF0eXg1bnU0OmZvY3VzLXZpc2libGUgewogIGJvcmRlci13aWR0aDogMnB4Owp9Ci5fMXR5eDVudTUgewogIGN1cnNvcjogZGVmYXVsdDsKfQouXzF0eXg1bnU2IHsKICBjdXJzb3I6IG5vdC1hbGxvd2VkOwp9Ci5fMXR5eDVudTggewogIGFuaW1hdGlvbjogXzF0eXg1bnU3IDFzOwp9 */
+@keyframes _1tyx5nu7 {
+  0% {
+    transform: rotate(0deg);
+  }
+  33% {
+    transform: rotate(200deg);
+  }
+  66% {
+    transform: rotate(160deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
+}
+[data-rk] ._1tyx5nu1 {
+  cursor: pointer;
+}
+[data-rk] ._1tyx5nu1:hover {
+  text-decoration-line: underline;
+}
+[data-rk] ._1tyx5nu2 {
+  transition: all 150ms cubic-bezier(0.3, 0, 0.06, 1);
+}
+[data-rk] ._1tyx5nu3:active {
+  transform: scale(0.98);
+}
+[data-rk] ._1tyx5nu4 {
+  cursor: pointer;
+}
+[data-rk] ._1tyx5nu4:focus-visible {
+  border-width: 2px;
+}
+[data-rk] ._1tyx5nu5 {
+  cursor: default;
+}
+[data-rk] ._1tyx5nu6 {
+  cursor: not-allowed;
+}
+[data-rk] ._1tyx5nu8 {
+  animation: _1tyx5nu7 1s;
+}
+
+/* vanilla-extract-css-ns:src/components/FunBottomBar/FunBottomBar.css.ts.vanilla.css?source=Lm41cXdpMCB7CiAgcGFkZGluZy10b3A6IDEycHg7CiAgJjpub3QoOmVtcHR5KSA+IDpmaXJzdC1jaGlsZCB7CiAgICBtYXJnaW4tdG9wOiAtNnB4OwogIH0KfQ== */
+[data-rk] .n5qwi0 {
+  padding-top: 12px;
+  [data-rk] &:not(:empty) > :first-child {
+    margin-top: -6px;
+  }
+}
+
+/* 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;
+}
+
 /* vanilla-extract-css-ns:src/components/FunSkeletonLoader/FunSkeletonLoader.css.ts.vanilla.css?source=QGtleWZyYW1lcyBkajB4NjAwIHsKICAwJSB7CiAgICBvcGFjaXR5OiAxOwogIH0KICAxMDAlIHsKICAgIG9wYWNpdHk6IDAuNTsKICB9Cn0KLmRqMHg2MDIgewogIGFuaW1hdGlvbi1kaXJlY3Rpb246IGFsdGVybmF0ZTsKICBhbmltYXRpb24tZHVyYXRpb246IDcwMG1zOwogIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGxpbmVhcjsKICBhbmltYXRpb24taXRlcmF0aW9uLWNvdW50OiBpbmZpbml0ZTsKICBhbmltYXRpb24tZmlsbC1tb2RlOiBmb3J3YXJkczsKICBhbmltYXRpb24tbmFtZTogZGoweDYwMDsKfQouZGoweDYwMyB7CiAgZmxleDogMCAwIGF1dG87Cn0= */
 @keyframes dj0x600 {
   0% {
@@ -6796,22 +6796,12 @@ input[type=number] {
   overflow: hidden;
 }
 
-/* vanilla-extract-css-ns:src/components/FunAssetAvatar/FunAssetAvatar.css.ts.vanilla.css?source=LnV3cmRjMjAgewogIHBvc2l0aW9uOiByZWxhdGl2ZTsKfQoudXdyZGMyMiB7CiAgcG9zaXRpb246IGFic29sdXRlOwogIGJvdHRvbTogMDsKICByaWdodDogMDsKfQ== */
-[data-rk] .uwrdc20 {
-  position: relative;
-}
-[data-rk] .uwrdc22 {
-  position: absolute;
-  bottom: 0;
-  right: 0;
-}
-
 /* 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/modals/ProfileDetails/FunProfileViews/Home/Home.css.ts.vanilla.css?source=#H4sIAAAAAAAAE8WTy27DIBBF9/6K2aRqF7bAifPAUpU/qZANCS2PCHBTq8q/V3aSys/G2TQrkIa599wBth+s5JYq5uAtXu7V0SH4DgDQrF4AzIFmwpcEUBSnAcApAMCoX8bn4inY9hTxiCK+6m3udkPjbnHbzVuqHTdWEXAZlewZRauXdNAMYM/Ebu8JxGg24N6Twl0h3JapesdB5zdAp6s3JziQd30zbzItL4qSntTI4IYCL9qBrz2rc89dV9Uh7Y5k8jQr0OiCl9RiVAtFvTA6zAtbbwjMEVIubRW9UELvQl7o7HxGCs2obR/iQspQmZwR4MYeqc07KpoqRn4/XtqAWY7C4OQ/YHATZvVgmLgJs65hcuEOkpYEuGRfVWu1hrmw7OKaGVkoXVXeC+cFL8PMaM+0J5Ax7VkN9ASvkIvPyyv6M+DEiBNCjsZcdF/k5sFzn6fB6QelkjUOIQYAAA== */
+/* vanilla-extract-css-ns:src/modals/ProfileDetails/FunProfileViews/Home/Home.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfMjZobXdzMCB7CiAgMCUgewogICAgb3BhY2l0eTogMC4yOwogIH0KICAxMDAlIHsKICAgIG9wYWNpdHk6IDE7CiAgfQp9CkBrZXlmcmFtZXMgXzI2aG13czEgewogIDAlIHsKICAgIG9wYWNpdHk6IDE7CiAgfQogIDkwJSB7CiAgICBvcGFjaXR5OiAwLjI7CiAgfQogIDEwMCUgewogICAgb3BhY2l0eTogMDsKICB9Cn0KQGtleWZyYW1lcyBfMjZobXdzNCB7CiAgMCUgewogICAgaGVpZ2h0OiA3MCU7CiAgICB0cmFuc2Zvcm06IHNjYWxlKDAuNyk7CiAgICBvcGFjaXR5OiAwLjI7CiAgfQogIDEwMCUgewogICAgaGVpZ2h0OiAxMDAlOwogICAgdHJhbnNmb3JtOiBzY2FsZSgxKTsKICAgIG9wYWNpdHk6IDE7CiAgfQp9Ci5fMjZobXdzMiB7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiAzMDBtczsKICBhbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uOiBsaW5lYXI7CiAgYW5pbWF0aW9uLWZpbGwtbW9kZTogZm9yd2FyZHM7CiAgYW5pbWF0aW9uLW5hbWU6IF8yNmhtd3MwOwp9Ci5fMjZobXdzMyB7CiAgYW5pbWF0aW9uLWR1cmF0aW9uOiA3NW1zOwogIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGxpbmVhcjsKICBhbmltYXRpb24tZmlsbC1tb2RlOiBmb3J3YXJkczsKICBhbmltYXRpb24tbmFtZTogXzI2aG13czE7Cn0KLl8yNmhtd3M1IHsKICAmID4gZGl2IHsKICAgIGFuaW1hdGlvbi1kdXJhdGlvbjogNzVtczsKICAgIGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGxpbmVhcjsKICAgIGFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzOwogICAgYW5pbWF0aW9uLW5hbWU6IF8yNmhtd3M0OwogIH0KfQ== */
 @keyframes _26hmws0 {
   0% {
     opacity: 0.2;
@@ -6831,35 +6821,6 @@ input[type=number] {
     opacity: 0;
   }
 }
-@keyframes _26hmws2 {
-  0% {
-    transform: scale(0.7);
-    opacity: 0.2;
-    height: 20%;
-  }
-  100% {
-    transform: scale(1);
-    opacity: 1;
-    height: 100%;
-  }
-}
-@keyframes _26hmws3 {
-  0% {
-    transform: scale(1);
-    opacity: 1;
-    height: 100%;
-  }
-  90% {
-    transform: scale(0.8);
-    opacity: 0.2;
-    height: 50%;
-  }
-  100% {
-    transform: scale(0.5);
-    opacity: 0;
-    height: 20%;
-  }
-}
 @keyframes _26hmws4 {
   0% {
     height: 70%;
@@ -6872,40 +6833,35 @@ input[type=number] {
     opacity: 1;
   }
 }
-[data-rk] ._26hmws5 {
+[data-rk] ._26hmws2 {
   animation-duration: 300ms;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
   animation-name: _26hmws0;
 }
-[data-rk] ._26hmws6 {
-  animation-duration: 150ms;
+[data-rk] ._26hmws3 {
+  animation-duration: 75ms;
   animation-timing-function: linear;
   animation-fill-mode: forwards;
   animation-name: _26hmws1;
 }
-[data-rk] ._26hmws7 {
-  animation-duration: 150ms;
-  animation-timing-function: linear;
-  animation-fill-mode: forwards;
-  animation-name: _26hmws2;
-}
-[data-rk] ._26hmws8 {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+[data-rk] ._26hmws5 {
   [data-rk] & > div {
-    animation-duration: 150ms;
+    animation-duration: 75ms;
     animation-timing-function: linear;
     animation-fill-mode: forwards;
     animation-name: _26hmws4;
   }
 }
-[data-rk] ._26hmws9 {
-  animation-duration: 150ms;
-  animation-timing-function: linear;
-  animation-fill-mode: forwards;
-  animation-name: _26hmws3;
+
+/* vanilla-extract-css-ns:src/components/FunAssetAvatar/FunAssetAvatar.css.ts.vanilla.css?source=LnV3cmRjMjAgewogIHBvc2l0aW9uOiByZWxhdGl2ZTsKfQoudXdyZGMyMiB7CiAgcG9zaXRpb246IGFic29sdXRlOwogIGJvdHRvbTogMDsKICByaWdodDogMDsKfQ== */
+[data-rk] .uwrdc20 {
+  position: relative;
+}
+[data-rk] .uwrdc22 {
+  position: absolute;
+  bottom: 0;
+  right: 0;
 }
 
 /* vanilla-extract-css-ns:src/modals/ProfileDetails/FunProfileViews/Home/HomeCheckoutDisplayRow.css.ts.vanilla.css?source=LnVrY3Q0dDEgewogIG91dGxpbmU6IG5vbmU7Cn0KLnVrY3Q0dDE6Zm9jdXMgewogIG91dGxpbmU6IG5vbmU7Cn0= */