phonon-app

The application for creating, sending, and redeeming Phonons.

It can be built to target Web, iOS, and Android platforms.

To learn more about Phonon, visit phonon.network and to get help join the PhononDAO Discord.

Dependencies

All Platforms

• node - Build tools for the web-based technologies that make this app possible.
• Ionic - Higher-level build tools for generating the mobile apps and user-interface component library.
• tailwind - Styling library for making the app look good.

Web

• Go - The programming language in which the phonon-client is written.

iOS

• macOS - Operating system that is required to build iOS apps.

Getting started

To run the app locally, or to begin developing new features for the Phonon App, you'll need to run phonon-client locally on your machine. This is the service that the phonon-app talks to in order to securely interact with the phonon network.

Most of the time, you'll be working with the web app. Many web features will work just fine across all platforms, but since we are engineers, we always test on the mobile platforms as well.

To check if any particular web platform feature works on mobile browsers, we suggest putting the name of that feature into CanIUse.com to see how well it is supported.

Start the phonon-client

1. Install Go (if you don't already have it on your machine).
2. git clone https://github.com/GridPlus/phonon-client.git - Clone the phonon-client git repository to your machine.
3. go run main/phonon.go webUI - Start up the phonon-client.

Start the Web App

1. npm install - Install dependencies
2. npm run start - Start the web app
   • It should either start up at localhost:3000 or if something is already running at that address, it will prompt you to start at a new address.
3. At this point, your browser should open the app for you. If not, visit the address displayed in your terminal, which is localhost:3000 by default.

Start the iOS App

You'll need a computer running macOS to work on the iOS app. There is quite a bit of preparation required, which you can do by following along with the Ionic Documentation. Once you're set up, you'll run:

$ ionic capacitor run ios -l --external

to get the development environment set up to allow for live-reloading while working.

Start the Android App

As with iOS development, Android also requires preparation of your machine before you can get started with development. Visit the Ionic Documentation to learn how to set up your computer. The following command:

$ ionic capacitor run android -l --host=YOUR_IP_ADDRESS

with your IP address in the command, so the app knows where to look for changes.

Mining Native Phonons

By default mining native phonons is disabled in the UI. You can enable this, but before you do, it's important to know the caveats.

CAVEATS/KNOWN BUGS: You can brick your Phonon card. If you'd like to test mining, make sure you NEVER had any backed Phonons created on the card. Even if you created and destroyed a backed Phonon on the card it may still run out of memory. Proceed at your own risk!

To enable mining Native Phonons in the UI, toggle the enableMining in src/constants/feature-flags.ts to true.

Additional Notes

The default pin for mock cards is 111111.

Architecture

This application uses the Ionic Framework to both give us UI components that look good on all platforms, as well as help us out with some build tools that make it easier to deploy mobile apps.

The web app works the same as any other website, the browser renders our HTML, JS, and CSS. The mobile apps work by wrapping our app in a "webview" that uses the native browser on the device to render our web app as though it were an actual native application.

User Interface

The user interface is built using React with Tailwind for styling. And it is written with TypeScript.

State Management

State is managed using Redux Toolkit. This gives us a simple, hooks-based way to sync state with the backend service (phonon-client).

Contributing

Pick up an unassigned ticket from the issues on this repo, do your work on a new branch, then open a PR targeting the master branch.

sequenceDiagram
    participant Client

    App->>Client: Deposit Phonons
    Client->>App: Create Phonon
    Note over Client,App: { pubKey: string }
    App->>MetaMask: Request Signature

    alt
      MetaMask->>MetaMask: Transaction Approved
      MetaMask->>App: Transaction Confirmed
      App->>Client: Finalize Deposit
      Client->>Client: Set Descriptor
    else
      MetaMask->>MetaMask: Transaction Rejected
      MetaMask->>App: Transaction Failed
      App->>Client: Destroy Phonon
      Client->>Client: Destroy Phonon
    end
      Client->>Client: Confirm Completion 
      Client->>App: Report Phonon Status

Loading

Precommit Hooks

This repo utilizes Husky to run precommit hooks. The precommit hooks run a series of lint and style checks. This ensures consistent code structure and formatting.

If you're using VSCode to develop, you can install the following extensions to help with linting and styling of your code:

1. ESLint
2. Prettier - Code formatter
3. Prettier - ESLint