Integration for in-Wallet Apps

What is the in-Wallet app?

In-wallet apps present opportunities for browser game developers by providing direct access to a large and engaged audience of metapro wallet users. The interface, where these wallet-integrated games are launched, enables quick and smooth interaction with wallet users, allowing developers to harness the vast potential of the web3 ecosystem. Additionally, the built-in provider facilitates web3 transactions and direct connections with wallet users, eliminating the need for traditional logins and passwords.

The Biggest Advantages of Using In-Wallet Apps

• Account Creation and DApp Integration: Easily create game accounts and DApps using web3 login directly from the wallet.

• Enhanced Security: All transactions are encrypted, ensuring high-level security as a core priority of the metapro protocol.

• Built-in Provider Support: In-wallet apps support logging into the injected provider, allowing any project that connects to web3 this way to use it without needing to develop additional features.

• Developer-Friendly Documentation: Comprehensive and developer-friendly documentation enables the use of many powerful metapro features, including game leaderboards and NFT listings.

• Community-Driven Development (CDD): metapro adopts a Community-Driven Development approach, considering the needs of the community and the projects integrating with us to build an exceptional gaming ecosystem.

Use Cases for Your Project

• Retention: Foster user engagement by building a community around games, utilizing shared leaderboards, and allowing users to easily add in-wallet games to their favorites.

• Web3 Transactions: Conduct secure transactions using a multichain wallet, offering flexibility beyond a single network.

How can I list my game in metapro Wallet?

Any project can easily apply to metapro to list its game within the wallet. If the game is ready and has essential elements like a title, description, and a link where users can start playing, the next step is simply to fill out a straightforward submission form and provide promotional materials for the game. User engagement can increase when they utilize the wallet's built-in features, such as logging into the game via the integrated web3 provider within the same window where the game launches. Link to form: https://forms.clickup.com/26441698/f/t6xz2-11152/384ALI6TOS1JCO0H89

Possible scenarios to list the game

1. Simple web application

Browser game development is typically associated with the use of HTML, CSS, and JavaScript. Many developers also leverage pre-built engines like Construct2/Construct3, Godot, GameMaker, and others. Regardless of the tools used, developers should prioritize ensuring that the game runs smoothly and delivers an enjoyable experience.

Metapro Wallet allows you to list simple web applications. These applications can be added to our directory even if they do not have advanced features such as login methods, external integrations, or user management systems.

We only require that the application be fully functional and comply with the security and usability guidelines that apply to our application. As a result, even the simplest applications that serve entertainment, education, or other purposes can easily find their place in metapro Wallet and be accessible to a wide range of users.

2. Integration with in-Wallet provider

Each in-wallet game is launched within the wallet window, which has direct access to the web3 provider. By using the @ethersproject/providers library, we can create an instance of the provider that includes a signer—i.e., the wallet user.

It's important to note that this approach does not rely on the WalletConnect package but instead uses the injected Ethereum provider directly.

import {ExternalProvider, Web3Provider} from '@ethersproject/providers'

const provider = new Web3Provider(window.ethereum as ExternalProvider)

const signer = await privider.getSigner()
const address = await signer.getAccount()

// address that is currently logged in from provider

Reading the web3 data

const balance = await provider.getBalance(accountAddress);
console.log(`Balance: ${balance.toString()} wei`);

const blockNumber = await provider.getBlockNumber();
console.log(`Current block number: ${blockNumber}`);

const gasPrice = await provider.getGasPrice();
console.log(`Current gas price: ${gasPrice.toString()} wei`);

const network = await provider.getNetwork();
console.log(`Network: ${network.name} (${network.chainId})`);

Sending transactions

const blockNumber = await provider.send('eth_blockNumber', []);

const balance = await provider.send('eth_getBalance', ['0xYourAccountAddress', 'latest']);

const chainId = await provider.send('eth_chainId', []);

3. Integration with metaproID system using in-Wallet provider

In the metaproID ecosystem, developers have the option to list their apps as in-Wallet Apps in our metapro Wallet. To get the most out of our ecosystem, developers can integrate their apps into metaproID using Web3 technology.

Integration with metaproID via in-Wallet provider

MetaproID provides a comprehensive API to manage user identity and authorization within the ecosystem. Developers can add support for Web3 in their in-Wallet Apps to allow users to securely log in and interact with the app using their cryptocurrency wallets.

Diagram illustrates the login flow in metaproID

Example of the login process

1. The user initiates the login process via the app.

2. A Web3Provider object is created in the browser using window.ethereum.

3. A GET request is made to /v2/auth/web3/signature/hash with a header containing the wallet address (x-account-wallet).

