Simplify our wallet management system by creating a centralized configuration

[fricoben]

Description 📹

We need to simplify our wallet management system by creating a centralized configuration approach similar to the reference implementation. This will make the codebase more maintainable and easier to update when adding new wallets.

This issue is inspired by the Starknet ID model for managing wallets, you can refactor with the same architecture and reusing the same functions.

Current Issues 🔍

1. Wallet configurations are scattered across multiple files
2. Redundant wallet information in different components
3. No centralized way to manage wallet metadata (icons, names, download links)
4. Complex conditional rendering in wallet icons component

Files to Update 🔄

1. Create new utility file utils/walletConfig.ts:

   
   // Centralized wallet configuration
   export const wallets = [
   {
   id: "argentX",
   name: "Argent X",
   icon: `data:image/svg+xml;base64,...`, // Icon data
   downloads: {
     chrome: "https://chrome.google.com/webstore/detail/...",
     firefox: "https://addons.mozilla.org/...",
     edge: "https://microsoftedge.microsoft.com/..."
   },
   website: "https://www.argent.xyz/argent-x/"
   },
   // Add other wallets...
   ];

export const getConnectors = () => { // Return configured connectors };

export const getWalletInfo = (id: string) => { return wallets.find(wallet => wallet.id === id); };

2. Update `app/provider.tsx`:
```typescript
// Simplify connector configuration using new utility
import { getConnectors } from '@utils/walletConfig';

export const availableConnectors = getConnectors();

3. Update components/UI/iconsComponents/icons/walletIcons.tsx:

   
   // Simplify icon rendering using centralized config
   import { getWalletInfo } from '@utils/walletConfig';

const WalletIcons: FunctionComponent = ({ id }) => { const walletInfo = getWalletInfo(id); return walletInfo?.icon ? (

) : null; };

## Implementation Steps 📝

1. [ ] Create new `walletConfig.ts` utility file
2. [ ] Move all wallet configurations to the central config
3. [ ] Update provider.tsx to use new configuration utility
4. [ ] Simplify WalletIcons component to use central config
5. [ ] Update any components that reference wallet information
6. [ ] Add utility functions for getting wallet metadata
7. [ ] Add proper TypeScript types for wallet configurations
8. [ ] Update tests to reflect new structure
9. [ ] Test that all wallet connections are working

## Required 📋

To keep our workflow smooth, please make sure you follow these guidelines:

- **Assignment**: Don't create a pull request if you weren't assigned to this issue.
- **Timeframe**: Complete the task within **3 business days**.
- **Closing the Issue**: In your PR description, close the issue by writing `Close #[issue_id]`.
- **Review Process**:
  - Once you've submitted your PR, change the label to **"ready for review"**.
  - If changes are requested, address them and then update the label back to **"ready for review"** once done.
- **Testing**: Test your PR locally before pushing, and verify that tests and build are working after pushing.

Thank you for your contribution 🙏

⚠️ WARNING: Failure to follow the requirements above may result in being added to the OnlyDust blacklist, affecting your ability to receive future rewards.

[PedroCo3lho]

Hello @fricoben, I’d like to work on this issue. Please let me know if I can start so I can deliver it asap!