LoginQR

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

Login QR

Basic Usage

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>
  );
};

Props

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

Supported Networks

• binance : bsc

• ethereum : eth

• v2xphere : xp

• v3xphere : xpt

Status Values

Type	Description
SUCCESS	Login successful
REQUEST	Request in progress
ACCOUNT	Account selection in progress
ERROR	Error occurred

LoginResultType

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

Common Style Props

Common style options available for all QR components

Props

Prop	Type	Default	Description
size	number	128	canvas width of QR code
bgColor	string	#fff	background color
fgColor	string	#000	foreground color
style	CSSProperties	-	custom css style
isShowLogo	boolean	false	Zigap logo in the middle of the QR code
logoSize	number	30	logo width & height

Example

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

Processing Mark Options

Configure how to display during processing.

Options

Type	Description
DEFAULT	Shows default "processing..." message
CUSTOM	Allows custom React component
NONE	No visual indicator

Custom Component Example

<SendTransactionQR

  // ... other props

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

Expire Configuration

Configure expiration time and type.

Example

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

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

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