{"id":18813032,"url":"https://github.com/oddsdk/walletauth-react","last_synced_at":"2025-09-10T20:42:37.950Z","repository":{"id":137461255,"uuid":"542831824","full_name":"oddsdk/walletauth-react","owner":"oddsdk","description":null,"archived":false,"fork":false,"pushed_at":"2023-05-03T17:54:37.000Z","size":7857,"stargazers_count":3,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-27T11:43:39.498Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"walletauth-react.vercel.app","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oddsdk.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2022-09-28T23:25:12.000Z","updated_at":"2024-02-17T21:26:41.000Z","dependencies_parsed_at":null,"dependency_job_id":"db366e16-34ec-4bb2-b904-f4dcbe338746","html_url":"https://github.com/oddsdk/walletauth-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddsdk%2Fwalletauth-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddsdk%2Fwalletauth-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddsdk%2Fwalletauth-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oddsdk%2Fwalletauth-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oddsdk","download_url":"https://codeload.github.com/oddsdk/walletauth-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248784174,"owners_count":21161070,"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":[],"created_at":"2024-11-07T23:36:02.728Z","updated_at":"2025-04-13T21:26:07.059Z","avatar_url":"https://github.com/oddsdk.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# WalletAuth App Template\n\n[![Built by FISSION](https://img.shields.io/badge/⌘-Built_by_FISSION-purple.svg)](https://fission.codes) [![Built by FISSION](https://img.shields.io/badge/@oddjs/odd-v0.37.0-purple.svg)](https://github.com/oddsdk/ts-odd) [![Discord](https://img.shields.io/discord/478735028319158273.svg)](https://discord.gg/zAQBDEq) [![Discourse](https://img.shields.io/discourse/https/talk.fission.codes/topics)](https://talk.fission.codes)\n\n![ODD UI Screenshot](public/odd-ui.png)\n\nThe ODD App Template is a clone-and-go template for building a web application using [ODD WalletAuth](https://github.com/oddsdk/odd-walletauth/), fast. Clone, customize, and deploy to have a running distributed app in mere minutes.\n\n\u003cdiv style=\"background-color: #FEEB80; padding: 1px 20px; border-radius: 10px;\"\u003e\n    \u003cp class=\"text-align: center;\"\u003e\u003cstrong\u003e❗️The ODD SDK is alpha software.\u003c/strong\u003e\u003c/p\u003e\n    \u003cp\u003eWe recommend you \u003cu\u003edo not develop production applications using the WalletAuth App Template\u003c/u\u003e at this time. We're working on making it reliable, fast, and awesome, but we're not there yet!\u003c/p\u003e\n\u003c/div\u003e\n\n## 🤔 What's The ODD SDK?\n\n[The ODD SDK](https://github.com/oddsdk/ts-odd) empowers developers to build fully distributed web applications without needing a complex back-end. The SDK provides:\n\n- user accounts (via [the browser's Web Crypto API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Crypto_API)),\n- authorization (using [UCAN](https://ucan.xyz))\n- encrypted file storage (via the [ODD File System](https://guide.fission.codes/developers/odd/file-system-wnfs), backed by the [InterPlanetary File System](https://ipfs.io/), or IPFS)\n- and key management (via websockets and a two-factor auth-like flow).\n\nODD applications work offline and store data encrypted for the user by leveraging the power of the web platform. You can read more about the ODD SDK in Fission's [ODD Guide](https://guide.fission.codes/developers/odd).\n\n## 📦 What does this template give me?\n\n### 🥰 Silky-smooth end-user flows\n\nThe WalletAuth App Template provides a _silky-smooth user experience_ out of the box. Creating an account and linking a second device feels familiar, comfortable, and obvious. The ODD SDK authentication is key-based rather than password-based, so we've focused heavily on the authentication flows, borrowing language and screens from two-factor auth flows.\n\n### 🧱 Built with a modern web stack\n\nThe app template is built with modern web technologies:\n\n- [CreateReactApp](https://reactjs.org/docs/create-a-new-react-app.html)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Tailwind](https://tailwindcss.com/)\n- [DaisyUI](https://daisyui.com/)\n\n### 👩‍🏫 A simple ODD demo to learn from\n\n![WNFS Image Gallery Screenshot](static/wnfs-gallery-screenshot.png)\n\nThe app template includes a functioning application: an image gallery. Check out the image gallery code to learn how an ODD application handles things like file uploads, directories, etc.\n\n## 🚀 Getting Started\n\nYou can try out the template yourself [here](https://walletauth-react.fission.app/).\n\nReady? Let's go.\n\nPrerequiste: ensure you are running Node 16.14 or greater, but _not_ Node 17 (18 is fine though!).\n\n1. Clone the repository:\n\n   ```shell\n   git clone git@github.com:oddsdk/walletauth.git\n   ```\n\n2. Install the dependencies.\n\n   ```shell\n   npm install\n   ```\n\n3. Start the local development server.\n\n   ```shell\n   npm run dev\n   ```\n\n4. Navigate to `http://localhost:5173` in your web browser.\n\n## 🛠 Customize your app\n\nThe app template is designed to be easy for you to _make it your own._ Here's how:\n\n1. Rename your application.\n\n   In `/src/lib/app-info.ts`:\n\n   - Change `appName` to the name of your app.\n   - Change `appDescription` to a simple, 1-sentence description of your app.\n   - Once you [deploy](#deploy) your app, change `appURL` to the production URL.\n\n   In `package.json`, change `name` to your application's name.\n\n2. Customize your app's logo.\n\n   - App Logo SVG can be customized in `/src/components/icons/Brand.svelte`. Target an image that is 35 pixels high.\n   - Replace the favicon files in `/static` by following the instructions in [this blog post](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)\n   - Generate a Twitter/Social Media Embed image.\n     - In `/src/lib/app-info.ts`, change `appImageURL` to match the URL of your embed image.\n     - In `/src/routes/+layout.svelte`, update `og:image:width` and `og:image:height` to the size of your embed image.\n\n3. Customize the look and feel.\n\n   The app template is built using [Tailwind](https://tailwindcss.com/) and [DaisyUI](https://daisyui.com/). You can customize basic theme colors by editing `/tailwind.config.css`. Check out the [DaisyUI Theme Generator](https://daisyui.com/theme-generator/) to play around with theme colors or read the [customization guide](https://daisyui.com/docs/customize/) to customize the component appearance.\n\n4. Clear out the app's home page.\n\n   The home page content is in `/src/routes/HomeRoute.tsx`. Delete everything in the file (but don't delete the file!) to start over with a blank home page.\n\n5. Remove the image gallery demo app code.\n\n   If you're not building an image gallery, you don't need the gallery demo code, except perhaps to learn from. To get rid of it, delete:\n\n   - `/src/routes/gallery`\n   - the `initializeFilesystem` function in `/src/lib/auth/account.ts` creates directories used by WNFS. Change those to what you need for your app or delete them if you're not using WNFS.\n\n👏 You're ready to start adding custom functionality! 🚀\n\nCheck out the [ODD SDK Guide](https://guide.fission.codes/developers/odd) for ODD SDK questions or [UCAN.xyz](https://ucan.xyz) for UCAN questions.\n\n## 🧨 Deploy\n\nAny static hosting platform should be supported. The ODD WalletAuth Template is currently deployed on:\n\n- [Fission](#fission-app-hosting)\n- [Netlify](#netlify)\n\n### Fission App Hosting\n\nTry out [WalletAuth App Template on Fission](https://walletauth.fission.app/)\n\nAn ODD application can be published to IPFS with the [Fission CLI](https://guide.fission.codes/developers/cli) or the [Fission GitHub publish action](https://github.com/fission-suite/publish-action).\n\n**To publish with the Fission CLI:**\n\n1. [Install the CLI](https://guide.fission.codes/developers/installation)\n2. Run `fission setup` to make a Fission account\n3. Run `npm run build` to build the app\n4. Delete `fission.yaml`\n5. Run `fission app register` to register a new Fission app (accept the `./build` directory suggestion for your build directory)\n6. Run `fission app publish` to publish your app to the web\n\nYour app will be available online at the domain assigned by the register command.\n\n**To set up the GitHub publish action:**\n\n1. Register the app with the CLI\n2. Export your machine key with `base64 ~/.config/fission/key/machine_id.ed25519`\n3. Add your machine key as a GH Repository secret named `FISSION_MACHINE_KEY`\n4. Update the `publish.yml` with the name of your registered app\n\nSee the [Fission Guide](https://guide.fission.codes/developers/installation) and the publish action README for more details.\n\n### Netlify\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/9008a4d3-cfd2-47bf-8506-79e0ca4f898c/deploy-status)](https://app.netlify.com/sites/odd-walletauth/deploys)\n\nIn order to deploy your ODD application on Netlify:\n\n1. Create a new Netlify site and connect your app's git repository. (If you don't have your application stored in a git repository, you can upload the output of a [static build](#static-build).)\n2. Just click Deploy. Netlify takes care of the rest. No Netlify-specific configuration is needed.\n3. There is no step 3.\n\n### Static Build\n\nExport a static build.\n\n```shell\nnpm run build\n```\n\nThe build outputs the static site to the `build` directory.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddsdk%2Fwalletauth-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foddsdk%2Fwalletauth-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foddsdk%2Fwalletauth-react/lists"}