Git Product home page Git Product logo

metamask-mobile's Introduction

MetaMask logo

MetaMask

CI CLA

MetaMask is a mobile wallet that provides easy access to websites that use the Ethereum blockchain.

For up to the minute news, follow our Twitter or Medium pages.

To learn how to develop MetaMask-compatible applications, visit our Developer Docs.

MetaMask Mobile

Environment Setup

The code is built using React-Native and running code locally requires a Mac or Linux OS.

  • Install sentry-cli tools: brew install getsentry/tools/sentry-cli

  • Install Node.js version 14 (latest stable) and yarn@1 (latest)

    • If you are using nvm (recommended) running nvm use will automatically choose the right node version for you.
  • Install yarn

  • Install the shared React Native dependencies (React Native CLI, not Expo CLI)

  • Install cocoapods by running:

sudo gem install cocoapods

Device Environment Setup

Android

  • Install the Android SDK, via Android Studio.
    • MetaMask Only: To create production builds, you need to install Google Play Licensing Library via the SDK Manager in Android Studio.
  • Install the Android NDK, via Android Studio's SDK Manager.
    • In the SDK Manager, select the SDK Tools tab and install NDK version 21.4.7075529. You'll need to click "Show Package Details" in order to select the appropriate version.
  • Linux only:
    • Ensure that you have the secret-tool binary on your machine.
      • Part of the libsecret-tools package on Debian/Ubuntu based distributions.
  • Install the correct emulator
  • Finally, start the emulator from Android Studio, and run:

iOS

  • Install the iOS dependencies
  • Install the correct simulator
    • iOS OS Version: Latest, unless told otherwise
    • Device: iPhone 11 Pro

Building Locally

  • Clone this repo:
git clone ...
cd metamask-mobile
  • MetaMask Only: Rename the .*.env.example files (remove the .example) in the root of the project and fill in the appropriate values for each key. Get the values from another MetaMask Mobile developer.
  • Non-MetaMask Only: In the project root folder run
  cp .ios.env.example .ios.env && \
  cp .android.env.example .android.env && \
  cp .js.env.example .js.env
  • Non-MetaMask Only: Create an account and generate your own API key at Infura in order to connect to main and test nets. Fill MM_INFURA_PROJECT_ID in .js.env. (App will run without it, but will not be able to connect to actual network.)

  • Install the app:

yarn setup # not the usual install command, this will run a lengthy postinstall flow
cd ios && pod install && cd .. # install pods for iOS
  • Then, in one terminal, run:
yarn watch

Android

yarn start:android

iOS

yarn start:ios

Build Troubleshooting

Unfortunately, the build system may fail to pick up local changes, such as installing new NPM packages or yarn linking a dependency. If the app is behaving strangely or not picking up your local changes, it may be due to build issues. To ensure that you're starting with a clean slate, close all emulators/simulators, stop the yarn watch process, and run:

yarn clean

# if you're going to `yarn link` any packages,
# do that here, before the next command

yarn watch:clean

# ...and then, in another terminal

yarn start:ios

# or

yarn start:android

If yarn link fails after going through these steps, try directly yarn adding the local files instead.

Debugging

First, make sure you have the following running:

  • yarn watch
  • Your Android emulator or iOS simulator
  • yarn start:android or yarn start:ios

Next, install the Flipper desktop app (verified working with v0.127.0)

  • Once Flipper is installed, configure your system as follows:
    • Install react-devtools: npm i -g [email protected]
    • Update Android SDK location settings by accessing Flipper's settings via the Gear Icon -> Settings
      • Example SDK path: /Users/<USER_NAME>/Library/Android/sdk

Finally, check that the debugger is working:

  • Open your emulator or simulator alongside the Flipper app
  • Flipper should auto-detect the device and the application to debug
  • You should now be able to access features such as Logs

Debugging Physical iOS devices

  • Debugging physical iOS devices requires idb to be installed, which consists of 2 parts
  • Install the two idb parts:
    1. brew tap facebook/fb & brew install idb-companion
    2. pip3.9 install fb-idb (This step may require that you install python3 via python -m pip3 install --upgrade pip)

Debug a website inside the WebView (in-app browser)

Android

  • Run the app in debug mode (for example, in a simulator)
  • Open Chrome on your desktop
  • Go to chrome://inspect/#devices
  • Look for the device and click inspect

iOS

  • Run the app in debug mode (for example, in a simulator)
  • Open Safari on your desktop
  • Go to the menu Develop -> [Your device] -> [Website]

You should see the console for the website that is running inside the WebView

Miscellaneous

Running Tests

Unit Tests

yarn test:unit

E2E Tests (iOS)

First, follow the instructions here to install applesimutils. Then:

yarn test:e2e:ios

E2E Tests (Android)

yarn test:e2e:android

Changing dependencies

Whenever you change dependencies (adding, removing, or updating, either in package.json or yarn.lock), there are various files that must be kept up-to-date.

  • yarn.lock:
    • Run yarn setup again after your changes to ensure yarn.lock has been properly updated.
  • The allow-scripts configuration in package.json
    • Run yarn allow-scripts auto to update the allow-scripts configuration automatically. This config determines whether the package's install/postinstall scripts are allowed to run. Review each new package to determine whether the install script needs to run or not, testing if necessary.
    • Unfortunately, yarn allow-scripts auto will behave inconsistently on different platforms. macOS and Windows users may see extraneous changes relating to optional dependencies.

Architecture

To get a better understanding of the internal architecture of this app take a look at this diagram.

Storybook

We have begun documenting our components using storybook please read the Documentation Guidelines to get up and running.

metamask-mobile's People

Contributors

estebanmino avatar rickycodes avatar andrepimenta avatar cal-l avatar wachunei avatar sethkfman avatar brunobar79 avatar dependabot[bot] avatar ibrahimtaveras00 avatar rekmarks avatar bitpshr avatar etdu avatar fatxx avatar blackdevelopa avatar cortisiko avatar whymarrh avatar tommasini avatar gantunesr avatar andreahaku avatar github-actions[bot] avatar danjm avatar jpcloureiro avatar georgewrmarshall avatar owencraston avatar gudahtt avatar danfinlay avatar adonesky1 avatar meppsilon avatar omnat avatar zidail avatar

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.