4. The user signs a message using the personal_sign function.

5. The signed message is returned to the API, which checks if the user has an account and whether they have accepted the terms of service.

6. If the user has an account and has accepted the terms, a POST request is sent to /v2/auth/web3/login to complete the login process.

Example of the account creation process

The process is similar to the login process, with the difference being that if the user does not have an account or has not accepted the terms, additional information is sent during the POST request to /v2/auth/web3/login, such as personal details and terms acceptance.

The diagram shows an example of the user login process for metaproID using provider web3

Endpoints needed to integrate in-Wallet app with metaproID

Generate login hash

GET /v2/auth/web3/signature/hash

This endpoint is used to get a hash for the login process. It is required to log in with a wallet address.

Headers

Name	Example value
x-account-wallet	0xd1afbab5cacb45491ce002a6026c1401340eae6a

Response

200

{
  "hash": "string"
}

Check if the user exists based on the wallet address

GET /v2/auth/web3/check/{wallet}

Check if the user has an account in the system and if he has to accept the regulations based on WEB3

Params

Name	Type	Required	Description
wallet	string	true	The wallet address to check

Query

Name	Type	Required	Description
projectId	string	true	The project ID to check the wallet against
externalAccountType	string	false	The type of external account to check

Response

200

{
  "hasAccount": true,
  "hasRulesChecked": true,
  "hasExternalAccount": true
}

400

{
  "statusCode": 400,
  "messages": [
    "Name must be in string format",
    "Name must be minimum 2 characters long"
  ],
  "error": "Bad Request"
}

Logging into an existing account or creating a new account

POST /v2/auth/web3/login

Login user if he exists in the database or create a new account

Headers

Name	Example value
x-account-login-hash	FjWEtwGDoWmD7NAk5b6niTZFAG1Di-r6BgtzmLqWWBFGlKbPiM
x-account-wallet	0xd1afbab5cacb45491ce002a6026c1401340eae6a

Body

Name	Type	Required	Description
wallet	string	true	Wallet address
signature	string	true	Signature
projectId	string	true	Project ID
rulesChecked	boolean	false	Rules checkbox used in the registration process or in the rules acceptance process with an existing account
personalDetails	object	false	Personal details of the user used in the registration process
referralSettingsId	string	false	Referral settings ID used in the registration process
referralCode	string	false	Referral code used in the registration process
externalLoginData	object	false	External login data used in the registration process

Response

200

{
  "token": {
    "accessToken": "string",
    "tokenType": "string"
  },
  "account": {
    "id": "572843fa-9eb3-45d6-82ba-33ba5b4406c7",
    "userId": "572843fa-9eb3-45d6-82ba-33ba5b4406c7",
    "isMetaproAdmin": false,
    "elympicsUserId": "572843fa-9eb3-45d6-82ba-33ba5b4406c7",
    "role": [
      "user"
    ],
    "addresses": [
      {
        "wallet": "0xdd094342c13F9E4340E2c07C63D9fD98e7BA1C62"
      }
    ],
    "socialMedia": [
      {
        "name": "steam",
        "value": "https://steam.com/my-account",
        "createdAt": "2022-05-25T16:17:01.797Z",
        "updatedAt": "2022-05-25T16:17:01.797Z"
      }
    ],
    "externalAccounts": [
      {
        "name": "steam",
        "data": {},
        "createdAt": "2022-05-25T16:17:01.797Z",
        "updatedAt": "2022-05-25T16:17:01.797Z"
      }
    ],
    "rulesCheckbox": {
      "checked": true,
      "updatedAt": "2022-05-25T16:17:01.797Z"
    },
    "personalDetails": {
      "email": "[e-mail]",
      "username": "johny_bravo",
      "country": "PL",
      "firstName": "Adam",
      "lastName": "Kowalski",
      "birthDate": "2022-05-25T16:17:01.797Z",
      "bio": "Some text about me",
      "avatar": "qwer-qwer-qwer-qwer.png",
      "banner": "fda-fda-fdsa-fdas.jpg",
      "updatedAt": "2022-05-25T16:17:01.797Z"
    },
    "engagementPoints": 0,
    "visitedAt": "2022-05-25T16:17:01.797Z",
    "createdAt": "2022-05-25T16:17:01.797Z",
    "updatedAt": "2022-05-25T16:17:01.797Z"
  }
}

400

{
  "statusCode": 400,
  "messages": [
    "Name must be in string format",
    "Name must be minimum 2 characters long"
  ],
  "error": "Bad Request"
}

DEMO repo: https://github.com/Augmented-Life-Studio/metapro-injected-web DEMO app build: https://demo-app.metapro.one