@portkey/did-ui-react
v2.15.10
Published
<p align="center"> <a href="https://portkeydocs.readthedocs.io/en/pre-release/PortkeyDIDUISDK/index.html"> <img width="200" src= "https://raw.githubusercontent.com/Portkey-Wallet/portkey-web/master/logo.png"/> </a> </p>
Downloads
6,825
Readme
- 📦 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"
🔨 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
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.