@matchain/matchid-sdk-react 0.1.7

package/dist/index.css

@@ -0,0 +1,461 @@
+body {
+    /**value**/
+    --matchid-light-orange: #FFF3EB;
+    --matchid-highlight-orange: #FC802D;
+    --matchid-black: #000000;
+    --matchid-white: #FFFFFF;
+    --matchid-black-800: #1E1E1E;
+    --matchid-gray-600: #6E6E6E;
+    --matchid-gray-400: #B6B6B6;
+    --matchid-gray-300: #E3E3E3;
+    --matchid-gray-200:#F3F3F3;
+    --matchid-gray-100: #F8F8F8;
+    --matchid-red-600: #F7585E;
+    --matchid-green-600:#2CBF68;
+
+    --matchid-shadow-full: 0px 15px 40px 0px rgba(22, 17, 46, 0.12);
+    --matchid-shadow-middle: 0px 10px 30px 0px rgba(22, 17, 46, 0.12);
+    --matchid-shadow-small: 0px 10px 20px 0px rgba(219, 219, 219, 0.50);
+    /**root component**/
+    --matchid-placeholder-color: var(--matchid-gray-400);
+
+    --matchid-line: var(--matchid-gray-300);
+    --matchid-arrow-color: var(--matchid-black);
+    --matchid-text-color: var(--matchid-black);
+    --matchid-round: 12px;
+    --matchid-round-lg: 24px;
+    --matchid-padding-lg: 32px;
+    /**login component**/
+    --matchid-login-method-border-color: var(--matchid-line);
+    --matchid-login-method-hover-border-color: var(--matchid-highlight-orange);
+    --matchid-login-method-arrow-color: var(--matchid-arrow-color);
+    --matchid-login-method-round: var(--matchid-round);
+    --matchid-login-method-color: var(--matchid-text-color);
+
+    --matchid-login-panel-divide-color: var(--matchid-line);
+    --matchid-login-panel-title-color: var(--matchid-text-color);
+    --matchid-login-panel-subtitle-color: var(--matchid-gray-600);
+    /**overlay component**/
+    --matchid-overlay-index: 9999;
+    /**modal component**/
+    --matchid-modal-bg: var(--matchid-white);
+    --matchid-modal-shadow: var(--matchid-shadow-full);
+    --matchid-modal-border-color: var(--matchid-white);
+    --matchid-modal-round: var(--matchid-round-lg);
+    --matchid-modal-padding: var(--matchid-padding-lg);
+
+    --matchid-modal-header-border-color: var(--matchid-line);
+    --matchid-modal-header-color: var(--matchid-text-color);
+    /**input component**/
+    --matchid-input-border-color: var(--matchid-line);
+    --matchid-input-focus-border-color: var(--matchid-highlight-orange);
+    --matchid-input-color: var(--matchid-text-color);
+    --matchid-input-placeholder-color: var(--matchid-placeholder-color);
+    --matchid-input-bg: var(--matchid-gray-100);
+    --matchid-input-focus-bg: var(--matchid-light-orange);
+    --matchid-input-delete-icon-color: var(--matchid-highlight-orange);
+    /**field component**/
+    --matchid-field-color: var(--matchid-text-color);
+    --matchid-field-error-color: var(--matchid-red-600);
+    /**button component**/
+    --matchid-btn-border-color: var(--matchid-black);
+    --matchid-btn-color: var(--matchid-black);
+    --matchid-btn-bg: var(--matchid-white);
+
+    --matchid-btn-disabled-bg: var(--matchid-gray-600);
+    --matchid-btn-disabled-color: var(--matchid-white);
+
+    --matchid-btn-hover-bg: var(--matchid-black-800);
+    --matchid-btn-hover-color: var(--matchid-white);
+
+    --matchid-btn-active-bg: linear-gradient(0deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.06) 100%), #1E1E1E;
+    --matchid-btn-active-color: var(--matchid-white);
+
+    --matchid-btn-highlight-bg: var(--matchid-black);
+    --matchid-btn-highlight-color: var(--matchid-white);
+
+    --matchid-btn-loading-bg: var(--matchid-black-800);
+    --matchid-btn-loading-color: var(--matchid-white);
+
+    --matchid-email-verify-header-value-color:var(--matchid-highlight-orange);
+    --matchid-email-verify-header-value-tips:var(--matchid-gray-600);
+    /****/
+    --matchid-valid-error-color:var(--matchid-gray-600);
+    --matchid-valid-success-color:var(--matchid-black);
+    --matchid-password-header-color:var(--matchid-black);
+
+}
+
+.matchid-login-box {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.matchid-login-method {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    height: 72px;
+    width: 100%;
+    padding: 16px;
+    cursor: pointer;
+    color: var(--matchid-login-method-color, #000000);
+    border-radius: var(--matchid-login-method-round, 12px);
+    border: 1px solid var(--matchid-login-method-border-color, #E3E3E3);
+}
+
+.matchid-login-method:hover {
+    border-color: var(--matchid-login-method-hover-border-color, #FC802D);
+}
+
+.matchid-login-method-content {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 8px;
+}
+
+.matchid-login-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+}
+
+.matchid-login-panel-divide {
+    height: 1px;
+    width: 100%;
+    background-color: var(--matchid-login-panel-divide-color, #E3E3E3);
+}
+
+.matchid-login-panel-header {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    gap: 4px;
+}
+
+.matchid-login-panel-header-title {
+    color: var(--matchid-login-panel-title-color, #000000);
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.matchid-login-panel-header-subtilte {
+    color: var(--matchid-login-panel-subtitle-color, #6E6E6E);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 120%;
+}
+
+.matchid-login-panel-header-close {
+    cursor: pointer;
+}
+
+.matchid-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: var(--matchid-overlay-index);
+    overflow: hidden;
+    backdrop-filter: blur(1px);
+    background: rgba(0, 0, 0, .3);
+}
+
+.matchid-modal {
+    border-radius: var(--matchid-modal-round, 24px);
+    border: 1px solid var(--matchid-modal-border-color, #FFF);
+    background: var(--matchid-modal-bg, #FFF);
+    box-shadow: var(--matchid-modal-shadow, 0px 15px 40px 0px rgba(22, 17, 46, 0.12));
+    width: 480px;
+    max-width: 90vw;
+    padding: var(--matchid-modal-padding, 32px);
+}
+
+.matchid-modal-header {
+    padding-bottom: 24px;
+    margin-bottom: 24px;
+    border-bottom: 1px solid var(--matchid-modal-header-border-color, #E3E3E3);
+    height: 54px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.matchid-modal-header-content {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.matchid-modal-header-back, .matchid-modal-header-close {
+    cursor: pointer;
+}
+
+.matchid-modal-header-title {
+    color: var(--matchid-modal-header-color, #000);
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.matchid-input-box {
+    width: 100%;
+    height: 72px;
+    padding-left:24px;
+    border-radius: 12px;
+    border: 1px solid var(--matchid-input-border-color);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: var(--matchid-input-bg);
+}
+
+.matchid-input-box:active, .matchid-input-box:focus, .matchid-input-box:focus-within {
+    border-color: var(--matchid-input-focus-border-color);
+    background: var(--matchid-input-focus-bg);
+}
+.matchid-input-delete-icon{
+    opacity: 0;
+    cursor: pointer;
+    margin-left:24px;
+    margin-right: 24px;
+}
+.matchid-input-box:focus-within .matchid-input-delete-icon{
+    opacity: 1;
+}
+.matchid-input-eye-icon{
+    cursor: pointer;
+    margin-left:24px;
+    margin-right: 24px;
+}
+.matchid-input-box.matchid-input-has-content {
+    background: var(--matchid-input-focus-bg);
+}
+.matchid-input-field {
+    flex: 1;
+    height: 100%;
+    outline: 0;
+    color: var(--matchid-input-color);
+    font-size: 18px;
+    font-weight: 600;
+    background: none;
+    margin-right: 24px;
+}
+
+.matchid-input-field::placeholder {
+    color: var(--matchid-input-placeholder-color);
+}
+
+.matchid-input-field:active, .matchid-input-field:focus {
+    outline: 0;
+}
+
+.matchid-field-box {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.matchid-field-label {
+    color: var(--matchid-field-color);
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.matchid-field-error{
+    font-size: 14px;
+    font-weight: 600;
+    color: var(--matchid-field-error-color);
+}
+
+.matchid-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: 12px;
+    outline: 0;
+    cursor: pointer;
+    border: 1px solid var(--matchid-btn-border-color);
+    color: var(--matchid-btn-color);
+    background: var(--matchid-btn-bg);
+}
+
+.matchid-btn:not(:disabled):hover {
+    background: var(--matchid-btn-hover-bg);
+    color: var(--matchid-btn-hover-color);
+    box-shadow: var(--matchid-shadow-middle);
+    border-color: var(--matchid-btn-hover-bg);
+}
+
+.matchid-btn:focus, .matchid-btn:active {
+    background: var(--matchid-btn-active-bg);
+    color: var(--matchid-btn-active-color);
+    box-shadow: var(--matchid-shadow-middle);
+    border-color: var(--matchid-btn-active-bg);
+}
+
+
+
+.matchid-btn-highlight, .matchid-btn-highlight:hover, .matchid-btn-highlight:focus, .matchid-btn-highlight:active, .matchid-btn-highlight:not(:disabled):hover {
+    background: var(--matchid-btn-highlight-bg);
+    color: var(--matchid-btn-highlight-color);
+    border:0;
+}
+.matchid-btn:disabled {
+    cursor: not-allowed;
+    background: var(--matchid-btn-disabled-bg);
+    color: var(--matchid-btn-disabled-color);
+}
+.matchid-btn-loading {
+    background: var(--matchid-btn-loading-bg) !important;
+    color: var(--matchid-btn-loading-color) !important;
+    cursor: not-allowed;
+}
+
+.matchid-btn-loading-icon {
+    animation: spin 2s linear infinite;
+
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.matchid-btn-sm {
+    height: 32px;
+    font-size: 14px;
+    padding: 0 12px;
+}
+
+.matchid-btn-df {
+    height: 40px;
+    font-size: 16px;
+    padding: 0 16px;
+}
+
+.matchid-btn-lg {
+    height: 52px;
+    font-size: 20px;
+    padding: 0 48px;
+}
+
+.matchid-btn-block {
+    width: 100%;
+}
+
+.matchid-btn-rounded {
+    border-radius: 100px;
+}
+.matchid-email-verify-box,.matchid-password-box{
+    display: flex;
+    flex-direction: column;
+    gap: 64px;
+}
+.matchid-email-verify-header,.matchid-password-header{
+    display: flex;
+    align-items: center;
+    gap:16px;
+    height:40px;
+}
+.matchid-email-verify-header-icon,.matchid-password-header-icon{
+    width:40px;
+    height:40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 8px;
+    border:1px solid var(--matchid-black);
+
+
+}
+.matchid-email-verify-header-content{
+    flex:1;
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: space-between;
+}
+.matchid-password-header-content{
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--matchid-password-header-color);
+}
+.matchid-email-verify-header-value{
+    color: var(--matchid-email-verify-header-value-color);
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 100%;
+}
+.matchid-email-verify-header-tips{
+    color: var(--matchid-email-verify-header-value-tips);
+    font-size: 14px;
+    line-height: 120%; /* 16.8px */
+}
+.matchid-unlogin-btn,.matchid-login-btn{
+    gap:8px
+}
+.matchid-login-btn{
+    padding:0 12px 0 4px;
+}
+.matchid-login-btn:hover,.matchid-login-btn:not(:disabled):hover{
+    border-color:#ffffff;
+}
+.matchid-login-btn:active,
+.matchid-login-btn:focus,
+.matchid-login-btn:hover,
+.matchid-login-btn:not(:disabled):hover,
+.matchid-login-btn:not(:disabled):focus,
+.matchid-login-btn:not(:disabled):active
+{
+    color:#000000;
+    box-shadow: var(--matchid-shadow-small);
+    fill: var(--matchid-highlight-orange);
+    background:#ffffff;
+}
+.matchid-login-btn:active,.matchid-login-btn:focus{
+    border:1px solid var(--matchid-highlight-orange);
+}
+
+.matchid-valid{
+    margin-top:24px;
+    display: flex;
+    flex-direction: column;
+    gap:16px;
+}
+.matchid-valid-status-item{
+    display: flex;
+    font-size: 14px;
+    gap:8px;
+    align-items:flex-start;
+}
+.matchid-valid-status-item span{
+    flex:1;
+}
+
+.matchid-valid-status-success{
+    color: var(--matchid-valid-success-color);
+}
+.matchid-valid-status-error{
+    color: var(--matchid-valid-error-color);
+}
+.matchid-password-content{
+    display: flex;
+    flex-direction: column;
+    gap:24px;
+}

package/dist/index.d.mts

@@ -0,0 +1,211 @@
+import React$1, { PropsWithChildren, CSSProperties, ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as viem from 'viem';
+import { SignableMessage, Hex, TransactionSerializable } from 'viem';
+
+type LoginMethodType = 'wallet' | 'email' | 'google' | 'X' | 'telegram'
+type IEnvName = 'main' | 'dev' | 'test'
+type IMatchEvents = {
+    onLogin?: (data: {
+        mid?: string;
+        token: string;
+        did: string
+    }) => void
+    onLogout?: () => void,
+    onBind?: (data: {
+        type: string
+    }) => void
+}
+
+type OverviewInfo = {
+    score: number,
+    total_assets: number,
+    wallets: number,
+    followers: number,
+    sbt: number,
+    is_kyc: boolean,
+    is_poh: boolean,
+    mid: string
+    user_identity: string
+    identities: { [key: string]: string }
+    did: string
+    address: string
+    username?:string
+}
+
+type ModalProps = PropsWithChildren & {
+    isOpen: boolean,
+    width?: number
+}
+
+type ModalWithHeaderProps = ModalProps & {
+    onBack?: () => void,
+    onClose?: () => void,
+    title?: string
+    showClose?: boolean
+}
+
+type InputProps = {
+    placeholder: string,
+    value: string,
+    onChange: (e?: any) => void,
+    disabled?: boolean,
+    readonly?: boolean
+    type?: string
+    maxLength?: number
+    after?: React.ReactNode
+}
+
+type LoginBoxProps = {
+    methods?: LoginMethodType[],
+    inModal?: boolean
+}
+type LoginPanelProps = {
+    header?: React.ReactNode
+    onClose?: () => void
+} & LoginBoxProps
+type LoginModalProps = LoginPanelProps & ModalProps
+type EmailModalProps = ModalProps & {
+    onClose?: () => void,
+    onBack?: () => void,
+    onLogin?: () => void
+}
+type ButtonProps = {
+    size?: 'sm' | 'df' | 'lg',
+    type?: "button" | "submit" | "reset",
+    rounded?: boolean,
+    block?: boolean,
+    disabled?: boolean,
+    loading?: boolean,
+    children?: React.ReactNode,
+    onClick?: () => void,
+    highlight?: boolean,
+    style?: CSSProperties
+    className?: string
+}
+
+type MatchContextType = {
+    env: IEnvName;
+    appid: string;
+    endpoints: {
+        login: string;
+        back: string;
+    };
+    events?: IMatchEvents;
+    login: (data: {
+        mid: string;
+        token: string;
+    }) => Promise<void>;
+    theme: "light" | "dark";
+};
+declare const MatchProvider: React$1.FC<{
+    children: ReactNode;
+    appid: string;
+    env?: IEnvName;
+    events?: IMatchEvents;
+    theme?: "light" | "dark";
+}>;
+declare const useMatch: () => MatchContextType;
+
+declare function EmailModal({ isOpen, width, onClose, onBack, onLogin }: EmailModalProps): react_jsx_runtime.JSX.Element;
+
+declare function Field({ label, children, error }: {
+    label: ReactNode;
+    error?: ReactNode;
+} & PropsWithChildren): react_jsx_runtime.JSX.Element;
+
+declare function Input({ onChange, type, after, ...props }: InputProps): react_jsx_runtime.JSX.Element;
+
+declare function Button({ size, disabled, loading, children, onClick, highlight, block, type, rounded, className, style }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+declare function LoginBox({ methods, inModal }: LoginBoxProps): react_jsx_runtime.JSX.Element;
+
+declare function Modal({ children, isOpen, width }: ModalProps): react_jsx_runtime.JSX.Element;
+declare function ModalWithHeader({ children, onBack, onClose, title, showClose, ...props }: ModalWithHeaderProps): react_jsx_runtime.JSX.Element;
+
+declare function LoginButton({ loginRender, methods, onLoginClick, ...props }: Omit<ButtonProps, 'onClick' | 'highlight'> & {
+    loginRender?: () => JSX.Element;
+    methods?: LoginMethodType[];
+    onLoginClick?: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+declare function LoginPanel({ header, onClose, ...props }: LoginPanelProps): react_jsx_runtime.JSX.Element;
+
+declare function LoginModal({ isOpen, width, ...props }: LoginModalProps): react_jsx_runtime.JSX.Element;
+
+declare function UsernameModal({ title, isOpen, onSuccess, ...props }: ModalWithHeaderProps & {
+    onSuccess?: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+declare function PasswordModal({ title, isOpen, onSuccess, ...props }: ModalWithHeaderProps & {
+    onSuccess?: () => void;
+}): react_jsx_runtime.JSX.Element;
+
+declare const index$1_Button: typeof Button;
+declare const index$1_EmailModal: typeof EmailModal;
+declare const index$1_Field: typeof Field;
+declare const index$1_Input: typeof Input;
+declare const index$1_LoginBox: typeof LoginBox;
+declare const index$1_LoginButton: typeof LoginButton;
+declare const index$1_LoginModal: typeof LoginModal;
+declare const index$1_LoginPanel: typeof LoginPanel;
+declare const index$1_Modal: typeof Modal;
+declare const index$1_ModalWithHeader: typeof ModalWithHeader;
+declare const index$1_PasswordModal: typeof PasswordModal;
+declare const index$1_UsernameModal: typeof UsernameModal;
+declare namespace index$1 {
+  export { index$1_Button as Button, index$1_EmailModal as EmailModal, index$1_Field as Field, index$1_Input as Input, index$1_LoginBox as LoginBox, index$1_LoginButton as LoginButton, index$1_LoginModal as LoginModal, index$1_LoginPanel as LoginPanel, index$1_Modal as Modal, index$1_ModalWithHeader as ModalWithHeader, index$1_PasswordModal as PasswordModal, index$1_UsernameModal as UsernameModal };
+}
+
+declare function useUserInfo(): {
+    loginByTelegram: () => void;
+    loginByTwitter: () => void;
+    loginByGoogle: () => void;
+    loginByWallet: () => void;
+    loginByEmail: ({ email, code }: {
+        email: string;
+        code: string;
+    }) => Promise<boolean>;
+    token: string;
+    mid: string;
+    did: string;
+    address: string;
+    isLogin: boolean;
+    logout: () => Promise<void>;
+    getLoginEmailCode: (email: string) => Promise<string>;
+    refreshOverview: () => Promise<void>;
+    overview: OverviewInfo | null;
+    bindWallet: () => Promise<void>;
+    bindTelegram: () => Promise<void>;
+    username: string;
+};
+
+declare function useMatchEvents(handlers: IMatchEvents): void;
+
+type ChainType = "ethereum" | "solana";
+type RecoveryType = "base_generated_recovery_key" | "user_passcode_recovery_key"
+
+interface UseWalletReturnType {
+    initWallet: (params: {
+        address: string;
+        did: string;
+    }) => Promise<void>;
+    generateWallet: (params: {
+        did: string;
+        userPasscode: string;
+    }) => Promise<string>;
+    isRecovered: () => Promise<boolean>;
+    recoveryWallet: (chainType: ChainType | undefined, recoveryType: RecoveryType, userPasscode?: string) => Promise<void>;
+    signMessage: (message: SignableMessage, type?: ChainType) => Promise<Hex>;
+    signTransaction: (transaction: TransactionSerializable, type?: ChainType) => Promise<`0x02${string}` | `0x01${string}` | `0x03${string}` | `0x04${string}` | viem.TransactionSerializedLegacy>;
+}
+declare function useWallet(): UseWalletReturnType;
+
+declare const index_useMatchEvents: typeof useMatchEvents;
+declare const index_useUserInfo: typeof useUserInfo;
+declare const index_useWallet: typeof useWallet;
+declare namespace index {
+  export { index_useMatchEvents as useMatchEvents, index_useUserInfo as useUserInfo, index_useWallet as useWallet };
+}
+
+export { index$1 as Components, index as Hooks, MatchProvider, useMatch };