@matchain/matchid-sdk-react 0.1.48-alpha.2 → 0.1.48-alpha.4

package/dist/hooks/index.mjs

@@ -3,12 +3,13 @@ import {
   useMatchChain,
   useMatchEvents,
   useMatchWallet,
+  useMatchWalletRecords,
   useModal,
   useReceipt,
   useToast,
   useUserInfo,
   useWallet
-} from "../chunk-D6IUBR7S.mjs";
+} from "../chunk-546GCDLV.mjs";
 import "../chunk-UA6XHZHX.mjs";
 import {
   useLayout_exports
@@ -21,6 +22,7 @@ export {
   useMatchChain,
   useMatchEvents,
   useMatchWallet,
+  useMatchWalletRecords,
   useModal,
   useReceipt,
   useToast,

package/dist/{index-BVatQlwF.d.mts → index-B-s1k4Da.d.mts}

@@ -1,5 +1,5 @@
 import { A as AuthParams, C as ChainType, E as EmbeddedWalletsParams, R as RecoveryType } from './mpc-CTbBWHld.mjs';
-import { A as AnyObject, j as AppConfigType, k as BindInfoType, l as BindItemType, m as BindWalletParam, B as ButtonProps, C as CEXType, D as DeepPartial, n as DrawerProps, E as EmailModalProps, a as IEnvConfigType, o as IEnvName, p as ILoginWalletReq, I as IMatchEvents, g as ISocialLoginMethod, q as IconProps, r as InputProps, L as LocaleType, b as LoginBoxProps, i as LoginMethodType, f as LoginModalProps, e as LoginPanelProps, s as MessageType, t as MetaPageType, u as ModalProps, M as ModalWithHeaderProps, O as OtherLoginMethodType, h as OverviewInfo, v as PohItemType, w as PohZkpassParams, P as PopoverPositionType, x as PopoverProps, d as PopoverTypeType, R as RecommendLoginMethodType, T as ThemeType, y as UIProps, z as UserAssetToken, U as UserChainType, F as UserImportTokenType, G as UserPopoverProps, H as UserTransactionType, J as WalletAssetType, K as WalletChainType, W as WalletConfigType, N as WalletPanelProps, Q as WalletReceiveMessageType, c as WalletType } from './types-DQq17lf4.mjs';
+import { A as AnyObject, k as AppConfigType, l as BindInfoType, m as BindItemType, n as BindWalletParam, B as ButtonProps, C as CEXType, D as DeepPartial, o as DrawerProps, E as EmailModalProps, a as IEnvConfigType, p as IEnvName, q as ILoginWalletReq, I as IMatchEvents, g as ISocialLoginMethod, r as IconProps, s as InputProps, L as LocaleType, b as LoginBoxProps, i as LoginMethodType, f as LoginModalProps, e as LoginPanelProps, t as MessageType, u as MetaPageType, v as ModalProps, M as ModalWithHeaderProps, O as OtherLoginMethodType, h as OverviewInfo, w as PohItemType, x as PohZkpassParams, P as PopoverPositionType, y as PopoverProps, d as PopoverTypeType, R as RecommendLoginMethodType, T as ThemeType, z as UIProps, F as UserAssetToken, U as UserChainType, G as UserImportTokenType, H as UserPopoverProps, j as UserTransactionType, J as WalletAssetType, K as WalletChainType, W as WalletConfigType, N as WalletPanelProps, Q as WalletReceiveMessageType, c as WalletType } from './types-CHkU0WHZ.mjs';
 
 declare const index_AnyObject: typeof AnyObject;
 declare const index_AppConfigType: typeof AppConfigType;

package/dist/{index-BIgM4fy0.d.mts → index-B8DYrhSW.d.mts}

@@ -1,6 +1,6 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { UseQueryOptions } from '@tanstack/react-query/src/types';
-import { w as PohZkpassParams, H as UserTransactionType, J as WalletAssetType, t as MetaPageType, l as BindItemType, k as BindInfoType, v as PohItemType, U as UserChainType, z as UserAssetToken, F as UserImportTokenType, K as WalletChainType } from './types-DQq17lf4.mjs';
+import { x as PohZkpassParams, j as UserTransactionType, J as WalletAssetType, u as MetaPageType, m as BindItemType, l as BindInfoType, w as PohItemType, U as UserChainType, F as UserAssetToken, G as UserImportTokenType, K as WalletChainType } from './types-CHkU0WHZ.mjs';
 
 declare const isSuccess: (res: {
     code: number;

package/dist/{index-CGs_yTFg.d.ts → index-BHvCA7F9.d.ts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as EmailModalProps, b as LoginBoxProps, B as ButtonProps, O as OtherLoginMethodType, R as RecommendLoginMethodType, c as WalletType, P as PopoverPositionType, d as PopoverTypeType, e as LoginPanelProps, f as LoginModalProps, M as ModalWithHeaderProps } from './types-DQq17lf4.js';
-import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-CKiK4KHj.js';
+import { E as EmailModalProps, b as LoginBoxProps, B as ButtonProps, O as OtherLoginMethodType, R as RecommendLoginMethodType, c as WalletType, P as PopoverPositionType, d as PopoverTypeType, e as LoginPanelProps, f as LoginModalProps, M as ModalWithHeaderProps } from './types-CHkU0WHZ.js';
+import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-Bzcc-y8m.js';
 import { ReactNode } from 'react';
 
 declare function EmailModal({ isOpen, width, onClose, onBack, onLogin }: EmailModalProps): react_jsx_runtime.JSX.Element;

package/dist/{index-M7ZB3yR5.d.mts → index-BZrddrq-.d.mts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as EmailModalProps, b as LoginBoxProps, B as ButtonProps, O as OtherLoginMethodType, R as RecommendLoginMethodType, c as WalletType, P as PopoverPositionType, d as PopoverTypeType, e as LoginPanelProps, f as LoginModalProps, M as ModalWithHeaderProps } from './types-DQq17lf4.mjs';
-import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-Bb7IkjUW.mjs';
+import { E as EmailModalProps, b as LoginBoxProps, B as ButtonProps, O as OtherLoginMethodType, R as RecommendLoginMethodType, c as WalletType, P as PopoverPositionType, d as PopoverTypeType, e as LoginPanelProps, f as LoginModalProps, M as ModalWithHeaderProps } from './types-CHkU0WHZ.mjs';
+import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-DbG5IjhP.mjs';
 import { ReactNode } from 'react';
 
 declare function EmailModal({ isOpen, width, onClose, onBack, onLogin }: EmailModalProps): react_jsx_runtime.JSX.Element;

package/dist/{index-DamklTOJ.d.mts → index-BvLpvebq.d.mts}

@@ -1,6 +1,6 @@
-import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-Bb7IkjUW.mjs';
+import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-DbG5IjhP.mjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { n as DrawerProps, N as WalletPanelProps, y as UIProps } from './types-DQq17lf4.mjs';
+import { o as DrawerProps, N as WalletPanelProps, z as UIProps } from './types-CHkU0WHZ.mjs';
 import { Hash, Chain } from 'viem';
 import { CSSProperties } from 'react';
 

package/dist/{index-CKiK4KHj.d.ts → index-Bzcc-y8m.d.ts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, PropsWithChildren } from 'react';
-import { r as InputProps, B as ButtonProps, u as ModalProps, M as ModalWithHeaderProps, x as PopoverProps } from './types-DQq17lf4.js';
+import { s as InputProps, B as ButtonProps, v as ModalProps, M as ModalWithHeaderProps, y as PopoverProps } from './types-CHkU0WHZ.js';
 
 declare function Field({ label, children, error, required, className }: {
     label: ReactNode;

package/dist/{index-BwD1ij0H.d.ts → index-Cwx2p8th.d.ts}

@@ -1,6 +1,6 @@
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { UseQueryOptions } from '@tanstack/react-query/src/types';
-import { w as PohZkpassParams, H as UserTransactionType, J as WalletAssetType, t as MetaPageType, l as BindItemType, k as BindInfoType, v as PohItemType, U as UserChainType, z as UserAssetToken, F as UserImportTokenType, K as WalletChainType } from './types-DQq17lf4.js';
+import { x as PohZkpassParams, j as UserTransactionType, J as WalletAssetType, u as MetaPageType, m as BindItemType, l as BindInfoType, w as PohItemType, U as UserChainType, F as UserAssetToken, G as UserImportTokenType, K as WalletChainType } from './types-CHkU0WHZ.js';
 
 declare const isSuccess: (res: {
     code: number;

package/dist/{index-C2-M-aBb.d.ts → index-DCeOyAw8.d.ts}

@@ -1,6 +1,6 @@
-import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-CKiK4KHj.js';
+import { B as Button, F as Field, I as Input, M as Modal, a as ModalWithHeader, O as Overlay, P as Popover } from './index-Bzcc-y8m.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { n as DrawerProps, N as WalletPanelProps, y as UIProps } from './types-DQq17lf4.js';
+import { o as DrawerProps, N as WalletPanelProps, z as UIProps } from './types-CHkU0WHZ.js';
 import { Hash, Chain } from 'viem';
 import { CSSProperties } from 'react';
 

package/dist/{index-RfA22r-Z.d.ts → index-DG_gyw1q.d.ts}

@@ -1,5 +1,5 @@
 import { A as AuthParams, C as ChainType, E as EmbeddedWalletsParams, R as RecoveryType } from './mpc-CTbBWHld.js';
-import { A as AnyObject, j as AppConfigType, k as BindInfoType, l as BindItemType, m as BindWalletParam, B as ButtonProps, C as CEXType, D as DeepPartial, n as DrawerProps, E as EmailModalProps, a as IEnvConfigType, o as IEnvName, p as ILoginWalletReq, I as IMatchEvents, g as ISocialLoginMethod, q as IconProps, r as InputProps, L as LocaleType, b as LoginBoxProps, i as LoginMethodType, f as LoginModalProps, e as LoginPanelProps, s as MessageType, t as MetaPageType, u as ModalProps, M as ModalWithHeaderProps, O as OtherLoginMethodType, h as OverviewInfo, v as PohItemType, w as PohZkpassParams, P as PopoverPositionType, x as PopoverProps, d as PopoverTypeType, R as RecommendLoginMethodType, T as ThemeType, y as UIProps, z as UserAssetToken, U as UserChainType, F as UserImportTokenType, G as UserPopoverProps, H as UserTransactionType, J as WalletAssetType, K as WalletChainType, W as WalletConfigType, N as WalletPanelProps, Q as WalletReceiveMessageType, c as WalletType } from './types-DQq17lf4.js';
+import { A as AnyObject, k as AppConfigType, l as BindInfoType, m as BindItemType, n as BindWalletParam, B as ButtonProps, C as CEXType, D as DeepPartial, o as DrawerProps, E as EmailModalProps, a as IEnvConfigType, p as IEnvName, q as ILoginWalletReq, I as IMatchEvents, g as ISocialLoginMethod, r as IconProps, s as InputProps, L as LocaleType, b as LoginBoxProps, i as LoginMethodType, f as LoginModalProps, e as LoginPanelProps, t as MessageType, u as MetaPageType, v as ModalProps, M as ModalWithHeaderProps, O as OtherLoginMethodType, h as OverviewInfo, w as PohItemType, x as PohZkpassParams, P as PopoverPositionType, y as PopoverProps, d as PopoverTypeType, R as RecommendLoginMethodType, T as ThemeType, z as UIProps, F as UserAssetToken, U as UserChainType, G as UserImportTokenType, H as UserPopoverProps, j as UserTransactionType, J as WalletAssetType, K as WalletChainType, W as WalletConfigType, N as WalletPanelProps, Q as WalletReceiveMessageType, c as WalletType } from './types-CHkU0WHZ.js';
 
 declare const index_AnyObject: typeof AnyObject;
 declare const index_AppConfigType: typeof AppConfigType;

package/dist/{index-BHVMQGZj.d.mts → index-DKyt0for.d.mts}

@@ -1,4 +1,4 @@
-import { g as ISocialLoginMethod, h as OverviewInfo, C as CEXType, i as LoginMethodType, I as IMatchEvents, U as UserChainType } from './types-DQq17lf4.mjs';
+import { g as ISocialLoginMethod, h as OverviewInfo, C as CEXType, i as LoginMethodType, I as IMatchEvents, U as UserChainType, j as UserTransactionType } from './types-CHkU0WHZ.mjs';
 import * as viem from 'viem';
 import { Account, WalletClientConfig, createWalletClient, SignableMessage, Hex, TransactionSerializable, DeployContractParameters, SendTransactionParameters, WriteContractParameters, Chain } from 'viem';
 import { C as ChainType } from './mpc-CTbBWHld.mjs';
@@ -143,6 +143,13 @@ declare function useMatchChain(): {
 declare function useMatchWallet(): {
     showReceiveModal: () => void;
 };
+declare function useMatchWalletRecords({ pageSize }: {
+    pageSize?: number;
+}): {
+    items: UserTransactionType[];
+    fetchMoreData: () => Promise<void>;
+    hasMore: boolean;
+};
 
 declare function useReceipt({ chainId, hash }: {
     chainId: number;
@@ -161,13 +168,14 @@ declare const index_useLayout: typeof useLayout;
 declare const index_useMatchChain: typeof useMatchChain;
 declare const index_useMatchEvents: typeof useMatchEvents;
 declare const index_useMatchWallet: typeof useMatchWallet;
+declare const index_useMatchWalletRecords: typeof useMatchWalletRecords;
 declare const index_useModal: typeof useModal;
 declare const index_useReceipt: typeof useReceipt;
 declare const index_useToast: typeof useToast;
 declare const index_useUserInfo: typeof useUserInfo;
 declare const index_useWallet: typeof useWallet;
 declare namespace index {
-  export { index_useCopyClipboard as useCopyClipboard, index_useLayout as useLayout, index_useMatchChain as useMatchChain, index_useMatchEvents as useMatchEvents, index_useMatchWallet as useMatchWallet, index_useModal as useModal, index_useReceipt as useReceipt, index_useToast as useToast, index_useUserInfo as useUserInfo, index_useWallet as useWallet };
+  export { index_useCopyClipboard as useCopyClipboard, index_useLayout as useLayout, index_useMatchChain as useMatchChain, index_useMatchEvents as useMatchEvents, index_useMatchWallet as useMatchWallet, index_useMatchWalletRecords as useMatchWalletRecords, index_useModal as useModal, index_useReceipt as useReceipt, index_useToast as useToast, index_useUserInfo as useUserInfo, index_useWallet as useWallet };
 }
 
-export { useMatchEvents as a, useWallet as b, useCopyClipboard as c, useModal as d, useToast as e, useMatchChain as f, useMatchWallet as g, useReceipt as h, index as i, useLayout as j, useUserInfo as u };
+export { useMatchEvents as a, useWallet as b, useCopyClipboard as c, useModal as d, useToast as e, useMatchChain as f, useMatchWallet as g, useMatchWalletRecords as h, index as i, useReceipt as j, useLayout as k, useUserInfo as u };

package/dist/{index-Bb7IkjUW.d.mts → index-DbG5IjhP.d.mts}

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, PropsWithChildren } from 'react';
-import { r as InputProps, B as ButtonProps, u as ModalProps, M as ModalWithHeaderProps, x as PopoverProps } from './types-DQq17lf4.mjs';
+import { s as InputProps, B as ButtonProps, v as ModalProps, M as ModalWithHeaderProps, y as PopoverProps } from './types-CHkU0WHZ.mjs';
 
 declare function Field({ label, children, error, required, className }: {
     label: ReactNode;

package/dist/{index-DgAnNnit.d.ts → index-TkB89QxX.d.ts}

@@ -1,4 +1,4 @@
-import { g as ISocialLoginMethod, h as OverviewInfo, C as CEXType, i as LoginMethodType, I as IMatchEvents, U as UserChainType } from './types-DQq17lf4.js';
+import { g as ISocialLoginMethod, h as OverviewInfo, C as CEXType, i as LoginMethodType, I as IMatchEvents, U as UserChainType, j as UserTransactionType } from './types-CHkU0WHZ.js';
 import * as viem from 'viem';
 import { Account, WalletClientConfig, createWalletClient, SignableMessage, Hex, TransactionSerializable, DeployContractParameters, SendTransactionParameters, WriteContractParameters, Chain } from 'viem';
 import { C as ChainType } from './mpc-CTbBWHld.js';
@@ -143,6 +143,13 @@ declare function useMatchChain(): {
 declare function useMatchWallet(): {
     showReceiveModal: () => void;
 };
+declare function useMatchWalletRecords({ pageSize }: {
+    pageSize?: number;
+}): {
+    items: UserTransactionType[];
+    fetchMoreData: () => Promise<void>;
+    hasMore: boolean;
+};
 
 declare function useReceipt({ chainId, hash }: {
     chainId: number;
@@ -161,13 +168,14 @@ declare const index_useLayout: typeof useLayout;
 declare const index_useMatchChain: typeof useMatchChain;
 declare const index_useMatchEvents: typeof useMatchEvents;
 declare const index_useMatchWallet: typeof useMatchWallet;
+declare const index_useMatchWalletRecords: typeof useMatchWalletRecords;
 declare const index_useModal: typeof useModal;
 declare const index_useReceipt: typeof useReceipt;
 declare const index_useToast: typeof useToast;
 declare const index_useUserInfo: typeof useUserInfo;
 declare const index_useWallet: typeof useWallet;
 declare namespace index {
-  export { index_useCopyClipboard as useCopyClipboard, index_useLayout as useLayout, index_useMatchChain as useMatchChain, index_useMatchEvents as useMatchEvents, index_useMatchWallet as useMatchWallet, index_useModal as useModal, index_useReceipt as useReceipt, index_useToast as useToast, index_useUserInfo as useUserInfo, index_useWallet as useWallet };
+  export { index_useCopyClipboard as useCopyClipboard, index_useLayout as useLayout, index_useMatchChain as useMatchChain, index_useMatchEvents as useMatchEvents, index_useMatchWallet as useMatchWallet, index_useMatchWalletRecords as useMatchWalletRecords, index_useModal as useModal, index_useReceipt as useReceipt, index_useToast as useToast, index_useUserInfo as useUserInfo, index_useWallet as useWallet };
 }
 
-export { useMatchEvents as a, useWallet as b, useCopyClipboard as c, useModal as d, useToast as e, useMatchChain as f, useMatchWallet as g, useReceipt as h, index as i, useLayout as j, useUserInfo as u };
+export { useMatchEvents as a, useWallet as b, useCopyClipboard as c, useModal as d, useToast as e, useMatchChain as f, useMatchWallet as g, useMatchWalletRecords as h, index as i, useReceipt as j, useLayout as k, useUserInfo as u };

package/dist/index.d.mts

@@ -1,13 +1,13 @@
 import React, { ReactNode } from 'react';
-import { I as IMatchEvents, a as IEnvConfigType, L as LocaleType, W as WalletConfigType } from './types-DQq17lf4.mjs';
-export { i as Components } from './index-M7ZB3yR5.mjs';
-export { i as UI } from './index-DamklTOJ.mjs';
-export { i as Hooks } from './index-BHVMQGZj.mjs';
-export { i as Api } from './index-BIgM4fy0.mjs';
+import { I as IMatchEvents, a as IEnvConfigType, L as LocaleType, W as WalletConfigType } from './types-CHkU0WHZ.mjs';
+export { i as Components } from './index-BZrddrq-.mjs';
+export { i as UI } from './index-BvLpvebq.mjs';
+export { i as Hooks } from './index-DKyt0for.mjs';
+export { i as Api } from './index-B8DYrhSW.mjs';
 export { i as Chains } from './index-DXRGMAbv.mjs';
-export { i as Types } from './index-BVatQlwF.mjs';
+export { i as Types } from './index-B-s1k4Da.mjs';
 import 'react/jsx-runtime';
-import './index-Bb7IkjUW.mjs';
+import './index-DbG5IjhP.mjs';
 import 'viem';
 import './mpc-CTbBWHld.mjs';
 import 'viem/types/misc';

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 import React, { ReactNode } from 'react';
-import { I as IMatchEvents, a as IEnvConfigType, L as LocaleType, W as WalletConfigType } from './types-DQq17lf4.js';
-export { i as Components } from './index-CGs_yTFg.js';
-export { i as UI } from './index-C2-M-aBb.js';
-export { i as Hooks } from './index-DgAnNnit.js';
-export { i as Api } from './index-BwD1ij0H.js';
+import { I as IMatchEvents, a as IEnvConfigType, L as LocaleType, W as WalletConfigType } from './types-CHkU0WHZ.js';
+export { i as Components } from './index-BHvCA7F9.js';
+export { i as UI } from './index-DCeOyAw8.js';
+export { i as Hooks } from './index-TkB89QxX.js';
+export { i as Api } from './index-Cwx2p8th.js';
 export { i as Chains } from './index-DXRGMAbv.js';
-export { i as Types } from './index-RfA22r-Z.js';
+export { i as Types } from './index-DG_gyw1q.js';
 import 'react/jsx-runtime';
-import './index-CKiK4KHj.js';
+import './index-Bzcc-y8m.js';
 import 'viem';
 import './mpc-CTbBWHld.js';
 import 'viem/types/misc';

package/dist/index.js

@@ -52,6 +52,7 @@ __export(hooks_exports, {
   useMatchChain: () => useMatchChain,
   useMatchEvents: () => useMatchEvents,
   useMatchWallet: () => useMatchWallet,
+  useMatchWalletRecords: () => useMatchWalletRecords,
   useModal: () => useModal,
   useReceipt: () => useReceipt,
   useToast: () => useToast,
@@ -4865,6 +4866,11 @@ function WalletModal(props) {
 // src/hooks/useMatchWallet.tsx
 var import_react_qrcode = require("react-qrcode");
 var import_react29 = require("react");
+
+// example/src/config/contract.ts
+var address = "0x4143e29770fd63e24bb1f32d50bf8a590e34de4b";
+
+// src/hooks/useMatchWallet.tsx
 var import_jsx_runtime78 = require("react/jsx-runtime");
 function useMatchWallet() {
   const modal = useModal();
@@ -4912,6 +4918,45 @@ function useMatchWallet() {
     showReceiveModal
   };
 }
+function useMatchWalletRecords({
+  pageSize = 10
+}) {
+  const [hasMore, setHasMore] = (0, import_react29.useState)(true);
+  const [items, setItems] = (0, import_react29.useState)([]);
+  const { chainId } = useMatchChain();
+  const chainIdStr = chainId ? chainId.toString() : "";
+  const fetchMoreData = async () => {
+    if (!hasMore) {
+      return;
+    }
+    const res = await getUserWalletTransactionsApi({
+      chain_id: chainIdStr,
+      limit: pageSize,
+      offset: items.length
+    });
+    if (isSuccess(res)) {
+      if (res.data && res.data.transactions.length > 0) {
+        setItems(items.concat(res.data.transactions));
+      }
+      setHasMore(res.data && res.data.transactions.length >= pageSize);
+    }
+  };
+  const onInit = async () => {
+    setItems([]);
+    setHasMore(true);
+    fetchMoreData();
+  };
+  (0, import_react29.useEffect)(() => {
+    if (chainId && address) {
+      onInit();
+    }
+  }, [chainId, address]);
+  return {
+    items,
+    fetchMoreData,
+    hasMore
+  };
+}
 
 // src/hooks/useReceipt.tsx
 var import_react30 = require("react");