> For the complete documentation index, see [llms.txt](https://seoul-labs.gitbook.io/zigap-utils/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://seoul-labs.gitbook.io/zigap-utils/components/loginqr.md).

# LoginQR

The LoginQR component is a component that allows dApp to login to ZIGAP through QR recognition.

## <mark style="background-color:$primary;">Login QR</mark>                                                                                                               &#x20;

### <mark style="color:blue;">Basic Usage</mark>

```tsx
import { LoginQR, LoginResultType } from 'zigap-utils';

const App = () => {
  const [result, setResult] = useState<LoginResultType | null>(null);

  return (
    <div>
      <LoginQR
        dapp='My Awesome Dapp'
        url='https://myapp.com'
        availableNetworks={['v2xphere', 'v3xphere']}
        sigMessage='Welcome to My Dapp!'
        validSeconds={600}
        onReceive={({ status, result }) => {
          if (status === 'SUCCESS') {
            console.log('Login successful!', result);
            setResult(result as LoginResultType);
          }
        }}
      />
    </div>
  );
};
```

### <mark style="color:blue;">Props</mark>

<table><thead><tr><th width="185">Prop</th><th width="144.94140625">Type</th><th>Required</th><th>Default</th><th>Description</th></tr></thead><tbody><tr><td><code>dapp</code></td><td><code>string</code></td><td>✅</td><td>-</td><td><p>Name of the dApp to </p><p>use</p></td></tr><tr><td><code>url</code></td><td><code>string</code></td><td>✅</td><td>-</td><td>The url of dApp to connect</td></tr><tr><td><code>availableNetworks</code></td><td><code>('binance' \| 'ethereum' \| 'v2xphere' \| 'v3xphere')[]</code></td><td>✅</td><td>-</td><td>List of supported networks in dApp</td></tr><tr><td><code>sigMessage</code></td><td><code>string</code></td><td>✅</td><td>-</td><td>Messages signed to verify the identity of the user</td></tr><tr><td><code>validSeconds</code></td><td><code>number</code></td><td>✅</td><td>-</td><td>QR code valid seconds</td></tr><tr><td><code>onReceive</code></td><td><code>(res) => void</code></td><td></td><td>-</td><td>Callback</td></tr><tr><td><code>expire</code></td><td><code>LoginExpireType</code></td><td>optional</td><td><code>{ type : 'NONE'}</code></td><td>This prop is optional and the default value is <code>{ type : 'NONE'}</code>.</td></tr><tr><td><code>icon</code></td><td><code>string</code></td><td>optional</td><td>-</td><td>Your dApp icon url to be displayed</td></tr><tr><td><code>processingMark</code></td><td><code>ProcessingMarkType</code></td><td>optional</td><td><code>{ type: 'DEFAULT'}</code></td><td>How to show the QR image when it's being processed.<br><br>This prop is optional and the default value is <code>{ type: 'DEFAULT'}</code>.</td></tr><tr><td><code>qrDomain</code></td><td><code>string</code></td><td>optional</td><td>https://zigap.io</td><td>QR domain</td></tr></tbody></table>

### <mark style="color:blue;">Supported Networks</mark>

* `binance` : bsc
* `ethereum` : eth
* `v2xphere` : xp
* `v3xphere` : xpt

### <mark style="color:blue;">Status Values</mark>

<table><thead><tr><th width="168">Type</th><th>Description</th></tr></thead><tbody><tr><td>SUCCESS</td><td>Login successful</td></tr><tr><td>REQUEST</td><td>Request in progress</td></tr><tr><td>ACCOUNT</td><td>Account selection in progress</td></tr><tr><td>ERROR</td><td>Error occurred</td></tr></tbody></table>

### <mark style="color:blue;">LoginResultType</mark>

```tsx
interface LoginResultType {
  address: string;
  network: string;
  nickName: string;
  token: string;
  issuedDateTime: string;
  expire: LoginExpireType;
  isVerified: boolean;
  signature: string;
}
```

## <mark style="background-color:$primary;">Common Style Props</mark>                                                                                         &#x20;

Common style options available for all QR components

### <mark style="color:blue;">Props</mark>

<table><thead><tr><th width="153">Prop</th><th width="148">Type</th><th width="129">Default</th><th>Description</th></tr></thead><tbody><tr><td><code>size</code></td><td><code>number</code></td><td><code>128</code></td><td>canvas width of QR code</td></tr><tr><td><code>bgColor</code></td><td><code>string</code></td><td><code>#fff</code></td><td>background color</td></tr><tr><td><code>fgColor</code></td><td><code>string</code></td><td><code>#000</code></td><td>foreground color</td></tr><tr><td><code>style</code></td><td><code>CSSProperties</code></td><td>-</td><td>custom css style</td></tr><tr><td><code>isShowLogo</code></td><td><code>boolean</code></td><td><code>false</code></td><td>Zigap logo in the middle of the QR code</td></tr><tr><td><code>logoSize</code></td><td><code>number</code></td><td><code>30</code></td><td>logo width &#x26; height</td></tr></tbody></table>

### <mark style="color:blue;">Example</mark>

{% code lineNumbers="true" %}

```typescript
<LoginQR
  
  // ... other props
  
  size={200}
  bgColor='#ffffff'
  fgColor='#000000'
  isShowLogo={true}
  logoSize={40}
  style={{ borderRadius: '8px' }}
/>

```

{% endcode %}

## <mark style="background-color:$primary;">Processing Mark Options</mark>                                                                                  &#x20;

Configure how to display during processing.

### <mark style="color:blue;">Options</mark>

<table><thead><tr><th width="168">Type</th><th>Description</th></tr></thead><tbody><tr><td><code>DEFAULT</code></td><td>Shows default "processing..." message</td></tr><tr><td><code>CUSTOM</code></td><td>Allows custom React component</td></tr><tr><td><code>NONE</code></td><td>No visual indicator</td></tr></tbody></table>

### <mark style="color:blue;">Custom Component Example</mark>

```tsx
<SendTransactionQR

  // ... other props

    processingMark={{
    type: 'CUSTOM',
    component: (
      <div
        style={{
          display: 'flex',
          alignItems: 'center',
          gap: '8px',
        }}
      >
        <div className='spinner'></div>
        <span>Processing payment...</span>
      </div>
    ),
  }}
/>
```

## <mark style="background-color:$primary;">Expire Configuration</mark>                                                                                           &#x20;

Configure expiration time and type.

### <mark style="color:blue;">Example</mark>

```tsx
// No expiration
expire={{ type: 'NONE' }}

// Fixed expiration time
expire={{ type: 'FIX', seconds: 3600 }}

// Extendable expiration time
expire={{ type: 'EXTEND', seconds: 3600 }}
```

<figure><img src="https://2461299078-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRmDMQJaakG2VbeMCEViT%2Fuploads%2F0UrKQ7FjdkQSaTYkEmpU%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202024-06-10%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.12.29.png?alt=media&amp;token=78b9b0bf-5b70-4202-9547-9f53d6dfcb9b" alt="" width="152"><figcaption></figcaption></figure>

<figure><img src="https://2461299078-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FRmDMQJaakG2VbeMCEViT%2Fuploads%2F2M6AwaUayh6CNHt6ftSm%2Fb86a088b-117e-411d-9241-90e51821910f.jpeg?alt=media&amp;token=fb06e3ee-5b08-49ee-ab54-a811c9ae5353" alt=""><figcaption></figcaption></figure>