feat: add deeplinks for Send Eth, Send ERC20 and Approve ERC20 (#313)

* add deeplinks for send transfer and approve * finish deeplinks work * move href to setdeeplinks for send eth * update html href * changed color text darker for light buttons
MetaMask · Apr 9, 2024 · fcc0cff · fcc0cff
1 parent 193f531
commit fcc0cff
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/src/index.html b/src/index.html
@@ -220,6 +220,15 @@ <h4 class="card-title">
                 >
                   Send EIP 1559 Transaction
                 </button>
+                <a
+                  id="sendDeeplinkButton"
+                >
+                  <button
+                    class="btn btn-warning btn-lg btn-block mb-3 text-dark"
+                  >
+                  (Mobile) Send with Deeplink
+                  </button>
+                </a>
                 <hr />
                 <h4 class="card-title">
                   Piggy bank contract
@@ -354,6 +363,17 @@ <h4 class="card-title">
                 >
                   Transfer Tokens
                 </button>
+
+                <a 
+                  id="transferTokensDeeplink"
+                >
+                  <button
+                  class="btn btn-warning btn-lg btn-block mb-3 text-dark"
+                  >
+                  (Mobile) Transfer Tokens with Deeplink
+                  </button>
+                </a>
+
                 <hr />
                 <div class="form-group">
                   <label>Approve to Address</label>
@@ -371,6 +391,15 @@ <h4 class="card-title">
                 >
                   Approve Tokens
                 </button>
+                <a
+                  id="approveTokensDeeplink"
+                >
+                  <button
+                  class="btn btn-warning btn-lg btn-block mb-3 text-dark"
+                  >
+                  (Mobile) Approve Tokens with Deeplink
+                  </button>
+                </a>
 
                 <button
                   class="btn btn-primary btn-lg btn-block mb-3"

diff --git a/src/index.js b/src/index.js
@@ -46,6 +46,11 @@ if (!ethers.utils.isAddress(deployedContractAddress)) {
   deployedContractAddress = '';
 }
 
+let tokenDecimals = urlSearchParams.get('decimals');
+if (!tokenDecimals) {
+  tokenDecimals = '18';
+}
+
 const scrollTo = urlSearchParams.get('scrollTo');
 
 /**
@@ -311,6 +316,13 @@ const maliciousSetApprovalForAll = document.getElementById(
   'maliciousSetApprovalForAll',
 );
 
+// Deeplinks
+const sendDeeplinkButton = document.getElementById('sendDeeplinkButton');
+const transferTokensDeeplink = document.getElementById(
+  'transferTokensDeeplink',
+);
+const approveTokensDeeplink = document.getElementById('approveTokensDeeplink');
+
 // Buttons that require connecting an account
 const allConnectedButtons = [
   deployButton,
@@ -3270,6 +3282,13 @@ const initializeFormElements = () => {
   useWindowProviderButton.onclick = setActiveProviderDetailWindowEthereum;
 };
 
+const setDeeplinks = () => {
+  sendDeeplinkButton.href =
+    'https://metamask.app.link/send/0x0c54FcCd2e384b4BB6f2E405Bf5Cbc15a017AaFb?value=0';
+  transferTokensDeeplink.href = `https://metamask.app.link/send/${deployedContractAddress}/transfer?address=0x2f318C334780961FB129D2a6c30D0763d9a5C970&uint256=4e${tokenDecimals}`;
+  approveTokensDeeplink.href = `https://metamask.app.link/approve/${deployedContractAddress}/approve?address=0x178e3e6c9f547A00E33150F7104427ea02cfc747&uint256=3e${tokenDecimals}`;
+};
+
 /**
  * Entrypoint
  */
@@ -3278,6 +3297,7 @@ const initialize = async () => {
   setActiveProviderDetailWindowEthereum();
   detectEip6963();
   initializeFormElements();
+  setDeeplinks();
 };
 
 window.addEventListener('load', initialize);