Starkify

Screenshots

Problem Statement

Starkify utilizes Starknet's native Account Abstraction to deliver a user-friendly, e-commerce-like experience for purchasing tokens.With Starkify, users can:Explore a wide range of tokens and add them to a shopping cart just like any online storeCheckout and purchase multiple tokens in a single transaction using Starknet's multicall functionality, significantly improving user experienceView their order historyEnjoy a clean and intuitive interface designed to make token purchases as simple as buying products onlineIn order to onboard new users (and keep them!), core DeFi actions such as swapping tokens should, and can be made easier. Starkify aims to provide easy to use interfaces that can benefit both new and experienced users alike.

Solution

The frontend is built with React and Tailwind CSS, providing a responsive and user-friendly interface. Jotai is used for state management, particularly for storing cart items, ensuring a smooth shopping experience. Wallet management and transaction signing are handled by Dynamic.To obtain the supported tokens, I developed a script that:Fetches Starknet tokens from endpoints provided by Fibrous and AVNU, two of the largest AMM aggregators on StarknetFilters the list to include only tokens with an image URL (for a visually appealing MVP) and a swappable route with ETH as the sell tokenDuring checkout, the calldata required to execute token swaps is generated using the AVNU SDK. A user's order history is saved to local storage, and the Voyager API is used to fetch additional information about their transactions.The backend is powered by Next.js, with Prisma as the ORM for database interactions. Real-time token data, such as current USD prices and 24-hour volume, are fetched from GeckoTerminal.