### Configuring MatchProvider in React App

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/index.md

Demonstrates how to wrap a React application with `MatchProvider`, passing `appid` and `wallet` configuration. This is the basic setup for integrating MatchID services into your application.

```tsx
import {MatchProvider} from "@matchain/matchid-sdk-react";

const App = () => {
  return (
     <MatchProvider appid="YourAppId" wallet={{type:"UserPasscode"}} >
       {/* Your App */}
     </MatchProvider>
  );
};
```

--------------------------------

### Installing MatchID React SDK with npm or yarn

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/index.md

Provides commands to install the MatchID React SDK using either npm or yarn package managers. These commands add the SDK to your project's dependencies.

```bash
# use npm install
npm install @matchain/matchid-sdk-react
# use yarn install
yarn add @matchain/matchid-sdk-react
```

--------------------------------

### Example Request Body for User Auth Verification (JSON)

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/api/method/auth/verify.md

This JSON snippet illustrates the structure of the request body for the `/api/v1/partner/auth/verify` endpoint. It demonstrates how to pass the `auth_key` and `platform` parameters, which are essential for verifying user authentication. The `requestBody` field contains a stringified JSON object.

```JSON
{ "requestBody": "{\"auth_key\":\"123123123123\",\"platform\":\"telegram\"}"}
```

--------------------------------

### Basic Usage of LoginPanel in React - TypeScript

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/LoginPanel.md

This example shows the basic integration of the `LoginPanel` component within a React application. It imports `React` and `LoginPanel`, then renders the `LoginPanel` component inside a simple `App` functional component. This demonstrates the minimal setup required to display the login interface.

```typescript
import React from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {LoginPanel} = Components
function App() {
    return (
        <div>
            <LoginPanel />
        </div>
    );
}

export default App;
```

--------------------------------

### Integrating MatchProvider with WagmiProvider in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/index.md

Shows how to integrate `MatchProvider` within a `WagmiProvider` setup, using `wagmiConfig` from the SDK. This configuration is useful when your application also leverages Wagmi for blockchain interactions.

```tsx
import {MatchProvider,wagmiConfig} from "@matchain/matchid-sdk-react";

const App = () => {
  return (
    <WagmiProvider config={wagmiConfig}>
      <MatchProvider appid="YourAppId" wallet={{type:"UserPasscode"}} >
        {/* Your App */}
        </MatchProvider>
    </WagmiProvider>
  );
};
```

--------------------------------

### Example Request Body for User Bind List API (JSON)

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/api/method/user/bind/list.md

This JSON snippet demonstrates the structure of the request body required to query a user's bind list. It specifies the 'did' parameter, which is mandatory for identifying the user.

```json
{ "requestBody": "{\"did\":\"did:matchid:222222222\"}"}
```

--------------------------------

### Example Success Response for User Auth Verification (JSON)

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/api/method/auth/verify.md

This JSON snippet shows a successful response from the `/api/v1/partner/auth/verify` endpoint. It includes a `code` of 0 indicating success, a `data` object containing user-specific details like `matchId`, `platform`, `platformId`, and `avatarUrl`, and a success `message`.

```JSON
{
  "code":0,
  "data":{
    "matchId":"123123",
    "platform":"Telegram",
    "platformId": "1111111",
    "platformName": "Telegram",
    "firstName": "Match",
    "lastName": "ID",
    "nickname": "MatchIDdemo",
    "avatarUrl": "https://a.com/1.jpg"
  },
  "message":"successfully"
}
```

--------------------------------

### Using the Basic Modal Component - React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/Modal.md

This example shows how to integrate the `Modal` component into a React application. It demonstrates opening a basic modal with static content by setting the `isOpen` prop to `true`.

```React
import React from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {Modal} = Components

function App() {
    return (
        <div>
            <Modal isOpen={true}>
                <div>Modal Content</div>
            </Modal>
        </div>
    );
}

export default App;
```

--------------------------------

### Example Usage of useWallet Hook in React Component

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/hooks/useWallet.md

This React component, `WalletManager`, demonstrates the practical application of the `useWallet` hook. It showcases how to destructure various properties and methods from the hook, such as `isRecovered`, `signMessage`, `signTransaction`, `address`, `evmAccount`, and `createWalletClient`. It also includes example functions for signing messages, signing transactions, and sending transactions using a created wallet client, logging the results to the console. This component provides interactive buttons to trigger these operations and display the current wallet address and EVM account status.

