@portkey/did-ui-react

@portkey/did-ui-react

With Portkey DID SDK, developers can swiftly embed Web3 DID wallet functions while keeping their original UI.

✨ Features

• 📦 A set of high-quality React components out of the box.
• 🛡 Written in TypeScript with predictable static types.

📦 Installation

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

yarn add "@portkey/did-ui-react"

🔨 Usage

import { SignIn , DIDWalletInfo} from '@portkey/did-ui-react';
import { useState, useEffect, useCallback } from 'react';
import "@portkey/did-ui-react/dist/assets/index.css";

const App = () => {
  const ref = useRef<ISignIn>();

  const onFinish = useCallback((didWallet: DIDWalletInfo) => {
    console.log('didWallet:', didWallet);
  }, []);

  return (
    <PortkeyProvider networkType={'TESTNET'}>
      <button
        onClick={() => {
          ref.current?.setOpen(true);
        }}>
        Sign In
      </button>
      <SignIn ref={ref} onFinish={onFinish} />
    </PortkeyProvider>
  );
};

Customize request

If you use it on applications that don't require cross-domain, like Chrome extensions, please configure your provider address using ConfigProvider.setGlobalConfig:

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

ConfigProvider.setGlobalConfig({
  requestDefaults: {
    baseURL: 'http://localhost:3000',
  },
  graphQLUrl: 'http://localhost:3000/graphQL',
});

Customize storage

If you need to customize persistent storage, the default storage is localStorage:

export interface IStorageSuite {
  getItem: (key: string) => Promise<any>;
  setItem: (key: string, value: string) => Promise<any>;
  removeItem: (key: string) => Promise<any>;
}

ConfigProvider.setGlobalConfig({
  storageMethod: new IStorageSuite()
})

Example

Bingogame

Bingogame Github

You can also use the next-example in the current project. next-example

  yarn next-example dev

or

You can also use the example in the current project. example

 yarn example dev

TypeScript

@portkey/did-ui-react is written in TypeScript with complete definitions.

🤝 Contributing

You can submit any ideas as pull requests or as GitHub issues. let's build a better antd together.