React package that aims to unplug XUMM logic from your React App. This is achieved using a XummProvider with some config and a set of easy to use hooks explained below.
// Providers.tsx
import { FC } from "react";
import { XummProvider } from "xumm-react";
const Providers: FC = ({children}) => (
<XummProvider config={yourXummConfig}>
{children}
</XummProvider>
)
// SignInPage.tsx
import { Button } from "@peersyst/react-components"
import { useSignIn } from "xumm-react";
const SignInPage = () => {
const { signIn, signInData: { xummPayload } = {} } = useSignIn();
const qr = xummPayload?.refs?.qr_png;
return qr ? (
<img src={qr} css={{ width: 200, height: 200 }} alt="xumm-qr" />
) : (
<Button onClick={signIn} loading={isLoading}>
{"Sign in"}
</Button>
);
}
This provider nourishes hooks with the required config in order to work correctly. This config is the following:
- url: base XUMM url of your backend
- getToken: method to get the bearer token from your storage or state
- setToken: method to set the bearer token on your storage or state
- removeToken: method to remove the bearer token from your storage or state
- onError: general error handler
- paths: paths of your backend's XUMM endpoint
- status: gets a XUMM transaction request status (defaults to "status", the uuid is added automatically to the path, so the final path would be "status/:uuid")
- signIn: starts the sign in process (defaults to "auth/sign-in")
- verifySignIn: verifies the sign in process (defaults to "auth/verify-sign-in")
Before hooks are explained it is important to know that all hooks return:
- A function to trigger the action
- isLoading, isSuccess, isError flags
- The error if any
There are also some common options:
- retry: indicates whether the action should be retried
- retryDelay: delay between retries
- onError: an error handler
As the name indicates this hook is used to retrieve the status of a XUMM transaction.
These options can be passed:
- An onSigned option can be passed in order to perform an action when the transaction is signed.
- An onSuccess handler
This hook returns:
- A fetchStatus function that returns the status of a XUMM transaction with a given id
- A reactive status indicating the transaction's status or undefined
Hook that initiates the sign in process with the XUMM Wallet and awaits its verification
These options can be passed:
- An onSignIn handler to perform an action when the sign in has been initiated
- An onSignInVerified to perform an action when the sign in has been verified
This hook returns:
- The signIn function to start the process
- A data object with the address and access token
Hook to verify if a user is signed in correctly or its token has expired
This hook returns:
- The verifySignIn function to start the process
- A data object with the address and access token
This hook provides the XummContext of your app. It is used internally by all hooks.