Kaching 2.0

Kaching 2.0 is a money tracker deployed in Web3. Usually we did a transaction, we can just see the transaction hash, the amount, sender address and receiver address. We may not remember what is the transaction for after a few days or years. We create Kaching 2.0 to solve this problem for users, with a user-friendly UI the user can just choose the transaction he did to do a remark and description every time they buy something with their crypto.

This decentralized application (DApp) allows users to interact with blockchain features such as tracking financial data, interacting with smart contracts, or performing other web3-related tasks. The application has a modern front-end built with React and Tailwind CSS, integrated with Ethereum via Web3.js and smart contracts, and connected to the blockchain using MetaMask for wallet management.

Technologies Used:

1. Frontend: React.js

   • Why React?: React is used for building dynamic and interactive user interfaces. Its component-based architecture makes it easy to maintain and scale the application, especially when handling complex state changes (e.g., managing blockchain states).
   • How it's used: The UI is built with React, where components are designed for each section of the application (e.g., the Dashboard, Wallet connection, Team Info). React hooks (useState, useEffect) are leveraged to manage the state, and the app is structured for easy navigation.

2. Styling: Tailwind CSS

   • Why Tailwind?: Tailwind CSS is a utility-first CSS framework, providing a flexible and efficient way to design responsive user interfaces. With pre-defined utility classes, you can build modern UIs faster without writing custom CSS.
   • How it's used: Tailwind is applied for layout design, spacing, typography, and responsiveness. The classes are used to ensure the app looks good across different screen sizes (e.g., grid layout for team members and navigation).

3. Blockchain Interaction: Web3.js

   • Why Web3.js?: Web3.js is a JavaScript library that allows the frontend to communicate with the Ethereum blockchain. It facilitates actions such as interacting with smart contracts, sending transactions, reading the blockchain state, and much more.
   • How it's used: The Web3.js library is integrated into the React app, enabling users to connect their wallets via MetaMask and interact with Ethereum smart contracts. It handles blockchain transactions (e.g., transferring tokens, checking balances).

4. Wallet Connection: MetaMask

   • Why MetaMask?: MetaMask is a popular cryptocurrency wallet that allows users to interact with Ethereum-based DApps. It provides an easy and secure method to manage accounts and sign transactions.
   • How it's used: MetaMask is used for user authentication. Users connect their Ethereum wallets to the DApp using the MetaMask browser extension, allowing them to perform transactions or interact with smart contracts securely.

5. Backend (Smart Contracts): Solidity & Ethereum

   • Why Solidity & Ethereum?: Solidity is the most widely-used language for writing smart contracts on the Ethereum blockchain. Ethereum serves as the base platform for deploying and interacting with these contracts.
   • How it's used: Smart contracts are written in Solidity and deployed to the Ethereum network. These contracts handle the logic for user interactions, such as creating financial records, interacting with tokens, and validating blockchain-based transactions.

6. Development Environment: Hardhat or Truffle

   • Why Hardhat/Truffle?: These are popular frameworks used to write, test, and deploy smart contracts to the Ethereum blockchain.
   • How it's used: We use Hardhat (or optionally Truffle) for local development, smart contract testing, and deployment. Hardhat's testing and debugging features simplify the contract development process.

7. Partner Technologies: IPFS (InterPlanetary File System)

   • Why IPFS?: IPFS is a decentralized storage network that allows storing and sharing files without relying on a central server.
   • How it's used: IPFS is used to store assets such as images, documents, or other large data off-chain while keeping metadata and references to these files on the Ethereum blockchain (e.g., storing a profile picture or financial record document).

How These Technologies Are Pieced Together:

1. Frontend & Blockchain Interaction:

   • The frontend (React app) is connected to the blockchain through Web3.js. Users access the application through a web browser, where they can connect their MetaMask wallet.
   • Web3.js enables the frontend to interact with deployed smart contracts on the Ethereum blockchain. For example, when a user performs a transaction, Web3.js communicates with the smart contract, which is hosted on Ethereum's network.

2. Smart Contracts:

   • The core logic for transactions and financial records is handled by smart contracts written in Solidity. These contracts are deployed to Ethereum and are triggered via Web3.js from the frontend.
   • Smart contracts ensure the security and immutability of the operations, as all transactions are recorded on the Ethereum blockchain.

3. MetaMask:

   • MetaMask handles wallet interactions, ensuring that only users who control a wallet can perform certain actions like sending transactions or interacting with the blockchain. It also provides security by requiring users to sign transactions before they're broadcasted.

4. IPFS for Decentralized File Storage:

   • For assets like images or documents, the app uploads them to IPFS and stores the resulting hash on the Ethereum blockchain. This allows the data to be stored in a decentralized manner, ensuring data integrity and accessibility without relying on a centralized server.

Benefits of Partner Technologies:

1. MetaMask:

   • MetaMask offers a secure and user-friendly interface for managing cryptocurrency accounts and signing transactions. Its widespread adoption means that users are already familiar with the process of connecting to DApps.

2. IPFS:

   • IPFS benefits the project by enabling decentralized file storage, reducing dependency on centralized cloud storage services, and ensuring that files remain available and accessible even if a central server goes down.

Notable Hacky Techniques:

1. Local Testing with Hardhat/Truffle:

   • During the development of smart contracts, we used Hardhat's local Ethereum network for testing. To simulate various blockchain scenarios (e.g., transaction failures, state changes), we set up mock contracts and used Hardhat's console to directly interact with them. This allowed for fast iterations and efficient debugging without needing to deploy to a live Ethereum network.

2. MetaMask Integration with React:

   • A particularly tricky aspect of the project was ensuring seamless MetaMask integration. React hooks were used to manage wallet connection state (whether the user is connected, which account they are using). This led to some race conditions when trying to fetch user balances and handle transactions. To solve this, we introduced a delay mechanism and used a global context to manage MetaMask connection state across components, preventing unnecessary re-renders and ensuring consistent state.

3. IPFS Data Retrieval:

   • Storing large files on IPFS can sometimes result in long load times. We implemented a caching mechanism to store IPFS data locally, improving the app’s performance when retrieving files that had already been uploaded. This technique reduces reliance on real-time IPFS retrieval, especially when dealing with larger assets.

Conclusion:

This DApp combines a modern tech stack (React, Tailwind CSS, Web3.js) with the power of blockchain (Ethereum, Solidity) to provide users with a secure, decentralized platform for interacting with financial data and smart contracts. Partner technologies like MetaMask and IPFS enhance the user experience and provide a decentralized storage solution. Notable hacky solutions, such as local testing with Hardhat and optimizations for MetaMask and IPFS integration, made development smoother and helped achieve the app’s goals efficiently.