Skip to content

Commit

Permalink
created custom-connector.md docs in recipes folder
Browse files Browse the repository at this point in the history
  • Loading branch information
mimiprosper committed Dec 22, 2024
1 parent 39b8482 commit 3b3b884
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 192 deletions.
192 changes: 0 additions & 192 deletions docs/custom-connector/custom-connector.md

This file was deleted.

90 changes: 90 additions & 0 deletions docs/recipes/custom-connector.md
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


0 comments on commit 3b3b884

Please sign in to comment.