keep-starknet-strange / zkramp

MIT License
27 stars 26 forks source link

[CLIENT] wallet connection #2

Closed 0xChqrles closed 3 months ago

0xChqrles commented 4 months ago

Crete a wallet connection button which opens a modal and let you decide between argent, argent mobile, argent web wallet, and braavos. Without using starknetKit

see unruggable implementation for example

raizo07 commented 4 months ago

@0xChqrles I'll like to take this

I contributed also to the unruggable meme project, so this would be easy to pick up and implement.

onlydustapp[bot] commented 4 months ago

Hey @raizo07! Thanks for showing interest. We've created an application for you to contribute to Zkramp. Go check it out on OnlyDust!

lindsaymoralesb commented 4 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi! My name is Lindsay, and I'm a Software Engineer based in Costa Rica. I'm part of Dojo Coding community, and thanks to that I've already successfully contributed to the last 4 ODHacks in various projects, feel free to check my profile and contributions. I've been working over the past 4.5 years as a full stack developer, specializing myself in frontend development with the most known/used FE frameworks such as React, Next, Vue, and Angular. All this experience plus some courses I've taken had helped me master both javascript and typescript languages. This year I started diving myself into the web3 world and I'm getting to know better the ecosystems and different languages.

How I plan on tackling this issue

  1. First thing to do is to setup the project.
  2. Then, I'll start by taking a look at the mentioned unruggable implementation to have a better idea of the required implementation.
  3. After that start creating the connect wallet button custom component and implement a custom hook to develop the logic.
  4. While developing I'll be researching on how to connect those wallets without the Kit.
0xChqrles commented 4 months ago

@lindsaymoralesb Thanks for your very detailed message ! I'll assign you to this issue, lmk if you have any questions.

@raizo07 For good first issues, I prioritize developers I don't know yet. But don't worry many other issues are coming in, stay tunned in the tg group

lindsaymoralesb commented 4 months ago

Thanks @0xChqrles I'm starting to work on it, will let you know if I have any doubts...

lindsaymoralesb commented 4 months ago

Hi @0xChqrles just wanted to ask you if there is a specific node version I should use to run the project? I tried with v20 and v18 and I'm getting an error regarding some incompatible dependencies. Specifically, react-scripts@5.0.1 has a peer dependency requirement for TypeScript versions ^3.2.1 || ^4, but the project is using TypeScript 5.4.2.

For my local env and to be able to run the project, what I did in the meantime was to downgrade the typescript version to "typescript": "^4.9.5", but I wanted to ask what is the correct version to avoid changing dependencies?

Also can you share the tg group?

0xChqrles commented 3 months ago

Hi @lindsaymoralesb I'm using node v22 lmk if it doesn't fix your error.

You can find the tg group in the README :)

lindsaymoralesb commented 3 months ago

Hi! @0xChqrles I created a PR. It is almost ready for your review, but I have a couple of questions:

  1. I created some components and used some existing ones, but since we don't have a figma yet idk if you want me to apply some other styles or if we just leave it like that for now.
  2. In the issue description you specified to not use starknet kit, but as I navigated the unruggable.meme code I saw that in their implementation they use these two imports:
import { ArgentMobileConnector } from 'starknetkit/argentMobile'
import { WebWalletConnector } from 'starknetkit/webwallet' 

to be able to include those two connectors in the modal. Is it ok if I use it just for that? The rest of the code is fully implemented without using StarknetKit.

0xChqrles commented 3 months ago

It's perfect, thank you !