@matchain/matchid-sdk-react 0.1.31 → 0.1.33

package/dist/index.css

@@ -767,3 +767,6 @@ body {
     }
 
 }
+.matchid-email-verify-field{
+    padding-right: 0;
+}

package/dist/index.d.mts

@@ -5,7 +5,7 @@ import { SignableMessage, Hex, TransactionSerializable, Account } from 'viem';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { UseQueryOptions } from '@tanstack/react-query/src/types';
 
-type ISocialLoginMethod = 'google' | 'twitter' | 'discord' | 'github' | 'telegram' | 'linkedin' | 'facebook'
+type ISocialLoginMethod = 'google' | 'twitter' | 'discord' | 'github' | 'telegram' | 'linkedin' | 'facebook'|'youtube'
 type LoginMethodType = 'evm' | 'sol' | 'email' | ISocialLoginMethod
 type OtherLoginMethodType = 'email' | ISocialLoginMethod
 type RecommendLoginMethodType = 'wallet' | 'email' | ISocialLoginMethod

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import { SignableMessage, Hex, TransactionSerializable, Account } from 'viem';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { UseQueryOptions } from '@tanstack/react-query/src/types';
 
-type ISocialLoginMethod = 'google' | 'twitter' | 'discord' | 'github' | 'telegram' | 'linkedin' | 'facebook'
+type ISocialLoginMethod = 'google' | 'twitter' | 'discord' | 'github' | 'telegram' | 'linkedin' | 'facebook'|'youtube'
 type LoginMethodType = 'evm' | 'sol' | 'email' | ISocialLoginMethod
 type OtherLoginMethodType = 'email' | ISocialLoginMethod
 type RecommendLoginMethodType = 'wallet' | 'email' | ISocialLoginMethod

package/dist/index.js

