With Portkey DID SDK, developers can swiftly embed Web3 DID wallet functions while
keeping their original UI.
- 📦 A set of high-quality React components out of the box.
- 🛡 Written in TypeScript with predictable static types.
npm install "@portkey/did-ui-react"
yarn add "@portkey/did-ui-react"
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>
);
};
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',
});
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()
})
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
@portkey/did-ui-react
is written in TypeScript with complete definitions.
You can submit any ideas as pull requests or as GitHub issues. let's build a better antd together.