Web Developer @ AirSwap // Building DeFi // React, TypeScript, Tailwind, Frontend Developer.
Building the AirSwap Debugger App: A Technical Overview
This blog post will give a technical overview of how I built the AirSwap Debugger app. I'll discuss the code, challenges faced, and lessons learned. Going forward, I’ll sometimes refer to the app as airswap-debugger. Since I started contributing to AirSwap, this was the second major app that I worked on from its inception, and the first web app that I’ve pushed most of the code to GitHub! airswap-debugger is a web app that helps AirSwap market-makers debug their API connections. GitHub: ...
Building the AirSwap Debugger App: A Technical Overview
This blog post will give a technical overview of how I built the AirSwap Debugger app. I'll discuss the code, challenges faced, and lessons learned. Going forward, I’ll sometimes refer to the app as airswap-debugger. Since I started contributing to AirSwap, this was the second major app that I worked on from its inception, and the first web app that I’ve pushed most of the code to GitHub! airswap-debugger is a web app that helps AirSwap market-makers debug their API connections. GitHub: ...
Creating Seamless Web3 Wallet Connections in Your DApp Using Wagmi Hooks
Table of ContentsIntroductionWhat is WagmiComponent StructureMainWalletConnectionWalletConnectionModalUserAccountDetailMain Config HooksWalletConnection ComponentWalletConnectionModal ComponentRabby WalletConclusionIntroductionA view of the Web3 wallet connection implementation we'll be discussingFor a Web3 application, a wallet connection is essential. It's the equivalent of a user signing in with a username and password, except using a wallet as a form of identification. By connec...
Creating Seamless Web3 Wallet Connections in Your DApp Using Wagmi Hooks
Table of ContentsIntroductionWhat is WagmiComponent StructureMainWalletConnectionWalletConnectionModalUserAccountDetailMain Config HooksWalletConnection ComponentWalletConnectionModal ComponentRabby WalletConclusionIntroductionA view of the Web3 wallet connection implementation we'll be discussingFor a Web3 application, a wallet connection is essential. It's the equivalent of a user signing in with a username and password, except using a wallet as a form of identification. By connec...
Creating a Staking Feature with React and TypeScript
Table of contents:IntroVideo DemoTech stack usedThe Staking flow - how it worksComponents and functions usedHow to build a modal with ReactZustand storeWagmi hooksControlling variablesTransaction TrackerAction ButtonsSummaryConclusionIntroThis article is a technical write-up about the token staking feature for the AirSwap Member Dashboard app. The majority of my time working on this app was spent on this feature. Users can stake tokens into the AirSwap Staking smart contract, which gives them...
Creating a Staking Feature with React and TypeScript
Table of contents:IntroVideo DemoTech stack usedThe Staking flow - how it worksComponents and functions usedHow to build a modal with ReactZustand storeWagmi hooksControlling variablesTransaction TrackerAction ButtonsSummaryConclusionIntroThis article is a technical write-up about the token staking feature for the AirSwap Member Dashboard app. The majority of my time working on this app was spent on this feature. Users can stake tokens into the AirSwap Staking smart contract, which gives them...
Behind the Scenes: Creating the AirSwap Member Dashboard App
Table of ContentsIntroductionWhat is the AirSwap Voter Rewards App?App Features I DevelopedMentorshipCode ReviewsTypeScriptWagmi LibraryCustom React ComponentsVariable NamingRegressionsLaunch DayPutting Apps into ProductionConclusionIntroductionIn this post, I'll share my experience and the key lessons I learned while building the AirSwap Member Dashboard app. This app provides users with the ability to stake AST tokens, vote on proposals that influence the AirSwap protocol, and claim re...
Behind the Scenes: Creating the AirSwap Member Dashboard App
Table of ContentsIntroductionWhat is the AirSwap Voter Rewards App?App Features I DevelopedMentorshipCode ReviewsTypeScriptWagmi LibraryCustom React ComponentsVariable NamingRegressionsLaunch DayPutting Apps into ProductionConclusionIntroductionIn this post, I'll share my experience and the key lessons I learned while building the AirSwap Member Dashboard app. This app provides users with the ability to stake AST tokens, vote on proposals that influence the AirSwap protocol, and claim re...
How to Build an Accordion Component
I've been actively involved in the frontend development of the new AirSwap Member Dashboard app. AirSwap currently leverages a platform named Activate for user stake management. However, within a month, Activate will be phased out, prompting the development of a new app for $AST token stakers. A notable feature of this app is the Accordion component, which I'll discuss here, illustrating its creation with React, Radix, and TailwindCSS.What is Radix-UI?Radix-UI logoRadix-UI is an ope...
How to Build an Accordion Component
I've been actively involved in the frontend development of the new AirSwap Member Dashboard app. AirSwap currently leverages a platform named Activate for user stake management. However, within a month, Activate will be phased out, prompting the development of a new app for $AST token stakers. A notable feature of this app is the Accordion component, which I'll discuss here, illustrating its creation with React, Radix, and TailwindCSS.What is Radix-UI?Radix-UI logoRadix-UI is an ope...
