Git Product home page Git Product logo

ecency / ecency-mobile Goto Github PK

View Code? Open in Web Editor NEW
228.0 13.0 68.0 164.18 MB

Ecency Mobile - reimagined social blogging, contribute and get rewarded (for Android and iOS)

Home Page: https://ecency.com

License: MIT License

JavaScript 37.68% Java 0.26% Objective-C 0.19% Ruby 0.23% Shell 0.18% Swift 0.47% TypeScript 60.82% C 0.01% Objective-C++ 0.18%
esteem mobile blockchain ios android crypto epoint react-native rewarding social-media

ecency-mobile's Introduction

Ecency Mobile

iOS iOS Android Android

Open Beta 🔥

IOS

ANDROID

Download

AppStore iOS: https://ios.ecency.com PlayStore Android: https://android.ecency.com

I. How do I get set up? 🔧

$ git clone https://github.com/ecency/ecency-mobile.git

$ cd ecency-mobile

$ yarn

$ react-native start (Now your local server should start)

Setting up Reactotron

Reactotron for logging,

  • Install: download here
  • Run: After installation, start the reactotron desktop application
  • Link: For android, run adb reverse tcp:9090 tcp:9090 and restart app. For iOS, it should connect without further config.
  • Usage:
    1. use Timeline tab to track logs and network call
    2. use State tab to track redux stage changes, to track particular store, add it by its initializing name, example: account

Starting for IOS