```TSX
import React from 'react';
import { Hooks } from '@matchain/matchid-sdk-react';
const { useWallet } = Hooks;

function WalletManager() {
    const {
        isRecovered,
        recoveryWallet,
        signMessage,
        signTransaction,
        address,
        evmAccount,
        createWalletClient
    } = useWallet();
    

    const handleSignMessage = async () => {
        const signedMessage = await signMessage({ message: 'Hello, world!' });
        console.log('Signed message:', signedMessage);
    };

    const handleSignTransaction = async () => {
        const signedTransaction = await signTransaction({
            to: '0xRecipientAddress',
            value: '1000000000000000000', // 1 ETH
            data: '0x'
        });
        console.log('Signed transaction:', signedTransaction);
    };
    
    const sendTransaction = async () =>{
        const walletClient = createWalletClient({
            chain: chain,
            transport: http(),
        })
        const hash = walletClient.sendTransaction({
            to: '0xRecipientAddress',
            value: '1000000000000000000', // 1 ETH
            data: '0x'
        })
        console.log('Transaction hash:', hash);
    }

    return (
        <div>
            <button onClick={handleSignMessage}>Sign Message</button>
            <button onClick={handleSignTransaction}>Sign Transaction</button>
            <button onClick={sendTransaction}>Send Transaction</button>
            <p>Current Address: {address}</p>
            <p>EVM Account: {evmAccount ? evmAccount.address : 'Not initialized'}</p>
        </div>
    );
}

export default WalletManager;
```

--------------------------------

### Field Component Example with Multiple Imports and Props

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/Field.md

This example demonstrates using the `Field` component with `label` and `error` props, wrapping an `Input` component. It specifically highlights importing both `Field` and `Input` components from the `@matchain/matchid-sdk-react` library, managing state for input value and error messages, similar to a real-world form scenario.

```typescript
import React, { useState } from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {Field,Input} = Components

function App() {
    const [value, setValue] = useState('');
    const [error, setError] = useState('');

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setValue(e.target.value);
        if (e.target.value === '') {
            setError('This field is required');
        } else {
            setError('');
        }
    };

    return (
        <div>
            <Field label="Username" error={error}>
                <Input value={value} onChange={handleChange} />
            </Field>
        </div>
    );
}

export default App;
```

--------------------------------

### Basic Usage of Button Component in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/Button.md

This example shows a basic implementation of the `Button` component within a React `App` function. It includes an `onClick` handler and demonstrates setting `size` and `highlight` props.

```TypeScript
import {Components} from '@matchain/matchid-sdk-react';
const {Button} = Components

function App() {
    const handleClick = () => {
        console.log('Button clicked');
    };

    return (
        <div>
            <Button onClick={handleClick} size="lg" highlight>
                Click Me
            </Button>
        </div>
    );
}

export default App;
```

--------------------------------

### Basic Usage Example of Field Component in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/Field.md

This example illustrates the basic usage of the `Field` component within a React application. It shows how to wrap an `Input` component, manage its state using `useState`, and display an error message based on simple input validation. The `label` and `error` props are demonstrated.

```typescript
import React, { useState } from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {Field} = Components

function App() {
    const [value, setValue] = useState('');
    const [error, setError] = useState('');

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setValue(e.target.value);
        if (e.target.value === '') {
            setError('This field is required');
        } else {
            setError('');
        }
    };

    return (
        <div>
            <Field label="Username" error={error}>
                <Input value={value} onChange={handleChange} />
            </Field>
        </div>
    );
}

export default App;
```

--------------------------------

### Basic Usage of LoginModal in React - TypeScript

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/LoginModal.md

This example shows the basic integration of the `LoginModal` component within a React application, rendering it with the `isOpen` prop set to `true` to make it visible.

```typescript
import React from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {LoginModal} = Components
function App() {
    return (
        <div>
            <LoginModal isOpen={true} />
        </div>
    );
}

export default App;
```

--------------------------------

### Example Usage of useUserInfo Hook in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/hooks/useUserInfo.md

This example illustrates how to integrate and use the `useUserInfo` hook within a React functional component. It demonstrates handling user login with various methods (Google, Twitter, Wallet, Telegram), logging out, refreshing user overview, and conditionally rendering UI based on login status. It also shows how to request an email login code.

```TypeScript
import React from 'react';
import { Hooks } from '@matchain/matchid-sdk-react';
const { useUserInfo } = Hooks;

function UserProfile() {
    const {
        login,
        logout,
        isLogin,
        username,
        getLoginEmailCode,
        refreshOverview,
    } = useUserInfo();

    const handleLogin = async (method: string) => {
        await login(method);
        console.log('Logged in with method:', method);
    };

    const handleLogout = () => {
        logout();
        console.log('User logged out');
    };

    return (
        <div>
            {isLogin ? (
                <>
                    <p>Welcome, {username}</p>
                    <button onClick={handleLogout}>Logout</button>
                </>
            ) : (
                <>
                    <button onClick={() => handleLogin('google')}>Login with Google</button>
                    <button onClick={() => handleLogin('twitter')}>Login with Twitter</button>
                    <button onClick={() => handleLogin('wallet')}>Login with Wallet</button>
                    <button onClick={() => handleLogin('telegram')}>Login with Telegram</button>
                    <button onClick={() => getLoginEmailCode('user@example.com')}>Get Email Code</button>
                </>
            )}
            <button onClick={refreshOverview}>Refresh Overview</button>
        </div>
    );
}

export default UserProfile;
```

--------------------------------

