-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
created custom-connector.md docs in recipes folder
- Loading branch information
1 parent
39b8482
commit 3b3b884
Showing
2 changed files
with
90 additions
and
192 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
## Introduction | ||
|
||
Custom wallet connectors allow users to connect their preferred wallets to your decentralized application (dApp). This provides flexibility and improves the user experience by giving users options beyond popular default wallets like MetaMask. | ||
|
||
|
||
## Install Dependencies | ||
First, install the necessary packages: | ||
|
||
``` | ||
npm install @scaffold-stark/stark-burner | ||
``` | ||
OR | ||
|
||
``` | ||
yarn add @scaffold-stark/stark-burner | ||
``` | ||
|
||
## Handle Errors | ||
Implement proper error handling throughout the connector: | ||
``` | ||
handleError(error) { | ||
console.error('Error in StarknetCustomConnector:', error); | ||
// Implement appropriate error handling logic | ||
} | ||
``` | ||
|
||
## Integrate with User Interface | ||
Create a React component to integrate the custom connector with the user interface: | ||
|
||
``` | ||
import React, { useState } from 'react'; | ||
import { BurnerConnector } from '@scaffold-stark/stark-burner'; | ||
const WalletConnect = () => { | ||
const [connected, setConnected] = useState(false); | ||
const [address, setAddress] = useState(''); | ||
handleError(error) { | ||
console.error('Error in StarknetCustomConnector:', error); | ||
// Implement appropriate error handling logic | ||
} | ||
const connectWallet = async () => { | ||
try { | ||
const result = await BurnerConnector.connect(); | ||
setConnected(true); | ||
setAddress(result.address); | ||
} catch (error) { | ||
handleError(error); | ||
} | ||
}; | ||
const disconnectWallet = async () => { | ||
await BurnerConnector.disconnect(); | ||
setConnected(false); | ||
setAddress(''); | ||
}; | ||
return ( | ||
<div> | ||
{!connected ? ( | ||
<button onClick={connectWallet}>Connect Wallet</button> | ||
) : ( | ||
<div> | ||
<p>Connected Address: {address}</p> | ||
<button onClick={disconnectWallet}>Disconnect</button> | ||
</div> | ||
)} | ||
</div> | ||
); | ||
}; | ||
export default WalletConnect; | ||
``` | ||
|
||
## Summary | ||
This custom Starknet wallet connector provides a flexible and extensible solution for connecting various wallets to a dApp built on the Starknet blockchain. It includes: | ||
|
||
- Support for injected wallets and web wallets | ||
- Error handling for robust connectivity | ||
- Customizable connector options | ||
- Integration with React components for user interaction | ||
|
||
Best practices followed include: | ||
- Modular design allowing for easy extension | ||
- Proper error handling and logging | ||
- Separation of concerns between connector logic and UI | ||
- Flexibility to support multiple wallet types | ||
|
||
|