react-native run-ios (this also run react-native start if you didn't)

Starting for Android

  1. Create a new app in your firebase console.
  2. Choose Add Android platform, with a package name of app.esteem.mobile.android
  3. Download the generated google-services.json and place it in <project-root>/android/app/
  4. Connect dev device or start android emulator.
  5. Run npm run android in the project's root.
Using Android Studio's adb
  1. Make sure that you can run adb from your terminal.
  2. Open Genymotion and navigate to Settings -> ADB. Select “Use custom Android SDK tools” and update with your Android SDK directory.
Using Genymotion's adb
  1. Find Genymotion’s copy of adb. On macOS for example, this is normally /Applications/Genymotion.app/Contents/MacOS/tools/.
  2. Add the Genymotion tools directory to your path (instructions for Mac, Linux, and Windows).
  3. Make sure that you can run adb from your terminal.

The Rules 🔪

Patches and Review Process

Before you start

  1. When you address an issue or a feature, make sure that there doesn't already exist a ISSUES ticket for this work item.
  1. If the item already exists and is in progress, please remove the card or the issue you were assigned and leave a note that it is a duplicate.

  2. If the item is not being worked on, please make sure that you put the card or issue as "In Progress" and assign it to yourself so other developers know that you are working on it.

Patch a day

It is important to make the work you are doing visible to other team members, especially because there are developers in different locations. Even if you are not done the work on your patch, make sure to put a Pull Request up and leave a note that this is work in progress (WIP) so that others do not try to merge in your patch. If you would like to have someone in particular review your work, leave your patch as WIP and assign the developers that need to review or update your patch before it is ready to be reviewed by other team members.

Who to assign your patch for review

Patch Review Template

When you create a pull request for your patch, make sure to leave all the information that other team members will need to understand the purpose of your patch as well.

Main Branch master

If you resolved an issue or something, you have to include the issue number (for ex. resolved #10 or closed #10) in your pr commit message.

Before you start

  1. Pull every changes.
  2. Switch your branch with development
  3. Create about issues or bugfix branch.
  4. Make sure your repo up to date!

Creating branch

  • For example if you want create branch for an issue should contain issue number (ex. #55)
  • Whats your interest put bugfix/yourbranch_name or feature/your_branch_name#issue_number
  • If you some changes for only config req config/your_branch_name

Commit messages

What ever you want number of commit. Before create push squash your all commit. We need just what you do!

Pushing

  • Make sure push your main branch (master)

Issues 👻

To report a non-critical issue, please file an issue on this GitHub project.

If you find a security issue please report details to: [email protected]

We will evaluate the risk and make a patch available before filing the issue.

Sponsors and Collaborators

  • Hive community
  • React native community
  • Bugsnag
  • Appcenter

ecency-mobile's People

Contributors

aliseyalvi avatar ausbitbank avatar dependabot[bot] avatar existentialstudios avatar feruzm avatar fildunsky avatar gamingumar avatar hsyndeniz avatar mistikk avatar moazzambukhari avatar noumantahir avatar omahs avatar saadali-rolustech avatar ue avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

ecency-mobile's Issues

Pin code improvements

AC

  • Pin code redesign, same as recent mockups
  • Plug to steemconnect login as well, note: it doesn't need to encrypt anything but just get confirmation from user via pin code only to save access_token, pincode should also popup if app is relaunched or came from background
  • Ask pin code screen for operations [no whitelisted ones (transfer, account update, etc. which requires active key)]

Voting component

  • Voting button or component will have slider, so have efficient component to handle this so it can be plugged in into everywhere
  • Slider will have percent and reward amount estimation (check Surfer)

Ionic vs React Native

Ionic

Pros
  • Fast development-testing cycle.
  • It cross-compiles to iOS and Android.
  • You can use TypeScript to develop applications for all platforms.
Cons
  • There could be performance issues if you need to use a lot of callbacks to the native code.
  • If your users prefer the native UI look, the same UI look in all the devices could put them off.
  • Development of advanced graphics or interactive transitions will prove difficult.
  • Working on Webview is slow and it guaranteed low app ratings because of performance.

Ionic is a good choice for prototyping, or projects which have fast development needs.

React

Pros
  • It cross-compiles to iOS and Android.
  • Learn once, write anywhere (still native)
  • React Native is meant for powerfull apps where performance is essential.
  • In React Native you use the Native features of the device without needing any plugin. React Native does not use a web layer over the platform, rather makes use of the device’s core features which gives your users the feeling of a native app.
  • React Native is more stable and feels like a native app.
  • You can use the same code-base to develop applications for Android, iOS. Better performance than Ionic, since the processing of hardware functionalities, are by the specific platform, and not Cordova.

Switch to Realm for storage

Storage persistency is really important before we go too deep into development. eSteem v1 uses localstorage and newer devices iOS/Android cleans localstorage of apps when device is running low on memory, causing issues for user. For instance, user has to login again because their credentials are wiped out without they knowing it, etc.

From what I see, Realm is persistent and improvement over current storage solutions.
https://github.com/realm/realm-js

Let's build component or service that uses realm to handle data storage and database logic should be isolated so that if in future we decide to change it, we can do so without major refactoring.
@talhasch, @hsynterkr any feedback, questions?

alternative: https://github.com/andpor/react-native-sqlite-storage

Pin code structure and UI

Implement Pin code pages and structure.

Light mode: https://zpl.io/Vkn6WXK
Dark mode: https://zpl.io/VKlz6jJ

AC (acceptance criteria)

  • All below points are only for light mode, theming will be separate issue. But please keep in mind theming while structuring components.
  • When app first time launched on any device and user attempts to login, setting pin code will be required and first asked from user to setup.
  • After login is successful and user already has set pin code, password/privateKey will be encrypted on device storage with chosen pincode
  • Pin code setting should ask for Confirm pin code to be sure before saving pin code on device storage
  • Reset pin code page (access it from Settings page)
  • Unlock app page (when application comes from background or opens, user will be prompted to enter pin code when they try to vote/transfer/comment/post/etc. any action that requires use of privateKey/password needs pin code to decrypt password)
  • Cache privateKey/password until next background/close of app, so it won't ask pin code every time to decrypt while using app

PS: Service/component should be customizable so that we can whitelist some operations that will require pin code only once after app restarts, but some operations that will require pin code every time.

Editor component

  • One of the most important components because users will spend most of their time composing and publishing posts/photos/videos/etc.
  • Let's have one of the best editors for mobile, discuss or suggest different libraries below in the comment section of this issue.

Home screen

  • Fix top navigation to fetch proper lists
  • Add real post details to post cards
  • Post Card icons and design discuss with @fildunsky
  • Post card add card extra menu on top right corner of each post card (Bookmark, Reblog, Share, etc.)
  • Feed page for now can only have middle text saying Login to setup your custom Feed points to #2

Post screen

  • Post screen missing post title, add this
  • Fix formatting of markdown
  • Markdown parser improvements copy from (priority: Surfer and last check: Busy, Steemit as well)
  • Improve styling of the page, add padding
  • Post details, footer (votes, comments, reward, author, etc.)
  • Reward details component to see pending reward, promoted amount, payment due time, etc.
  • Voters info component/page to see who has voted, what percent, when, how much reward it was, etc. (see Surfer for more details)

Comments componenet

  • #4 will require comments component to display all comments, build efficient initial comment component, check steemit/busy for examples of this.
  • we should paginate just like Surfer to allow UI to stay light, we don't want to fetch all 100 or 1000 comments in one go because displaying/rendering that will take time while user's mobile screen might only able to show 10 comments max
  • of course comment details (votes, comments, rewards, etc.)

Alpha release priorities

In order they are presented, includes functionality and UI.

Create branch each PR description should reference this issue # and number of task from below:
Example: Issue #12-1

NPA - not priority alpha all rest is priority and we should try to include as many of them as possible.

  • 1. Login (Steemconnect and traditional)
  • 2. Pin code
  • 3. Posts view, proper markdown parsing (check https://github.com/esteemapp/esteem-surfer)
  • 4. Post view with comments
  • 5. User/Author Profile view
  • 6. Settings (Light/Dark theme, notifications, server selection, language selection, currency selection, pin code)
  • 7. Theme changing
  • 8. NPA: Multi language support, for alpha we need structure and en.json file to start translations after alpha
  • 9. Currency selection
  • 10: Search, integration of https://search.esteem.app very customizable (for alpha basic filters should be sufficient)
  • 11: Voting
  • 12: Commenting
  • 13: Posting
  • 14: Image uploads
  • 15: Drafts (Save, List, Edit, Delete)
  • 16: Follow/Unfollow
  • 17: Bookmarking (Add, Remove, List)
  • 18: Favorite authors (Add, Remove, List)
  • 19: Scheduling (Add, Edit, Remove, List)
  • 20: Push notifications + Activities (check Surfer source code, ask @talhasch )
  • 21: Transfer tokens
  • 22: (Un)Delegate
  • 23: Power up/down
  • 24: NPA: Savings operations
  • 25: NPA: Escrow transfers
  • 26: Simple Pointing system, backend is in process

Bottom navigation

Obviously most of them will be just navigation to specific page (home, profile, wallet, notifications pages) but one Submit Story.

When user tap and hold Submit story button, it will show small popover or slider to select type of content user wants to submit, by default it will be post

content_type

Login username validation not working consistent

  • first step the function call lookupAccount data coming as array
  • then we are loking is includes the username then its turn boolean.
  • if it turn true the state goes update to true but border color still red.

Side menu redesign

as per mockup prepare side menu for adding multiple accounts

AC

  • make sure side menu design looks exact like mockup, coloring, spacing, etc.
  • show added users list if there is more than 1 account logged in

Add account

As per mockup, add support to login with additional accounts

AC

  • Adding another account support, which will add new account to local db with keys encrypted with known pin code
  • Plug it into #23

Styles reorganizing

We have styles folder, let's put all styles with screen_name.styles.js so that style changes could be done on separate files, it would help @fildunsky to test with different variations and come up with final tweaks. I have started example here: 97e8ce9

PS. Theming should also be kept in mind when implementing screens along with multi-language support!

Intuitive Login screen

Fields should auto adjust or auto scroll when keyboard is open... now there is no way to enter password
png image

Login screen

  • Design of the page
  • Navigation setup so that logic authorized user can have access to some particular pages and authorization type (Steem or Steemconnect) can also change navigation rules.
  • Authentification via Steem
  • Auth via Steemconnect

SteemConnect Functionalities

The dSteem or SteemConnect functionalities will be triggered according to the user's auth type.

  • Vote
  • Comment
  • Post
  • Wallet Operations

Steemconnect and Auth improvements

We want to have switcher/component that can formulate transactions depending on authentication type: Steemconnect or Auth
This task is to start working on structure that will allow just that.

AC (acceptance criteria)

  • Make sure steemconnect access_token stored and fetched properly (example Surfer)
  • Have flag that indicates user logged in with steemconnect or ordinary auth.
  • Have example of usage for simple operation vote for both cases

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.