### Basic Usage of SOLModal for Solana Login in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/SOLModal.md

This example illustrates the basic integration of the `SOLModal` component within a React application. It configures the modal for a 'login' operation, sets it to be open, and defines callback functions for successful wallet operations and modal closure. This snippet shows how to render the modal with minimal required props.

```typescript
import {Components} from '@matchain/matchid-sdk-react';
const {SOLModal} = Components;

function App() {
    const handleSuccess = () => {
        console.log('Wallet operation successful');
    };

    return (
        <div>
            <SOLModal
                type="login"
                isOpen={true}
                onSuccess={handleSuccess}
                onClose={() => console.log('Modal closed')}
            />
        </div>
    );
}

export default App;
```

--------------------------------

### Testing API Signature Generation in Go

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/api/sign.md

This Go test function demonstrates how to use the `APISign` function to generate a signature for a sample API request. It initializes a timestamp, HTTP method, request URL, and a JSON request body, then calls `APISign` with placeholder application ID and secret key, printing the resulting signature or any errors encountered. This snippet serves as an example of how to integrate and verify the signature generation logic.

```Go
func TestAPISign(t *testing.T) {
    timestamp := fmt.Sprintf("%d", time.Now().UnixMilli())
    method := "POST"
    requestURL := "/api/v1/partner/user/bind/list"
    reqBody := map[string]string{
       "did":   "did:matchid:222222222"
    }

    dataType, _ := json.Marshal(reqBody)
    dataString := string(dataType)

    appid := "your appid"
    secretKey := "your app secretKey"

    sign, err := APISign(timestamp, method, requestURL, dataString, secretKey)
    if err != nil {
       fmt.Println("Error:", err.Error())
       return
    }
    fmt.Println("sign", sign)
}
```

--------------------------------

### Importing MatchID React SDK CSS

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/index.md

Provides the TypeScript import statement to include the default CSS styles for the MatchID React SDK. Users have the option to customize the styling with their own CSS.

```typescript
import "@matchain/matchid-sdk-react/index.css"
```

--------------------------------

### Basic Popover Usage Example in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/Popover.md

This example shows a basic implementation of the `Popover` component within a React application. It configures the popover to display 'Popover Content' on hover, positioned to the right of a trigger button, with a 10px gap.

```typescript
import {Components} from '@matchain/matchid-sdk-react';
const {Popover} = Components;

function App() {
    return (
        <div>
            <Popover 
                content={<div>Popover Content</div>} 
                position="right" 
                type="hover" 
                gap="10px"
            >
                <button>Hover or Click Me</button>
            </Popover>
        </div>
    );
}

export default App;
```

--------------------------------

### Using the ModalWithHeader Component - React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/Modal.md

This example illustrates the usage of the `ModalWithHeader` component in a React application. It includes a title and an `onClose` callback, demonstrating how to handle close button interactions and display a header.

```React
import React from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {ModalWithHeader} = Components

function App() {
    return (
        <div>
            <ModalWithHeader isOpen={true} title="Modal Title" onClose={() => console.log('Close button clicked')}>
                <div>Modal Content</div>
            </ModalWithHeader>
        </div>
    );
}

export default App;
```

--------------------------------

### Importing Modal and ModalWithHeader Components - TypeScript

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/Modal.md

This snippet demonstrates how to import the `Modal` and `ModalWithHeader` components from the `@matchain/matchid-sdk-react` library. It uses destructuring to get the components from the `Components` object.

```TypeScript
import {Components} from '@matchain/matchid-sdk-react';
const {Modal,ModalWithHeader} = Components
```

--------------------------------

### POST Method Request Body Example - JSON

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/api/index.md

This example demonstrates the structure of the request body for a POST method call to the MatchID API. The `requestBody` parameter contains a JSON string, which itself includes the `did` (decentralized identifier) field. This shows how to properly nest and escape JSON data within the request body.

```JSON
{ "requestBody": "{\"did\":\"did:matchid:222222222\"}"}
```

--------------------------------

### Successful Response for User Bind List API (JSON)

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/api/method/user/bind/list.md

This JSON snippet illustrates a successful response from the user bind list API. It includes the application ID, the user's DID, and a list of platforms the user is bound to, along with a success message.

```json
{
  "code":0,
  "data":{
    "appid":"MID-D-11111111",
    "did":"did:matchid:222222222",
    "platformList":[
      {"platform":"EVM"},
      {"platform":"SOL"},
      {"platform":"Facebook"}
    ]
  },
  "message":"successfully"
}
```

--------------------------------

### Basic Usage of LoginButton Component in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/LoginButton.md

This example shows the fundamental way to integrate the `LoginButton` component into a React application. It imports the component and renders it within a functional React component, providing a default login button interface.

```typescript
import {Components} from '@matchain/matchid-sdk-react';
const {LoginButton} = Components;

function App() {
    return (
        <div>
            <LoginButton />
        </div>
    );
}

export default App;
```

--------------------------------

### Basic Usage of LoginBox Component in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/LoginBox.md

