Getting started

Introduction

Please ensure that your development environment has Node.js v14 or above installed and configured. Yarn / Lerna

You can start quickly with the steps below

Start here

• Can quickly access, realize login or registration function
• According to your own needs, select components that provide corresponding functions for quick access
• Something else: Get started with our document

Introduction to Portkey

Portkey is a secure and recoverable tool to manage Web3 identities and digital assets. It not only provides a reliable means of asset management for senior Web3 users, but also facilitates the smooth entrance of Web2 users into the Web3 world.

Your First Example

According to the following steps, you can quickly implement the login or registration function

1. Installation

• NPM
• YARN

npm install @portkey/did-ui-react@latest

2. Configuration

Environmental configuration

import { ConfigProvider } from "@portkey/did-ui-react";

ConfigProvider.setGlobalConfig({
  requestDefaults: {
    baseUrl: "https://aa-portkey-test.portkey.finance",
  },
  graphQLUrl:
    "https://dapp-aa-portkey-test.portkey.finance/Portkey_V2_DID/PortKeyIndexerCASchema/graphql",
});

3. Use SignIn components

Testnet token faucet: https://testnet-faucet.aelf.io/

import { SignIn, PortkeyProvider } from "@portkey/did-ui-react";
import "@portkey/did-ui-react/dist/assets/index.css";

const App: React.FC = () => {
  const ref = useRef();
  ref.current.setOpen(boolean);
  const onFinish = (result) => {
    // Modify the value corresponding to the following fields
  };

  return (
    <PortkeyProvider networkType={"TESTNET"}>
      <SignIn ref={ref} onFinish={onFinish} />
    </PortkeyProvider>
  );
};

export default App;

Now, you have accessed the registration and login function. Next, you can go to register or log in

4. Cross-origin configuration

Tip: If your project is on the web, you'll need to configure a cross-origin proxy yourself, including GraphQL and APIs. Currently, we do not offer cross-origin support.

// Use nextjs as an example
module.exports = [
  {
    source: "/api/:path*",
    destination: "https://aa-portkey-test.portkey.finance/api/:path*",
  },
  {
    source: "/graphql/:path*",
    destination: "https://dapp-aa-portkey-test.portkey.finance/Portkey_V2_DID/PortKeyIndexerCASchema/graphql/:path*",
  },
];