{"id":20858920,"url":"https://github.com/secretshardul/react-celo-paywall","last_synced_at":"2025-08-20T21:21:24.722Z","repository":{"id":101006190,"uuid":"357996226","full_name":"secretshardul/react-celo-paywall","owner":"secretshardul","description":"Forget expensive subscriptions, just pay for what you read using the Celo paywall.","archived":false,"fork":false,"pushed_at":"2021-04-14T21:37:09.000Z","size":676,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-19T07:24:40.702Z","etag":null,"topics":["blockchain","celo","paywall"],"latest_commit_sha":null,"homepage":"https://celo-paywall.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/secretshardul.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-14T17:58:03.000Z","updated_at":"2022-06-16T19:03:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"6305cee3-c058-48f8-8755-e906b3aec184","html_url":"https://github.com/secretshardul/react-celo-paywall","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/secretshardul%2Freact-celo-paywall","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/secretshardul%2Freact-celo-paywall/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/secretshardul%2Freact-celo-paywall/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/secretshardul%2Freact-celo-paywall/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/secretshardul","download_url":"https://codeload.github.com/secretshardul/react-celo-paywall/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243230100,"owners_count":20257644,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blockchain","celo","paywall"],"created_at":"2024-11-18T04:48:01.088Z","updated_at":"2025-03-12T14:14:42.431Z","avatar_url":"https://github.com/secretshardul.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Celo one-time paywall\nCelo paywall is a new way for media websites to monetize their content. Paywalls today ask for monthly subscription fees. But actually people consume content from multiple sites. It is impractical for the casual reader to purchase subscriptions for multiple sites. They end up installing paywall removal tools, which results in lost revenue for websites.\n\nInstead we can let users pay for and read individual articles. The challenge is that fiat payment processors are oriented towards larger payments due to overhead cost of transfers. Stripe has a minimum payment requirement of USD 0.50.\n\nWe can overcome this problem through crypto payments on Celo. Low gas fees allows us to operate this model with better margins and low overhead.\n\n# Live demo\nhttps://celo-paywall.netlify.app/\n\n# Video\n[![Celo paywall demo](https://user-images.githubusercontent.com/49580849/114779407-b6596f80-9d93-11eb-84e7-63759863d35c.png)](https://www.youtube.com/watch?v=ySXfLBxzMx4)\n\n# Implementation\nCelo paywall is simple to integrate. You just need to wrap your content with the `\u003cPaywall\u003e` component.\n\n```tsx\n\u003cPaywall pageId=\"unique-id-for-page\"\u003e\n    \u003cArticle /\u003e\n\u003c/Paywall\u003e\n```\n\n# Working\n1. User logs in with Celo wallet. Valora, Metamask and others are supported.\n\n    ![login](https://user-images.githubusercontent.com/49580849/114780593-3f24db00-9d95-11eb-8d70-93ba900082ad.png)\n\n2. The paywall code queries the smart contract to check if user has purchased access to the article.\n\n3. If user has not purchased access, a modal is displayed asking user to make payment.\n\n    ![purchase](https://user-images.githubusercontent.com/49580849/114780567-37fdcd00-9d95-11eb-9811-ebeb93f9f7ee.png)\n\n4. A `payable` call is made to the smart contract. The user's address and page ID is stored in the contract, after which user gets access to the article.\n\n    ![unlocked page](https://user-images.githubusercontent.com/49580849/114780573-392efa00-9d95-11eb-877a-4c5db512e3e9.png)\n\n# Tech stack\n- React\n- Typescript\n- Truffle\n- Solidity smart contracts on Celo\n- Celo `use-contractkit`\n\n# What does DeFi (or an Ethereum native app) look like when it's designed for mobile-first?\nMobile first DeFi should provide:\n- Ease of use\n- Inclusiveness\n\nThe paywall has a mobile first design while also being adaptable for desktop. Majority of traffic on media sites comes from mobile devices.\n\n# Impact\nIt's a win-win for readers and media publishers. Readers only pay what they read, and publishers earn revenue which is generally lost due to paywall circumvention software.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsecretshardul%2Freact-celo-paywall","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsecretshardul%2Freact-celo-paywall","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsecretshardul%2Freact-celo-paywall/lists"}