This example shows a basic integration of the `LoginBox` component within a React `App` function. It renders the `LoginBox` without any custom props, displaying default login methods.

```typescript
import React from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {LoginBox} = Components
function App() {
    return (
        <div>
            <LoginBox />
        </div>
    );
}

export default App;
```

--------------------------------

### Example Request Body for User Info (POST) - JSON

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/api/sign.md

This JSON object represents the request body for a POST API call to retrieve user information. It contains a single parameter, 'did', which specifies the decentralized identifier for the user.

```JSON
{
    "did":"did:matchid:222222222"
 }
```

--------------------------------

### Importing LoginBox Component in TypeScript

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/LoginBox.md

This snippet demonstrates how to import the `LoginBox` component from the `@matchain/matchid-sdk-react` package. It uses destructuring to get `LoginBox` from the `Components` export.

```typescript
import {Components} from '@matchain/matchid-sdk-react';
const {LoginBox} = Components
```

--------------------------------

### PasswordModal Component Usage with All Props in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/PasswordModal.md

This example demonstrates how to use the `PasswordModal` component, explicitly setting all available props including `isOpen`, `width`, `title`, `onClose`, and `onSuccess`. It showcases customization of the modal's appearance and behavior.

```typescript
import React, { useState } from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {PasswordModal} = Components

function App() {
    const [isOpen, setIsOpen] = useState(true);

    const handleClose = () => {
        setIsOpen(false);
        console.log('Close button clicked');
    };

    const handleSuccess = () => {
        console.log('Password set successfully');
    };

    return (
        <div>
            <PasswordModal
                isOpen={isOpen}
                width={500}
                title="Set Your Password"
                onClose={handleClose}
                onSuccess={handleSuccess}
            />
        </div>
    );
}

export default App;
```

--------------------------------

### Customizing LoginPanel with All Props - TypeScript

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/LoginPanel.md

This snippet illustrates how to use the `LoginPanel` component with various props to customize its behavior and appearance. It sets a custom `header`, defines an `onClose` callback, specifies `methods` and `recommendMethods` arrays for login options, and sets `inModal` to `true` to indicate modal display. This example showcases the flexibility of the component's API.

```typescript
import React from 'react';
import { LoginMethodType } from '../types/types';
import { CloseRoundIcon } from 'assets/icon';
import {Components} from '@matchain/matchid-sdk-react';
const {LoginPanel} = Components

function App() {
    const methods = [ 'telegram', 'twitter'];
    const recommendMethods = [ 'wallet', 'email','google'];

    return (
        <div>
            <LoginPanel
                header={<div>Custom Header</div>}
                onClose={() => console.log('Close button clicked')}
                methods={methods}
                recommendMethods={recommendMethods}
                inModal={true}
            />
        </div>
    );
}

export default App;
```

--------------------------------

### Advanced Usage of UsernameModal with All Props (TypeScript)

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/UsernameModal.md

This example illustrates how to use the `UsernameModal` component with all its available props, including `width` and `title`, to customize its appearance and behavior. It also shows handling `onClose` and `onSuccess` callbacks.

```typescript
import React, { useState } from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {UsernameModal} = Components

function App() {
    const [isOpen, setIsOpen] = useState(true);

    const handleClose = () => {
        setIsOpen(false);
        console.log('Close button clicked');
    };

    const handleSuccess = () => {
        console.log('Username set successfully');
    };

    return (
        <div>
            <UsernameModal
                isOpen={isOpen}
                width={500}
                title="Set Your Username"
                onClose={handleClose}
                onSuccess={handleSuccess}
            />
        </div>
    );
}

export default App;
```

--------------------------------

### Basic Usage of Input Component in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/Input.md

This example illustrates the fundamental usage of the `Input` component within a React functional component. It demonstrates how to manage the input's value using React's `useState` hook and how to handle changes to the input field via the `onChange` event handler, updating the component's state.

```typescript
import React, { useState } from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {Input} = Components

function App() {
    const [value, setValue] = useState('');

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setValue(e.target.value);
    };

    return (
        <div>
            <Input type="text" value={value} onChange={handleChange} />
        </div>
    );
}

export default App;
```

--------------------------------

### Basic Usage of UsernameModal in React (TypeScript)

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/UsernameModal.md

This example shows a basic implementation of the `UsernameModal` component within a React functional component. It demonstrates how to manage the modal's open state and handle `onClose` and `onSuccess` events.

```typescript
import React, { useState } from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {UsernameModal} = Components

function App() {
    const [isOpen, setIsOpen] = useState(true);

    const handleClose = () => {
        setIsOpen(false);
        console.log('Close button clicked');
    };

    const handleSuccess = () => {
        console.log('Username set successfully');
    };

    return (
        <div>
            <UsernameModal
                isOpen={isOpen}
                onClose={handleClose}
                onSuccess={handleSuccess}
            />
        </div>
    );
}

export default App;
```

--------------------------------

### Button Component Usage with All Props in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/Button.md

