# Project export: FediFi This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: TreeHacks 2024 - Tagline: Ad platforms like Google make $10+ a click. None of that makes it to you. Fedifi: the first-ever decentralized financial infra for web3, built with automated smart contracts to cut out the middleman. - Devpost: https://devpost.com/software/fedifi - GitHub: https://github.com/tonyjiang02/FediFi-Pixel - Demo: https://github.com/tonyjiang02/FediFi-Social - Video: https://www.youtube.com/embed/w75R6tuKtAo?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Result: winner (Taisu Ventures: Innovative DeFi Award ($500 Cash)) - Team: 1 GitHub contributor(s) — Tony Jiang (1 commits) ## Devpost submission (written by the team) ### Inspiration Current advertising platforms like Google make up to $10 a click. None of that makes it to the users. These traditional web2 advertising methods also face intense resistance by the web3 community, and thus monetization methods should be reimagined to fit the new decentralized format of social media. Platforms like Threads, BlueSky, and Mastodon have entered into the Fediverse (decentralized social media platforms). They also have brought along with millions of users. FediFi helps ethically monetize web3 stakeholders with a user-centric and privacy focused approach. ### What it does FediFi allows instance owners and clients to install and display monetization modules quickly, making it as simple as just 'npm install'. In web3, users reward good content. FediFi allows users to support content and creators with donations and advertisements. Creators, Instances, and Advertisers bid to find an optimal pay structure, which is then automatically executed by a smart contract. By using Caldera and smart contracts, users can take out their money at any time and not be bound to a biweekly payment schedule of web2 platforms. Caldera's layer-2 transaction layer also acts as protection against gas price spikes. 100% of revenue goes towards the intended recipient. Instance moderators can also according choose which ads that best fit their community. Further web3 social monetization features will be added such as super-likes, creator shops, and more. Users can view dashboards to see advertising and post view analytics. Developers can access our documentation to and landing page to answer any questions they may have. ### How we built it Our tooling consists of many interconnected components: FediFi-Module. A React component developers can easily add to their platforms. Integrate with any instance with npm install. Resembles Google Ad’s Pixel*, and enables creation of autonomous smart contracts to manage transactions. FediFi-Demo. Sample client with FediFi-Module installed. We chose to build a proof of concept on top of Mastodon, but it could be anything. FediFi-Dashboard. Custom Next.js webpage; A one-stop-shop for both advertisers and creators to view advertising, traffic analytics, bidding, and transactions in real time. FediFi-Controller. Bun.js backend with SQLite database. Automatically writes and deploys Smart Contracts to the Caldera chain. Boosted with Caldera's rollups. FediFi-LandingPage. Deployed with Vercel to show documentation and context behind the creation of FetiFi for instance owners to learn more. ### Challenges we ran into / ### Accomplishments we're proud of Our team is really proud to have tackled a difficult project with many complex interacting systems, while having limited exposure to the world of web3. We are proud to have learned so much about web3 technologies and the Fediverse. So much of what we worked on was either in codebases that we did not personally write, or unfamiliar technologies with little documentation. Some of the biggest challenges we faced were: Defining the initial limited feature set because there were so many different avenues that we could have gone down to implement within 36 hours. Lack of documentation with new technologies, where it was up to a lot of (educated) trial and error to finally debug and figure out what was going wrong. Complex interacting systems, as we have 4 or 5 separate components that are all communicating with each other and working together to act as a monetization system. We had to implement smart contracts, backend, frontend, analytics dashboard, and more. ### What we learned Concretely there were a ton of new technologies that we were all exposed to such as Solidity, Bun.js, and more. However, we also learned a lot about planning out software systems and drawing system diagrams to make sure we didn't waste much time when we jumped in to code. We also had the opportunity to improve our communication, as everyone was working on separate components in tandem before eventually integrating our components together. ### What's next We have many features that we would love to implement if we were given more time. For example: Direct revenue share with fans. We could allow creators to automatically give away percentages of their revenue to people who consume their content. This could be an interesting and new way for creators to grow their audiences and give back to the community. Zero Knowledge Proofs in advertising. Currently we use context based advertising in order to preserve user privacy, but with ZK proofs we could have targeted advertising based on the users interest while still maintaining privacy. Automated Micro Payments. Our users right now need to decide for themselves when to cash out, but eventually we could support an instant deposit into their account per view of their content. We could form a DAO as a decentralized governing entity to ensure a higher level of transparency and trust amongst the community, and allow the community to help make decisions for the future of FetiFi. ## README (from the GitHub repository) # AdsContainer Component Node Module ## Fedifi Pixel This Node module provides a versatile AdsContainer component for your web applications. Easily integrate advertisements into your projects with minimal effort. ## Installation ```bash npm install @tonyjiang02/ads-container ``` ## Usage ```javascript import AdsContainer from "@tonyjiang02/ads-container"; // Within your component render method ; ``` ## Example ```jsx import React from "react"; import AdsContainer from "@tonyjiang02/ads-container"; const App = () => { return (

