Zero-Friction Gasless P2P Transfer

In the last few tutorials, we tried powerful Metakeep APIs to deploy NFT smart contracts, mint tokens, get list of NFTs. However, P2P NFT transfer works differently and leverages the MetaKeep SDK to transfer tokens from one user to another. In this tutorial, we will look into how to integrate the Metakeep SDK and enable P2P gasless transfers.

👍

User wallets are non-custodial

Only the wallet owner can perform operations on the wallet. MetaKeep and developers can't touch user wallets.

You can find the end-to-end working demo here.

Generate Consent Token

❗️

Consent token generation happens in the backend.

Consent token generation requires your API key. Never expose your secrets/keys to the public.

When a P2P transfer is requested on behalf of a user, you get back a Consent Token- looks like a base64 string. This needs to be signed by the user before the transfer can happen. The token also gives MetaKeep the approval to pay for the transaction gas fees and bill you(the developer) later.

👍

Users don't pay gas fee.

MetaKeep provides zero-friction gasless transfers for your users.

Behind the scenes, Consent Token is a cryptographic challenge generated directly by MetaKeep's hardware root of trust, based on non-custodial Private Key Management (ncPKM) infra which can be satisfied exclusively by the cryptographic proof of identity of the end-user.

Step 1: Create a request with the following Parameters

{
    “nft”:{
        “Collection” : <Collection_Address>
    }
    “token”: <Token Id>,
    “from”: { “email” : < Email of the NFT token owner> },
    “to” : { “email” : <Email of the receiver> }
}

Step 2: Make a Post Request to the nft/transfer API

const options = {
    method: 'POST',
    headers: {
        accept: 'application/json',
        'content-type': 'application/json'
    },
    body: JSON.stringify({
    “nft”:{
        “collection” : <Collection_Address>
    }
    “token”: <Token Id>,
    “from”: { “email” : < Email of the NFT token owner> },
    “to” : { “email” : <Email of the receiver> }
});
};

fetch('https://api.metakeep.xyz/v2/app/nft/transfer', options)
    .then(response => response.json())
    .then(response => console.log(response))
    .catch(err => console.error(err));

On successful request, you will get a Consent Token in the response.

{
   "status": "USER_CONSENT_NEEDED",
   "consentToken": "CrgBAQIDAHjkSP_5liFU1kRiwcsjaYhL70lMH28zlSAGMUGu-qcyhwFlzokiZCBBJXIGos8D3l02AAAAfjB8BgkqhkiG9w0BBwagbzBtAgEAMGgGCSqGSIb3DQEHATAeBglghkgBZQMEAS4wEQQMFqkScqTlO68uvf6-AgEQgDvbTbd4sVsiGC9kpvrQcvRdl0LMFiVmg0K0eHZnlYm1M1mMyOV4X99ONhwBF3DHbtEcHs_Hfpg9AtHdExK1AgoM6uVs1U4BA3NKsVb5EqQCOPEYB6rgp_v5U-K71Rm7g1bbPhLKchRonB2teGsr7mi3tsENX0pm4fRn8al8EbeHmiSQCtvK-qAFr6SMYHW9wkc3_HBmrYYz6NbZpmie8xn3UllEy7YyWHEh7nRCajXKF79j3k-DOsdoWUe58ML_blzpicwcsNB358A7pIe6-hBn4XNL5wll_UXJEQBmDAPLp650CXmINwJWawWnQo3Jj4neTtNzXepLIWmJXRX1oW-hMyYq6Ng5oWxdkuCTqRnhRTxD5esADlbzArq8RZkM4lcPX2uNhcxAvMVS9sEhTVeFHTsuXKS-b1y-e7g5FKfe-5_lDdN-tX76LttLBWAbp05HFv5cXsAMDvI4y7_zVDQ0zDmKu4InZ_zgfJuwTh5faX98Sg=="
}

Step 3: Get user approval

Once you have the consent token, use the SDK to get the user's approval for NFT transfer.

const consent = await sdk.getConsent(consentToken);

Running the Demo Application

You can find the end-to-end working demo here. Follow these steps to get the demo running:

Step 1: Prerequisite

Before proceeding, you need to finish the first part of the tutorial Create your First NFT collection and Mint Tokens. Once you have the collection address and token ID, store it somewhere because we would need that later.

Step 2: Update .env file

Update the .env file with the API key and collection address you got in the first step.

Step 3: Start backend server

Navigate to the ntfs/backend directory. Then, start the server

npm install
npm run start

This will start the server at port number 3001. This server will generate a consent token for nft transfer.

Step 4: Transfer on the webpage

To test on the mobile app, skip to Step 5 below.

1: Start frontend

Open a new terminal window and navigate to the nfts/frontend directory and run the following command.

npm install
npm run start

This will open the demo application in your browser.

Enter your email and tap the List NFT button. This will show all NFTs owned by the user.

Enter the email of the user to whom you want to transfer in the to field and tap the Transfer button. This will pop up the user approval UI.

2: Approve the transfer

For verification, MetaKeep will send an OTP to the email of the user that owns the NFT. Copy the OTP and paste it into the approval UI.

Once the verification succeeds, MetaKeep will queue a new transaction to the blockchain for NFT transfer.

After you close the window, you can view the transaction details as shown below.

MetaKeep, behind the scenes, employs several strategies to make sure transactions succeed, and at the lowest cost. You can also use Transaction Status API to check transaction status.

Step 5: Transfer on the mobile app

1: Update the app_id

You can find the app_id in the MetaKeep developer console. Update the app_id to customize the appearence by following the steps below:

• For android, update the app_id in the gradle file and the SDK initialization code.
• For iOS, update the app_id in the SDK initialization code.

2: Run the mobile app

Run the android app in nfts/mobile/android directory using Android Studio or run the iOS app in nfts/mobile/ios directory using Xcode.

This will start the mobile app in the Android/iOS emulator.

Enter your email and tap the Get NFTs button. This will show all NFTs owned by the user.

Tap the Details button, enter the email of the user to whom you want to transfer in the to the field, and tap the Transfer button. This will pop up the user approval UI.

3: Approve the transfer

For verification, MetaKeep will send an OTP to the email of the user that owns the NFT. Copy the OTP and paste it into the approval UI.

Once the verification succeeds, MetaKeep will queue a new transaction to the blockchain for NFT transfer.

MetaKeep, behind the scenes, employs several strategies to make sure transactions succeed, and at the lowest cost. You can also use Transaction Status API to check transaction status.

Next Steps

Congratulations🎉🎉🎉🎉!!! You have enabled zero-friction and gasless NFT transfers for your users.