benjaminbollen/omo-li

Omo Li

Building with Omo.Li a lightweight and hostless decentralized wallet and marketplace on top of the CirclesUBI protocol, ipfs and the fission Webnative SDK and identity key management

• DAPP (early alpha WIP): https://omo.fission.app/

Overview

• Chat: https://discord.gg/Rbhy4j9
• Wishes & Bugs: https://github.com/omoearth/omo/issues
• Roadmap: https://github.com/omoearth/omo/projects/1
• Twitter: https://twitter.com/OmoEarth
• Circles Whitepaper: https://github.com/CirclesUBI/whitepaper/blob/master/README.md

Dapp

Tech Stack, architecture and status

• Circles Protocol (UBI-Currency) as non-custodial self-owned personal currency (alpha ready)
• xDAI Blockchain for fast and low-fee transactions (alpha ready)
• Transitive circles payments via a clientside pathfinder (planned)
• Fission: Identity and Key-Management mit keystore-idb, DID and UCAN (planned)
• Fission: Hostless and user-owned IPFS Storage with service workers syncing P2P between the browser clients (planned)
• Caching trust graph and limits in ipfs and sync via fission (planned)
• Svelte as reactive frontend compiler
• Tailwind for the UI-Designsystem

Install

Clone Repo git clone https://github.com/omoearth/omo-li.git

Enter directory

cd omo-li

Install with npm

npm i

Start

npm run dev

Go to your browser and open https://0.0.0.0:5000

Building for production

The build script will compile the app for production. By default, the bundle will be created at /public/build/, which means your public directory will contain everything you need to run the app.

npm run build

To run the production build, use the start command and open http://localhost:8080 in your browser.

npm run start

Hostless deployment to ipfs via fission

For more information about fission, read the docs: https://guide.fission.codes/

Install

brew install fission-suite/fission/fission-cli

Setup your account keys with fission

fission setup --verbose

Register your dapp and enter path of build folder (./public)

fission app register --verbose

Publish and delpoy your dapp

npm run deploy

This will first build and then publish your dapp to ipfs via the fission service

Frontend Frameworks: Svelte typescript, webpack, tailwind

---

• Omo Li
  • Overview
  • Dapp
  • Tech Stack, architecture and status
  • Install
    • Building for production
    • Hostless deployment to ipfs via fission
  • ## Frontend Frameworks: Svelte typescript, webpack, tailwind
  • Usage
    • Global styles
    • Single page applications
    • Targeting browsers
    • Disabling Babel
    • Enabling source maps in production
    • Path mapping

---

Usage

Global styles

The /src/styles/index.scss file will be compiled and embedded at the top of the bundled CSS, effectively making it a global stylesheet. You can easily add additional stylesheets to the bundle by editing the stylesheets variable at the top of webpack.config.js:

const stylesheets = [
    './src/styles/index.scss'
];

Single page applications

If you're building a single page application (which needs multiple routes), edit your package.json file:

• Add the --history-api-fallback flag to the "dev" command
• Add the --single flag to the "start" command.

"scripts": {
    "dev": "webpack-dev-server [...] --history-api-fallback",
    "start": "serve [...] --single",
}

Targeting browsers

Babel and Autoprefixer will be used to make bundles work in your target browsers, which are listed under browserslist in your package.json file. Check out the list of browserslist queries to customize this.

{
    "browserslist": [
        "defaults"
    ]
}

Note that Babel is only active for production builds by default, so it won't slow down your development.

Disabling Babel

If you don't need to support older browsers, you can reduce your bundle size by disabling Babel. Just change the useBabel variable at the top of webpack.config.js:

const useBabel = false;

Enabling source maps in production

By default, this template won't generate source maps for production bundles in order to avoid exposing your source code. If you need to enable source maps in production (such as for debugging), update the sourceMapsInProduction variable at the top of webpack.config.js.

const sourceMapsInProduction = true;

Path mapping

By default, the src alias is mapped to your src/ directory, which means you can import like this:

import Navbar from 'src/components/Navbar.svelte';

If you wish to add additional aliases, you only need to edit the paths property in your tsconfig.json, and they will be automatically applied to Webpack:

"paths": {
    "src": ["src"]
}