bit-nation/bitnation-pangea-react

Pangea Jurisdiction Alpha client v. 03 frontend repository

bitnation-pangea-react's Issues

Add Airbnb eslint

To follow the Airbnb guidelines: https://github.com/airbnb/javascript

[Tests] Add better test code coverage

Increase the percentage of code covered by tests.

Add Redux on the mobile UI

Do a similar test as in web

Native project must be ejected

in future, we will be adding lot of Native code, so we need to upgrade/change dev stack

README

Wouldn't it be better to have a Pangea specific README and the long React instructions in a separate .md?

[ui] react native base

Feature / Issue

We need this library in our project to use it as a base for all our ui element's.

Acceptance criteria

• Added lib which is ready to be consumed

Additional information

• Link the lib
• Link the icons

Improve menu style

Including also a circular profile picture at the top

[panthalassa] build command fails

Hi, since i ejected the project I am getting an error in the "panthalassa_integration" branch during when I run npm run build. I am not able to reproduce this error. Maybe someone with more react native experience is able to do so. If you have any question's feel free to ask.

Edit:
That's the error:
Module not found: Error: Can't resolve 'invariant' in './BITNATION-Pangea/react\node_modules\react-redux\es\components'

[PROPOSAL] - Standards, Docs & Explicit Policies Update

Scope

In order to effectively collaborate, especially with remote contributors, its tremendously helpful to establish explicit policies regarding issues, pull requests, contribution guidelines, processes, tooling and documentation.

Motivation

As a complete bitNation noob, I've been digging through the code a bit and docs to find my way around. I've found some docs, but it took a little bit, and looking through the issues, I didn't have a clear place to jump in or know their status or progress. To serve my own needs, and hopefully those of the current and future contributors I'd like to put forward a proposal.

Proposal

These are the initial items that have stood out to me, I don't want to stand on anyone's toes, and as a complete newcomer to the project, I absolutely may have missed something. Please provide feedback.

• add a .github folder containing issue and PR and issue templates to keep comms easy
• explicitly define git flow for the project
• Work against development branch and tag releases, only merge to master for production, use github to enforce checks and review on PR's
• Define releases as milestones to track progress, release goal, PR's, and issues
• Keep a changelog file in the repo
• Use semantic versioning (Don't know if we're there yet or if this has been implemented)
• Start to define standards for repo documentation
• Explicitly define policies for issue & PR acceptance, as well as peer review
• Separate out the code contribution guidelines included here into their own readme in the same repo and link to them.
• add expectations for test coverage to make sure we don't fall behind
• I noticed some stuff on Trello regarding tasks and a roadmap, is this active? if so we could add these links to the repo docs as well.
• consider an automated CLA see this
• agree to a common CI server, I'm partial to CircleCI, and I see we're using Travis here, Semaphore in another repo and no CI in others, agreeing on one platform would be great I believe as devops skills will be more focused, and easier to share.
• use Codacy for static analysis (also free for open source)
• define a standard interface pattern for NPM commands with consistency across repositories, testing, running, building and deployment
• use Wiki for project outlook and summary, and long-term documentation

Responsibility

This is clearly something we'd need to agree to as a community, I would be happy to tackle some of these, I know you guys are super busy at the moment, but its certainly not something I think any one person can do/should do and maintain on their own.

Expected Outcomes

1. More clarity about how and what to contribute on, what the focus is now, and what's coming up next.
2. Easier onboarding for new contributors.
3. foundation to ensure future code quality and maintainability.

Resarch UI/Styles frameworks for React Native

ex: Material Design, Bootstrap, Semantic UI

Create home screen (after intro)

Following the mockups
Create "After intro" screen containing:

Top:
Burger menu - Home - Chat Icon - Settings icon (?)

Remove expo.io from README?

Should the expo.io testing be removed from the README, since we're not using expo.io anymore?

Move Mobile root container to a better place

Now it is in the root dir, we should move it under containers folder, just need to figure out how Expo/Create-React is referencing it and then change.

[UI] Create Chat UI

[PROPOSAL] - Git workflow

Scope

In order to manage visibility of the stable vs currently in progress code, facilitate collaboration, and protect the production environment, it's often useful to maintain a development branch, (and auto protect the master) so that all PR's are opened against the currently in-progress code on development, and master is always a representation of whats in production.

References

• Git workflow comparison: https://www.atlassian.com/git/tutorials/comparing-workflows
• another example - http://nvie.com/posts/a-successful-git-branching-model/

Proposal

• Definemaster as a production, and protect with status checks and privileged reviewer (in github settings)
• Create development branch for current work in progress
• Contributors to open feature or fix branches (ie: feature/<your-feature-name> or fix/<issue-or-bug>) against development
• Set target dates using milestones for "next release"
• Tag release using semantic versioning - see http://semver.org/

Required

• Repo Admin to update settings to protect master branch and define master merge checks
• Create development branch
• Document git workflow for contributors
• Make documenttaion accessible for contributors

Related

This is related to #27

Expected Outcome

1. Structured workflow to clearly define stable and unstable code
2. Protection for the lastest production build
3. Workflow that supports managing releases and facilitates focus.

Remove expo.io from project

Create a burger menu

Change title according to the current screen

Follow the mockups

Add Edit screen

With basic inputs and placeholders

[tests] coverage coveralls

Integrate https://coveralls.io/ with pangea to display the codecoverage online.

A coverage command exist. Use npm run test:coverage to collect coverage.

[panthalassa] Integration import error

I am getting a wired error when i try to integrate Panthalassa with this project.

