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

package/dist/ui/index.mjs

@@ -12,8 +12,8 @@ import {
   Popover,
   Radio,
   Switch
-} from "../chunk-LNSJ3ZXG.mjs";
-import "../chunk-A5D3NKTK.mjs";
+} from "../chunk-WXPVHKGJ.mjs";
+import "../chunk-LHNKZISB.mjs";
 import "../chunk-J5LGTIGS.mjs";
 export {
   AlphaAvatar,

package/dist/utils/index.d.mts

@@ -0,0 +1,26 @@
+declare const getVersion: () => string;
+declare function encodeBase64(input: string): string;
+declare function decodeBase64(input: string): string;
+declare const isValidEmail: (email: string) => boolean;
+declare const isValidUsername: (username: string) => boolean;
+declare const deepMerge: (target: any, source: any) => any;
+declare function truncateAddress(address: string): string;
+declare function firstUpperCase(str: string): string;
+declare function getAppClientId(): string;
+interface NumberFormatterProps {
+    value: number | string | undefined;
+    prefix?: string;
+    suffix?: string;
+    separator?: boolean;
+    fixNum?: number;
+    tFixNum?: number;
+    intClassName?: string;
+    decimalClassName?: string;
+    prefixClassName?: string;
+    className?: string;
+}
+declare const NumberFormatter: React.FC<NumberFormatterProps>;
+declare function formatAddress(address: string, pre?: number, after?: number): string;
+declare const formatDate: (value: any, formatString?: string) => string;
+
+export { NumberFormatter, decodeBase64, deepMerge, encodeBase64, firstUpperCase, formatAddress, formatDate, getAppClientId, getVersion, isValidEmail, isValidUsername, truncateAddress };

package/dist/utils/index.d.ts

@@ -0,0 +1,26 @@
+declare const getVersion: () => string;
+declare function encodeBase64(input: string): string;
+declare function decodeBase64(input: string): string;
+declare const isValidEmail: (email: string) => boolean;
+declare const isValidUsername: (username: string) => boolean;
+declare const deepMerge: (target: any, source: any) => any;
+declare function truncateAddress(address: string): string;
+declare function firstUpperCase(str: string): string;
+declare function getAppClientId(): string;
+interface NumberFormatterProps {
+    value: number | string | undefined;
+    prefix?: string;
+    suffix?: string;
+    separator?: boolean;
+    fixNum?: number;
+    tFixNum?: number;
+    intClassName?: string;
+    decimalClassName?: string;
+    prefixClassName?: string;
+    className?: string;
+}
+declare const NumberFormatter: React.FC<NumberFormatterProps>;
+declare function formatAddress(address: string, pre?: number, after?: number): string;
+declare const formatDate: (value: any, formatString?: string) => string;
+
+export { NumberFormatter, decodeBase64, deepMerge, encodeBase64, firstUpperCase, formatAddress, formatDate, getAppClientId, getVersion, isValidEmail, isValidUsername, truncateAddress };

package/dist/utils/index.js

@@ -0,0 +1,181 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils/index.tsx
+var utils_exports = {};
+__export(utils_exports, {
+  NumberFormatter: () => NumberFormatter,
+  decodeBase64: () => decodeBase64,
+  deepMerge: () => deepMerge,
+  encodeBase64: () => encodeBase64,
+  firstUpperCase: () => firstUpperCase,
+  formatAddress: () => formatAddress,
+  formatDate: () => formatDate,
+  getAppClientId: () => getAppClientId,
+  getVersion: () => getVersion,
+  isValidEmail: () => isValidEmail,
+  isValidUsername: () => isValidUsername,
+  truncateAddress: () => truncateAddress
+});
+module.exports = __toCommonJS(utils_exports);
+var import_moment = __toESM(require("moment"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var getVersion = () => {
+  return "0.0.2";
+};
+function encodeBase64(input) {
+  return btoa(unescape(encodeURIComponent(input)));
+}
+function decodeBase64(input) {
+  return decodeURIComponent(escape(atob(input)));
+}
+var isValidEmail = (email) => {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+};
+var isValidUsername = (username) => {
+  return /^[a-zA-Z0-9_-]+$/.test(username);
+};
+var deepMerge = (target, source) => {
+  for (const key in source) {
+    if (source[key] instanceof Object && key in target) {
+      target[key] = deepMerge(target[key], source[key]);
+    } else {
+      target[key] = source[key];
+    }
+  }
+  return target;
+};
+function truncateAddress(address) {
+  if (address.length <= 6) {
+    return address;
+  }
+  const start = address.slice(0, 4);
+  const end = address.slice(-2);
+  return `${start}...${end}`;
+}
+function firstUpperCase(str) {
+  return str.toString()[0].toUpperCase() + str.toString().slice(1);
+}
+function getAppClientId() {
+  return "react-sdk-" + getVersion();
+}
+function convertScientificToDecimal(num) {
+  let str = num.toFixed(12);
+  str = str.replace(/0+$/, "");
+  str = str.replace(/\.$/, "");
+  return str;
+}
+var NumberFormatter = ({
+  value,
+  prefix = "",
+  suffix = "",
+  separator = true,
+  fixNum = 2,
+  tFixNum = 4,
+  intClassName = "",
+  decimalClassName = "",
+  prefixClassName = "",
+  className = ""
+}) => {
+  const numberValue = typeof value === "number" ? convertScientificToDecimal(value) : value ? value : "0";
+  const [intPart, decimalPart] = numberValue.toString().split(".");
+  const intFormat = separator ? intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",") : intPart;
+  if (Math.abs(parseFloat(numberValue)) >= 1) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className, children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: prefixClassName, children: prefix }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: intClassName, children: intFormat }),
+      decimalPart ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: decimalClassName, children: [
+        ".",
+        decimalPart.substring(0, fixNum)
+      ] }) : "",
+      suffix
+    ] });
+  }
+  if (decimalPart) {
+    let zeroCount = 0;
+    for (let i = 0; i < decimalPart.length; i++) {
+      if (decimalPart[i] === "0") {
+        zeroCount++;
+      } else {
+        break;
+      }
+    }
+    if (zeroCount < tFixNum) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+        prefix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: prefixClassName, children: prefix }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: intClassName, children: intFormat }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: decimalClassName, children: [
+          ".",
+          decimalPart.substring(0, tFixNum)
+        ] }),
+        suffix
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+      prefix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: prefixClassName, children: prefix }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: intClassName, children: intFormat }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: decimalClassName, children: [
+        ".0",
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("sub", { children: zeroCount }),
+        decimalPart?.substring(zeroCount, zeroCount + tFixNum - 2)
+      ] }),
+      suffix
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className, children: [
+    prefix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: prefixClassName, children: prefix }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: intClassName, children: intPart }),
+    suffix
+  ] });
+};
+function formatAddress(address, pre = 4, after = 5) {
+  return `${address.substring(0, pre)}...${address.substring(address.length - after, address.length)}`;
+}
+var formatDate = (value, formatString = "YYYY-MM-DD HH:mm:ss") => {
+  if (value) {
+    return import_moment.default.unix(value).format(formatString);
+  }
+  return "--";
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NumberFormatter,
+  decodeBase64,
+  deepMerge,
+  encodeBase64,
+  firstUpperCase,
+  formatAddress,
+  formatDate,
+  getAppClientId,
+  getVersion,
+  isValidEmail,
+  isValidUsername,
+  truncateAddress
+});
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/index.tsx"],"sourcesContent":["import moment from 'moment';\n\nexport const getVersion = (): string => {\n    return \"0.0.2\";\n};\n\nexport function encodeBase64(input: string) {\n    return btoa(unescape(encodeURIComponent(input)));\n}\n\nexport function decodeBase64(input: string) {\n    return decodeURIComponent(escape(atob(input)));\n}\n\nexport const isValidEmail = (email: string) => {\n    return /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(email)\n}\nexport const isValidUsername = (username: string) => {\n    //8-32 alpha number - _\n    return /^[a-zA-Z0-9_-]+$/.test(username)\n}\n\nexport const deepMerge = (target: any, source: any): any => {\n    for (const key in source) {\n        if (source[key] instanceof Object && key in target) {\n            target[key] = deepMerge(target[key], source[key]);\n        } else {\n            target[key] = source[key];\n        }\n    }\n    return target;\n};\n\nexport function truncateAddress(address: string): string {\n    if (address.length <= 6) {\n        return address;\n    }\n    const start = address.slice(0, 4);\n    const end = address.slice(-2);\n    return `${start}...${end}`;\n}\n\n\nexport function firstUpperCase(str: string): string {\n    return str.toString()[0].toUpperCase() + str.toString().slice(1);\n}\n\nexport function getAppClientId() {\n    return \"react-sdk-\" + getVersion()\n}\n\n\nfunction convertScientificToDecimal(num: number) {\n    let str = num.toFixed(12)\n    str = str.replace(/0+$/, '')\n    str = str.replace(/\\.$/, '')\n    return str\n}\n\ninterface NumberFormatterProps {\n    value: number | string | undefined\n    prefix?: string\n    suffix?: string\n    separator?: boolean\n    fixNum?: number //number >= 1 fix num\n    tFixNum?: number //number < 1 fix num\n    intClassName?: string\n    decimalClassName?: string\n    prefixClassName?: string\n    className?: string\n}\n\nexport const NumberFormatter: React.FC<NumberFormatterProps> = ({\n                                                                    value,\n                                                                    prefix = '',\n                                                                    suffix = '',\n                                                                    separator = true,\n                                                                    fixNum = 2,\n                                                                    tFixNum = 4,\n                                                                    intClassName = \"\",\n                                                                    decimalClassName = \"\",\n                                                                    prefixClassName = \"\",\n                                                                    className = \"\"\n                                                                }) => {\n    const numberValue =\n        typeof value === 'number'\n            ? convertScientificToDecimal(value)\n            : value\n                ? value\n                : '0'\n\n    const [intPart, decimalPart] = numberValue.toString().split('.')\n\n    const intFormat = separator\n        ? intPart.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')\n        : intPart\n\n    if (Math.abs(parseFloat(numberValue)) >= 1) {\n        return (\n            <span className={className}>\n            {prefix && <span className={prefixClassName}>{prefix}</span>}\n                <span className={intClassName}>{intFormat}</span>\n                {decimalPart ? (\n                    <span className={decimalClassName}>\n            .{decimalPart.substring(0, fixNum)}\n            </span>\n                ) : (\n                    ''\n                )}\n                {suffix}\n        </span>\n        )\n    }\n\n    if (decimalPart) {\n        let zeroCount = 0\n        for (let i = 0; i < decimalPart.length; i++) {\n            if (decimalPart[i] === '0') {\n                zeroCount++\n            } else {\n                break\n            }\n        }\n        if (zeroCount < tFixNum) {\n            return (\n                <span>\n                        {prefix && <span className={prefixClassName}>{prefix}</span>}\n                    <span className={intClassName}>{intFormat}</span>\n                    <span className={decimalClassName}>\n            .{decimalPart.substring(0, tFixNum)}\n                </span>\n                    {suffix}\n                </span>\n            )\n        }\n        return (\n            <span>\n                        {prefix && <span className={prefixClassName}>{prefix}</span>}\n                <span className={intClassName}>{intFormat}</span>\n                    <span className={decimalClassName}>\n                    .0<sub>{zeroCount}</sub>\n                        {decimalPart?.substring(zeroCount, zeroCount + tFixNum - 2)}\n                </span>\n                {suffix}\n                </span>\n        )\n    }\n    return (\n        <span className={className}>\n                    {prefix && <span className={prefixClassName}>{prefix}</span>}\n            <span className={intClassName}>{intPart}</span>\n            {suffix}\n                </span>\n    )\n}\n\nexport function formatAddress(address: string,pre=4,after=5) {\n    return `${address.substring(0, pre)}...${address.substring(address.length - after, address.length)}`\n}\n\nexport const formatDate = (value: any, formatString = 'YYYY-MM-DD HH:mm:ss') => {\n    if (value) {\n        return moment.unix(value).format(formatString)\n    }\n    return '--'\n}"],"mappings":"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","names":["moment"]}

