@cryptogate/react-ui v2.0.123
Cryptogate/react-ui
Installation
Using yarn:
yarn add @Cryptogate/react-ui
Using npm:
npm install @Cryptogate/react-ui
Required Dependecies
- "@cryptogate/react-providers": "^0.0.34"
- "@cryptogate/core": "^0.0.10"
- "@metamask/detect-provider": "^1.2.0"
- "ethers": "^5.6.4"
- "react-device-detect": "^2.2.2"
- "react-jazzicon": "^1.0.3"
- "react-slick": "^0.29.0"
- "slick-carousel": "^1.8.1"
ConnectWalletComponent
This all in one component is built to assist developers in integrating web3 authentication in 3 minutes.
Usage
Step 1: Import the component:
import {ConnectWalletComponent} from "@cryptogate/react-ui"
Step 2: Simply render this component:
import {ConnectWalletComponent} from "@cryptogate/react-ui"
<div>
<ConnectWalletComponent/>
</div>
Step 3: Add the list of accepted wallets. How about we add METAMASK?
import {ConnectWalletComponent, EthWallets} from "@cryptogate/react-ui"
<div>
<ConnectWalletComponent
EthWalletList={[EthWallets.METAMASK]}
/>
</div>
For more details on customizing your own wallet list, check How To Customize My Wallet List
Additional Step: To request a signature, add an onSign
callback prop:
import {ConnectWalletComponent, EthWallets} from "@cryptogate/react-ui"
<div>
<ConnectWalletComponent
EthWalletList={[EthWallets.METAMASK]}
onSign={(key) => {console.log(key)}}
/>
</div>
After signing, a key object is created and saved in the localStorage. check onSign Method for the object format.
And that's it.. Congratulations on integrating a Customized Web3 Authentication. For more customization, check the Props List
Props
Prop | Type | Description | Default |
---|---|---|---|
ActiveComponent | React Node | The first componenet rendered | check default |
Disabled Component | React Node | Rendered while the message is being signed | check default |
ConnectedComponent | React Node | This componenet is rendered after signing successfully | Identicon |
EthWalletList | numbers[] | Array of accepted ethereum wallets, check Customize Wallet List | [] |
SolWalletList | numbers[] | Array of accepted solana wallets, check Customize Wallet List | [] |
onSign | function | Called after signing a message, check onSign Method | |
SignatureMessage | string | The message used on signing | "This is the default signaure message provided by Cryptogate." |
NetworkChainIds | numbers[] | Array of supported networks | 1 (Ethereum Mainnnet) |
NetworkAlertMessage | string | Alert message when user connects with an unsupported network | "Selected network is not supported." |
ConnectedMenuChosen | ConnectedMenuOptions | The menu to show when clicking on the Connected Component, check Connected Menu Options | WALLETINFORMATION |
WalletListStyle | JSON | Object that takes two entries: top and background to change the style of wallets lists popup | {top: '0', background: 'white'} |
Default Active Component
Default Disabled Component
On Sign Method
The onSign Method takes a key parameter, this key is the value saved in the local storage after signing. The object is in the form of:
{
address: "<address used to sign>",
message: "This is the default signaure message provided by Cryptogate." // or the message passed in the SignatureMessage prop,
signature: "<The signed message>"
}
The onSign Method format:
(key) => {console.log(key)}
Connected Menu
Cryptogate provides a variety of options when it comes to choosing menu. You can either choose the simple Wallet Information menu, or go with the fully customized Cryptogate Store
In all cases, the ChosenConnectedMenu
isOpen
and onClose
props should always be included
Prop | Type | Description |
---|---|---|
isOpen | boolean | A flag if the menu if open or not |
onClose | function | A function called when closing the menu |
ChosenConnectedMenu | ConnnectedMenuOptions | The menu type you need, check Connected Menu Options for more info |
onDisconnect | function | Callback function after disconnecting |
Store | object | Object constructed from the list of Token & NFT Collection addresses. Check the Store object format |
Wallet Information
A simple menu that shows the users wallet information. Balance, wallet address, ENS (if available) and a disconnect button.
Usage
Step 1: Import the component and it's options
import {ConnectedMenu, ConnectedMenuOptions} from "@cryptogate/react-ui"
Step 2: Then render this component with the WalletInformation Option:
import {ConnectedMenu, ConnectedMenuOptions} from "@cryptogate/react-ui"
<div>
<ConnectedMenu
isOpen = {isMenuOpen} // isMenuOpen is a state variable
onClose = {() => seIsMenuOpen(false)}
ChosenConnectedMenu = {ConnectedMenuOptions.WALLETINFORMATION}
onDisconnect = {() => router.push("/")}
/>
</div>
Cryptogate Store
A fully customized store. Pass the ConnectedMenuOptions.STORE
option and a Store
prop. Check the Store object format
Usage
Step 1: Import the component and it's options
import {ConnectedMenu, ConnectedMenuOptions} from "@cryptogate/react-ui"
Step 2: Then render this component with the Store Option:
import {ConnectedMenu, ConnectedMenuOptions} from "@cryptogate/react-ui"
<div>
<ConnectedMenu
isOpen = {isMenuOpen} // isMenuOpen is a state variable
onClose = {() => seIsMenuOpen(false)}
ChosenConnectedMenu = {ConnectedMenuOptions.STORE}
onDisconnect = {() => router.push("/")}
Store = {
{
Tokens: [
"0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2"
],
NFTs: [
"0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D",
"0x4feec948eb3d6a2eb37560d4b2c16f1c9fe72ef6"
]
}
}
/>
</div>
Store
This object contain a list of Token and NFT Collection Addresses. Just construct the object as follows:
{
Tokens: [
"0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2",
],
NFTs: [
"0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D",
"0x4feec948eb3d6a2eb37560d4b2c16f1c9fe72ef6",
],
}
Identicon
Simply display a customized jazzicon.
Usage
Step 1: Import the component
import {Identicon} from "@cryptogate/react-ui"
Step 2: Render the component
import {Identicon} from "@cryptogate/react-ui"
<Identicon/>
And That's It.. Here's your customized jazzicon:
Customized Wallet List
With cryptogate, you have complete controll over adding/removing wallets from the list. No configuration needed, simply update the props.
Usage:
Let's customize our list of Ethereum wallets
Step 1: Importing the list of supported ethereum wallets
import {EthWallets} from "@cryptogate/react-ui"
Step 2:
If we observe the imported object EthWallets
, it's an enum of supported wallets. All we have to do is pass the wallets we want in the EthWalletList
prop:
import {ConnectWalletComponent, EthWallets} from "@cryptogate/react-ui"
<div>
<ConnectWalletComponent
EthWalletList={[EthWallets.METAMASK, EthWallets.COINBASE]}
/>
</div>
The current list of supported ethereum wallets:
- Metamask: EthWallets.METAMASK
- Coinbase: EthWallets.COINBASE
- Wallet Connect: EthWallets.WALLETCONNECT
If you want to add all supported wallets, simply pass the EthWallets.ALL
value:
<ConnectWalletComponent
EthWalletList={[EthWallets.ALL]}
/>
For solana wallets, use the SolWallets,
import {ConnectWalletComponent, EthWallets} from "@cryptogate/react-ui"
<div>
<ConnectWalletComponent
EthWalletList={[EthWallets.PHANTOM, EthWallets.SOLFLARE]}
/>
</div>
The current list of supported ethereum wallets:
- Phantom: EthWallets.PHANTOM
- Slope: EthWallets.SLOPE
- Solflare Connect: EthWallets.SOLFLARE
Connected Menu Options
Through these options, you can easily select the menu you need
Usage:
Step 1: Importing the list of available menus
import {ConnectedMenuOptions} from "@cryptogate/react-ui"
Step 2:
If we observe the imported object ConnectedMenuOptions
, it's an enum of available menus. All we have to do is pass the menu we want in the ConnectedMenuChosen
prop:
import {ConnectWalletComponent, ConnectedMenuOptions} from "@cryptogate/react-ui"
<div>
<ConnectWalletComponent
ConnectedMenuChosen={ConnectedMenuOptions.STORE}
/>
</div>
The current list of available menus:
- No Menu: EthWallets.NOMENU
- Wallet Information : EthWallets.WALLETINFORMATION
- Cryptogate Store: EthWallets.STORE
10 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
8 months ago
8 months ago
8 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago