WingWallet - point-of-sale crypto payment

In the crypto world, there are more crypto holders who want to use crypto to purchase real-life goods and services, however there are not many crypto merchants that accept crypto as a form of payment. We want to address this problem by creating a point-of-sale crypto app payment where both sides can use to carry out transaction in real-time.

Basically, users would go into the store with his crypto wallet signed into the app. The merchant can sign up for a web3 wallet address through Account Abstraction's social login. After selecting the real-life product that he wants to purchase, he/she can ask the seller to send an invoice. After the seller creates the invoice, he creates a QR code in which the buyer can scan to pay for the item in native token of the blockchain.

After the transaction is processed on the respective blockchain, if the user has some other addon enabled, he/she can perform additional actions after the transaction is confirmed, such as posting the transaction to Lenster. The merchant can use addon such as converting the received token to other currency as necessary.

First, we built the initial wireframe with Balsamiq that defined the original flow of the app along with the essential features. From the wireframe, we built out the Figma mockup along with the necessary flow in more details.

The Figma mockup was used to design the frontend of the application. We built the frontend with Javascript, Vite.

On the first night (on Friday), we wanted to build the payment-with-Bluetooth addon, but after trying various different methods, we decided that it was not feasible after consulting with a few mentors and sponsors. After Friday night setback, we quickly decided to pivot to build payment-with-QR addon as this was one of the core features for the app to work. After some consideration, we decided then that we would not build a native mobile app, but instead then we would build a progressive web app that can be shown and would work as expected on mobile.

The frontend was built with React with Vite framework. On the backend, we have 2 smart wallets: 1 for the customer and 1 for the merchant. We chose Safe as the framework to create the smart wallet. The users can log in via social logins, so he does not need to have existing Web3 wallet. We used Safe Auth kit for the social logins. Safe logins creates an EOA (Externally Owned Account)-signer based on email address. This EOA signer is the owner of the smart wallet of the user.

We decided to implement Safe Relay Kit and 1Balance Gelato to be able to sponsors transactions for the users. Through this Relay Kit, the EOA signs transactions and sends them to the Gelato Relay, which was pre-filled with assets used for sending transactions for users.

In WingWallet, developers to be able to build addons without the need for a complete Point-Of-Sale system. These addons can be utilized by either users or merchants. The transactions will be executed the smart wallet. We created an NFT cashback add on. This add-on is a Safe guard, which is activated every time a transaction through the smart wallet. In our case, the NFT cashback addon checks if the user of the transaction is the pre-selected merchant and if the sender owns the required NFT. Furthermore, developers can earn additional revenues from the addons that they deploy based on demand. If the user is eligible for the cashback, the user will receive the cashback to his wallet as an Ethereum.The maximum cashback amount is 0.1ETH.