package/dist/utils/index.mjs

@@ -0,0 +1,30 @@
+import {
+  NumberFormatter,
+  decodeBase64,
+  deepMerge,
+  encodeBase64,
+  firstUpperCase,
+  formatAddress,
+  formatDate,
+  getAppClientId,
+  getVersion,
+  isValidEmail,
+  isValidUsername,
+  truncateAddress
+} from "../chunk-5JHHHLG4.mjs";
+import "../chunk-J5LGTIGS.mjs";
+export {
+  NumberFormatter,
+  decodeBase64,
+  deepMerge,
+  encodeBase64,
+  firstUpperCase,
+  formatAddress,
+  formatDate,
+  getAppClientId,
+  getVersion,
+  isValidEmail,
+  isValidUsername,
+  truncateAddress
+};
+//# sourceMappingURL=index.mjs.map

package/dist/utils/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/example/src/pages/Wallet/components/MatchWallet.tsx

@@ -1,20 +1,34 @@
-import {useMatchChain,useMatchWallet} from "@matchain/matchid-sdk-react/hooks";
-import {Button} from "@matchain/matchid-sdk-react/components";
+import {useMatchChain, useMatchWallet, useMatchWalletAssets, useModal} from "@matchain/matchid-sdk-react/hooks";
+import {Button} from "@matchain/matchid-sdk-react/ui";
+import {WalletAsset, TokenDetail,TransactionList} from "@matchain/matchid-sdk-react/components";
+import ButtonGroup from "@/components/ButtonGroup";
+import {WalletAssetMergeType} from "@matchain/matchid-sdk-react/types";
 
-export default function MatchWallet(){
+export default function MatchWallet() {
     const chain = useMatchChain()
     const wallet = useMatchWallet()
+    const modal = useModal()
+    const onAssetClick = (asset: WalletAssetMergeType) => {
+        return () => {
+            modal.show((props) => {
+                return <TokenDetail onClose={props.close} token={asset}/>
+            })
+        }
+    }
     return (
         <div className={"mt-[50px]"}>
-            <h1>MatchCustomUI</h1>
-            <div className={`flex gap-[16px] items-center`}>
-                {chain.chain?.id}:{chain.chain?.name}
-                <Button size={"sm"} onClick={chain.showChangeNetwork}>ChangeNetwork</Button>
-            </div>
-            <div>
+            <ButtonGroup title={"CustomWalletUI"}></ButtonGroup>
+            <ButtonGroup>
+                <Button size={"sm"} onClick={chain.showChangeNetwork}>{chain.chain?.id}:{chain.chain?.name}</Button>
                 <Button size={"sm"} onClick={wallet.showReceiveModal}>ShowReceive</Button>
-
+                <Button size={"sm"} onClick={wallet.showImportTokenModal}>showImportToken</Button>
+                <Button size={"sm"} onClick={wallet.showSendListModal}>showSendListModal</Button>
+            </ButtonGroup>
+            <div className={`mt-[100px] gap-[20px] grid grid-cols-2`}>
+                <WalletAsset onAssetClick={onAssetClick}/>
+                <TransactionList/>
             </div>
+
         </div>
     )
 }

package/example/src/pages/Wallet/index.tsx

@@ -143,7 +143,8 @@ export default function Wallet() {
                 to: toAddress as `0x${string}`,
                 value: parseUnits(toAmount, 18),
                 data: data as `0x${string}`,
-                chain: chain
+                chain: chain,
+                type:"legacy"
             }
             const request = await walletClient.prepareTransactionRequest(transaction)
             const res = await evmAccount.signTransaction!(request as TransactionSerializable)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matchain/matchid-sdk-react",
-  "version": "0.1.48-alpha.2",
+  "version": "0.1.48-alpha.20",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -36,6 +36,10 @@
       "import": "./dist/types/index.mjs",
       "require": "./dist/types/index.js"
     },
+    "./utils": {
+      "import": "./dist/utils/index.mjs",
+      "require": "./dist/utils/index.js"
+    },
     "./index.css": "./dist/index.css"
   },
   "scripts": {
@@ -72,6 +76,8 @@
     "axios-retry": "^4.5.0",
     "copy-to-clipboard": "^3.3.3",
     "ethers": "^5.7.2",
+    "moment": "^2.30.1",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-intl": "^7.1.0",
     "react-qrcode": "^0.3.6",
     "react-router-dom": "^6.0.0",