Welcome to My Website

); }; export default App; ``` ## License This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details. ## Detected evidence (automated analysis) Indexed codebase: 13 recognized source files, 61 KB. - CSS (language) — detected in the code - HTML (language) — detected in the code - JavaScript (language) — detected in the code - React (technology) — detected in the code - Next.js (technology) — claimed on Devpost, not found in the code - Node.js (technology) — claimed on Devpost, not found in the code - Python (language) — claimed on Devpost, not found in the code - Solidity (language) — claimed on Devpost, not found in the code ## Codebase structure (from repository index) ### Files (18 of 18) ``` AdsContainer.js my-react-app/.gitignore my-react-app/package.json my-react-app/public/index.html my-react-app/public/manifest.json my-react-app/public/robots.txt my-react-app/README.md my-react-app/src/AdsContainer.js my-react-app/src/App.css my-react-app/src/App.js my-react-app/src/App.test.js my-react-app/src/index.css my-react-app/src/index.js my-react-app/src/reportWebVitals.js my-react-app/src/setupTests.js my-react-app/src/UseOnScreen.js package.json README.md ``` ### Dependencies - my-react-app/package.json: @testing-library/jest-dom@^5.17.0, @testing-library/react@^13.4.0, @testing-library/user-event@^13.5.0, react@^18.2.0, react-dom@^18.2.0, react-scripts@5.0.1, web-vitals@^2.1.4 - package.json: react@^18.2.0, react-dom@^18.2.0 ### Recent commits (newest first) - update readme - add readme - first_commit - Initial commit ## Key source files (fetched from GitHub, selected and truncated for size) ### package.json ``` { "name": "fedifi-pixel", "version": "1.0.0", "description": "", "main": "AdsContainer.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" } } ``` ### my-react-app/package.json ``` { "name": "my-react-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } ``` ### my-react-app/src/index.js ```javascript import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); ``` ### my-react-app/src/App.js ```javascript import logo from './logo.svg'; import './App.css'; import AdsContainer from './AdsContainer'; function App() { return (
logo

Edit src/App.js and save to reload.

Learn React































); } export default App; ``` ### my-react-app/src/setupTests.js ```javascript // jest-dom adds custom jest matchers for asserting on DOM nodes. // allows you to do things like: // expect(element).toHaveTextContent(/react/i) // learn more: https://github.com/testing-library/jest-dom import '@testing-library/jest-dom'; ``` ### my-react-app/src/App.test.js ```javascript import { render, screen } from '@testing-library/react'; import App from './App'; test('renders learn react link', () => { render(); const linkElement = screen.getByText(/learn react/i); expect(linkElement).toBeInTheDocument(); }); ``` ### my-react-app/src/reportWebVitals.js ```javascript const reportWebVitals = onPerfEntry => { if (onPerfEntry && onPerfEntry instanceof Function) { import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { getCLS(onPerfEntry); getFID(onPerfEntry); getFCP(onPerfEntry); getLCP(onPerfEntry); getTTFB(onPerfEntry); }); } }; export default reportWebVitals; ``` ### my-react-app/src/index.css ```css body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; } ``` ### my-react-app/src/UseOnScreen.js ```javascript import React, { useMemo, useState, useEffect } from "react" export function useIsVisible(ref) { const [isIntersecting, setIntersecting] = useState(false); useEffect(() => { const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting) ); observer.observe(ref.current); return () => { observer.disconnect(); }; }, [ref]); return isIntersecting; } ``` ### my-react-app/src/App.css ```css .App { text-align: center; } .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; } } .App-header { background-color: #282c34; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: calc(10px + 2vmin); color: white; } .App-link { color: #61dafb; } @keyframes App-logo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } ``` [2 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]