This comprehensive example illustrates how to utilize all available props of the `Button` component, including `size`, `disabled`, `loading`, `onClick`, `highlight`, `block`, `type`, `rounded`, `className`, and `style`, to fully customize its appearance and behavior.

```TypeScript
import React from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {Button} = Components
function App() {
    const handleClick = () => {
        console.log('Button clicked');
    };

    return (
        <div>
            <Button
                size="lg"
                disabled={false}
                loading={false}
                onClick={handleClick}
                highlight={true}
                block={true}
                type="submit"
                rounded={true}
                className="custom-class"
                style={{ backgroundColor: 'blue' }}
            >
                Submit
            </Button>
        </div>
    );
}

export default App;
```

--------------------------------

### EmailModal Component Usage with All Props in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/EmailModal.md

This snippet provides an advanced example of the `EmailModal` component, showcasing the utilization of all available props. It demonstrates how to explicitly set `isOpen`, `width`, `onClose`, `onBack`, and `onLogin` to fully customize the modal's behavior and appearance.

```typescript
import React, { useState } from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {EmailModal} = Components
function App() {
    const [isModalOpen, setIsModalOpen] = useState(false);

    const handleLogin = (email: string) => {
        console.log('Logged in with email:', email);
        setIsModalOpen(false);
    };

    return (
        <div>
            <button onClick={() => setIsModalOpen(true)}>Open Email Modal</button>
            <EmailModal
                isOpen={isModalOpen}
                width={480}
                onClose={() => setIsModalOpen(false)}
                onBack={() => console.log('Back button clicked')}
                onLogin={handleLogin}
            />
        </div>
    );
}

export default App;
```

--------------------------------

### Basic Usage of PasswordModal Component in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/PasswordModal.md

This example shows a basic implementation of the `PasswordModal` component in a React application. It manages the modal's open state using `useState` and defines `onClose` and `onSuccess` handlers to log events.

```typescript
import React, { useState } from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {PasswordModal} = Components

function App() {
    const [isOpen, setIsOpen] = useState(true);

    const handleClose = () => {
        setIsOpen(false);
        console.log('Close button clicked');
    };

    const handleSuccess = () => {
        console.log('Password set successfully');
    };

    return (
        <div>
            <PasswordModal
                isOpen={isOpen}
                onClose={handleClose}
                onSuccess={handleSuccess}
            />
        </div>
    );
}

export default App;
```

--------------------------------

### Concatenated Signature String Example

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/api/sign.md

This string is the result of concatenating the timestamp, HTTP method, request path, and the sorted request body. This combined string is then used as input for HMAC SHA256 encryption.

```Plain Text
1731642490701POST/api/v1/partner/user/bind/list{"did":"did:matchid:222222222"}
```

--------------------------------

### Configuring MatchProvider with UserPasscode Wallet in TypeScript

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/MatchProvider.md

This snippet demonstrates how to integrate and configure the `MatchProvider` component from `@matchain/matchid-sdk-react`. It sets the `appid` to a placeholder 'YourAppId' and configures the `wallet` type to 'UserPasscode', requiring users to enter a password for wallet generation. This setup is crucial for applications needing specific wallet behavior.

```TypeScript
import {MatchProvider} from "@matchain/matchid-sdk-react";

const App = () => {
    return (
        <MatchProvider appid="YourAppId" wallet={{type:"UserPasscode"}} >
        {/* Your App */}
        </MatchProvider>
    );
};
```

--------------------------------

### Popover Usage with All Props in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/Popover.md

This example demonstrates the `Popover` component utilizing a comprehensive set of its available props. It displays 'Detailed Popover Information' on click, positioned at the bottom of the trigger button, with a custom CSS class 'custom-popover' and a 15px gap.

```typescript
import {Components} from '@matchain/matchid-sdk-react';
const {Popover} = Components;

function App() {
    return (
        <div>
            <Popover
                content={<div>Detailed Popover Information</div>}
                position="bottom"
                type="click"
                className="custom-popover"
                gap="15px"
            >
                <button>Click Me</button>
            </Popover>
        </div>
    );
}

export default App;
```

--------------------------------

### Sorted Request Body for Signature Generation - JSON

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/api/sign.md

This JSON object shows the request body after being sorted according to dictionary order, a prerequisite step before generating the signature string. Empty values are removed, though none are present in this example.

```JSON
{"did":"did:matchid:222222222"}
```

--------------------------------

### Basic Usage of EmailModal Component in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/EmailModal.md

This example illustrates the fundamental usage of the `EmailModal` component within a React functional component. It demonstrates how to control the modal's visibility using React's `useState` hook and how to handle the `onLogin` callback for successful email submission.

