LoginQR

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

Props

prop	type	description
dapp	string	Name of the dApp to use
url	string	The url of dApp to connect
availableNetworks	string[]	List of connectable networks in dApp
sigMessage	string	Messages signed to verify the identity of the user
validSeconds	number	QR code valid seconds
expire	{ type: 'NONE' | 'EXTEND' | 'FIX', seconds: number }	type and time for user login to expire
onReceive	({ status }) => void	Function called after login request. The status type is divided into 4 states: 'REQUEST', 'ACCOUNT', 'SUCCESS', and 'FAIL'. Detailed processing can be performed according to each state.
icon	string	Your dapp icon url to be displayed on zigap app
processingMark	{ type: 'NONE' | 'DEFAULT' | 'CUSTOM', component: React.ReactNode }	How to show the QR image when it's being processed. This prop is optional and the default value is { type: 'DEFAULT' }.

details of 'expire' props

After successful login, set the type and expiration time(seconds) for the user information to expire.

type	description
NONE	The login information does not expire until the user presses the logout button himself.
EXTEND	If the user moves the page before the set seconds have passed, the valid date time is extended by the set seconds.
FIX	After the first successful login, the expiration date time will unconditionally expire after the set seconds.

details of 'processingMark' props

type	description
NONE	Even if it's in progress, the QR image still looks the same
DEFAULT	When it's in progress, you'll see the default text 'processing...'
CUSTOM	You can show the component you want when it's in progress (e.g. spinner). React component must be included together as a required value.

Optional Props (only for styles)

prop	type	default value	description
size	number	128	canvas width
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

import { LoginQR } from 'zigap-utils';

const App = () => {
  ...
  return (
    <div>
      <LoginQR
        dapp='yourDappName'
        url='http://sample.yours.com'
        availableNetworks={['xphere']}
        validSeconds={600}
        sigMessage="hello world"
        expire={{ type: 'EXTEND', seconds: 3600 }}
        isShowLogo={true}
        logoSize={20}
        icon='http://sample.icon-url.com'
        onReceive={({ status })=>{
          if(status === 'SUCCESS') {
            // something to do after login
            // If necessary, add a page refresh logic
          }
        }}
      />
    </div>
  );
}