@matchain/matchid-sdk-react 0.1.28 → 0.1.30

package/dist/index.css

@@ -32,9 +32,17 @@ body {
     --matchid-login-method-round: var(--matchid-round);
     --matchid-login-method-color: var(--matchid-text-color);
 
+    --matchid-login-other-color:var(--matchid-gray-600);
+
+    --matchid-login-recommend-wallet-color:var(--matchid-black);
+    --matchid-login-recommend-wallet-hover-color:var(--matchid-white);
+    --matchid-login-recommend-wallet-hover-bg:var(--matchid-highlight-orange);
+
+
     --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**/
@@ -111,38 +119,159 @@ body {
     justify-content: center;
     align-items: center;
     flex-direction: column;
-    gap: 16px;
-}
+    gap: 64px;
+    .matchid-login-recommend-list{
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        gap: 16px;
+        .matchid-login-recommend-method {
+            width: 100%;
+            position: relative;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            border-radius: var(--matchid-login-method-round, 12px);
+            border: 1px solid var(--matchid-login-method-border-color, #E3E3E3);
+            &:hover {
+                border-color: var(--matchid-login-method-hover-border-color, #FC802D);
+            }
+            .matchid-login-recommend-method-item{
 
-.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);
-}
+                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);
+
+                .matchid-login-recommend-method-content {
+                    display: flex;
+                    justify-content: flex-start;
+                    align-items: center;
+                    gap: 8px;
+                }
+                .matchid-login-recommend-method-arrow{
+                    transition: all 0.3s;
+                    &.matchid-login-recommend-method-arrow-active{
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+            .matchid-login-recommend-method-popover{
+                display: none;
+                width: 100%;
+                padding:0 16px 16px;
+                flex-direction: column;
+                &.matchid-login-recommend-method-popover-active{
+                    display: flex;
+                }
+                .matchid-login-recommend-wallet-divider{
+                    height: 1px;
+                    width: 100%;
+                    background: var(--matchid-line);
+                }
+                .matchid-login-recommend-wallet-list{
+                    margin-top:16px;
+                    display: flex;
+                    flex-direction: column;
+                    gap:8px;
+                    width: 100%;
+                    .matchid-login-recommend-wallet-item{
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                        gap: 16px;
+                        height:56px;
+                        border-radius: 8px;
+                        font-size: 16px;
+                        font-weight: 600;
+
+                        color: var(--matchid-login-recommend-wallet-color, #000000);
+                        cursor: pointer;
+                        padding:0 16px;
+                        .matchid-login-recommend-wallet-item-content{
+                            display: flex;
+                            justify-content: space-between;
+                            align-items: center;
+                            gap:8px;
+                            .matchid-login-recommend-wallet-item-hover-icon{
+                                display: none;
+                            }
+                        }
+                        &:hover{
+                            background: var(--matchid-login-recommend-wallet-hover-bg, #FC802D);
+                            color: var(--matchid-login-recommend-wallet-hover-color, #FFF);
+                            --matchid-arrow-color:var(--matchid-login-recommend-wallet-hover-color, #FFF);
+                            .matchid-login-recommend-wallet-item-hover-icon{
+                                display: block;
+                            }
+                            .matchid-login-recommend-wallet-item-icon{
+                                display: none;
+                            }
+
+                        }
+                    }
+                }
+            }
 
-.matchid-login-method:hover {
-    border-color: var(--matchid-login-method-hover-border-color, #FC802D);
-}
+        }
+    }
+    .matchid-login-other {
+        width: 100%;
+        gap:16px;
+        display: flex;
+        flex-direction: column;
+        .matchid-login-other-text{
+            text-align: center;
+            font-size: 14px;
+            color: var(--matchid-login-other-color, #6E6E6E);
+            font-weight: 400;
+        }
+        .matchid-login-method-box{
+            display: grid;
+            padding:16px;
+            gap: 32px 16px;
+            grid-template-columns: repeat(5, 1fr);
+
+            @media screen and (max-width: 400px) {
+                grid-template-columns: repeat(4, 1fr);
+            }
 
-.matchid-login-method-content {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 8px;
+            @media screen and (max-width: 350px) {
+                grid-template-columns: repeat(3, 1fr);
+            }
+            .matchid-login-method-item{
+                cursor: pointer;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+    }
 }
 
+
+
 .matchid-login-panel {
     display: flex;
     flex-direction: column;
     gap: 24px;
+    .matchid-login-panel-box{
+        max-height: 500px;
+        overflow-y: auto;
+        &::-webkit-scrollbar {
+            width: 8px;
+            background-color: #D3D3D3;
+            border-radius: 4px;
+        }
+    }
 }
 
 .matchid-login-panel-divide {
@@ -234,12 +363,14 @@ body {
     width: 100%;
     height: 72px;
     padding-left: 24px;
+    padding-right: 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);
+    gap:24px;
 }
 
 .matchid-input-box:active, .matchid-input-box:focus, .matchid-input-box:focus-within {
@@ -250,8 +381,9 @@ body {
 .matchid-input-delete-icon {
     opacity: 0;
     cursor: pointer;
-    margin-left: 24px;
-    margin-right: 24px;
+    width: 20px;
+    flex-shrink: 1;
+
 }
 
 .matchid-input-box:focus-within .matchid-input-delete-icon {
@@ -260,8 +392,10 @@ body {
 
 .matchid-input-eye-icon {
     cursor: pointer;
-    margin-left: 24px;
-    margin-right: 24px;
+    display: flex;
+    align-items: center;
+    width: 20px;
+    flex-shrink: 1;
 }
 
 .matchid-input-box.matchid-input-has-content {
@@ -276,7 +410,7 @@ body {
     font-size: 18px;
     font-weight: 600;
     background: none;
-    margin-right: 24px;
+    min-width: 0;
 }
 
 .matchid-input-field::placeholder {
@@ -632,4 +766,4 @@ body {
         }
     }
 
-}
+}

package/dist/index.d.mts

@@ -1,5 +1,4 @@
-import * as react from 'react';
-import react__default, { PropsWithChildren, CSSProperties, ReactNode } from 'react';
+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, Account } from 'viem';
@@ -8,6 +7,8 @@ import { UseQueryOptions } from '@tanstack/react-query/src/types';
 
 type ISocialLoginMethod = 'google' | 'twitter' | 'discord' | 'github' |'telegram' | 'linkedin' | 'facebook'
 type LoginMethodType = 'evm' | 'sol' | 'email' | ISocialLoginMethod
+type OtherLoginMethodType ='email' | ISocialLoginMethod
+type RecommendLoginMethodType = 'wallet' | 'email' | ISocialLoginMethod
 type IEnvConfigType = {
     endpoints: {
         back: string;
@@ -70,8 +71,9 @@ type InputProps = {
 }
 
 type LoginBoxProps = {
-    methods?: LoginMethodType[],
+    methods?: OtherLoginMethodType[],
     inModal?: boolean
+    recommendMethods?: RecommendLoginMethodType[]
 }
 type LoginPanelProps = {
     header?: React.ReactNode
@@ -162,7 +164,7 @@ type MatchContextType = {
     }) => Promise<void>;
     theme: "light" | "dark";
 } & Partial<IEnvConfigType>;
-declare const MatchProvider: react__default.FC<{
+declare const MatchProvider: React$1.FC<{
     children: ReactNode;
     appid: string;
     events?: IMatchEvents;
@@ -189,18 +191,17 @@ declare function ModalWithHeader({ children, onBack, onClose, title, showBorder,
 
 declare function Popover({ children, content, position, type, className, gap }: PopoverProps): react_jsx_runtime.JSX.Element;
 
-declare function LoginBox({ methods, inModal }: LoginBoxProps): react_jsx_runtime.JSX.Element;
+declare function LoginBox({ recommendMethods, methods, inModal }: LoginBoxProps): react_jsx_runtime.JSX.Element;
 
-declare function LoginButton({ loginRender, methods, onLoginClick, popoverPosition, popoverType, popoverGap, ...props }: Omit<ButtonProps, 'onClick' | 'highlight'> & {
+declare function LoginButton({ loginRender, methods, recommendMethods, onLoginClick, popoverPosition, popoverType, popoverGap, ...props }: Omit<ButtonProps, 'onClick' | 'highlight'> & {
     loginRender?: ReactNode;
-    methods?: LoginMethodType[];
+    methods?: OtherLoginMethodType[];
+    recommendMethods?: RecommendLoginMethodType[];
     onLoginClick?: () => void;
     popoverPosition?: PopoverPositionType;
-    popoverType: PopoverTypeType;
+    popoverType?: PopoverTypeType;
     popoverGap?: number | string;
-}): react_jsx_runtime.JSX.Element | {
-    loginRender: string | number | true | react.ReactElement<any, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | react.ReactPortal;
-};
+}): react_jsx_runtime.JSX.Element;
 
 declare function LoginPanel({ header, onClose, ...props }: LoginPanelProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-import * as react from 'react';
-import react__default, { PropsWithChildren, CSSProperties, ReactNode } from 'react';
+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, Account } from 'viem';
@@ -8,6 +7,8 @@ import { UseQueryOptions } from '@tanstack/react-query/src/types';
 
 type ISocialLoginMethod = 'google' | 'twitter' | 'discord' | 'github' |'telegram' | 'linkedin' | 'facebook'
 type LoginMethodType = 'evm' | 'sol' | 'email' | ISocialLoginMethod
+type OtherLoginMethodType ='email' | ISocialLoginMethod
+type RecommendLoginMethodType = 'wallet' | 'email' | ISocialLoginMethod
 type IEnvConfigType = {
     endpoints: {
         back: string;
@@ -70,8 +71,9 @@ type InputProps = {
 }
 
 type LoginBoxProps = {
-    methods?: LoginMethodType[],
+    methods?: OtherLoginMethodType[],
     inModal?: boolean
+    recommendMethods?: RecommendLoginMethodType[]
 }
 type LoginPanelProps = {
     header?: React.ReactNode
@@ -162,7 +164,7 @@ type MatchContextType = {
     }) => Promise<void>;
     theme: "light" | "dark";
 } & Partial<IEnvConfigType>;
-declare const MatchProvider: react__default.FC<{
+declare const MatchProvider: React$1.FC<{
     children: ReactNode;
     appid: string;
     events?: IMatchEvents;
@@ -189,18 +191,17 @@ declare function ModalWithHeader({ children, onBack, onClose, title, showBorder,
 
 declare function Popover({ children, content, position, type, className, gap }: PopoverProps): react_jsx_runtime.JSX.Element;
 
-declare function LoginBox({ methods, inModal }: LoginBoxProps): react_jsx_runtime.JSX.Element;
+declare function LoginBox({ recommendMethods, methods, inModal }: LoginBoxProps): react_jsx_runtime.JSX.Element;
 
-declare function LoginButton({ loginRender, methods, onLoginClick, popoverPosition, popoverType, popoverGap, ...props }: Omit<ButtonProps, 'onClick' | 'highlight'> & {
+declare function LoginButton({ loginRender, methods, recommendMethods, onLoginClick, popoverPosition, popoverType, popoverGap, ...props }: Omit<ButtonProps, 'onClick' | 'highlight'> & {
     loginRender?: ReactNode;
-    methods?: LoginMethodType[];
+    methods?: OtherLoginMethodType[];
+    recommendMethods?: RecommendLoginMethodType[];
     onLoginClick?: () => void;
     popoverPosition?: PopoverPositionType;
-    popoverType: PopoverTypeType;
+    popoverType?: PopoverTypeType;
     popoverGap?: number | string;
-}): react_jsx_runtime.JSX.Element | {
-    loginRender: string | number | true | react.ReactElement<any, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | react.ReactPortal;
-};
+}): react_jsx_runtime.JSX.Element;
 
 declare function LoginPanel({ header, onClose, ...props }: LoginPanelProps): react_jsx_runtime.JSX.Element;