```typescript
import React, { useState } from 'react';
import {Components} from '@matchain/matchid-sdk-react';
const {EmailModal} = Components

function App() {
    const [isModalOpen, setIsModalOpen] = useState(false);

    const handleLogin = (email: string) => {
        console.log('Logged in with email:', email);
        setIsModalOpen(false);
    };

    return (
        <div>
            <button onClick={() => setIsModalOpen(true)}>Open Email Modal</button>
            <EmailModal
                isOpen={isModalOpen}
                onClose={() => setIsModalOpen(false)}
                onBack={() => console.log('Back button clicked')}
                onLogin={handleLogin}
            />
        </div>
    );
}

export default App;
```

--------------------------------

### Input Component with Dynamic Type and After Element in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/Input.md

This advanced example showcases the `Input` component's flexibility by demonstrating a password input field with a dynamic type toggle. It uses the `after` prop to embed an interactive icon that switches the input type between 'password' and 'text', providing a common UI pattern for password visibility.

```typescript
import React, { useState } from 'react';
import { DeleteRoundIcon, CloseEyeIcon, OpenEyeIcon } from 'assets/icon';
import {Components} from '@matchain/matchid-sdk-react';
const {Input} = Components

function App() {
    const [value, setValue] = useState('');
    const [inputType, setInputType] = useState('password');

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setValue(e.target.value);
    };

    return (
        <div>
            <Input
                type={inputType}
                value={value}
                onChange={handleChange}
                after={
                    <div onClick={() => setInputType(inputType === 'password' ? 'text' : 'password')}>
                        {inputType === 'password' ? <CloseEyeIcon /> : <OpenEyeIcon />}
                    </div>
                }
            />
        </div>
    );
}

export default App;
```

--------------------------------

### Constructing Data Validation String - Example

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/match/validate.md

Illustrates how to construct the data check string by concatenating key-value pairs (excluding 'hash' and including 'secret') in alphabetical order, separated by newlines. This string serves as the input for hash computation to validate the received data.

```text
address=0x00000...
appid=MID-Test
auth_date=1737018000
did=did:matchid:123123
secret=xxxxq112
```

--------------------------------

### Validating Authentication Timestamp for Freshness - TypeScript

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/match/validate.md

Provides an example of how to validate the `auth_date` field to prevent replay attacks by checking if the authentication data is recent. It calculates the difference between the current time and the `auth_date` against a predefined threshold (e.g., 5 minutes).

```typescript
const currentTime = Math.floor(Date.now() / 1000);
const timeThreshold = 300; // 5 minutes

if (Math.abs(currentTime - authDate) > timeThreshold) {
    console.log("Authentication data is outdated");
} else {
    console.log("Authentication data is recent");
}
```

--------------------------------

### Advanced Usage of SOLModal for Solana Binding with Custom Title in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/SOLModal.md

This example demonstrates a more comprehensive use of the `SOLModal` component, configured for a 'bind' operation. It includes a custom `title` prop, showcasing how to override the default modal header. This snippet highlights the flexibility of the component's API for different use cases and custom UI requirements.

```typescript
import {Components} from '@matchain/matchid-sdk-react';
const {SOLModal} = Components;

function App() {
    const handleSuccess = () => {
        console.log('Wallet operation successful');
    };

    return (
        <div>
            <SOLModal
                type="bind"
                isOpen={true}
                title="Bind Your Wallet"
                onSuccess={handleSuccess}
                onClose={() => console.log('Modal closed')}
            />
        </div>
    );
}

export default App;
```

--------------------------------

### Initiating Telegram Login with login Method (JavaScript/React)

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/migrate/telegramMiniApp.md

This snippet illustrates calling the `login` method from the `useUserInfo` hook, specifying 'telegram' as the authentication provider. This action is typically triggered by a user tapping a login button, initiating the Telegram Mini App authentication flow through MatchID.

```JavaScript
login('telegram');
```

--------------------------------

### Defining Page Structure with HTML

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/index.md

This HTML snippet establishes a fixed-position container for toast notifications and a main content div with specific styling for borders, padding, and flex layout. It provides foundational structural elements for dynamic content display.

```html
<!-- Toastify Container -->
<div id="toast-container" style="position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; display: none;"></div>

<div style="border: 2px solid #3451b2; border-radius: 10px; padding: 20px; display: flex; align-items: center; gap: 20px;">

  <div style="flex: 1">
```

--------------------------------

### Implementing API Signature Generation in Go

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/zh-CN/api/sign.md

This Go code provides a complete solution for generating API signatures. It includes the `APISign` function for orchestrating the signature process, `calculateHMACSHA256` for cryptographic hashing, `getPath` for normalizing URL components, and `getJSONBody` which canonicalizes JSON request bodies by removing empty fields and sorting keys to ensure consistent input for hashing. The `TestAPISign` function demonstrates how to use these utilities to generate a signature for a POST request.

