DEV Community

Cover image for From Zero To Crypto-Hero - (Week 2) A Dream Came True...
Luftie The Anonymous
Luftie The Anonymous

Posted on

From Zero To Crypto-Hero - (Week 2) A Dream Came True...

Hello Dev.to Community !

This week, I would like to share with you, what I've built throughout last 7 days, what I learned, discovered and what happened by me in general as well. There will be some project, some crypto-geekish teasers, perhaps something more πŸ˜‰...

Interested ? Let's fucking go πŸ’₯

Introduction

As I announced in recent week, I decided to focus for now until the hackathon-time on web3, web-dev and building some small-projects to test myself for the farewell hackathon :D And build under time-pressure.

Well I didn't fit the time I expected to. But at least I built in a bit of cool features into the dapp, that I built.

But what have I built actually ?

I have been lately vibing a lot with pokemon and by a lot, I mean freaking out like berserk.

Fun fact: I got even 3 the same Gengar-hoodies in my cloth-wardrobe, lol πŸ˜†.

However as I said, before I had realized I'm fed-up with web-dev and smart-contracts, and now I do it solely because I want my farewell with this part of my programming journey and my life to be unique.

I had been planning to build a pokemon-themed web3 project (namely a multiplayer game with ZK implementation), but the designing part and not allowing to focus on actual logic, made me upset and frustrated.

Back then I had been conceptualising/brainstorming about the project infra and logic and all of the sudden I fell into thoughts like: Should my app on mobile be in landscape or in portait mode ?, in meanwhile designing the mock-up in Figma, that was a point were I really told myself, I need to departure from board called web-dev, design because it's an anchor for me and does not allow me for proper work.

Ok, but what have I been building finally ?

Now, as I feel no guilt, if I screw up the hackathon or not, henceforth I decided to build as a hackathon-training project a simple staking protocol with drawing a random card of a pokemon once a day.

The staker can gain coins for the staking, which then can be used in the in-app marketplace, where players can sell their cards in exchange for either Ether or specific amount of the in-game currency.

You can click here to see how cool effect I built for drawing the card, what made me really smile.

The Stack I used for the project

I decided that I will not build UI from scratch and will use an AI tool for it so that after elaborate specification of the imagination, I got the template, which was actually something I would need at least 1 month to build.

The colours ? Well selected. The files and folder split ? Far from ideal and had to tweak it, but it's ok. The actual code ? Sort of messy, because the pages have been by default turned into the "use client" and not being server-rendered.

But the actual tech-stack is following:

Frontend: Next.js + Typescript + V0 (AI generated base UI)
Smart-Contracts: Foundry + Solidity
Key SDKs, Libaries:

  • TRN-generation: Chainlink-VRF
  • Wallet-agnosticism: RainbowKit
  • Interactions with smart-contracts: Wagmi
  • Storage of NFT-data in IPFS: Pinata SDK
  • Data Fetching and display: Tanstack-Query

If you're interested what it looks like visit here !

If you're willing to see the code base, click here to see frontend-code and if you're more into smart-contract side click here !

WARNING ⚠️

By the time of article-release (Sunday 12 AM, GMT + 1), the project it yet not ready to use and still works on the marketplace implementations are conducted. I will make special post on the project, for now please star the repo on github, would be really thankful.

My Inferences on the project and take on AI usage

I only asserted that my choice of leaving web-dev is rational and well substantiated. If something what I really put effort into and forced myself to do things I didn't want to do throughout 3 years can be replaced with chat-bot prompting with just a tweak to display something, use appropriate libraries. It's a sign to leave imo.

I've really shun using AI in generating UI, because I really wanted to prove myself that I also can build beautiful UIs and also can build phenomenal website on my own, and I just need time.

I experienced how AI sped up my work with the UI, this peace, that I do not have to care about pixels on the screen, settled me down tremendously.

What I learned by building this project ?

Besides realizing the real aid of AI, I kind of avoided (if you want to know my previous usage of AI feel free to checkout this article)

I was slightly wondering that the transfer of my NFT from my account to my StakingProtocol-contract, was not successful. I figured out that contracts need a special function kind of fallback or receive for the NFTies. It really surprised me because I haven't found it even in Mastering Ethereum example with auctions. This function is derived from a special extension for the contracts, namely an interface of IERC721Receiver.

   function onERC721Received(address operator, address from, uint256 tokenId, bytes calldata data)
        external
        override
        returns (bytes4)
    {

   // Here place your logic what to do after the token has been
// successfully transferred to the contract     

        return IERC721Receiver.onERC721Received.selector;
    }

Enter fullscreen mode Exit fullscreen mode

This function can be thought of as fallback() or receive() for NFTIes, as I've written before. For those who do not know, fallback() and receive() functions in soldity can execute code after an amount of ether has been transferred to the contract.

What does fallback() differ from receive() ?

receive() – takes only ether, no data. Executes when someone sends ETH to your contract with empty calldata.

fallback() – takes ether AND data. Executes when calldata doesn't match any function signature, or when someone sends ETH with non-empty calldata and there's no receive().

Another Surprise 🀩

I recently just checked my Luma account to see if there are any updates on the hackathon rules, terms or so. There was no update on it, however I got an invitation for Co-work Event organised by ETHWarsaw ! and I was really wondered and shocked seeing it.

ETH-WARSAW INVITATION

Not only because the event is something I wanted to participate in something like that, whereas my city although it's almost 400k dwellers is rather treated as an no-go zone for any coding initiatives like co-work coding events, what really made me sob sometimes.

But also because it collides in time with my private family-event, so quite suspicious coincidence (I do not believe in such thing as coincidence).

And although I'm about to leave smart-contracts development and the EVM, then I'm looking forward to feel the spirit of that even there, meet brainy people in Ethereum-ecosystem circle and of course steal some stickers so I can glue over my entire laptop and some merch if possible (and even if not then cmon I'm polish though) :D

Summary

This week was absolutely challenging but at the same time, I've saw how easily my work can be sped-up without mundane effort. I've reminded myself and also learned crucial facts when it comes to Soldity and handling ERC721 in external contracts. I got an surprise I did not expect and look forward now only to the hackathon and can't wait to make the farewell and go cryptography all-in.

What about you ?

How was your week ? Have you been successful ? stuck ? Or completely derailed this week ? Let me know in the comments and let's connect :D

Top comments (0)