@funkit/connect 1.0.24 → 1.0.25

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @funkit/connect
 
+## 1.0.25
+
+### Patch Changes
+
+- f27a1fc: feat: absolute to usd input switcher
+- 286c947: refactor: notification animations
+- f27a1fc: refactor: more animations
+- 286c947: feat: payment selection flow improvements
+- a441de2: feat: new purchase history notification
+- 18a9e56: feat: custom funkit wagmi hook `useFunkitSwitchChain`
+- bbdf020: feat: checkout history v2
+
 ## 1.0.24
 
 ### Patch Changes

package/dist/{chunk-2GFNZKMA.js → chunk-4SROXH24.js}

@@ -53,7 +53,7 @@ var darkTheme = ({
     solidLine: "#FFF",
     rightTranslucentLine: "linear-gradient(to right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.5))",
     leftTranslucentLine: "linear-gradient(to right, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0))",
-    standby: "#FFD641",
+    standby: "#F6851B",
     loadingBase: "rgba(255, 255, 255, 0.05)",
     loadingAccent: "rgba(255, 255, 255, 0.2)",
     modalBackdrop: "rgba(0, 0, 0, 0.4)",
@@ -76,8 +76,8 @@ var darkTheme = ({
     buttonTextPrimary: "#000000",
     buttonTextSecondary: "#FFFFFF",
     buttonTextDisabled: "#000000",
-    buttonWarning: "#C60000",
-    buttonSuccess: "#1DB847",
+    buttonWarning: "#F34126",
+    buttonSuccess: "#2EA200",
     buttonTextWarning: "#FFFFFF",
     buttonTextSuccess: "#FFFFFF",
     transparent: "transparent",

package/dist/{chunk-RA4J3G3B.js → chunk-EYTYHIPM.js}

@@ -53,7 +53,7 @@ var lightTheme = ({
     solidLine: "#000",
     rightTranslucentLine: "linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.5))",
     leftTranslucentLine: "linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))",
-    standby: "#FFD641",
+    standby: "#F6851B",
     loadingBase: "rgba(0, 0, 0, 0.05)",
     loadingAccent: "rgba(0, 0, 0, 0.2)",
     modalBackdrop: "rgba(0, 0, 0, 0.4)",
@@ -73,8 +73,8 @@ var lightTheme = ({
     buttonPrimary: accentColor,
     buttonProcessing: accentColorForeground,
     buttonDisabled: "#31A3F826",
-    buttonWarning: "#C60000",
-    buttonSuccess: "#1DB847",
+    buttonWarning: "#F34126",
+    buttonSuccess: "#2EA200",
     buttonTextWarning: "#FFFFFF",
     buttonTextSuccess: "#FFFFFF",
     buttonTextPrimary: "#FFFFFF",

package/dist/components/ChainModal/Chain.d.ts

@@ -13,5 +13,10 @@ interface ChainProps {
     src: string | AsyncImageSrc | undefined | null;
     idx: number;
 }
+export declare function ChainLineItem({ chainId, chainIconSize, gap, }: {
+    chainId: number;
+    chainIconSize: BoxProps['height'];
+    gap?: BoxProps['gap'];
+}): React.JSX.Element | null;
 declare const Chain: ({ chainId, currentChainId, switchChain, chainIconSize, isLoading, src, name, iconBackground, idx, }: ChainProps) => React.JSX.Element;
 export default Chain;

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

@@ -1,3 +1,4 @@
 export declare const funLinkButtonStyle: string;
 export declare const funIconButtonStyle: string;
 export declare const iconStyle: string;
+export declare const rotateStyle: string;

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

@@ -3,7 +3,7 @@ import { BoxProps } from '../Box/Box';
 /**
  * Circular icon button with dynamic height and width
  */
-export declare const FunIconButton: ({ onClick, icon, size, showBorder, paddingX, paddingY, borderRadius, ariaLabel, color, background, width, }: {
+export declare const FunIconButton: ({ onClick, icon, size, showBorder, paddingX, paddingY, borderRadius, ariaLabel, color, background, width, rotateIconAnimation, }: {
     onClick: () => void;
     icon: React.ReactNode;
     size?: BoxProps['height'];
@@ -15,4 +15,5 @@ export declare const FunIconButton: ({ onClick, icon, size, showBorder, paddingX
     color?: BoxProps['color'];
     background?: BoxProps['background'];
     width?: BoxProps['width'];
+    rotateIconAnimation?: boolean | undefined;
 }) => React.JSX.Element;

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

@@ -1,12 +1,16 @@
+import './FunNotification.css';
 import React, { ReactNode } from 'react';
 import { Box } from '../Box/Box';
 import { TextProps } from '../Text/Text';
 interface FunNotificationProps {
     type?: FunNotificationType;
     description: string | ReactNode;
+    actionText?: string;
+    onAction?: () => void;
     textProps?: Omit<TextProps, 'color'>;
     containerProps?: React.ComponentProps<typeof Box>;
+    isVisible?: boolean;
 }
 type FunNotificationType = 'default' | 'error';
-export declare function FunNotification({ type, description, textProps, containerProps, }: FunNotificationProps): React.JSX.Element;
+export declare function FunNotification({ type, description, actionText, onAction, textProps, containerProps, isVisible, }: FunNotificationProps): React.JSX.Element;
 export {};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export declare function FunTxSummaryBox({ children }: {
+    children: any;
+}): React.JSX.Element;
+export declare function FunTxSummaryLineItem({ children, ...otherProps }: any): React.JSX.Element;
+export declare function FunTxSummaryLineItemKeyText({ text }: {
+    text: string;
+}): React.JSX.Element;
+export declare function FunTxSummaryDivider(): React.JSX.Element;

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

@@ -0,0 +1,5 @@
+import { CheckoutHistoryItem } from '@funkit/core';
+import React from 'react';
+export declare function FunTxSummaryHistory({ checkoutHistoryItem, }: {
+    checkoutHistoryItem: CheckoutHistoryItem;
+}): React.JSX.Element;

package/dist/components/FunkitProvider/GeneralWalletProvider.d.ts

@@ -99,4 +99,14 @@ export declare const useFunkitDisconnect: () => {
     submittedAt: number;
     connectors: readonly import("wagmi").Connector[];
 };
+/**
+ * Replacement for wagmi's useSwitchChains
+ */
+export declare const useFunkitSwitchChains: ({ onSettled, }: {
+    onSettled?: (() => void) | undefined;
+}) => {
+    switchChain: (params: any) => void;
+    switchChainAsync: (params: any) => Promise<void>;
+    pendingChainId: number | null;
+};
 export {};

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const CompletedStatusIcon: () => React.JSX.Element;
+export declare const PendingStatusIcon: () => React.JSX.Element;
+export declare const FailedStatusIcon: () => React.JSX.Element;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SwitchIcon: () => React.JSX.Element;

package/dist/index.css

@@ -4579,7 +4579,7 @@
   animation-name: stgjxl1;
 }
 
-/* vanilla-extract-css-ns:src/components/FunButton/FunButton.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfMXR5eDVudTIgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpOwogIH0KICAzMyUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMTVkZWcpOwogIH0KICA2NiUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoLTE1ZGVnKTsKICB9CiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTsKICB9Cn0KLl8xdHl4NW51MSB7CiAgY3Vyc29yOiBwb2ludGVyOwp9Ci5fMXR5eDVudTE6aG92ZXIgewogIHRleHQtZGVjb3JhdGlvbi1saW5lOiB1bmRlcmxpbmU7Cn0KLl8xdHl4NW51MyB7CiAgY3Vyc29yOiBwb2ludGVyOwp9Ci5fMXR5eDVudTM6aG92ZXIgLl8xdHl4NW51NCB7CiAgYW5pbWF0aW9uOiBfMXR5eDVudTIgMC42cyBlYXNlLWluLW91dDsKfQ== */
+/* vanilla-extract-css-ns:src/components/FunButton/FunButton.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfMXR5eDVudTIgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpOwogIH0KICAzMyUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMTVkZWcpOwogIH0KICA2NiUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoLTE1ZGVnKTsKICB9CiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTsKICB9Cn0KQGtleWZyYW1lcyBfMXR5eDVudTUgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpOwogIH0KICAzMyUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMjAwZGVnKTsKICB9CiAgNjYlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDE2MGRlZyk7CiAgfQogIDEwMCUgewogICAgdHJhbnNmb3JtOiByb3RhdGUoMTgwZGVnKTsKICB9Cn0KLl8xdHl4NW51MSB7CiAgY3Vyc29yOiBwb2ludGVyOwp9Ci5fMXR5eDVudTE6aG92ZXIgewogIHRleHQtZGVjb3JhdGlvbi1saW5lOiB1bmRlcmxpbmU7Cn0KLl8xdHl4NW51MyB7CiAgY3Vyc29yOiBwb2ludGVyOwp9Ci5fMXR5eDVudTM6aG92ZXIgLl8xdHl4NW51NCB7CiAgYW5pbWF0aW9uOiBfMXR5eDVudTIgMC42cyBlYXNlLWluLW91dDsKfQouXzF0eXg1bnU2IHsKICBhbmltYXRpb246IF8xdHl4NW51NSAxczsKfQ== */
 @keyframes _1tyx5nu2 {
   0% {
     transform: rotate(0deg);
@@ -4594,6 +4594,20 @@
     transform: rotate(0deg);
   }
 }
+@keyframes _1tyx5nu5 {
+  0% {
+    transform: rotate(0deg);
+  }
+  33% {
+    transform: rotate(200deg);
+  }
+  66% {
+    transform: rotate(160deg);
+  }
+  100% {
+    transform: rotate(180deg);
+  }
+}
 [data-rk] ._1tyx5nu1 {
   cursor: pointer;
 }
@@ -4606,6 +4620,9 @@
 [data-rk] ._1tyx5nu3:hover ._1tyx5nu4 {
   animation: _1tyx5nu2 0.6s ease-in-out;
 }
+[data-rk] ._1tyx5nu6 {
+  animation: _1tyx5nu5 1s;
+}
 
 /* vanilla-extract-css-ns:src/components/FunModalTitleSection/FunModalTitleSection.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfN2psZ3g3MCB7CiAgMCUgewogICAgb3BhY2l0eTogMC4yOwogIH0KICAxMDAlIHsKICAgIG9wYWNpdHk6IDE7CiAgfQp9CkBrZXlmcmFtZXMgXzdqbGd4NzEgewogIDAlIHsKICAgIG9wYWNpdHk6IDE7CiAgfQogIDEwMCUgewogICAgb3BhY2l0eTogMC4yOwogIH0KfQouXzdqbGd4NzIgewogIGFuaW1hdGlvbi1kdXJhdGlvbjogMzAwbXM7CiAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyOwogIGFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzOwogIGFuaW1hdGlvbi1uYW1lOiBfN2psZ3g3MDsKfQouXzdqbGd4NzMgewogIGFuaW1hdGlvbi1kdXJhdGlvbjogMzAwbXM7CiAgYW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogbGluZWFyOwogIGFuaW1hdGlvbi1maWxsLW1vZGU6IGZvcndhcmRzOwogIGFuaW1hdGlvbi1uYW1lOiBfN2psZ3g3MTsKfQ== */
 @keyframes _7jlgx70 {
@@ -4637,6 +4654,30 @@
   animation-name: _7jlgx71;
 }
 
+/* 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;
+}
+
+/* src/components/FunNotification/FunNotification.css */
+.fun-notification-expanded {
+  transition: all 0.3s, opacity 0.3s;
+  overflow: hidden;
+}
+.fun-notification-collapsed {
+  max-height: 0px;
+  opacity: 0;
+  padding-top: 0px !important;
+  padding-bottom: 0px !important;
+  transition: all 0.3s, opacity 0.2s;
+  overflow: hidden;
+}
+
 /* vanilla-extract-css-ns:src/components/Icons/Icons.css.ts.vanilla.css?source=QGtleWZyYW1lcyBxZTIyMWExIHsKICAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgwZGVnKTsKICB9CiAgMTAwJSB7CiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOwogIH0KfQoucWUyMjFhMiB7CiAgYW5pbWF0aW9uOiBxZTIyMWExIDNzIGluZmluaXRlIGxpbmVhcjsKfQoucWUyMjFhMyB7CiAgYmFja2dyb3VuZDogY29uaWMtZ3JhZGllbnQoZnJvbSAxODBkZWcgYXQgNTAlIDUwJSwgcmdiYSg3MiwgMTQ2LCAyNTQsIDApIDBkZWcsIGN1cnJlbnRDb2xvciAyODIuMDRkZWcsIHJnYmEoNzIsIDE0NiwgMjU0LCAwKSAzMTkuODZkZWcsIHJnYmEoNzIsIDE0NiwgMjU0LCAwKSAzNjBkZWcpOwogIGhlaWdodDogMjFweDsKICB3aWR0aDogMjFweDsKfQ== */
 @keyframes qe221a1 {
   0% {
@@ -4705,26 +4746,16 @@ input[type=number] {
 
 /* src/components/FunTransactionSummary/FunTransactionSummary.css */
 .fun-container-content-expanded {
-  transition: max-height 0.6s ease-in-out;
+  transition: all 0.5s ease-in-out;
   max-height: 200px;
   overflow: hidden;
 }
 .fun-container-content-collapsed {
   max-height: 0px;
-  transition: max-height 0.4s ease-out;
+  transition: all 0.4s ease-out;
   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/components/FunPayments/FunPaymentMoonpayType.css.ts.vanilla.css?source=Ll8xa21wZXlmMCBpZnJhbWUgewogIGJvcmRlcjogbm9uZTsKfQ== */
 [data-rk] ._1kmpeyf0 iframe {
   border: none;

package/dist/index.d.ts

@@ -24,3 +24,4 @@ export { lightTheme } from './themes/lightTheme';
 export { useAddRecentTransaction } from './transactions/useAddRecentTransaction';
 export type { FunkitConnectWalletConnectParameters, Wallet, WalletDetailsParams, WalletList, } from './wallets/Wallet';
 export { useFunkitDisconnect } from './components/FunkitProvider/GeneralWalletProvider';
+export { useFunkitSwitchChains } from './components/FunkitProvider/GeneralWalletProvider';