```Go
import (
        "bytes"
        "crypto/hmac"
        "crypto/sha256"
        "encoding/base64"
        "encoding/json"
        "fmt"
        "io/ioutil"
        "net/http"
        "net/url"
        "sort"
        "strings"
        "testing"
        "time"
)

func APISign(timestamp string, method string, requestURL string, body string, secretKey string) (string, error) {
        content := timestamp + strings.ToUpper(method) + getPath(requestURL) + getJSONBody(body)
        signature, err := calculateHMACSHA256([]byte(content), []byte(secretKey))
        if err != nil {
                return "", err
        }
        return base64.StdEncoding.EncodeToString(signature), nil
}

func calculateHMACSHA256(message []byte, secret []byte) ([]byte, error) {
        hash := hmac.New(sha256.New, secret)
        _, err := hash.Write(message)
        if err != nil {
                return nil, err
        }
        return hash.Sum(nil), nil
}

func getPath(requestURL string) string {
        u, err := url.Parse(requestURL)
        if err != nil {
                return ""
        }
        path := u.Path
        query := u.Query()
        query.Del("")
        keys := make([]string, 0, len(query))
        for key := range query {
                keys = append(keys, key)
        }
        sort.Strings(keys)
        var encodedParams []string
        for _, key := range keys {
                encodedParams = append(encodedParams, fmt.Sprintf("%s=%s", key, query.Get(key)))
        }
        paramsString := strings.Join(encodedParams, "&")
        if paramsString != "" {
                return path + "?" + paramsString
        }
        return path
}

func getJSONBody(body string) string {
        if body == "" {
                return "" 
        }

        var data interface{}
        err := json.Unmarshal([]byte(body), &data)
        if err != nil {
                return "" 
        }

        
        if dataMap, ok := data.(map[string]interface{}); ok && len(dataMap) == 0 {
                return "" 
        }

        removeEmptyKeys(data)
        sortedData := sortObject(data)

        jsonBytes, err := json.Marshal(sortedData)
        if err != nil {
                return ""
        }
        return string(jsonBytes)
}

func removeEmptyKeys(data interface{}) {
        switch value := data.(type) {
        case map[string]interface{}:
                for key, v := range value {
                        if v == nil || v == "" {
                                delete(value, key)
                        } else {
                                removeEmptyKeys(v)
                        }
                }
        case []interface{}:
                for _, v := range value {
                        removeEmptyKeys(v)
                }
        }
}

func sortObject(data interface{}) interface{} {
        switch value := data.(type) {
        case map[string]interface{}:
                keys := make([]string, 0, len(value))
                for k := range value {
                        keys = append(keys, k)
                }
                sort.Strings(keys)

                sortedMap := make(map[string]interface{})
                for _, k := range keys {
                        v := sortObject(value[k])
                        sortedMap[k] = v
                }
                return sortedMap

        case []interface{}:
                for i, v := range value {
                        value[i] = sortObject(v)
                }
                return value
        default:
                return value
        }
}

func TestAPISign(t *testing.T) {
    timestamp := fmt.Sprintf("%d", time.Now().UnixMilli())
    method := "POST"
    requestURL := "/mid/api/v1/partner/user"
    reqBody := map[string]string{
       "platform":   "Telegram",
       "platformId": "6112374290"
    }

    dataType, _ := json.Marshal(reqBody)
    dataString := string(dataType)

    appId := "your appid"
    secretKey := "your app secretKey"

    sign, err := APISign(timestamp, method, requestURL, dataString, secretKey)
    if err != nil {
       fmt.Println("Error:", err.Error())
       return
    }
    fmt.Println("sign", sign)
}
```

--------------------------------

### Importing Blockchain Chains for Wallet Integration - JavaScript

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/chains.md

This snippet demonstrates how to import various blockchain networks from `viem/chains` and MatchID-specific chains from `@matchain/matchid-sdk-react/chains`. These imported chain objects are intended for use with the `useWallet` hook to configure wallet connections.

```jsx
import {
    mainnet,
    arbitrum,
    arbitrumGoerli,
    base,
    baseSepolia,
    baseGoerli,
    bsc,
    bscTestnet,
    ...otherChains
} from 'viem/chains';
import {MatchMain, MatchTest} from "@matchain/matchid-sdk-react/chains";
```

--------------------------------

### Importing LoginPanel Component - TypeScript

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/LoginPanel.md

This snippet demonstrates how to import the `LoginPanel` component from the `@matchain/matchid-sdk-react` package. It destructures `LoginPanel` from the `Components` object. This is a prerequisite for using the component in a React application.

```typescript
import {Components} from '@matchain/matchid-sdk-react';
const {LoginPanel} = Components
```

--------------------------------

### Styling Card Components with CSS

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/index.md

This CSS defines a responsive layout for card components using Flexbox, ensuring consistent sizing, hover effects, and dark mode compatibility. It includes styles for card containers, individual cards, and their internal elements, adapting to mobile views by stacking cards vertically.

