Dashboard and swap code refactoring

Author: taimuraamer

e2e/.gitignore

@@ -1,4 +1,5 @@
 node_modules
 videos
 screenshots
-env
+env
+e2e/tests/reports

e2e/cypress.config.js

@@ -3,11 +3,13 @@ const { defineConfig } = require('cypress')
 module.exports = defineConfig({
   // setupNodeEvents can be defined in either
   // the e2e or component configuration
+  reporter: 'cypress-mochawesome-reporter',
   e2e: {
     setupNodeEvents(on, config) {
-      on('before:browser:launch', (browser = {}, launchOptions) => {
-        /* ... */
-      })
+      require('cypress-mochawesome-reporter/plugin')(on);
+      // on('before:browser:launch', (browser = {}, launchOptions) => {
+      //   /* ... */
+      // })
     },
     baseUrl: "https://dev.pangolin.exchange/#",
     supportFile: false,

e2e/cypress/cypress.config.js

@@ -2,7 +2,7 @@
 import selectors from "../fixtures/selectors.json"
 import data from '../fixtures/pangolin-data'
 // import { socialLinks } from '../support/src/dashboard'
-import { pangolinUsefulLinks } from '../support/src/PangolinUsefulLinks'
+// import { pangolinUsefulLinks } from '../support/src/PangolinUsefulLinks'
 // import {switchingValues} from '../support/src/swap'
 
 describe('Dashboard', () => {

e2e/cypress/cypress/fixtures/example.json

@@ -21,7 +21,7 @@
     "showBalanceBtn": "div[class='sc-iqHYmW ehuBYI']",
     "copyAddress": "button[class='sc-fpqIQw sc-lavCMz dSJKFS gMkWzI']",
     "copiedAddress": "span[class='sc-djEslu hqRRlV']",
-    "networkName": "div[class='sc-bdfBQB sc-lkSVJk sc-gqpkzb sc-NGuuG deOOZW ftOKNw MYXyx ebZeoR']",
+    "networkName": "div[class='sc-bdfBQB sc-dPKyGq sc-hFqdOJ sc-dmaBdM deOOZW dEygWr kSbjpq gsvrmo']",
     "networks": "div[class='sc-iqHYmW fqpLOW']",
     "swapSideMenu": "a[id='swap']",
     "dashboardSideMenu": "a[id='dashboard']",
@@ -92,7 +92,7 @@
     "tokensToSwap":"span[class='sc-jJEKmz dAlckP token-symbol-container']",
     "selectTokens":"div[class='sc-iqHYmW ktkHFj']",
     "selectTokensValue":"div[class='sc-iqHYmW sc-frSLGL jlVtaV SWUXq']",
-    "selectTokensMenuClose":"div[class='sc-bgxbtk cODQYo']",
+    "selectTokensMenuClose":"div[class='sc-hHFahi dMukSa']",
     "fromInput":"[id='swap-currency-input']",
     "toInput":"[id='swap-currency-output']",
     "swapBtn":"button[id='swap-button']",
@@ -109,21 +109,21 @@
     "confirmSwapBtn":"button[class='sc-fubCzh cmmhVN']",
     "swappingMsg":"div[class='sc-iqHYmW dqzwLX']",
     "TransactionSubmitted":"div[class='sc-iqHYmW grNjms']",
-    "recentTransactions":"div[class='sc-fIUAFO itZXRL css-1frkxb8']",
-    "transactionLinks":"a[class='sc-hiAVnf jKUipH sc-fKuKOu cIXBIe']",
+    "recentTransactions":"div[class='sc-iYXQCk NcoRw css-1frkxb8']",
+    "transactionLinks":"a[class='sc-fUiULZ cEFGA sc-iiORxA kyUhqb']",
     "swapSuccessfulTransactionLink":"a[class='sc-iqHYmW sc-dFJtaz kvtIuE iwMDfn']",
     "limitSuccessfulTransactionLink":"a[class='sc-iqHYmW sc-nFqVA kvtIuE gPCmBS']",
-    "clearAll":"button[class='sc-gJnOmN dDjmVt']",
-    "transactionAppear":"div[class='sc-fIUAFO henkdw css-gp5dfh']",
-    "accountMenuCloseSwap":"div[class='sc-kEjbQP sc-iMyPae iqcNnm ekaUlm']",
+    "clearAll":"button[class='sc-ekkLND jDievp']",
+    "transactionAppear":"[class='sc-iYXQCk gnmwAj css-gp5dfh']",
+    "accountMenuCloseSwap":"div[class='sc-kEjbQP sc-lkSVJk iqcNnm evTjxg']",
     "notification":"[class='sc-iYXQCk NcoRw css-1a92al5']",
     "notificationViewOnExplorer":"a[class='sc-fUiULZ cEFGA']",
     "transactionRejected":"div[class='sc-iqHYmW flqkxK']",
     "selectTokenBtn":"span[class='sc-jJEKmz jysvvD token-symbol-container']",
     "priceField":"input[class='sc-dQoVA cBTceE sc-eLgNKc jWrmCf']",
     "sellTokenDetailsValues":"div[class='sc-iqHYmW sc-cOajNj YUTNa fQiDUE']",
     "limitPrice":"div[class='sc-iqHYmW gfHqgL']",
-    "tokenBalances":"div[class='sc-iqHYmW sc-frSLGL jlVtaV SWUXq']",
+    "tokenBalances":"div[class='sc-iqHYmW sc-kggwrJ jlVtaV dcZMVK']",
     "swapSideMenuSelect": "div[class='sc-gqPbQI ikudoI'] a",
     "tradeBtns": "[class='sc-eCYdqJ sc-ftvSup fEptdj bnstfL']",
     "fromField": "input[id='swap-currency-input']",
@@ -155,16 +155,20 @@
     "buyBtn":"div[class='sc-iBaQBe KqBsY']",
     "openBtn":"div[class='sc-iBaQBe gKEJqC']",
     "openOrders":"div[class='sc-iqHYmW fppmQG']",
-    "openOrdersSwitch":"div[class='sc-iqHYmW bROwcC']",
+    "openOrdersSwitch":"[class='sc-kEjbQP sc-izEZMo iqcNnm chhdrM']",
     "limitOrderDetails":"div[class='sc-iqHYmW gYCPMW']",
     "openOrderSwitched":"div[class='sc-kEjbQP sc-ioVrgq iqcNnm dNLtJK']",
     "cancelOrderbtn":"button[class='sc-fubCzh czbHIL']",
     "cancelOrderMsg":"div[class='sc-iqHYmW dsooJL']",
     "executionPrice":"div[class='sc-iqHYmW eoGjRd']",
     "cancelOrderBtnPopup":"button[class='sc-fubCzh cmmhVN']",
     "cancellingOrderMsg":"div[class='sc-iqHYmW eWFPnr']",
-    "cancelLimitSuccessfulTransactionLink":"a[class='sc-iqHYmW sc-bxZmPi iYAkFc oODlg']",
-    "tokenSearch":"input[class='sc-dQoVA Jeftv']"
+    "cancelLimitSuccessfulTransactionLink":"a[class='sc-iqHYmW sc-hJOwyE iYAkFc iOEnKa']",
+    "tokenSearch":"input[class='sc-dQoVA Jeftv']",
+    "approveBtn": "button.sc-fubCzh.cmmhVN",
+    "noOrders": "div[class='sc-iqHYmW kscdTb']",
+    "limitTokensLogo": "div[class='sc-bYEvvW iKTEcx'] img[class='sc-ezredP iPgjFG']",
+    "ordersOpen": "div[class='sc-iqHYmW fppmQG']"
   },
   "pangolinLinks":{
     "chart": "[id='charts']",

e2e/cypress/cypress/support/commands.js

@@ -36,9 +36,9 @@ function socialLinks(iteration, socialLinkArray) {
 }
 
 function nativeDetails(native){
-    cy.wait(10000)
-    cy.get(walletAddress).contains('0x33...8C60');
-    cy.get(walletAddress).invoke('text').should('equal', '0x33...8C60');
+    cy.wait(5000)
+    cy.get(walletAddress).contains('0xa0...b166');
+    cy.get(walletAddress).invoke('text').should('equal', '0xa0...b166');
     //Native token details
     cy.get(nativeToken).invoke('text').should('contain', nativeTokenArr[native]);
     cy.get(nativeToken).contains(nativeTokenArr[native]).click()
@@ -47,14 +47,14 @@ function nativeDetails(native){
     cy.get(nativeTokenLogo).should('have.attr', 'alt', `${nativeTokenArr[native]} logo`)
     cy.get(nativeTokenBalance, { timeout: 20000 }).should('be.visible')
     cy.get(nativeTokenBalance).should('not.be.empty');
-    cy.wait(10000)
+    cy.wait(5000)
     for (var i = 0; i <= 3; i++) {
         cy.get(nativeTokenDeatils).contains(nativeTokenDeatilsArr[i]).should('be.visible')
     }
     cy.get(detailsMenuClose).click()
     cy.get(gasToken, { timeout: 50000 }).invoke('text').should('contain', gasTokenArr[native]);
     //Showing status connected
-    cy.get(walletAddress).contains('0x33...8C60').click()
+    cy.get(walletAddress).contains('0xa0...b166').click()
     cy.request('GET', 'https://snowtrace.io/address/0x33CCa68A49B348ec247E0d1216936B5eF5638C60').then( res => {
         expect(res.status).to.equal(200)
     cy.get(changeBtn).contains("Change").click()

e2e/cypress/cypress/support/e2e.js

@@ -1,7 +1,8 @@
 import selectors from '../fixtures/selectors.json'
 import data from '../fixtures/pangolin-data.json'
 
-let {settingBtn, slippageField, tradeDetails, tradeDetailsValues, toEstimated, unitPrice, tokensToSwap, selectTokens, fromInput, confirmSwap, confirmSwapDetails, confirmSwapMsg, confirmSwapBtn, priceField, swapBtn, limitPrice, TransactionSubmitted, transactionLinks, notification, notificationViewOnExplorer, sellTokenDetailsValues, openBtn, openOrders, openOrdersSwitch, openOrderSwitched, limitOrderDetails, amountInTokensSwap, cancelOrderbtn, cancelOrderMsg, executionPrice, cancelOrderBtnPopup, cancellingOrderMsg, tokenSearch} = selectors.swap
+let { testnetBtn } = selectors.dashboard
+let {settingBtn, slippageField, tradeDetails, tradeDetailsValues, ordersOpen, toEstimated, unitPrice, tokensToSwap, selectTokens, fromInput, confirmSwap, confirmSwapDetails, confirmSwapMsg, confirmSwapBtn, priceField, swapBtn, limitPrice, TransactionSubmitted, transactionLinks, notification, notificationViewOnExplorer, sellTokenDetailsValues, openBtn, openOrders, openOrdersSwitch, openOrderSwitched, limitOrderDetails, amountInTokensSwap, cancelOrderbtn, cancelOrderMsg, executionPrice, cancelOrderBtnPopup, cancellingOrderMsg, tokenSearch, approveBtn, noOrders, limitTokensLogo, selectTokenBtn, toInput, buyBtn} = selectors.swap
 let { sellTokenDetailsArr, limitOrderDetailsArr} = data.swap
 function switchingValues (selectIter, headerAssert, token) {
     cy.get('div[class="sc-eCYdqJ sc-dkdnUF fEptdj gilYEX"] div[class="sc-eCYdqJ fEptdj"]').within( $banner => {
@@ -115,7 +116,7 @@ function confirmTradeDetailsftn (toTokenTitle){
 function confirmBtnftn (btnSelector,btnName){
     cy.get(btnSelector).contains(btnName).should('be.visible');
     cy.get(btnSelector).contains(btnName).should("have.css", "background-color", "rgb(255, 200, 0)");
-    cy.get(btnSelector).contains(btnName).click()
+    cy.get(btnSelector).contains(btnName).click({force: true})
 
 }
 
@@ -136,8 +137,29 @@ function limitSellBuyTokenftn(x, y) {
         else {
             cy.get(swapBtn).contains("Invalid condition").should('not.exist');
           }
+
         //Greater than market 
         cy.get(priceField).clear().type(limitArr[y].toFixed(2)); // Re-enter the incremented value
+        cy.wait(5000)
+
+        // Verify and approve if needed
+        cy.get(approveBtn, { timeout: 30000 }).then(($buttons) => {
+            const approveButton = Cypress.$($buttons).filter((_, button) => {
+              const buttonText = Cypress.$(button).text().trim();
+              return buttonText.startsWith('Approve');
+            });
+        
+            if (approveButton.length) {
+              // Token approval is required, perform approval process
+              cy.wrap(approveButton).click();
+              cy.wait(5000); // Wait for the approval process to complete
+              cy.confirmMetamaskPermissionToSpend();
+              cy.wait(10000);
+              // Add assertions here to verify the approval process if needed
+            }
+          });
+
+        // swap button
         cy.get(swapBtn).contains("Place Order").should('be.visible')
         cy.get(swapBtn).contains("Place Order").should("have.css", "background-color", "rgb(255, 200, 0)");
         });
@@ -171,32 +193,60 @@ function limitSellBuyConfirmDetailsftn(token1, token2) {
       expect(textUpdated).to.match(patternUpdated);
     })
 
-    cy.get(limitPrice).eq(2).should('contain', '0x33...8C60')
+    cy.get(limitPrice).eq(2).should('contain', '0xa0...b166')
   }
 
-function limitOrdersftn(navBtn,status){
-    cy.get(confirmSwapDetails).eq(2).contains("Limit Orders").should('be.visible')
-    cy.get(openBtn).eq(2).contains(navBtn).should("have.css", "background-color", "rgb(17, 17, 17)")
-    cy.get(openOrders).eq(0).should('contain', status);
-    cy.get(openOrdersSwitch).eq(0).click()
-    //Limit Order Details 
-    for (var i = 0; i <= 3; i++){
-        cy.get(limitOrderDetails).eq(i + 9).contains(limitOrderDetailsArr[i]).should('be.visible')
+function limitOrdersftn(navBtn, status, logo1, logo2) {
+    cy.get(limitTokensLogo).eq(0).should('have.attr', 'alt', `${logo1} logo`).click();
+    cy.get(limitTokensLogo).eq(1).should('have.attr', 'alt', `${logo2} logo`).click();
+    cy.get(openOrders).eq(0).contains(`${status}`).should('be.visible');
+    cy.get(confirmSwapDetails).eq(2).contains("Limit Orders").should('be.visible');
+    cy.get(openBtn).eq(2).contains(navBtn).should("have.css", "background-color", "rgb(17, 17, 17)");
+  
+    // Limit Order Details 
+    for (var i = 0; i <= 3; i++) {
+            cy.get(limitOrderDetails).eq(i + 9).contains(limitOrderDetailsArr[i]).should('be.visible');
     }
+  
     cy.get(amountInTokensSwap).should("not.be.empty");
-    cy.get(amountInTokensSwap).eq(3).contains(status).should('be.visible')
-}
+    cy.get(amountInTokensSwap).eq(3).contains(`${status}`).should('be.visible');
+  }    
+               
+
 
 function cancelLimitOrderftn(){
+    cy.get(ordersOpen).eq(0).should('contain', 'open').then(($element) => {
+        const text = $element.text();
+        if (text.includes('(P)')) {
+            cy.wait(20000)
+        }});
+    cy.get(ordersOpen).eq(0).should('contain', 'open').click()
     cy.get(cancelOrderbtn).contains("Cancel Order").click()
-        cy.get(confirmSwapDetails).contains("Cancel Order").should('be.visible')
-        cy.get(cancelOrderMsg).invoke('text').then((text) => {
+    cy.get(confirmSwapDetails).contains("Cancel Order").should('be.visible')
+    cy.get(cancelOrderMsg).invoke('text').then((text) => {
             const pattern = /\b(USDC|PNG)\b/;
             expect(text).to.match(pattern);
           });
-       cy.get(executionPrice).contains("Execution Price").should('be.visible') 
-       cy.get(cancelOrderBtnPopup).contains("Cancel Order").should('be.visible').click()
-       cy.get(cancellingOrderMsg).contains("Cancelling order...").should('be.visible')
+    cy.get(executionPrice).contains("Execution Price").should('be.visible') 
+    cy.get(cancelOrderBtnPopup).contains("Cancel Order").should('be.visible').click()
+    cy.get(cancellingOrderMsg).contains("Cancelling order...").should('be.visible')
 }
 
-export {switchingValues, tokenDisable, tokenSwitching, slippage, disconnectWallet, connectWallet1, tradeDetailsftn, selectTokensftn, confirmTradeDetailsftn, confirmBtnftn, limitSellBuyTokenftn, limitSellBuyConfirmDetailsftn, notificationftn,successfulCardftn, limitSellBuyTradeDetailsftn, limitOrdersftn, cancelLimitOrderftn}
+function selectLimitTokensftn(token1, token2, amount, buy){
+    cy.get(testnetBtn).contains("LIMIT").click()
+    if(buy === 1){
+        cy.get(buyBtn).contains("BUY").click()
+    }
+    cy.get(tokensToSwap).click()
+    cy.get(tokenSearch).eq(0).type(token1)
+    cy.get(selectTokens).contains(token1).click()
+    cy.get(selectTokenBtn).contains("Select Token").click()
+    cy.get(tokenSearch).eq(0).type(token2)
+    cy.get(selectTokens).contains(token2).click()
+    cy.get(fromInput).type(amount)
+    cy.wait(5000);
+    cy.get(priceField).should('not.have.value', '0.00');
+    cy.get(toInput).should('not.have.value', '0.00');
+}
+
+export {switchingValues, tokenDisable, tokenSwitching, slippage, disconnectWallet, connectWallet1, tradeDetailsftn, selectTokensftn, confirmTradeDetailsftn, confirmBtnftn, limitSellBuyTokenftn, limitSellBuyConfirmDetailsftn, notificationftn,successfulCardftn, limitSellBuyTradeDetailsftn, limitOrdersftn, cancelLimitOrderftn, selectLimitTokensftn}