The error:
Unable to resolve ./asn1/api" from ".//node_modules/panthalassa-ts/Panthalassa.js: could not resolve /Users/florian/project/BITNATION-Pangea-react/node_modules/panthalassa-ts/asn1/api' as a folder: it did not contain a package, nor an index file","name":"UnableToResolveError","type":"UnableToResolveError","errors":[{}]},"type":"bundling_error"}

Steps to repoduce:

1. Clone the repository
2. Checkout this branch: panthalassa_integration
3. Run npm install
4. Run npm run ios and you will see an error.

Additional information:
We are using browserify to generate the bundle file. I don't think it's a problem with browserify since i just tested it in the web and there it works. Maybe it's a problem with browserify and react native. Also have a closer look at this part of the error: from ".//node_modules/panthalassa-ts/Panthalassa.js: the import statement is wired. .//node_modules looks like an error.

Isolate web tests and native tests

Create initial native UI unit tests

Add Native routing

Screens routing handle just one function.
It will be correct, to add native router library

Suggest: https://reactnavigation.org/docs

[ui] footer icon's

Feature / Issue

We need the icons designed by Ampillo to be included in the react native base icon set.

Acceptance criteria

• Icon's should be ready to get consumed

Depends on

• #47

Add Nations navigation

From Nations -> Nation X
With placeholders

Fix warnings: duplicated libraries

Log:

duplicate manual mock found:
  Module name: ErrorUtils
  Duplicate Mock path: /Users/dfranca/workspace/bitnation/BITNATION-Pangea-react/node_modules/react-native/Libraries/Core/__mocks__/ErrorUtils.js
This warning is caused by two manual mock files with the same file name.
Jest will use the mock file found in:
/Users/dfranca/workspace/bitnation/BITNATION-Pangea-react/node_modules/react-native/Libraries/Core/__mocks__/ErrorUtils.js
 Please delete one of the following two files:
 /Users/dfranca/workspace/bitnation/BITNATION-Pangea-react/node_modules/react-native/node_modules/fbjs/lib/__mocks__/ErrorUtils.js
/Users/dfranca/workspace/bitnation/BITNATION-Pangea-react/node_modules/react-native/Libraries/Core/__mocks__/ErrorUtils.js

Can't run project using docker/expo

When I try to follow the README instructions to launch the project, I get the following error when running step 5: npm run start:native.

Here is the error:

npm info it worked if it ends with ok
npm info using [email protected]
npm info using [email protected]
npm ERR! Linux 4.9.49-moby
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start:native"
npm ERR! node v6.11.2
npm ERR! npm v3.10.10

npm ERR! missing script: start:native
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR! https://github.com/npm/npm/issues

npm ERR! Please include the following file with any support request:
npm ERR! /src/app/npm-debug.log

[ui-components] footer component

Feature / Issue

We need a footer component for your app. It will be a this one with the icons (only the icons, no text).

Acceptance criteria

• Footer component has 5 items:
  • Lucy
    - [ ] Chat
    - [ ] Nations
    - [ ] Profile
    - [ ] Wallet
• The component's name should be "Footer"

Need: formally define style from provided mock-up images

The Balsamiq mockup has a variety of screens that reflect the end-product's approved aesthetic.

We need to extract the following from them:

• colors
• fonts and sizes
• background image

[PROPOSAL] - Style Guide and Components Page

Scope

Reviewing and testing components can become tedious and time-consuming as the codebase grows. While we've got component render tests setup, it would be useful to establish a component test page and style guide for UAT as suggested by @jetpack3331

Motivation

this could allow for easier management, testing and iteration of the components / styles.

Proposal

• Setup component / styleguide view
• Render all components with dummy data, and document their intention
• Add requirements to future contribution docs (mentioned here, #27 )

Expected Outcomes

• Component page in app, only available during development
• Support for faster UAT process (component check -> flow check)

0.3

About

This is a kind of tracker for the task's that need to be done for release 0.3

• Lucy (system bot)
  • [ ]
• Chat
  • Implement a basic UI
    • The overview (where your chat's are listed)

Containerize the env/application

Using rkt or [Docker(https://www.docker.com/)

[tests] add functional / integration tests

Since we are targeting a LOT of devices, it make sense to have automated integration test's that run on multiple simulator and real devices.

The benefits are less manual testing and early discovery of bugs (before we ship the software).

[ui] remove old layout

Feature / Issue

Since we are creating our new layout we should remove the old menu etc. BUT keep the image as a background.

Acceptance criteria

• Remove decrypt prompt
• Remove old Menu
• Remove old heading

Additional information

Don't forget to remove additional code like services etc.

Decrypt promt

Side menu

Heading

Update README

Include how to test the app from the expo.io webpage
Include information about the Airbnb guidelines eslint

[ui] decryption alert

Panthalassa is our backend (not a common one, it's runs on the device). Since we are signing eth transaction we have to save private key's on the device. A user can decide to encrypt them. So if panthalassa sign's a transaction AND the private key is encrypted panthalassa will emit and event e.g. "eth:decrypt-private-key". Pangea will listen to this event and has to provide a way to enter a password in order to decrypt the key. So we need a ui for this.

Maybe something like this?

It is important that the alert contain's the following:

• Title
• Short description
• field to enter a password
• "ok" button
• "cancel" button

Add splash screen

Deploy app to a public url using Expo

[ios] JS Exception: Can't find variable require

Bug

Another strange react native error on ios:

Reproduce

1. Checkout https://github.com/Bit-Nation/BITNATION-Pangea-react/tree/fix/react_native_ios
2. Run npm run ios
3. You should see the error in the emulator