A-1207636878260058: referral code support (#168)

* A-1207636878260058: referral code support

* bump version

* cleanup console

package.json

@@ -1,6 +1,6 @@
 {
   "name": "browser-extension",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "private": true,
   "dependencies": {
     "@mintlayer/entropy-generator": "^1.0.2",

public/background-script.js

@@ -50,7 +50,10 @@ browser.runtime.onConnect.addListener((port) => {
         setTimeout(async () => {
           await browser.runtime.sendMessage({
             action: 'createDelegate',
-            data: { pool_id: request.myProperty.message.pool_id },
+            data: {
+              pool_id: request.myProperty.message.pool_id,
+              referral_code: request.myProperty.message.referral_code || '',
+            },
           })
         }, 1000)
       })

public/background.js

@@ -63,7 +63,10 @@ chrome.runtime.onMessageExternal.addListener(function (
               setTimeout(function () {
                 chrome.runtime.sendMessage({
                   action: 'createDelegate',
-                  data: { pool_id: request.pool_id },
+                  data: {
+                    pool_id: request.pool_id,
+                    referral_code: request.referral_code || '',
+                  },
                 })
               }, 1000)
             },

public/manifestDefault.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Mojito - A Mintlayer Wallet",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "short_name": "Mojito",
   "description": "Mojito is a non-custodial decentralized crypto wallet that lets you send and receive BTC and ML from any other address.",
   "homepage_url": "https://www.mintlayer.org/",

public/manifestFirefox.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Mojito - A Mintlayer Wallet",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "Mojito is a non-custodial decentralized crypto wallet that lets you send and receive BTC and ML from any other address.",
   "homepage_url": "https://www.mintlayer.org/",
   "icons": {

src/components/containers/SendTransaction/SendTransaction.js

@@ -263,6 +263,20 @@ const SendTransaction = ({
     [fee, amountInCrypto],
   )
 
+  useEffect(
+    () => {
+      if (preEnterAddress) {
+        calculateTotalFee({
+          to: preEnterAddress,
+          amount: NumbersHelper.floatStringToNumber(amountInCrypto),
+          fee,
+        })
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [isFormValid, amountInCrypto, fee, preEnterAddress],
+  )
+
   useEffect(() => {
     const validity = originalAmount && AppInfo.amountRegex.test(originalAmount)
     const maxValue = BTC.convertBtcToSatoshi(

src/components/containers/Wallet/Delegation.js

@@ -103,6 +103,7 @@ const Delegation = ({ delegation }) => {
           ></div>
           <div
             style={{
+              left: '30px',
               position: 'absolute',
               top: '50%',
               marginTop: '-38px',

src/index.js

@@ -104,13 +104,18 @@ const App = () => {
               state: {
                 action: 'createDelegate',
                 pool_id: request.data.pool_id,
+                referral_code: request.data.referral_code || '',
               },
             })
             return
           }
           // change route to staking page
           navigate('/wallet/Mintlayer/staking/create-delegation', {
-            state: { action: 'createDelegate', pool_id: request.data.pool_id },
+            state: {
+              action: 'createDelegate',
+              pool_id: request.data.pool_id,
+              referral_code: request.data.referral_code || '',
+            },
           })
         }
 

src/pages/CreateDelegation/CreateDelegation.css

@@ -7,5 +7,9 @@
   justify-content: center;
   align-items: center;
   height: 100%;
+  width: 100%;
   min-height: 400px;
+  position: absolute;
+  z-index: 40;
+  background-color: rgba(255, 255, 255, 0.8);
 }

src/pages/CreateDelegation/CreateDelegation.js

@@ -150,6 +150,31 @@ const CreateDelegationPage = () => {
     })
 
     if (result) {
+      // map txid to referral code
+      try {
+        const REFERRAL_TRACK_ENDPOINT = {
+          mainnet: 'https://api-server.mintlayer.org/track',
+          testnet: 'https://api-server-lovelace.mintlayer.org/track',
+        }
+        const referralCode = state?.referral_code || ''
+        if (referralCode) {
+          const txid = result
+          // send request to api server to track txid and referral_code
+          await fetch(REFERRAL_TRACK_ENDPOINT[networkType], {
+            method: 'POST',
+            headers: {
+              'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+              txid,
+              referral_code: referralCode,
+            }),
+          })
+        }
+      } catch (error) {
+        console.error('Error:', error)
+      }
+
       await fetchDelegations()
     }
 
@@ -164,22 +189,17 @@ const CreateDelegationPage = () => {
 
   const loading = preEnterAddress && (fetchingBalances || fetchingUtxos)
 
-  if (loading) {
-    return (
-      <div>
-        <div className="page-loading">
-          <VerticalGroup>
-            <Loading />
-          </VerticalGroup>
-        </div>
-      </div>
-    )
-  }
-
   return (
     <>
       <div className="page">
         <VerticalGroup>
+          {loading ? (
+            <div className="page-loading">
+              <Loading />
+            </div>
+          ) : (
+            <></>
+          )}
           <SendTransaction
             totalFeeFiat={totalFeeFiat}
             totalFeeCrypto={totalFeeCrypto}

src/pages/CreateRestore/CreateRestore.js

@@ -76,7 +76,7 @@ const CreateRestorePage = () => {
           className="footnote-version"
           data-testid="footnote-name"
         >
-          v1.2.6
+          v1.2.7
         </small>
       </div>
     </div>