Skip to content

Commit

Permalink
Clean up readme files (#441)
Browse files Browse the repository at this point in the history
* Clean up readme files

* Clean up readme files

* Revert "Clean up readme files"

This reverts commit d464b67.

* minor edit
  • Loading branch information
alexandratran authored Oct 27, 2023
1 parent 17290c1 commit 3c1a617
Show file tree
Hide file tree
Showing 8 changed files with 97 additions and 154 deletions.
124 changes: 51 additions & 73 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,17 @@

[![codecov](https://codecov.io/gh/MetaMask/metamask-sdk/graph/badge.svg?token=6B3Z3724OO)](https://codecov.io/gh/MetaMask/metamask-sdk)

The MetaMask SDK enables developers to easily connect their dapps with a MetaMask wallet (Extension or Mobile) no matter the dapp environment or platform.
MetaMask SDK enables developers to easily connect their dapps with the MetaMask browser extension
and MetaMask Mobile.

The MetaMask SDK is a library that can be installed by developers on their projects and will automatically guide their users to easily connect with a MetaMask wallet client. For instance, for dapps running on a desktop browser, the SDK will check if Extension is installed and if not it will prompt the user to install it or to connect via QR code with their MetaMask Mobile wallet. Another example, for native mobile applications, the SDK will automatically deeplink into MetaMask Mobile wallet to make the connection.

The MetaMask SDK instance returns a [provider](https://docs.metamask.io/wallet/concepts/provider-api/).
This provider is the `ethereum` object that developers are already used to. This provider is available for:
It supports the following dapp platforms:

- [Javascript-based apps](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/)
- [React](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/react/)
- [Pure JavaScript](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/pure-js/)
- [Other web frameworks](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/other-web-frameworks/)
- [React Native](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/react-native/)
- [NodeJS](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/nodejs/)
- [Node.js](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/nodejs/)
- [Electron](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/electron/)
- [Gaming apps](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/gaming/)
- [Unity](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/gaming/unity/)
Expand All @@ -23,108 +21,88 @@ This provider is the `ethereum` object that developers are already used to. This
- [iOS](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/mobile/ios/)
- [Android](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/mobile/android/)

Read more about [setting up MetaMask SDK](https://docs.metamask.io/sdk) and
[MetaMask SDK concepts](https://docs.metamask.io/wallet/concepts/sdk/).

This repository contains the JavaScript SDK and examples.
You can also see the [Android SDK repository](https://github.com/MetaMask/metamask-android-sdk/tree/main)
and the [iOS SDK repository](https://github.com/MetaMask/metamask-ios-sdk/tree/main).

## Features

- Session persistence
- Multi MetaMask Provider (Let user choose between browser extension and mobile wallet)
- Multi MetaMask provider (let user choose between browser extension and mobile wallet)
- Batch RPC calls (send multiple requests to your wallet at once)
- Read Only RPC calls and Infura Integration
- Wagmi Hook Integration (alpha)
- Read-only RPC calls and Infura integration
- Wagmi hook integration (alpha)
- i18n
- Full Modal UI customization
- smart contract library ( upcoming )
- Full modal UI customization
- Smart contract library (coming soon)

# Getting Started

The following code examplifies importing the SDK into a javascript-based app. For other languages, check the sections bellow.
## Get started

Install the SDK:

```bash
yarn add @metamask/sdk
```

or

```bash
npm i @metamask/sdk
```

## Web (d)apps
### Web dapps

![](./docs/demo_web.gif)

Follow example on:
See the following examples:

- [nextjs demo](./packages/examples/nextjs-demo/README.md)
- [react demo](./packages/examples/create-react-app/README.md)
- [vuejs demo](./packages/examples/vuejs/README.md)
- [pure javascript demo](./packages/examples/pure-javascript/README.md)
- [Next.js](./packages/examples/nextjs-demo/README.md)
- [React](./packages/examples/create-react-app/README.md)
- [Vue.js](./packages/examples/vuejs/README.md)
- [Pure JavaScript](./packages/examples/pure-javascript/README.md)

## React Native
Read the documentation for
[using the SDK with JavaScript](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/)
for more information.

![](./docs/demo_rn_ios.gif)

We recommend using RN v0.71.4 or higher otherwise you may encounter significant performance issues on Android.

Follow example on:

- [react native demo](./packages/examples/reactNativeDemo/README.md)

## NodeJS

```ts
import { MetaMaskSDK } from '@metamask/sdk';
const MMSDK = new MetaMaskSDK({
dappMetadata: {
name: 'NodeJS example',
},
});
MMSDK.connect()
.then((accounts) => {
console.log('MetaMask SDK is connected', accounts);
const ethereum = MMSDK.getProvider();
const balance = await ethereum.request({
method: 'eth_getBalance',
params: accounts,
});

console.debug(`account balance`, balance);
})
.catch((error) => {
console.error(error);
});
```
### React Native

![](./docs/demo_nodejs.gif)

### Electron

![](./docs/demo_electron.gif)

Follow example on:
![](./docs/demo_rn_ios.gif)

- [nodejs example](./packages/examples/nodejs/README.md)
- [electron example](./packages/examples/electronjs/README.md)
We recommend using React Native v0.71.4 or higher to avoid performance issues on Android.

## SDK Options
See the [React Native example](./packages/examples/reactNativeDemo/README.md) and read the
documentation for [using the SDK with React Native](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/react-native/)
for more information.

You can find the full interface in [sdk.ts](./packages/sdk/src/sdk.ts) file but here are the useful options:
### Node.js

- `checkInstallationImmediately`: boolean (default: false) - If true, the SDK will check if MetaMask is installed on the user's browser and send a connection request. If not it will prompt the user to install it. If false, the SDK will wait for the `connect` method to be called to check if MetaMask is installed.
![](./docs/demo_nodejs.gif)

- `useDeeplink`: boolean (default: false) - If true, the SDK will use deeplinks to connect with MetaMask Mobile. If false, the SDK will use universal links to connect with MetaMask Mobile.
See the [Node.js example](./packages/examples/nodejs/README.md) and read the documentation for
[using the SDK with Node.js](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/nodejs/)
for more information.

- `shouldShimWeb3`: boolean (default: false) - If true, the SDK will shim the `window.web3` object with the provider returned by the SDK (useful for compatibility with older browser).
### Electron

- `infuraAPIKey`: string (default: '') - Infura API key for read-only calls and speed up blockchain interactions. We strongly recommend setting allow-list https://docs.infura.io/networks/ethereum/how-to/secure-a-project/use-an-allowlist as your key would be available to anyone using your dapp.
![](./docs/demo_electron.gif)

- `enableDebug`: boolean (default: true) - Send anonymous analytics to MetaMask to help us improve the SDK.
See the [Electron example](./packages/examples/electronjs/README.md) and read the documentation for
[using the SDK with Electron](https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/electron/)
for more information.

- `modals`: see nodejs example to customize or translate each of the displayed modals.
## SDK options

- `i18nOptions.enabled`: boolean (default: false) - Options for enabling i18n multi-language support on the SDK.
See the full list of [JavaScript SDK options](https://docs.metamask.io/wallet/reference/sdk-js-options/).

## Contributing

Please see our [contributing guidelines](./docs/contributing.md) for more information.
To contribute to MetaMask SDK, see the [contribution guidelines](./docs/contributing.md).

## Contacts

Contact the MetaMask SDK team for a complimentary design optimization workshop [here](https://fq1an8d8ib2.typeform.com/to/sC7eK5F1)
Fill out [this form](https://fq1an8d8ib2.typeform.com/to/sC7eK5F1) for a complimentary design
optimization workshop.
74 changes: 9 additions & 65 deletions packages/examples/create-react-app/README.md
Original file line number Diff line number Diff line change
@@ -1,70 +1,14 @@
# Getting Started with Create React App
# Create React App SDK example

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
This project was bootstrapped using [Create React App](https://github.com/facebook/create-react-app).

## Available Scripts
Get started by running:

In the project directory, you can run:
```bash
npm start
```

### `npm start`
See the [available scripts](https://create-react-app.dev/docs/available-scripts) for this project.

Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in your browser.

The page will reload when you make changes.\
You may also see any lint errors in the console.

### `npm test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `npm run build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.

### `npm run eject`

**Note: this is a one-way operation. Once you `eject`, you can't go back!**

If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.

Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.

You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.

## Learn More

You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).

To learn React, check out the [React documentation](https://reactjs.org/).

### Code Splitting

This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)

### Analyzing the Bundle Size

This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)

### Making a Progressive Web App

This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)

### Advanced Configuration

This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)

### Deployment

This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)

### `npm run build` fails to minify

This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
Read the [Create React App documentation](https://create-react-app.dev/docs/getting-started) and
[React documentation](https://react.dev/) to learn more.
13 changes: 8 additions & 5 deletions packages/examples/electronjs/README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
# electronjs example
# Electron SDK example

Get started by running:

### Install dependencies
```bash
yarn install
```

### Start
and

```bash
yarn start
```

If the installation does not work inside this repo run the following command after yarn install:
If the installation does not work inside this repository, run the following command after `yarn install`:

```bash
node node_modules/electron/install.js
node node_modules/electron/install.js
```
12 changes: 10 additions & 2 deletions packages/examples/nextjs-demo/README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,13 @@
## init demo nextjs project
```
# Next.js SDK example

Get started by running:

```bash
yarn
```

and

```bash
yarn dev
```
9 changes: 9 additions & 0 deletions packages/examples/nodejs/README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,13 @@
# Node.js SDK example

Get started by running:

```bash
yarn install
```

and

```bash
yarn start
```
1 change: 1 addition & 0 deletions packages/examples/pure-javascript/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
# Pure JavaScript SDK example
4 changes: 3 additions & 1 deletion packages/examples/reactNativeDemo/README.md
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
Please use react native 0.71.3+ to avoid performance issue on android.
# React Native SDK example

We recommend using React Native v0.71.4 or higher to avoid performance issues on Android.
14 changes: 6 additions & 8 deletions packages/examples/vuejs/README.md
Original file line number Diff line number Diff line change
@@ -1,29 +1,27 @@
# metamasksdk_vuejs
# Vue.js SDK example

## Project setup
To set up the project, run:

```
yarn install
```

### Compiles and hot-reloads for development
To compile and hot-reload for development, run:

```
yarn serve
```

### Compiles and minifies for production
To compile and minify for production, run:

```
yarn build
```

### Lints and fixes files
To lint and fix files, run:

```
yarn lint
```

### Customize configuration

See [Configuration Reference](https://cli.vuejs.org/config/).
For information about customizing your configuration, see the [Vue.js configuration reference](https://cli.vuejs.org/config/).

0 comments on commit 3c1a617

Please sign in to comment.