```css
/* Flexbox container for all cards */
.card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
    align-items: stretch; /* ✅ Ensure cards stretch to match height */
}

/* Consistent Card Styling for Uniform Size */
.card {
    flex: 1; /* Flex property for equal growth */
    flex-basis: 200px; /* ✅ Ensures all cards start with the same width */
    max-width: 200px; /* Prevent excessive growth */
    min-height: 250px; /* ✅ Consistent height for all cards */
    text-decoration: none;
    border: 2px solid lightgray;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* ✅ Balanced spacing */
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.card-explore-by-sdk {
    flex: 1; /* Flex property for equal growth */
    flex-basis: 100px; /* ✅ Ensures all cards start with the same width */
    max-width: 100px; /* Prevent excessive growth */
    min-height: 120px; /* ✅ Consistent height for all cards */
    text-decoration: none;
    border: 2px solid lightgray;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* ✅ Balanced spacing */
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Effect */
.card:hover {
    background-color: #F9F9F9;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Card Elements Styling */
.card-icon {
    font-size: 40px;
    color: black !important;
    margin-bottom: 10px;
}

.card-title {
    color: black !important;
    font-size: 1.5rem;
    font-weight: bold;
    margin: 10px 0;
}

.card-description {
    color: rgba(60, 60, 67) !important;
    font-size: 14px;
    line-height: 1.5;
}

/* Prevent Underline on Hover */
.card:hover .card-title,
.card:hover .card-description,
.card:hover .card-icon {
    text-decoration: none;
    color: inherit;
}

/* Dark Mode Styling */
html.dark .card {
    border: 2px solid #333;
    color: rgba(255, 255, 255, 0.85);
    background-color: #222;
}

html.dark .card:hover {
    background-color: #2c2c2c;
}

html.dark .card-icon {
    color: rgba(255, 255, 255, 0.85);
}

html.dark .card-title,
html.dark .card-description {
    color: rgba(255, 255, 245, 0.86) !important;
}

/* ✅ Mobile View Fix: Cards Stack Vertically */
@media (max-width: 768px) {
    .card-container {
        flex-direction: column;
        align-items: center;
    }

    .card {
        width: 100%; /* Full width for mobile screens */
        max-width: 350px;
        min-height: 350px; /* Consistent height */
    }
}
```

--------------------------------

### Configuring LoginModal with All Props - TypeScript

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/LoginModal.md

This snippet illustrates how to use the `LoginModal` component with a comprehensive set of props, including `width`, `header`, `onClose` callback, and arrays for `methods` and `recommendMethods`, allowing for extensive customization.

```typescript
import React from 'react';
import { LoginMethodType } from '../types/types';
import {Components} from '@matchain/matchid-sdk-react';
const {LoginModal} = Components
function App() {
    const methods = [ 'telegram', 'twitter'];
    const recommendMethods = [ 'wallet', 'email','google'];

    return (
        <div>
            <LoginModal
                isOpen={true}
                width={500}
                header={<div>Custom Header</div>}
                onClose={() => console.log('Close button clicked')}
                methods={methods}
                recommendMethods={recommendMethods}
            />
        </div>
    );
}

export default App;
```

--------------------------------

### Importing useWallet Hook in TypeScript

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/hooks/useWallet.md

This snippet demonstrates how to import the `useWallet` hook from the `@matchain/matchid-sdk-react/hooks` package. It shows two common ways to import: direct named import and destructuring from a `Hooks` object, making the wallet functionalities available for use in a component.

```TypeScript
import { useWallet } from '@matchain/matchid-sdk-react/hooks';
const { useWallet } = Hooks;
```

--------------------------------

### Customizing LoginButton with All Props in React

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/LoginButton.md

This snippet illustrates how to customize the `LoginButton` component using various props. It configures specific login methods, recommended methods, wallet types, popover position, type, and gap, and defines a callback for the `onLoginClick` event, demonstrating advanced usage.

```typescript
import {Components} from '@matchain/matchid-sdk-react';
const {LoginButton} = Components;

function App() {
    const handleLoginClick = () => {
        console.log('Login button clicked');
    };

    return (
        <div>
            <LoginButton
                methods={['telegram', 'twitter']}
                recommendMethods={['wallet', 'email', 'google']}
                walletMethods={['evm', 'sol']}
                popoverPosition="bottom"
                popoverType="click"
                popoverGap={10}
                onLoginClick={handleLoginClick}
            />
        </div>
    );
}

export default App;
```

--------------------------------

### Importing Button Component in TypeScript

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/components/Button.md

This snippet demonstrates how to import the `Button` component from the `@matchain/matchid-sdk-react` package, making it available for use in a React application.

```TypeScript
import {Components} from '@matchain/matchid-sdk-react';
const {Button} = Components
```

--------------------------------

### Importing Hooks from @matchain/matchid-sdk-react (JSX)

Source: https://github.com/affkoul/matchid-docs/blob/main/docs/react/hooks/index.md

This snippet demonstrates how to import and destructure the `Hooks` object from the `@matchain/matchid-sdk-react` library. It shows how to access specific hooks like `useMatchEvents`, `useUserInfo`, and `useWallet` for use in React components, enabling interaction with Matchain functionalities.

```jsx
import {Hooks} from '@matchain/matchid-sdk-react';

const {useMatchEvents, useUserInfo, useWallet} = Hooks
```