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';

const App = () => {
  const [open, setOpen] = useState<boolean>();

  useEffect(() => {
    setOpen(true);
  }, []);

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

  return (<SignIn open={open} onFinish={onFinish} />);
};

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()
})

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.