@kleros/kleros-app

Kleros App

Library for Kleros DApps with reusable abstractions and components.

Usage

yarn install @kleros/kleros-app

1. Atlas Interaction

• This library exports utilities to interact with Atlas (Kleros' backend) with minimal code.

• AtlasProvider : Provides functions to interact with Atlas.

AtlasProvider needs to be wrapped with and to work properly.

Usage

1. At the root of your app, setup AtlasProvider. uri : Atlas backend uri product : The product / Kleros DApp interacting with Atlas (CourtV2, Curate, etc.)

import { WagmiProvider } from 'wagmi'
import { config } from './config'
import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import { AtlasProvider, Products } from "@kleros/kleros-app";

const queryClient = new QueryClient()

function App() {
  return
    <WagmiProvider config={config}>
        <QueryClientProvider client={queryClient}>
            <AtlasProvider config={{ uri: import.meta.env.REACT_APP_ATLAS_URI, product: Products.CourtV2 }}>
            ...
            </AtlasProvider>
        </QueryClientProvider>
    </WagmiProvider>
}

2. Once Provider is set up, use the functions provided.

import React, { useCallback } from "react";

import { useAccount } from "wagmi";
import { useAtlasProvider } from "@kleros/kleros-app";
import { Button } from "@kleros/ui-components-library";


interface IEnsureAuth {
  children: React.ReactElement;
  className?: string;
}

const EnsureAuth: React.FC<IEnsureAuth> = ({ children, className }) => {
  const { address } = useAccount();
  const { isVerified, isSigningIn, authoriseUser } = useAtlasProvider();

  const handleClick = useCallback(() => {
    // authorise a user
    authoriseUser()
      .then((res) => { console.log(res)})
      .catch((err) => {
        console.log(err);
      });
  }, [authoriseUser]);

  return isVerified ? (
    children
  ) : (
    <Button
      text="Sign In"
      onClick={handleClick}
      disabled={isSigningIn || !address}
      isLoading={isSigningIn}
      {...{ className }}
    />
  );
};

export default EnsureAuth;

3. IAtlasProvider

interface IAtlasProvider {
  isVerified: boolean;
  isSigningIn: boolean;
  isAddingUser: boolean;
  isFetchingUser: boolean;
  isUpdatingUser: boolean;
  isUploadingFile: boolean;
  user: User | undefined;
  userExists: boolean;
  authoriseUser: () => Promise<void>;
  addUser: (userSettings: AddUserData) => Promise<boolean>;
  updateEmail: (userSettings: UpdateEmailData) => Promise<boolean>;
  uploadFile: (file: File, role: Roles) => Promise<string | null>;
  confirmEmail: (userSettings: ConfirmEmailData) => Promise<
    ConfirmEmailResponse & {
      isError: boolean;
    }
  >;
}