polconnect
v0.1.9
Published
Polconnect - Your Seamless Polkadot Wallet Connector
Downloads
15
Readme
PolconnectKit
PolconnectKit - Your Seamless Polkadot Wallet Connector 👩🏻💻
| | | | | | --- | --- | --- | --- |
- 🔥 Out-of-the-box wallet management
- ✅ Easily customizable
- 💪🏼Built on top of polkadot api
- 👌🏻 Cross Chain Support
- 🦄 Supports All wallets
Motivition
In the Polkadot ecosystem, you can utilize the web3Enable function to access all injected extensions in a user's browser and the web3Accounts() method to retrieve user addresses.
While this approach may seem functional, it comes with its own set of challenges. Imagine a scenario where a user has multiple Polkadot-wallets extensions installed in their browser. When web3Enable() is initialized, all these installed wallets pop up, significantly disrupting the user interface and leading to a less-than-optimal user experience.
Take a look at the image below,
Not only does this lead to a compromised user experience, but it also places a burden on developers who need to write extensive code to manage these wallet interactions.
Polconnect, your solution to these challenges. With Polconnect, all it takes is a single line of code. Users can easily select their preferred wallets, manage chains, and seamlessly connect to retrieve user addresses,
Installation
Install with npm
npm install polconnect @polkadot/api
or Install with yarn
yarn add polconnect @polkadot/api
Usage/Examples
// nextjs example
// Wrap your entire application in PolkitProvider the provider takes 3 props
// them : dark or light theme
// defaultChain : the default chain you want conect to you can get supported chans from polconnect
// appName : the name of your application
// import PolkitProvider and astar network from polconnect
import {PolkitProvider, astar} from 'polconnect'
function App({ Component, pageProps }: AppProps) {
return(
<PolkitProvider theme='dark' defaultChain={astar} appName='testing'>
<Component {...pageProps} />
</PolkitProvider>
)
}
// Import ConnectButton from 'polconnect'
import {ConnectButton} from 'polconnect'
export default function Home() {
// Use ConnectButton in your component it takes 3 props
// label: this is the label of your button
// showChain : it takes boolean value if you want to display the switch chain button add a true value otherwise add false
// backaground : this s the background of the connectButtton
return(
<ConnectButton label='connect wallet' showChain={true} backGround='blue' />
)
}
Documentation
Learn more, from this technical tutorial. tutorial