@@ -547,6 +547,19 @@ function LinkedinIcon({
 
 // src/assets/icon/YoutubeIcon.tsx
 var import_jsx_runtime26 = require("react/jsx-runtime");
+function YoutubeIcon({ size = 40, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("svg", { width: size, height: size, ...{ props }, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("rect", { width: "40", height: "40", rx: "8", fill: "#FF0000" }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      "path",
+      {
+        d: "M33.9855 13.1304C33.656 11.9065 32.691 10.9415 31.4671 10.612C29.231 10 20.287 10 20.287 10C20.287 10 11.3429 10 9.10689 10.5884C7.9065 10.9179 6.91794 11.9065 6.58843 13.1304C6 15.3664 6 20.0032 6 20.0032C6 20.0032 6 24.6636 6.58843 26.876C6.91794 28.1 7.88296 29.065 9.10689 29.3945C11.3664 30.0065 20.287 30.0065 20.287 30.0065C20.287 30.0065 29.231 30.0065 31.4671 29.418C32.691 29.0885 33.656 28.1235 33.9855 26.8996C34.5739 24.6636 34.5739 20.0268 34.5739 20.0268C34.5739 20.0268 34.5975 15.3664 33.9855 13.1304Z",
+        fill: "white"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("path", { d: "M17.439 24.2867L24.8767 20.003L17.439 15.7192V24.2867Z", fill: "#FF0000" })
+  ] });
+}
 
 // src/assets/icon/BTCDarkIcon.tsx
 var import_jsx_runtime27 = require("react/jsx-runtime");
@@ -665,7 +678,7 @@ function ArrowDownIcon({ width = 20, height = 21, color = "black", ...props }) {
     {
       d: "M5 7.5L9.29289 11.7929C9.68342 12.1834 10.3166 12.1834 10.7071 11.7929L15 7.5",
       stroke: color,
-      "stroke-width": "1.5",
+      strokeWidth: "1.5",
       strokeLinecap: "round",
       strokeLinejoin: "round"
     }
@@ -1174,6 +1187,9 @@ function truncateAddress(address) {
   const end = address.slice(-2);
   return `${start}...${end}`;
 }
+function getAppClientId() {
+  return "react-sdk-" + getVersion();
+}
 
 // src/store/useModalStore.ts
 var import_zustand2 = require("zustand");
@@ -1211,7 +1227,7 @@ function useUserInfo() {
     eventManager_default.emit("onLogout");
   };
   const loginByMethod = async (method) => {
-    const link = `${endpoints.back}api/v1/auth/${method}?appid=${appid}&provider=${method}&redirect=${encodeURIComponent(endpoints.auth + "login/" + method)}&authorization=${(/* @__PURE__ */ new Date()).getTime()}`;
+    const link = `${endpoints.back}api/v1/auth/${method == "youtube" ? "google" : method}?appid=${appid}&provider=${method == "youtube" ? "google" : method}&redirect=${encodeURIComponent(endpoints.auth + "login/" + method)}&authorization=${(/* @__PURE__ */ new Date()).getTime()}${method == "youtube" ? "&auth_type=youtube" : ""}`;
     matchlog_default.log("link", link);
     return window.open(
       link,
@@ -1245,6 +1261,7 @@ function useUserInfo() {
         return SOLOpen("login");
       case "telegram":
         return await loginByTelegram();
+      case "youtube":
       case "twitter":
       case "google":
       case "discord":
@@ -1337,7 +1354,8 @@ function useUserInfo() {
       case "github":
       case "linkedin":
       case "facebook":
-        const link = `${endpoints.back}api/v1/auth/${method}?appid=${appid}&provider=${method}&redirect=${encodeURIComponent(endpoints.auth + "bind/" + method)}&authorization=${token.includes("Bearer ") ? token.split(" ")[1] : token}`;
+      case "youtube":
+        const link = `${endpoints.back}api/v1/auth/${method == "youtube" ? "google" : method}?appid=${appid}&provider=${method == "youtube" ? "google" : method}&redirect=${encodeURIComponent(endpoints.auth + "bind/" + method)}&authorization=${token.includes("Bearer ") ? token.split(" ")[1] : token}${method == "youtube" ? "&auth_type=youtube" : ""}`;
         matchlog_default.log("link", link);
         return window.open(
           link,
@@ -1570,12 +1588,12 @@ function PasswordModal({
   onSuccess,
   ...props
 }) {
-  const { refreshOverview } = useUserInfo();
+  const { refreshOverview, overview } = useUserInfo();
   const { isLogin, did } = useUserInfo();
   const [password, setPassword] = (0, import_react5.useState)("");
   const [rePassword, setRePassword] = (0, import_react5.useState)("");
   const [error, setError] = (0, import_react5.useState)("");
-  const { generateWallet } = useWallet();
+  const { generateWallet, initWallet } = useWallet();
   const intl = (0, import_react_intl.useIntl)();
   const passwordError = (0, import_react5.useMemo)(() => {
     if (password.length < 6) return intl.formatMessage({
@@ -1594,11 +1612,16 @@ function PasswordModal({
     return "";
   }, [rePassword, password]);
   (0, import_react5.useEffect)(() => {
-    if (isOpen) {
+    if (isOpen && overview) {
       setPassword("");
       setRePassword("");
+      const did2 = overview.did.split(":")[2];
+      initWallet({
+        did: did2,
+        address: ""
+      });
     }
-  }, [isOpen]);
+  }, [isOpen, overview]);
   const [isSubmitting, setIsSubmitting] = (0, import_react5.useState)(false);
   const onContinue = async () => {
     if (isSubmitting) return;
@@ -1675,9 +1698,9 @@ function RecoveryModal({
   ...props
 }) {
   const { refreshOverview } = useUserInfo();
-  const { isLogin } = useUserInfo();
+  const { isLogin, overview } = useUserInfo();
   const [password, setPassword] = (0, import_react6.useState)("");
-  const { recoveryWallet } = useWallet();
+  const { recoveryWallet, initWallet } = useWallet();
   const [error, setError] = (0, import_react6.useState)("");
   const intl = (0, import_react_intl2.useIntl)();
   const passwordError = (0, import_react6.useMemo)(() => {
@@ -1689,10 +1712,15 @@ function RecoveryModal({
     return "";
   }, [password]);
   (0, import_react6.useEffect)(() => {
-    if (isOpen) {
+    if (isOpen && overview) {
       setPassword("");
+      const did = overview.did.split(":")[2];
+      initWallet({
+        did,
+        address: overview.address
+      });
     }
-  }, [isOpen]);
+  }, [isOpen, overview]);
   const [isSubmitting, setIsSubmitting] = (0, import_react6.useState)(false);
   const onContinue = async () => {
     if (isSubmitting) return;
@@ -1903,6 +1931,7 @@ function StepVerify(props) {
         placeholder: intl.formatMessage({
           id: "codePlaceholder"
         }),
+        className: "matchid-email-verify-field",
         maxLength: codeLength,
         onChange: (e) => setCode(e.target.value),
         value: code,
@@ -2103,6 +2132,11 @@ function LoginBox({
       icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(FacebookIcon, {}),
       name: "Facebook",
       onClick: () => login("facebook")
+    },
+    youtube: {
+      icon: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(YoutubeIcon, {}),
+      name: "Youtube",
+      onClick: () => login("youtube")
     }
   };
   const walletMethods = [
@@ -2765,7 +2799,7 @@ var context_default = Providers;
 
 // src/hooks/useWalletInit.ts
 var import_react16 = require("react");
-var AppClientId2 = "react-sdk-" + getVersion();
+var AppClientId2 = getAppClientId();
 function useWalletInit({
   refreshOverview
 }) {