From f0dbc07bd3ff3ec28ae825f87dfd20ea0332d02d Mon Sep 17 00:00:00 2001 From: Shine Li Date: Wed, 24 Jul 2024 15:57:29 +1000 Subject: [PATCH] Use NX for more jobs in CI (#1991) --- .github/actions/pr-setup/action.yaml | 27 + .../workflows/build-lint-typecheck-test.yaml | 219 +-- nx.json | 32 +- package.json | 8 +- packages/checkout/README.md | 12 - packages/checkout/sdk/package.json | 1 - packages/checkout/widgets-lib/package.json | 2 - .../ConnectLoader/ConnectLoader.cy.tsx | 380 ---- .../FeesBreakdown/FeesBreakdown.cy.tsx | 109 -- .../src/components/Footer/FooterButton.cy.tsx | 78 - .../src/components/Footer/FooterLogo.cy.tsx | 28 - .../components/Footer/QuickswapFooter.cy.tsx | 35 - .../SelectForm/SelectForm.cy.tsx | 125 -- .../TextInputForm/TextInputForm.cy.tsx | 44 - .../components/Header/HeaderNavigation.cy.tsx | 160 -- .../src/components/Status/StatusView.cy.tsx | 89 - .../CryptoFiatProvider.cy.tsx | 55 - .../src/views/loading/LoadingView.cy.tsx | 17 - .../src/views/top-up/TopUpView.cy.tsx | 412 ---- .../src/widgets/bridge/BridgeWidget.cy.tsx | 1715 ----------------- .../src/widgets/connect/ConnectWidget.cy.tsx | 543 ------ .../src/widgets/on-ramp/OnRampWidget.cy.tsx | 82 - .../on-ramp/views/OrderInProgress.cy.tsx | 27 - .../src/widgets/swap/GeoblockLoader.cy.tsx | 82 - .../src/widgets/swap/SwapWidget.cy.tsx | 714 ------- .../widgets/swap/components/SwapForm.cy.tsx | 1187 ------------ .../swap/views/ApproveERC20Onboarding.cy.tsx | 274 --- .../src/widgets/swap/views/SwapCoins.cy.tsx | 122 -- .../widgets/swap/views/SwapInProgress.cy.tsx | 35 - .../src/widgets/wallet/WalletWidget.cy.tsx | 788 -------- .../components/BalanceItem/BalanceItem.cy.tsx | 574 ------ .../components/NetworkMenu/NetworkMenu.cy.tsx | 141 -- .../TokenBalanceList/TokenBalanceList.cy.tsx | 86 - .../wallet/views/WalletBalances.cy.tsx | 308 --- sdk/package.json | 2 +- 35 files changed, 66 insertions(+), 8447 deletions(-) create mode 100644 .github/actions/pr-setup/action.yaml delete mode 100644 packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdown.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/components/Footer/FooterButton.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/components/Footer/FooterLogo.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/components/Footer/QuickswapFooter.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/components/Header/HeaderNavigation.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/components/Status/StatusView.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/context/crypto-fiat-context/CryptoFiatProvider.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/views/loading/LoadingView.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/views/top-up/TopUpView.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/on-ramp/views/OrderInProgress.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/swap/GeoblockLoader.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/swap/SwapWidget.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/swap/views/ApproveERC20Onboarding.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/swap/views/SwapCoins.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/swap/views/SwapInProgress.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.cy.tsx delete mode 100644 packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx diff --git a/.github/actions/pr-setup/action.yaml b/.github/actions/pr-setup/action.yaml new file mode 100644 index 0000000000..0d2ec1d2dc --- /dev/null +++ b/.github/actions/pr-setup/action.yaml @@ -0,0 +1,27 @@ +name: "PR Setup" +description: "Do necessary setup for jobs in PR workflow" + +runs: + using: "composite" + steps: + - name: Derive appropriate SHAs for base and head for `nx affected` commands + uses: nrwl/nx-set-shas@v3 + + - name: Use Node.js + uses: actions/setup-node@v4 + with: + node-version-file: ".nvmrc" + registry-url: https://registry.npmjs.org/ + cache: "yarn" + + - name: Restore cached node_modules + id: restore-cache-node_modules + uses: actions/cache@v4 + with: + path: node_modules + key: ${{ runner.os }}-build-cache-deps-${{ hashFiles('yarn.lock') }} + + - name: install depdenencies + if: steps.restore-cache-node_modules.outputs.cache-hit != 'true' + shell: bash + run: yarn install --immutable diff --git a/.github/workflows/build-lint-typecheck-test.yaml b/.github/workflows/build-lint-typecheck-test.yaml index 16085a91f6..0b264ad7b2 100644 --- a/.github/workflows/build-lint-typecheck-test.yaml +++ b/.github/workflows/build-lint-typecheck-test.yaml @@ -12,108 +12,17 @@ env: NX_CLOUD_ACCESS_TOKEN: ${{ secrets.TS_IMMUTABLE_SDK_NX_TOKEN }} jobs: - build: - name: Build - runs-on: ubuntu-latest-4-cores - env: - NODE_OPTIONS: --max-old-space-size=14366 - steps: - - name: Checkout - uses: actions/checkout@v4 - - - name: Use Node.js - uses: actions/setup-node@v4 - with: - node-version-file: ".nvmrc" - registry-url: https://registry.npmjs.org/ - cache: "yarn" - - # this step will also try to cache the node_modules at the end of the workflow run - - name: Restore cached node_modules - id: restore-cache-node_modules - uses: actions/cache@v4 - with: - path: node_modules - key: ${{ runner.os }}-build-cache-deps-${{ hashFiles('yarn.lock') }} - - - name: Install dependencies - if: steps.restore-cache-node_modules.outputs.cache-hit != 'true' - run: yarn install --immutable - - - name: Check Single Package Version Policy - run: yarn syncpack:check - - - name: Build - run: yarn build - - - name: Cache build artifacts - uses: actions/cache@v4 - with: - path: | - ./sdk - ./packages - key: ${{ runner.os }}-build-${{ github.sha }} - - build-passport: - name: Build Passport Sample App - runs-on: ubuntu-latest-4-cores - needs: build - steps: - - name: Checkout - uses: actions/checkout@v4 - - - name: Use Node.js - uses: actions/setup-node@v4 - with: - node-version-file: ".nvmrc" - registry-url: https://registry.npmjs.org/ - cache: "yarn" - - - name: Restore cached node_modules - uses: actions/cache@v4 - with: - path: node_modules - key: ${{ runner.os }}-build-cache-deps-${{ hashFiles('yarn.lock') }} - - - name: Restore cached build artifacts - uses: actions/cache@v4 - with: - path: | - ./sdk - ./packages - key: ${{ runner.os }}-build-${{ github.sha }} - - - name: Build passport sample app - run: yarn workspace @imtbl/passport-sdk-sample-app build - typecheck: name: Typecheck runs-on: ubuntu-latest-4-cores - needs: build steps: - - name: Checkout + - name: Checkout code uses: actions/checkout@v4 - - - name: Use Node.js - uses: actions/setup-node@v4 with: - node-version-file: ".nvmrc" - registry-url: https://registry.npmjs.org/ - cache: "yarn" - - - name: Restore cached node_modules - uses: actions/cache@v4 - with: - path: node_modules - key: ${{ runner.os }}-build-cache-deps-${{ hashFiles('yarn.lock') }} - - - name: Restore cached build artifacts - uses: actions/cache@v4 - with: - path: | - ./sdk - ./packages - key: ${{ runner.os }}-build-${{ github.sha }} + ref: ${{ github.event.pull_request.head.ref }} + fetch-depth: 0 + - name: setup + uses: ./.github/actions/pr-setup - name: Typecheck run: yarn typecheck @@ -121,127 +30,37 @@ jobs: test: name: Test runs-on: ubuntu-latest-8-cores - needs: build env: NODE_OPTIONS: --max-old-space-size=14366 steps: - - name: Checkout + - name: Checkout code uses: actions/checkout@v4 - - - name: Use Node.js - uses: actions/setup-node@v4 - with: - node-version-file: .nvmrc - registry-url: https://registry.npmjs.org/ - cache: "yarn" - - - name: Restore cached node_modules - uses: actions/cache@v4 with: - path: node_modules - key: ${{ runner.os }}-build-cache-deps-${{ hashFiles('yarn.lock') }} - - - name: Restore cached build artifacts - uses: actions/cache@v4 - with: - path: | - ./sdk - ./packages - key: ${{ runner.os }}-build-${{ github.sha }} + ref: ${{ github.event.pull_request.head.ref }} + fetch-depth: 0 + - name: setup + uses: ./.github/actions/pr-setup - name: Test - run: yarn test - - - name: Get reviewing teams - id: reviewer-teams - run: echo "teams=${{ join(github.event.pull_request.requested_teams.*.name, ', ') }}" >> $GITHUB_OUTPUT - - - name: Checkout SDK test coverage - if: ${{ contains(steps.reviewer-teams.outputs.teams, 'Wallets')}} - run: yarn test:checkout:sdk:coverage + run: yarn test --configuration=ci - name: Upload Checkout SDK test coverage artifacts - if: ${{ contains(steps.reviewer-teams.outputs.teams, 'Wallets')}} - uses: actions/upload-artifact@v2 + uses: actions/upload-artifact@v4 with: - name: checkout-sdk-coverage-report - path: ./packages/checkout/sdk/coverage - - cypress: - name: Cypress - runs-on: ubuntu-latest-4-cores - needs: build - env: - NODE_OPTIONS: --max-old-space-size=14366 - steps: - - name: Checkout - uses: actions/checkout@v4 - - - name: Use Node.js - uses: actions/setup-node@v4 - with: - node-version-file: ".nvmrc" - registry-url: https://registry.npmjs.org/ - cache: "yarn" - - - name: Restore cached node_modules - uses: actions/cache@v4 - with: - path: node_modules - key: ${{ runner.os }}-build-cache-deps-${{ hashFiles('yarn.lock') }} - - - name: Get reviewing teams - id: reviewer-teams - run: echo "teams=${{ join(github.event.pull_request.requested_teams.*.name, ', ') }}" >> $GITHUB_OUTPUT - - - name: Restore cached build artifacts - if: ${{ contains(steps.reviewer-teams.outputs.teams, 'Wallets') && !contains(github.event.pull_request.title, 'SKIP-CY') }} - uses: actions/cache@v4 - with: - path: | - ./sdk - ./packages - key: ${{ runner.os }}-build-${{ github.sha }} - - - name: Checkout-widgets cypress tests - if: ${{ contains(steps.reviewer-teams.outputs.teams, 'Wallets') && !contains(github.event.pull_request.title, 'SKIP-CY') }} - working-directory: ./packages/checkout/widgets-lib - run: yarn test:checkout:cypress - - - name: Upload cypress videos artifacts - if: ${{ contains(steps.reviewer-teams.outputs.teams, 'Wallets') && !contains(github.event.pull_request.title, 'SKIP-CY') }} - uses: actions/upload-artifact@v2 - with: - name: checkout-widgets-cypress-videos - path: ./packages/checkout/widgets-lib/cypress/videos - - - name: Upload cypress screenshots artifacts - uses: actions/upload-artifact@v2 - if: failure() - with: - name: checkout-widgets-cypress-screenshots - path: ./packages/checkout/widgets-lib/cypress/screenshots + name: coverages + path: ./packages/**/coverage/* lint: name: Lint runs-on: ubuntu-latest-4-cores - needs: build steps: - - name: Checkout + - name: Checkout code uses: actions/checkout@v4 - - - name: Use Node.js - uses: actions/setup-node@v4 - with: - node-version-file: ".nvmrc" - registry-url: https://registry.npmjs.org/ - cache: "yarn" - - - name: Restore cached node_modules - uses: actions/cache@v4 with: - path: node_modules - key: ${{ runner.os }}-build-cache-deps-${{ hashFiles('yarn.lock') }} + ref: ${{ github.event.pull_request.head.ref }} + fetch-depth: 0 + - name: setup + uses: ./.github/actions/pr-setup - name: Lint run: yarn lint diff --git a/nx.json b/nx.json index 427cd00d2c..a2ec914671 100644 --- a/nx.json +++ b/nx.json @@ -2,34 +2,34 @@ "$schema": "./node_modules/nx/schemas/nx-schema.json", "targetDefaults": { "d": { - "dependsOn": [ - "^d" - ], - "outputs": [ - "{projectRoot}/dist" - ], + "dependsOn": ["^d"], + "outputs": ["{projectRoot}/dist"], "cache": true }, "lint": { "cache": true }, + "typecheck": { + "cache": true, + "dependsOn": ["build"] + }, "test": { "cache": true, - "dependsOn": [ - "build" - ] + "dependsOn": ["build"], + "outputs": ["{projectRoot}/coverage"], + "configurations": { + "ci": { + "codeCoverage": true + } + } }, "build": { - "dependsOn": [ - "^build" - ], - "outputs": [ - "{projectRoot}/dist" - ], + "dependsOn": ["^build"], + "outputs": ["{projectRoot}/dist"], "cache": true } }, "defaultBase": "main", "parallel": 5, "nxCloudAccessToken": "Mzg3ZGY1MWUtYmYyNy00ZmE4LTkyNDAtYjYxZmJmYmE4NWQ3fHJlYWQ=" -} \ No newline at end of file +} diff --git a/package.json b/package.json index e0361c836c..c7b3f513a3 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "dev": "./dev.sh", "docs:build": "typedoc", "docs:serve": "http-server ./docs --cors -p 8080 -c-1", - "lint": "nx run-many -t lint --parallel=5 --no-error-on-unmatched-pattern", + "lint": "nx affected -t lint --parallel=5 --no-error-on-unmatched-pattern", "nx": "nx", "postinstall": "husky install; ./.husky/install_gitleaks.sh", "release": "release-it", @@ -60,12 +60,10 @@ "syncpack:check": "yarn syncpack list-mismatches", "syncpack:fix": "yarn syncpack fix-mismatches", "syncpack:format": "yarn syncpack format", - "test": "nx run-many -t test --parallel=5", - "test:checkout:cypress": "wsrun -p @imtbl/checkout-widgets-lib --exclude-missing -e test:cypress", - "test:checkout:sdk:coverage": "wsrun -p @imtbl/checkout-sdk --exclude-missing -e test:coverage", + "test": "nx affected -t test --parallel=5", "test:examples": "cd examples/ts-immutable-sample && yarn test && yarn test:e2e", "test:vpn": "RUN_VPN_TESTS=1 wsrun --exclude-missing -e test", - "typecheck": "wsrun --exclude-missing typecheck" + "typecheck": "nx affected -t typecheck --parallel=5" }, "workspaces": { "packages": [ diff --git a/packages/checkout/README.md b/packages/checkout/README.md index b4af9ae21f..6ff1cc643d 100644 --- a/packages/checkout/README.md +++ b/packages/checkout/README.md @@ -145,18 +145,6 @@ Running changed jest tests on save in watch mode: yarn test:watch ``` -Running cypress tests headless: - -```bash -yarn test:cypress -``` - -Running cypress tests: - -```bash -yarn test:cypress:open -``` - Linting: ```bash diff --git a/packages/checkout/sdk/package.json b/packages/checkout/sdk/package.json index 4b9a9af9ea..bfce63b87b 100644 --- a/packages/checkout/sdk/package.json +++ b/packages/checkout/sdk/package.json @@ -61,7 +61,6 @@ "start:dev": "CHECKOUT_DEV_MODE=true yarn start", "start:local": "CHECKOUT_LOCAL_MODE=true yarn start", "test": "jest test", - "test:coverage": "jest --coverage", "test:watch": "jest test --watch", "typecheck": "tsc --noEmit" }, diff --git a/packages/checkout/widgets-lib/package.json b/packages/checkout/widgets-lib/package.json index 1e93191f2e..c9416fdfde 100644 --- a/packages/checkout/widgets-lib/package.json +++ b/packages/checkout/widgets-lib/package.json @@ -87,8 +87,6 @@ "lint:fix": "eslint ./src --ext .ts,.jsx,.tsx --max-warnings=0 --fix", "start": "yarn clean && NODE_ENV=development rollup --config rollup.config.js --watch", "test": "jest test --passWithNoTests", - "test:cypress": "NODE_ENV=test cypress run --component --headless", - "test:cypress:open": "NODE_ENV=test cypress open --component --browser electron", "test:watch": "jest test --passWithNoTests --watch", "typecheck": "tsc --noEmit" }, diff --git a/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.cy.tsx b/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.cy.tsx deleted file mode 100644 index 9ca920b778..0000000000 --- a/packages/checkout/widgets-lib/src/components/ConnectLoader/ConnectLoader.cy.tsx +++ /dev/null @@ -1,380 +0,0 @@ -import { - ChainId, ChainName, Checkout, WidgetTheme, -} from '@imtbl/checkout-sdk'; -import { describe, it, cy } from 'local-cypress'; -import { mount } from 'cypress/react18'; -import { Environment } from '@imtbl/config'; -import { Web3Provider } from '@ethersproject/providers'; -import { ViewContextTestComponent } from '../../context/view-context/test-components/ViewContextTestComponent'; -import { cyIntercept, cySmartGet } from '../../lib/testUtils'; -import { ConnectLoader, ConnectLoaderParams } from './ConnectLoader'; -import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig'; - -describe('ConnectLoader', () => { - const config: StrongCheckoutWidgetsConfig = { - environment: Environment.SANDBOX, - theme: WidgetTheme.DARK, - isBridgeEnabled: true, - isSwapEnabled: true, - isOnRampEnabled: true, - }; - - let providerOnStub; - let providerRemoveListenerStub; - let checkout; - beforeEach(() => { - cy.viewport('ipad-2'); - cyIntercept(); - providerOnStub = cy.stub().as('providerOnStub'); - providerRemoveListenerStub = cy.stub().as('providerRemoveListenerStub'); - checkout = new Checkout(); - }); - - it('should show connect widget when no provider', () => { - const params = { - allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET], - checkout, - } as ConnectLoaderParams; - mount( - - {}} - > -
Inner Widget
- - , - , - ); - cySmartGet('wallet-list-metamask').should('be.visible'); - cy.get('#inner-widget').should('not.exist'); - }); - - it('should show ready to connect view when provider but not connected', () => { - const provider = { - on: providerOnStub, - removeListener: providerRemoveListenerStub, - request: () => {}, - getSigner: () => ({ - getAddress: async () => Promise.resolve(''), - }), - }; - const params = { - web3Provider: { provider } as any as Web3Provider, - allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET], - checkout, - } as ConnectLoaderParams; - - cy.stub(Checkout.prototype, 'checkIsWalletConnected') - .as('checkIsWalletConnectedStub') - .resolves({ - isConnected: false, - }); - - mount( - - {}} - > -
Inner Widget
- - , - ); - - cySmartGet('footer-button').should('have.text', 'Ready to connect'); - cy.get('#inner-widget').should('not.exist'); - }); - - it('should show connect widget switch network when user addListener wrong network', () => { - const provider = { - on: providerOnStub, - removeListener: providerRemoveListenerStub, - request: () => {}, - }; - const params = { - targetChainId: ChainId.IMTBL_ZKEVM_TESTNET, - web3Provider: { provider } as any as Web3Provider, - allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET], - checkout, - }; - - cy.stub(Checkout.prototype, 'checkIsWalletConnected') - .as('checkIsWalletConnectedStub') - .resolves({ - isConnected: true, - }); - - cy.stub(Checkout.prototype, 'connect') - .as('connectStub') - .resolves({ - provider: { - provider: { - getSigner: () => ({ - getAddress: async () => Promise.resolve(''), - }), - getNetwork: async () => ({ - chainId: ChainId.ETHEREUM, - name: 'ETHEREUM', - }), - on: providerOnStub, - removeListener: providerRemoveListenerStub, - }, - network: { name: 'ETHEREUM' }, - }, - }); - - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({ - isSupported: false, - }); - - mount( - - {}} - > -
Inner Widget
- - , - ); - - cySmartGet('switch-network-view').should('be.visible'); - cy.get('#inner-widget').should('not.exist'); - }); - - it('should go through connect flow and show inner widget if provider not connected', () => { - const provider = { - on: providerOnStub, - removeListener: providerRemoveListenerStub, - request: async () => Promise.resolve(ChainId.IMTBL_ZKEVM_TESTNET), - }; - const params = { - targetChainId: ChainId.IMTBL_ZKEVM_TESTNET, - web3Provider: { - provider, - getSigner: () => ({ - getAddress: async () => Promise.resolve(''), - }), - isMetaMask: true, - } as any as Web3Provider, - allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET], - checkout, - }; - - cy.stub(Checkout.prototype, 'checkIsWalletConnected') - .as('checkIsWalletConnectedStub') - .onFirstCall() - .resolves({ - isConnected: false, - }) - .onSecondCall() - .resolves({ - isConnected: true, - }); - - cy.stub(Checkout.prototype, 'createProvider') - .as('createProviderStub') - .resolves({ - provider: { - provider, - getSigner: () => ({ - getAddress: async () => Promise.resolve(''), - }), - isMetaMask: true, - } as any as Web3Provider, - }); - - cy.stub(Checkout.prototype, 'connect') - .as('connectStub') - .onFirstCall() - .resolves({ - provider: { - provider: { - on: providerOnStub, - removeListener: providerRemoveListenerStub, - }, - getSigner: () => ({ - getAddress: async () => Promise.resolve(''), - }), - getNetwork: async () => ({ - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - }), - }, - }); - - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({ - isSupported: true, - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - }); - - mount( - - {}} - > -
Inner Widget
- - , - ); - - cySmartGet('footer-button').click(); - cy.get('#inner-widget').should('be.visible'); - }); - - it('should not show connect flow when user already connected', () => { - const provider = { - on: providerOnStub, - removeListener: providerRemoveListenerStub, - request: () => {}, - }; - const params = { - targetChainId: ChainId.IMTBL_ZKEVM_TESTNET, - web3Provider: { - provider, - getSigner: () => ({ - getAddress: async () => Promise.resolve(''), - }), - getNetwork: async () => ({ - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - }), - } as any as Web3Provider, - allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET], - checkout, - }; - - cy.stub(Checkout.prototype, 'checkIsWalletConnected') - .as('checkIsWalletConnectedStub') - .resolves({ - isConnected: true, - }); - - cy.stub(Checkout.prototype, 'connect') - .as('connectStub') - .resolves({ - provider: { - provider: { - on: providerOnStub, - removeListener: providerRemoveListenerStub, - }, - getSigner: () => ({ - getAddress: async () => Promise.resolve(''), - }), - getNetwork: async () => ({ - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - }), - }, - }); - - cy.stub(Checkout, 'isWeb3Provider') - .as('isWeb3ProviderStub') - .returns(true); - - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({ - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - isSupported: true, - }); - - mount( - - {}} - > -
Inner Widget
- - , - ); - - cy.get('#inner-widget').should('be.visible'); - }); - - // TODO: This functionality has been moved into the BaseWidgetRoot. The tests should be moved there - - // describe('wallet events', () => { - // it('should set up event listeners for accountsChanged and chainChanged', () => { - // const provider = { on: providerOnStub, removeListener: providerRemoveListenerStub }; - // const params = { - // web3Provider: { - // provider, - // getSigner: () => ({ - // getAddress: async () => Promise.resolve(''), - // }), - // getNetwork: async () => ({ - // chainId: ChainId.IMTBL_ZKEVM_TESTNET, - // name: ChainName.IMTBL_ZKEVM_TESTNET, - // }), - // } as any as Web3Provider, - // allowedChains: [ChainId.IMTBL_ZKEVM_TESTNET], - // checkout, - // }; - - // cy.stub(Checkout.prototype, 'checkIsWalletConnected') - // .as('checkIsWalletConnectedStub') - // .resolves({ - // isConnected: true, - // }); - - // cy.stub(Checkout.prototype, 'connect') - // .as('connectStub') - // .resolves({ - // provider: { - // provider: { - // on: providerOnStub, - // removeListener: providerRemoveListenerStub, - // }, - // getSigner: () => ({ - // getAddress: async () => Promise.resolve(''), - // }), - // getNetwork: async () => ({ - // chainId: ChainId.IMTBL_ZKEVM_TESTNET, - // name: ChainName.IMTBL_ZKEVM_TESTNET, - // }), - // }, - // }); - - // cy.stub(Checkout, 'isWeb3Provider') - // .as('isWeb3ProviderStub') - // .returns(true); - - // cy.stub(Checkout.prototype, 'getNetworkInfo') - // .as('getNetworkInfoStub') - // .resolves({ - // chainId: ChainId.IMTBL_ZKEVM_TESTNET, - // isSupported: true, - // }); - - // mount( - // - // {}} - // > - //
Inner Widget
- // - // , - // ); - - // cy.get('#inner-widget').should('be.visible'); - - // cySmartGet('@providerOnStub').should('have.been.calledWith', ProviderEvent.ACCOUNTS_CHANGED); - // cySmartGet('@providerOnStub').should('have.been.calledWith', ProviderEvent.CHAIN_CHANGED); - // }); - // }); -}); diff --git a/packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdown.cy.tsx b/packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdown.cy.tsx deleted file mode 100644 index e52f61a5cb..0000000000 --- a/packages/checkout/widgets-lib/src/components/FeesBreakdown/FeesBreakdown.cy.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { describe, it, cy } from 'local-cypress'; -import { mount } from 'cypress/react18'; -import { Button } from '@biom3/react'; -import { ViewContextTestComponent } from '../../context/view-context/test-components/ViewContextTestComponent'; -import { cySmartGet } from '../../lib/testUtils'; -import { SimpleLayout } from '../SimpleLayout/SimpleLayout'; -import { FeesBreakdown } from './FeesBreakdown'; -import { FormattedFee } from '../../widgets/swap/functions/swapFees'; - -describe('FeesBreakdown', () => { - beforeEach(() => { - cy.viewport('ipad-2'); - }); - - it('should show the total fees amount, even if there are no sub fees', () => { - mount( - - - - - - - , - ); - cySmartGet('fee-button').click(); - cySmartGet('Drawer__container__header').should('be.visible'); - cySmartGet('Drawer__container__header').should('have.text', 'Fees'); - cySmartGet('fees-breakdown-content').should('be.visible'); - cySmartGet('fee-item-total-fees').should('be.visible'); - cySmartGet('total-fees__price').should('have.text', 'IMX 1'); - cySmartGet('total-fees__fiatAmount').should('have.text', '≈ USD $0.70'); - }); - - it('should not include totals if only fees are provided', () => { - const fees = [ - { - label: 'Gas fee', - fiatAmount: 'Approx USD $1234.0', - amount: '0.12345', - } as FormattedFee, - { - label: 'Maker fee', - fiatAmount: 'Approx USD $5544.0', - amount: '1234.444', - } as FormattedFee, - ]; - mount( - - - - - - - , - ); - cySmartGet('fee-button').click(); - cySmartGet('fees-breakdown-content').should('be.visible'); - - cySmartGet('fee-item-gas-fee').should('be.visible'); - cySmartGet('gas-fee__price').should('have.text', 'IMX 0.12345'); - cySmartGet('gas-fee__fiatAmount').should('have.text', 'Approx USD $1,234.0'); - - cySmartGet('fee-item-maker-fee').should('be.visible'); - cySmartGet('maker-fee__price').should('have.text', 'IMX 1,234.444'); - cySmartGet('maker-fee__fiatAmount').should('have.text', 'Approx USD $5,544.0'); - - cySmartGet('fee-item-total-fees').should('not.exist'); - }); - - it('should enumerate the provided fees', () => { - const fees = [ - { - label: 'Gas fee', - fiatAmount: 'Approx USD $1234.0', - amount: '0.12345', - } as FormattedFee, - { - label: 'Maker fee', - fiatAmount: 'Approx USD $5544.0', - amount: '1234.444', - } as FormattedFee, - ]; - mount( - - - - - - - , - ); - cySmartGet('fee-button').click(); - cySmartGet('fees-breakdown-content').should('be.visible'); - - cySmartGet('fee-item-gas-fee').should('be.visible'); - cySmartGet('gas-fee__price').should('have.text', 'IMX 0.12345'); - cySmartGet('gas-fee__fiatAmount').should('have.text', 'Approx USD $1,234.0'); - - cySmartGet('fee-item-maker-fee').should('be.visible'); - cySmartGet('maker-fee__price').should('have.text', 'IMX 1,234.444'); - cySmartGet('maker-fee__fiatAmount').should('have.text', 'Approx USD $5,544.0'); - }); -}); diff --git a/packages/checkout/widgets-lib/src/components/Footer/FooterButton.cy.tsx b/packages/checkout/widgets-lib/src/components/Footer/FooterButton.cy.tsx deleted file mode 100644 index ec82abd2fb..0000000000 --- a/packages/checkout/widgets-lib/src/components/Footer/FooterButton.cy.tsx +++ /dev/null @@ -1,78 +0,0 @@ -import { mount } from 'cypress/react18'; -import { ViewContextTestComponent } from '../../context/view-context/test-components/ViewContextTestComponent'; -import { SimpleLayout } from '../SimpleLayout/SimpleLayout'; -import { FooterButton } from './FooterButton'; -import { cySmartGet } from '../../lib/testUtils'; - -describe('Footer Button', () => { - it('should have right aligned large button', () => { - mount( - - console.log('test click')} - /> - )} - /> - , - ); - - cySmartGet('footer-button-container').should('exist'); - cySmartGet('footer-button-container').should('have.css', 'display', 'flex'); - cySmartGet('footer-button-container').should( - 'have.css', - 'flex-direction', - 'row', - ); - cySmartGet('footer-button-container').should( - 'have.css', - 'justify-content', - 'flex-end', - ); - cySmartGet('footer-button').should('have.text', "Let's go"); - }); - - it('should hide button when configured', () => { - mount( - - console.log('test click')} - /> - )} - /> - , - ); - - cySmartGet('footer-button-container').should('exist'); - cySmartGet('footer-button').should('not.exist'); - }); - - it('should show loading icon when configured', () => { - mount( - - console.log('test click')} - /> - )} - /> - , - ); - - cySmartGet('footer-button-container').should('exist'); - cySmartGet('footer-button').should('exist'); - cySmartGet('footer-button__icon').should('have.attr', 'data-icon', 'Loading'); - }); -}); diff --git a/packages/checkout/widgets-lib/src/components/Footer/FooterLogo.cy.tsx b/packages/checkout/widgets-lib/src/components/Footer/FooterLogo.cy.tsx deleted file mode 100644 index f1d1fbcfc7..0000000000 --- a/packages/checkout/widgets-lib/src/components/Footer/FooterLogo.cy.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { mount } from 'cypress/react18'; -import { ViewContextTestComponent } from '../../context/view-context/test-components/ViewContextTestComponent'; -import { SimpleLayout } from '../SimpleLayout/SimpleLayout'; -import { cySmartGet } from '../../lib/testUtils'; -import { FooterLogo } from './FooterLogo'; - -describe('Footer Logo', () => { - it('should show the immutable logo', () => { - mount( - - } /> - , - ); - - cySmartGet('footer-logo-image').should('exist'); - }); - - it('should hide the logo when configured', () => { - mount( - - } /> - , - ); - - cySmartGet('footer-logo-container').should('exist'); - cySmartGet('footer-logo-image').should('not.exist'); - }); -}); diff --git a/packages/checkout/widgets-lib/src/components/Footer/QuickswapFooter.cy.tsx b/packages/checkout/widgets-lib/src/components/Footer/QuickswapFooter.cy.tsx deleted file mode 100644 index 22bba0471f..0000000000 --- a/packages/checkout/widgets-lib/src/components/Footer/QuickswapFooter.cy.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { mount } from 'cypress/react18'; -import { WidgetTheme } from '@imtbl/checkout-sdk'; -import { Environment } from '@imtbl/config'; -import { ViewContextTestComponent } from '../../context/view-context/test-components/ViewContextTestComponent'; -import { SimpleLayout } from '../SimpleLayout/SimpleLayout'; -import { cySmartGet } from '../../lib/testUtils'; -import { QuickswapFooter } from './QuickswapFooter'; - -describe('Quickswap Footer', () => { - it('should show the Quickswap logo', () => { - mount( - - } /> - , - ); - - cySmartGet('quickswap-logo').should('be.visible'); - }); - - it('should show the disclaimer text', () => { - mount( - - } /> - , - ); - - cySmartGet( - 'quickswap-footer-disclaimer-text', - ).should( - 'have.text', - // eslint-disable-next-line max-len - 'Quickswap is a third party app. Immutable neither builds, owns, operates or deploys Quickswap. For further info, refer to Quickswap’s website.', - ); - }); -}); diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.cy.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.cy.tsx deleted file mode 100644 index ed9976c4df..0000000000 --- a/packages/checkout/widgets-lib/src/components/FormComponents/SelectForm/SelectForm.cy.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import { mount } from 'cypress/react18'; -import { describe } from 'local-cypress'; -import { ViewContextTestComponent } from '../../../context/view-context/test-components/ViewContextTestComponent'; -import { SelectForm } from './SelectForm'; -import { cySmartGet } from '../../../lib/testUtils'; - -describe('SelectForm', () => { - it('should show selected option when selected option in option list', () => { - mount( - - {}} - coinSelectorHeading="Select token" - selectedOption="imx" - defaultTokenImage="default-token-image" - /> - , - ); - cySmartGet('select-form-test-select__target__label').should('have.text', 'IMX'); - }); - - it('should show options in options list', () => { - mount( - - {}} - coinSelectorHeading="Select token" - defaultTokenImage="default-token-image" - /> - , - ); - cySmartGet('select-form-test-select__target').click(); - cySmartGet('select-form-test-coin-selector__option-imx').should('exist'); - cySmartGet('select-form-test-coin-selector__option-eth').should('exist'); - }); - - it('should show select token when no selected option', () => { - mount( - - {}} - coinSelectorHeading="Select token" - defaultTokenImage="default-token-image" - /> - , - ); - cySmartGet('select-form-test-select__target__label').should('have.text', 'Select token'); - }); - - it('should show select token when options is empty', () => { - mount( - - {}} - coinSelectorHeading="Select token" - defaultTokenImage="default-token-image" - /> - , - ); - cySmartGet('select-form-test-select__target__label').should('have.text', 'Select token'); - }); - - it('should show Select token when selected option not in options list', () => { - mount( - - {}} - coinSelectorHeading="Select token" - selectedOption="imx" - defaultTokenImage="default-token-image" - /> - , - ); - cySmartGet('select-form-test-select__target__label').should('have.text', 'Select token'); - }); -}); diff --git a/packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.cy.tsx b/packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.cy.tsx deleted file mode 100644 index d35a7caac5..0000000000 --- a/packages/checkout/widgets-lib/src/components/FormComponents/TextInputForm/TextInputForm.cy.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import { mount } from 'cypress/react18'; -import { describe } from 'local-cypress'; -import { ViewContextTestComponent } from '../../../context/view-context/test-components/ViewContextTestComponent'; -import { cySmartGet } from '../../../lib/testUtils'; -import { TextInputForm } from './TextInputForm'; - -describe('TextInputForm', () => { - describe('type number', () => { - it('should convert . into zero number when type is number input', () => { - mount( - - true} - onTextInputChange={() => {}} - /> - , - ); - cySmartGet('text-input-form-test-select__input').type('.'); - cySmartGet('text-input-form-test-select__input').trigger('change'); - cySmartGet('text-input-form-test-select__target__controlledLabel').should('have.text', '0.'); - }); - }); - - describe('type text or no type', () => { - it('should preserve . as .', () => { - mount( - - true} - onTextInputChange={() => {}} - /> - , - ); - cySmartGet('text-input-form-test-select__input').type('.'); - cySmartGet('text-input-form-test-select__input').trigger('change'); - cySmartGet('text-input-form-test-select__target__controlledLabel').should('have.text', '.'); - }); - }); -}); diff --git a/packages/checkout/widgets-lib/src/components/Header/HeaderNavigation.cy.tsx b/packages/checkout/widgets-lib/src/components/Header/HeaderNavigation.cy.tsx deleted file mode 100644 index 48e889d46c..0000000000 --- a/packages/checkout/widgets-lib/src/components/Header/HeaderNavigation.cy.tsx +++ /dev/null @@ -1,160 +0,0 @@ -/* eslint-disable no-console */ -import { describe, it } from 'local-cypress'; -import { mount } from 'cypress/react18'; -import { WidgetTheme } from '@imtbl/checkout-sdk'; -import { ButtCon } from '@biom3/react'; -import { ViewContextTestComponent } from '../../context/view-context/test-components/ViewContextTestComponent'; -import { cySmartGet } from '../../lib/testUtils'; -import { SimpleLayout } from '../SimpleLayout/SimpleLayout'; -import { HeaderNavigation } from './HeaderNavigation'; -import { ButtonNavigationStyles } from './HeaderStyles'; - -describe('HeaderNavigation', () => { - describe('configurable buttons and title', () => { - it('should show back button when configured', () => { - mount( - - } /> - , - ); - - cySmartGet('back-button').should('exist'); - cySmartGet('close-button').should('not.exist'); - cySmartGet('settings-button').should('not.exist'); - cySmartGet('header-title').should('have.text', ''); - }); - - it('should show close button when configured', () => { - mount( - - console.log('close clicked')} - /> - )} - /> - , - ); - - cySmartGet('back-button').should('not.exist'); - cySmartGet('close-button').should('exist'); - cySmartGet('settings-button').should('not.exist'); - cySmartGet('header-title').should('have.text', ''); - }); - - it('should show settings button when configured with on click', () => { - mount( - - console.log('test settings')} - testId="settings-button" - /> - )} - /> - )} - /> - , - ); - - cySmartGet('back-button').should('not.exist'); - cySmartGet('close-button').should('not.exist'); - cySmartGet('settings-button').should('exist'); - cySmartGet('header-title').should('have.text', ''); - }); - - it('should show title and close when configured', () => { - mount( - - console.log('close clicked')} - /> - )} - /> - , - ); - - cySmartGet('back-button').should('not.exist'); - cySmartGet('close-button').should('exist'); - cySmartGet('header-title').should('have.text', 'Test title'); - cySmartGet('settings-button').should('not.exist'); - }); - - it('should show back and close when configured', () => { - mount( - - console.log('close clicked')} - /> - )} - /> - , - ); - - cySmartGet('back-button').should('exist'); - cySmartGet('close-button').should('exist'); - cySmartGet('header-title').should('have.text', ''); - cySmartGet('settings-button').should('not.exist'); - }); - }); - - describe('HeaderNavigation styling', () => { - it('should set solid background when configured', () => { - mount( - - console.log('close clicked')} - /> - )} - /> - , - ); - - cySmartGet('header-navigation-container').should('exist'); - cySmartGet('header-navigation-container').should( - 'have.css', - 'background-color', - 'rgb(231, 231, 231)', - ); - }); - - it('should set transparent background when configured', () => { - mount( - - console.log('close clicked')} - /> - )} - /> - , - ); - - cySmartGet('header-navigation-container').should('exist'); - cySmartGet('header-navigation-container').should( - 'have.css', - 'background-color', - 'rgba(0, 0, 0, 0)', - ); - }); - }); -}); diff --git a/packages/checkout/widgets-lib/src/components/Status/StatusView.cy.tsx b/packages/checkout/widgets-lib/src/components/Status/StatusView.cy.tsx deleted file mode 100644 index 1bae7e51f8..0000000000 --- a/packages/checkout/widgets-lib/src/components/Status/StatusView.cy.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import { describe, it } from 'local-cypress'; -import { mount } from 'cypress/react18'; -import { ViewContextTestComponent } from '../../context/view-context/test-components/ViewContextTestComponent'; -import { cySmartGet } from '../../lib/testUtils'; -import { StatusView } from './StatusView'; -import { StatusType } from './StatusType'; - -describe('status view', () => { - it('shows success text and button', () => { - mount( - - { - // eslint-disable-next-line no-console - console.log('clicked!'); - }} - statusType={StatusType.SUCCESS} - statusText="Test success" - /> - , - ); - - cySmartGet('status-view-container').should('be.visible'); - cySmartGet('status-view').should('be.visible'); - cySmartGet('success-box').should('be.visible'); - cySmartGet('success-icon').should('be.visible'); - cySmartGet('success-text').should('be.visible'); - cySmartGet('success-text').should('have.text', 'Test success'); - cySmartGet('status-action-button').should('be.visible'); - cySmartGet('status-action-button').should('have.text', 'Close'); - cySmartGet('footer-logo-container').should('be.visible'); - }); - - it('shows failure text and button', () => { - mount( - - { - // eslint-disable-next-line no-console - console.log('clicked!'); - }} - statusType={StatusType.FAILURE} - statusText="Test failure" - /> - , - ); - - cySmartGet('status-view-container').should('be.visible'); - cySmartGet('status-view').should('be.visible'); - cySmartGet('failure-box').should('be.visible'); - cySmartGet('failure-icon').should('be.visible'); - cySmartGet('failure-text').should('be.visible'); - cySmartGet('failure-text').should('have.text', 'Test failure'); - cySmartGet('status-action-button').should('be.visible'); - cySmartGet('status-action-button').should('have.text', 'Close'); - cySmartGet('footer-logo-container').should('be.visible'); - }); - - it('shows rejected text and button', () => { - mount( - - { - // eslint-disable-next-line no-console - console.log('clicked!'); - }} - statusType={StatusType.WARNING} - statusText="Test rejected" - /> - , - ); - - cySmartGet('status-view-container').should('be.visible'); - cySmartGet('status-view').should('be.visible'); - cySmartGet('warning-box').should('be.visible'); - cySmartGet('warning-icon').should('be.visible'); - cySmartGet('warning-text').should('be.visible'); - cySmartGet('warning-text').should('have.text', 'Test rejected'); - cySmartGet('status-action-button').should('be.visible'); - cySmartGet('status-action-button').should('have.text', 'Close'); - cySmartGet('footer-logo-container').should('be.visible'); - }); -}); diff --git a/packages/checkout/widgets-lib/src/context/crypto-fiat-context/CryptoFiatProvider.cy.tsx b/packages/checkout/widgets-lib/src/context/crypto-fiat-context/CryptoFiatProvider.cy.tsx deleted file mode 100644 index e493bf67c7..0000000000 --- a/packages/checkout/widgets-lib/src/context/crypto-fiat-context/CryptoFiatProvider.cy.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { mount } from 'cypress/react18'; -import { describe, cy } from 'local-cypress'; -import { Environment } from '@imtbl/config'; -import { CryptoFiat } from '@imtbl/cryptofiat'; -import { CryptoFiatProvider } from './CryptoFiatProvider'; -import { CryptoFiatTestComponent } from './test-components/CryptoFiatTestComponent'; -import { FiatSymbols } from './CryptoFiatContext'; - -describe('Crypto Fiat Provider', () => { - beforeEach(() => { - cy.stub(CryptoFiat.prototype, 'convert') - .as('cryptoFiatStub') - .resolves({}); - }); - - it('should get crypto fiat conversions', () => { - mount( - - - , - ); - - cy.get('@cryptoFiatStub').should( - 'have.been.calledWith', - { - fiatSymbol: FiatSymbols.USD, - tokenSymbols: ['USDC', 'ETH', 'IMX'], - }, - ); - }); - - it('should get crypto fiat conversions with eth and imx added', () => { - mount( - - - , - ); - - cy.get('@cryptoFiatStub').should( - 'have.been.calledWith', - { - fiatSymbol: FiatSymbols.USD, - tokenSymbols: ['USDC', 'ETH', 'IMX'], - }, - ); - }); -}); diff --git a/packages/checkout/widgets-lib/src/views/loading/LoadingView.cy.tsx b/packages/checkout/widgets-lib/src/views/loading/LoadingView.cy.tsx deleted file mode 100644 index 35bc62f7c6..0000000000 --- a/packages/checkout/widgets-lib/src/views/loading/LoadingView.cy.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { mount } from 'cypress/react18'; -import { ViewContextTestComponent } from '../../context/view-context/test-components/ViewContextTestComponent'; -import { LoadingView } from './LoadingView'; -import { cySmartGet } from '../../lib/testUtils'; - -describe('LoadingView', () => { - it('should show the loading spinner with text and no footer logo', () => { - const testLoadingText = 'Loading the view'; - mount( - - - , - ); - - cySmartGet('LoopingText').should('have.text', testLoadingText); - }); -}); diff --git a/packages/checkout/widgets-lib/src/views/top-up/TopUpView.cy.tsx b/packages/checkout/widgets-lib/src/views/top-up/TopUpView.cy.tsx deleted file mode 100644 index cc9bab5541..0000000000 --- a/packages/checkout/widgets-lib/src/views/top-up/TopUpView.cy.tsx +++ /dev/null @@ -1,412 +0,0 @@ -import { - beforeEach, cy, describe, it, -} from 'local-cypress'; -import { mount } from 'cypress/react18'; -import { - IMTBLWidgetEvents, Checkout, GasEstimateType, WalletProviderName, -} from '@imtbl/checkout-sdk'; -import { Environment } from '@imtbl/config'; -import { BigNumber } from 'ethers'; -import { Web3Provider } from '@ethersproject/providers'; -import { UserJourney } from '../../context/analytics-provider/SegmentAnalyticsProvider'; -import { CustomAnalyticsProvider } from '../../context/analytics-provider/CustomAnalyticsProvider'; -import { ViewContextTestComponent } from '../../context/view-context/test-components/ViewContextTestComponent'; -import { TopUpView } from './TopUpView'; -import { cyIntercept, cySmartGet } from '../../lib/testUtils'; -import { orchestrationEvents } from '../../lib/orchestrationEvents'; -import { WalletWidgetTestComponent } from '../../widgets/wallet/test-components/WalletWidgetTestComponent'; -import { WalletState } from '../../widgets/wallet/context/WalletContext'; -import { ConnectionStatus } from '../../context/connect-loader-context/ConnectLoaderContext'; -import { - ConnectLoaderTestComponent, -} from '../../context/connect-loader-context/test-components/ConnectLoaderTestComponent'; - -describe('Top Up View', () => { - const connectLoaderState = { - checkout: new Checkout({ - baseConfig: { environment: Environment.SANDBOX }, - }), - provider: {} as Web3Provider, - connectionStatus: ConnectionStatus.CONNECTED_WITH_NETWORK, - }; - - beforeEach(() => { - cy.viewport('ipad-2'); - cyIntercept(); - }); - - describe('TopUpView render', () => { - it('should render the top up view', () => { - mount( - - - - {}} - /> - - - , - ); - cySmartGet('menu-item-onramp').should('exist'); - cySmartGet('menu-item-swap').should('exist'); - cySmartGet('menu-item-bridge').should('exist'); - cySmartGet('menu-item-advanced').should('exist'); - }); - - it('should hide onramp option', () => { - mount( - - - - {}} - /> - - - , - ); - cySmartGet('menu-item-onramp').should('not.exist'); - cySmartGet('menu-item-swap').should('exist'); - cySmartGet('menu-item-bridge').should('exist'); - }); - - it('should hide swap option', () => { - mount( - - - - {}} - /> - - - , - ); - cySmartGet('menu-item-onramp').should('exist'); - cySmartGet('menu-item-swap').should('not.exist'); - cySmartGet('menu-item-bridge').should('exist'); - }); - - it('should hide bridge option', () => { - mount( - - - - {}} - /> - - - , - ); - cySmartGet('menu-item-onramp').should('exist'); - cySmartGet('menu-item-swap').should('exist'); - cySmartGet('menu-item-bridge').should('not.exist'); - }); - - it('should call close function when close button clicked', () => { - const closeFunction = cy.stub().as('closeFunction'); - mount( - - - - - - - , - ); - cySmartGet('menu-item-onramp').should('exist'); - cySmartGet('menu-item-swap').should('exist'); - cySmartGet('menu-item-bridge').should('exist'); - cySmartGet('close-button').click(); - cy.get('@closeFunction').should('have.been.called'); - }); - - it('should fire onramp event with onramp data on event when onramp clicked', () => { - cy.stub(orchestrationEvents, 'sendRequestOnrampEvent').as( - 'sendRequestOnrampEventStub', - ); - - mount( - - - - {}} - /> - - - , - ); - - cySmartGet('menu-item-onramp').click(); - cy.get('@sendRequestOnrampEventStub').should('have.been.called'); - cy.get('@sendRequestOnrampEventStub').should( - 'have.been.calledWith', - window, - IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, - { tokenAddress: '0x123', amount: '10' }, - ); - }); - - it('should fire swap event with swap data on event when swap clicked', () => { - cy.stub(orchestrationEvents, 'sendRequestSwapEvent').as('sendRequestSwapEventStub'); - - mount( - - - - {}} - /> - - - , - ); - - cySmartGet('menu-item-swap').click(); - cy.get('@sendRequestSwapEventStub').should('have.been.called'); - cy.get('@sendRequestSwapEventStub').should( - 'have.been.calledWith', - window, - IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, - // fromToken and amount should be empty for swap in top up - { fromTokenAddress: '', toTokenAddress: '0x123', amount: '' }, - ); - }); - - it('should fire bridge event with bridge data on event when bridge clicked', () => { - cy.stub(orchestrationEvents, 'sendRequestBridgeEvent').as( - 'sendRequestBridgeEventStub', - ); - - mount( - - - {}} - /> - - , - ); - - cySmartGet('menu-item-bridge').click(); - cy.get('@sendRequestBridgeEventStub').should('have.been.called'); - cy.get('@sendRequestBridgeEventStub').should( - 'have.been.calledWith', - window, - IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, - // tokenAddress and amount should be empty for bridging in top up - { tokenAddress: '', amount: '' }, - ); - }); - }); - - describe('TopUpView render with disabled options', () => { - describe('when swap is unavailable', () => { - beforeEach(() => { - cy.stub(Checkout.prototype, 'isSwapAvailable').as('isSwapAvailableStub').returns(false); - }); - - it('should not fire swap event', () => { - cy.stub(orchestrationEvents, 'sendRequestSwapEvent').as('sendRequestSwapEventStub'); - - mount( - - - - {}} - /> - - - , - ); - - cySmartGet('menu-item-swap') - .should('have.css', 'background-color', 'rgba(243, 243, 243, 0.06)'); - }); - }); - }); - - describe('Fee display', () => { - const cryptoConversions = new Map([ - ['eth', 2000], - ['imx', 1.5], - ['usdc', 1], - ]); - - beforeEach(() => { - cyIntercept(); - }); - - it('should display fees for onramp, swap and bridge', () => { - const baseWalletState: WalletState = { - network: null, - walletProviderName: WalletProviderName.METAMASK, - tokenBalances: [], - supportedTopUps: { - isOnRampEnabled: true, - isSwapEnabled: true, - isBridgeEnabled: true, - isSwapAvailable: true, - }, - walletConfig: { - showNetworkMenu: true, - showDisconnectButton: true, - }, - }; - cy.stub(Checkout.prototype, 'getExchangeFeeEstimate') - .as('getExchangeFeeEstimateStub') - .onFirstCall() - .resolves({ - minPercentage: '3.5', - maxPercentage: '5.5', - }); - cy.stub(Checkout.prototype, 'gasEstimate') - .as('gasEstimateStub') - .onFirstCall() - .resolves({ - gasEstimateType: GasEstimateType.BRIDGE_TO_L2, - fees: { - totalFees: BigNumber.from(1000000000000000), - }, - token: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - }, - }); - - mount( - - - - {}} - /> - - - , - ); - - cySmartGet('menu-item-caption-swap').should('be.visible'); - cySmartGet('menu-item-caption-bridge').should('be.visible'); - cySmartGet('menu-item-caption-onramp').should('be.visible'); - }); - - it('should display placeholder fees for onramp, swap and bridge', () => { - const baseWalletState: WalletState = { - network: null, - walletProviderName: WalletProviderName.METAMASK, - tokenBalances: [], - supportedTopUps: { - isOnRampEnabled: true, - isSwapEnabled: true, - isBridgeEnabled: true, - isSwapAvailable: true, - }, - walletConfig: { - showNetworkMenu: true, - showDisconnectButton: true, - }, - }; - - cy.stub(Checkout.prototype, 'getExchangeFeeEstimate') - .as('getExchangeFeeEstimateStub') - .onFirstCall() - .rejects(); - cy.stub(Checkout.prototype, 'gasEstimate') - .as('gasEstimateStub') - .onFirstCall() - .rejects(); - - mount( - - - {}} - /> - - , - ); - - cySmartGet('menu-item-caption-bridge').contains('$-.-- USD'); - cySmartGet('menu-item-caption-onramp').contains('-.--%'); - }); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.cy.tsx b/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.cy.tsx deleted file mode 100644 index a212a8245f..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/bridge/BridgeWidget.cy.tsx +++ /dev/null @@ -1,1715 +0,0 @@ -import { mount } from 'cypress/react18'; -import { beforeEach, cy } from 'local-cypress'; -import { - ChainId, Checkout, SwitchNetworkResult, WalletProviderName, WidgetTheme, -} from '@imtbl/checkout-sdk'; -import { Environment } from '@imtbl/config'; -import { Passport } from '@imtbl/passport'; -import { TokenBridge } from '@imtbl/bridge-sdk'; -import { BigNumber } from 'ethers'; -import { cyIntercept, cySmartGet } from '../../lib/testUtils'; -import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig'; -import { ViewContextTestComponent } from '../../context/view-context/test-components/ViewContextTestComponent'; -import { Transaction } from '../../lib/clients'; -import BridgeWidget from './BridgeWidget'; -import mockTransactionPending from './test-components/BridgeTransactionWithdrawalPending.json'; -import mockTransactionInProgress from './test-components/BridgeTransactionInProgress.json'; - -type CypressStub = Cypress.Agent>; -describe('BridgeWidget', () => { - // Checkout stubs - let createProviderStub; - let checkIsWalletConnectedStub; - let connectStub; - let switchNetworkStub; - let getNetworkInfoStub; - let getAllBalancesStub; - let sendTransactionStub; - - // provider stubs - let mockMetaMaskProvider; - let mockPassportProvider; - let getNetworkImmutableZkEVMStub; - let getNetworkSepoliaStub; - let estimateGasStub; - let getFeeDataStub; - - // TokenBridge stubs - let getFeeStub: CypressStub; - let getUnsignedApproveBridgeTxStub; - let getUnsignedBridgeTxStub; - let getFlowRateWithdrawTxStub; - - const mockMetaMaskAddress = '0x1234567890123456789012345678901234567890'; - const mockPassportAddress = '0x0987654321098765432109876543210987654321'; - - beforeEach(() => { - // const t = (key) => key; // Simplistic translation function that returns the key - // cy.stub(ReactI18next, 'useTranslation').returns({ t }); - - cy.viewport('ipad-2'); - cyIntercept(); - - createProviderStub = cy.stub().as('createProviderStub'); - checkIsWalletConnectedStub = cy.stub().as('checkIsWalletConnectedStub'); - connectStub = cy.stub().as('connectStub'); - switchNetworkStub = cy.stub().as('switchNetworkStub'); - getNetworkInfoStub = cy.stub().as('getNetworkInfoStub'); - getAllBalancesStub = cy.stub().as('getAllBalancesStub'); - sendTransactionStub = cy.stub().as('sendTransactionStub'); - - Checkout.prototype.createProvider = createProviderStub; - Checkout.prototype.checkIsWalletConnected = checkIsWalletConnectedStub; - Checkout.prototype.connect = connectStub; - Checkout.prototype.switchNetwork = switchNetworkStub; - Checkout.prototype.getNetworkInfo = getNetworkInfoStub; - Checkout.prototype.getAllBalances = getAllBalancesStub; - Checkout.prototype.sendTransaction = sendTransactionStub; - - getFeeStub = cy.stub().as('getFeeStub'); - getUnsignedApproveBridgeTxStub = cy.stub().as('getUnsignedApproveBridgeTxStub'); - getUnsignedBridgeTxStub = cy.stub().as('getUnsignedBridgeTxStub'); - getFlowRateWithdrawTxStub = cy.stub().as('getFlowRateWithdrawTxStub'); - - TokenBridge.prototype.getFee = getFeeStub; - TokenBridge.prototype.getUnsignedApproveBridgeTx = getUnsignedApproveBridgeTxStub; - TokenBridge.prototype.getUnsignedBridgeTx = getUnsignedBridgeTxStub; - TokenBridge.prototype.getFlowRateWithdrawTx = getFlowRateWithdrawTxStub; - - estimateGasStub = cy.stub().as('estimateGasStub'); - getFeeDataStub = cy.stub().as('getFeeDataStub'); - - getNetworkSepoliaStub = cy.stub().as('getNetworkSepoliaStub').resolves({ chainId: ChainId.SEPOLIA }); - - getNetworkImmutableZkEVMStub = cy.stub().as('getNetworkImmutableZkEVMStub') - .resolves({ chainId: ChainId.IMTBL_ZKEVM_TESTNET }); - - mockMetaMaskProvider = { - provider: { - isMetaMask: true, - on: () => { }, - removeListener: () => { }, - }, - getNetwork: getNetworkSepoliaStub, - getSigner: () => ({ - getAddress: () => Promise.resolve(mockMetaMaskAddress), - }), - estimateGas: estimateGasStub, - getFeeData: getFeeDataStub, - }; - - mockPassportProvider = { - provider: { - isPassport: true, - on: () => { }, - removeListener: () => { }, - }, - getNetwork: getNetworkImmutableZkEVMStub, - getSigner: () => ({ - getAddress: () => Promise.resolve(mockPassportAddress), - }), - }; - }); - - const checkout = new Checkout({ - baseConfig: { environment: Environment.SANDBOX }, - passport: {} as any as Passport, - }); - - const widgetConfig: StrongCheckoutWidgetsConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: true, - isOnRampEnabled: true, - isSwapEnabled: true, - }; - - describe('From wallet and network selector', () => { - // it should auto fill fromWeb3Provider if web3provider is injected in - - it('should show from wallet and network selector and select MetaMask and ImmutablezkEVM', () => { - createProviderStub.returns({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub.resolves({ provider: mockMetaMaskProvider }); - - switchNetworkStub.resolves({ - provider: mockMetaMaskProvider, - network: { chainId: ChainId.IMTBL_ZKEVM_TESTNET }, - } as SwitchNetworkResult); - - mount( - - - , - ); - - cySmartGet('wallet-network-selector-from-wallet-select__target').click(); - cySmartGet(`wallet-network-selector-from-wallet-list-${WalletProviderName.METAMASK}`).should('be.visible'); - cySmartGet(`wallet-network-selector-from-wallet-list-${WalletProviderName.PASSPORT}`).should('be.visible'); - - cySmartGet('wallet-network-selector-from-wallet-list-metamask').click(); - - cySmartGet(`wallet-network-selector-network-list-${ChainId.IMTBL_ZKEVM_TESTNET}`).should('be.visible'); - cySmartGet(`wallet-network-selector-network-list-${ChainId.SEPOLIA}`).should('be.visible'); - - cySmartGet(`wallet-network-selector-network-list-${ChainId.IMTBL_ZKEVM_TESTNET}`).click(); - cySmartGet(`wallet-network-selector-${WalletProviderName.METAMASK}-${ChainId.IMTBL_ZKEVM_TESTNET}-button-wrapper`) - .should('exist'); - }); - - it('should select from ImmutablezkEVM by default when selecting Passport', () => { - createProviderStub.returns({ provider: mockPassportProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub.resolves({ provider: mockPassportProvider }); - - mount( - - - , - ); - - cySmartGet('wallet-network-selector-from-wallet-select__target').click(); - cySmartGet(`wallet-network-selector-from-wallet-list-${WalletProviderName.METAMASK}`).should('be.visible'); - cySmartGet(`wallet-network-selector-from-wallet-list-${WalletProviderName.PASSPORT}`).should('be.visible'); - - cySmartGet(`wallet-network-selector-from-wallet-list-${WalletProviderName.METAMASK}`).click(); - - cySmartGet(`wallet-network-selector-${WalletProviderName.PASSPORT}-${ChainId.IMTBL_ZKEVM_TESTNET}-button-wrapper`) - .should('exist'); - }); - - it('should not make getNetwork call if the from wallet provider is Passport', () => { - createProviderStub.returns({ provider: mockPassportProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub.resolves({ provider: mockPassportProvider }); - - mount( - - - , - ); - - cySmartGet('wallet-network-selector-from-wallet-select__target').click(); - cySmartGet(`wallet-network-selector-from-wallet-list-${WalletProviderName.METAMASK}`).should('be.visible'); - cySmartGet(`wallet-network-selector-from-wallet-list-${WalletProviderName.PASSPORT}`).should('be.visible'); - - cySmartGet(`wallet-network-selector-from-wallet-list-${WalletProviderName.PASSPORT}`).click(); - - cySmartGet(`wallet-network-selector-${WalletProviderName.PASSPORT}-${ChainId.IMTBL_ZKEVM_TESTNET}-button-wrapper`) - .should('exist'); - cySmartGet(`wallet-network-selector-network-${ChainId.IMTBL_ZKEVM_TESTNET}-button`).click(); - cySmartGet(`wallet-network-selector-network-list-${ChainId.IMTBL_ZKEVM_TESTNET}`).click(); - - cy.get('@getNetworkImmutableZkEVMStub').should('not.have.been.called'); - }); - - it('should correctly select from wallet and address when from wallet changes', () => { - createProviderStub - .onFirstCall() - .returns({ provider: mockPassportProvider }) - .onSecondCall() - .returns({ provider: mockMetaMaskProvider }); - - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub - .onFirstCall() - .returns({ provider: mockPassportProvider }) - .onSecondCall() - .returns({ provider: mockMetaMaskProvider }); - - switchNetworkStub.resolves({ - provider: mockMetaMaskProvider, - network: { chainId: ChainId.IMTBL_ZKEVM_TESTNET }, - } as SwitchNetworkResult); - - mount( - - - , - ); - - // Choose from Passport - cySmartGet('wallet-network-selector-from-wallet-select__target').click(); - cySmartGet(`wallet-network-selector-from-wallet-list-${WalletProviderName.PASSPORT}`).click(); - cySmartGet(`wallet-network-selector-${WalletProviderName.PASSPORT}-${ChainId.IMTBL_ZKEVM_TESTNET}-button-wrapper`) - .should('exist'); - - // Then change from wallet MetaMask - cySmartGet(`wallet-network-selector-${WalletProviderName.PASSPORT}-${ChainId.IMTBL_ZKEVM_TESTNET}-button-wrapper`) - .click('left'); - cySmartGet(`wallet-network-selector-from-wallet-list-${WalletProviderName.METAMASK}`).click(); - cySmartGet(`wallet-network-selector-network-list-${ChainId.IMTBL_ZKEVM_TESTNET}`).click(); - - cySmartGet(`wallet-network-selector-${WalletProviderName.METAMASK}-${ChainId.IMTBL_ZKEVM_TESTNET}-button-wrapper`) - .should('exist'); - }); - }); - - describe('To wallet selector', () => { - it('should always show MetaMask in the to wallet selector', () => { - createProviderStub.returns({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub.resolves({ provider: mockMetaMaskProvider }); - - switchNetworkStub.resolves({ - provider: mockMetaMaskProvider, - network: { chainId: ChainId.IMTBL_ZKEVM_TESTNET }, - } as SwitchNetworkResult); - - mount( - - - , - ); - - cySmartGet('wallet-network-selector-from-wallet-select__target').click(); - cySmartGet('wallet-network-selector-from-wallet-list-metamask').should('be.visible'); - cySmartGet('wallet-network-selector-from-wallet-list-passport').should('be.visible'); - - cySmartGet('wallet-network-selector-from-wallet-list-metamask').click(); - - cySmartGet(`wallet-network-selector-network-list-${ChainId.IMTBL_ZKEVM_TESTNET}`).should('be.visible'); - cySmartGet(`wallet-network-selector-network-list-${ChainId.SEPOLIA}`).should('be.visible'); - - cySmartGet(`wallet-network-selector-network-list-${ChainId.IMTBL_ZKEVM_TESTNET}`).click(); - cySmartGet(`wallet-network-selector-${WalletProviderName.METAMASK}-${ChainId.IMTBL_ZKEVM_TESTNET}-button-wrapper`) - .should('exist'); - - cySmartGet('wallet-network-selector-to-wallet-select__target').click(); - cySmartGet('wallet-network-selector-to-wallet-list-metamask').should('be.visible'); - cySmartGet('wallet-network-selector-to-wallet-list-passport').should('not.exist'); - }); - - it('should show Passport in the to wallet list when, from wallet is MetaMask and from network is L1', () => { - createProviderStub.returns({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub.resolves({ provider: mockMetaMaskProvider }); - - switchNetworkStub.resolves({ - provider: mockMetaMaskProvider, - network: { chainId: ChainId.SEPOLIA }, - } as SwitchNetworkResult); - - mount( - - - , - ); - - cySmartGet('wallet-network-selector-from-wallet-select__target').click(); - cySmartGet('wallet-network-selector-from-wallet-list-metamask').should('be.visible'); - cySmartGet('wallet-network-selector-from-wallet-list-passport').should('be.visible'); - - cySmartGet('wallet-network-selector-from-wallet-list-metamask').click(); - - cySmartGet(`wallet-network-selector-network-list-${ChainId.IMTBL_ZKEVM_TESTNET}`).should('be.visible'); - cySmartGet(`wallet-network-selector-network-list-${ChainId.SEPOLIA}`).should('be.visible'); - - cySmartGet(`wallet-network-selector-network-list-${ChainId.SEPOLIA}`).click(); - cySmartGet(`wallet-network-selector-${WalletProviderName.METAMASK}-${ChainId.SEPOLIA}-button-wrapper`) - .should('exist'); - - cySmartGet('wallet-network-selector-to-wallet-select__target').click(); - cySmartGet('wallet-network-selector-to-wallet-list-metamask').should('be.visible'); - cySmartGet('wallet-network-selector-to-wallet-list-passport').should('be.visible'); - }); - - it('should clear to wallet selection when from wallet selection changes wallets', () => { - createProviderStub.returns({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub - .onFirstCall() - .resolves({ provider: mockMetaMaskProvider }) - .onSecondCall() - .resolves({ provider: mockPassportProvider }); - - switchNetworkStub.resolves({ - provider: mockMetaMaskProvider, - network: { chainId: ChainId.SEPOLIA }, - } as SwitchNetworkResult); - - mount( - - - , - ); - - cySmartGet('wallet-network-selector-from-wallet-select__target').click(); - cySmartGet('wallet-network-selector-from-wallet-list-metamask').click(); - cySmartGet(`wallet-network-selector-network-list-${ChainId.SEPOLIA}`).click(); - cySmartGet(`wallet-network-selector-${WalletProviderName.METAMASK}-${ChainId.SEPOLIA}-button-wrapper`) - .should('exist'); - - cySmartGet('wallet-network-selector-to-wallet-select__target').click(); - cySmartGet('wallet-network-selector-to-wallet-list-metamask').click(); - cySmartGet(`wallet-network-selector-${WalletProviderName.METAMASK}-${ChainId.IMTBL_ZKEVM_TESTNET}-button-wrapper`) - .should('exist'); - cySmartGet('wallet-network-selector-to-wallet-select__target').should('not.exist'); - - cySmartGet(`wallet-network-selector-${WalletProviderName.METAMASK}-${ChainId.SEPOLIA}-button-wrapper`) - .click(); - cySmartGet(`wallet-network-selector-from-wallet-list-${WalletProviderName.PASSPORT}`).click(); - - cySmartGet('wallet-network-selector-to-wallet-select__target').should('be.visible'); - }); - - it('should clear to wallet selection when from wallet selection changes networks', () => { - createProviderStub.returns({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub - .as('connectStub') - .onFirstCall() - .resolves({ provider: mockMetaMaskProvider }) - .onSecondCall() - .resolves({ provider: { ...mockMetaMaskProvider, getNetwork: getNetworkImmutableZkEVMStub } }); - - switchNetworkStub - .onFirstCall() - .resolves({ - provider: mockMetaMaskProvider, - network: { chainId: ChainId.SEPOLIA }, - } as SwitchNetworkResult); - - mount( - - - , - ); - - cySmartGet('wallet-network-selector-from-wallet-select__target').click(); - cySmartGet(`wallet-network-selector-from-wallet-list-${WalletProviderName.METAMASK}`).click(); - cySmartGet(`wallet-network-selector-network-list-${ChainId.SEPOLIA}`).click(); - - cySmartGet('@createProviderStub').should('have.been.calledOnce'); - cySmartGet('@checkIsWalletConnectedStub').should('have.been.calledOnce'); - cySmartGet('@connectStub').should('have.been.calledOnce'); - - cySmartGet(`wallet-network-selector-${WalletProviderName.METAMASK}-${ChainId.SEPOLIA}-button-wrapper`) - .should('exist'); - - cySmartGet('wallet-network-selector-to-wallet-select__target').click(); - cySmartGet('wallet-network-selector-to-wallet-list-metamask').click(); - cySmartGet(`wallet-network-selector-${WalletProviderName.METAMASK}-${ChainId.IMTBL_ZKEVM_TESTNET}-button-wrapper`) - .should('exist'); - cySmartGet('wallet-network-selector-to-wallet-select__target').should('not.exist'); - - cySmartGet(`wallet-network-selector-network-${ChainId.SEPOLIA}-button`) - .click(); - cySmartGet(`wallet-network-selector-network-list-${ChainId.IMTBL_ZKEVM_TESTNET}`).click(); - - cySmartGet('wallet-network-selector-to-wallet-select__target').should('be.visible'); - }); - }); - - // describe('Next button', () => { - // it('should show when from and to wallet are selected', () => { - // createProviderStub.returns({ provider: mockMetaMaskProvider }); - // checkIsWalletConnectedStub.resolves({ isConnected: false }); - // connectStub.resolves({ provider: mockMetaMaskProvider }); - // - // switchNetworkStub.resolves({ - // provider: mockMetaMaskProvider, - // network: { chainId: ChainId.IMTBL_ZKEVM_TESTNET }, - // } as SwitchNetworkResult); - // - // mount( - // - // - // , - // ); - // - // cySmartGet('wallet-network-selector-from-wallet-select__target').click(); - // cySmartGet('wallet-network-selector-from-wallet-list-metamask').click(); - // cySmartGet(`wallet-network-selector-network-list-${ChainId.IMTBL_ZKEVM_TESTNET}`).click(); - // - // cySmartGet('wallet-network-selector-to-wallet-select__target').click(); - // cySmartGet('wallet-network-selector-to-wallet-list-metamask').click(); - // - // cySmartGet('wallet-network-selector-submit-button') - // .should('be.visible') - // .should('have.text', t('views.WALLET_NETWORK_SELECTION.submitButton.text')); - // }); - // - // it('should not show when from wallet is not selected', () => { - // mount( - // - // - // , - // ); - // - // cySmartGet('wallet-network-selector-submit-button').should('not.exist'); - // }); - // - // it('should not show when to wallet is not selected', () => { - // createProviderStub.returns({ provider: mockMetaMaskProvider }); - // checkIsWalletConnectedStub.resolves({ isConnected: false }); - // connectStub.resolves({ provider: mockMetaMaskProvider }); - // - // switchNetworkStub.resolves({ - // provider: mockMetaMaskProvider, - // network: { chainId: ChainId.IMTBL_ZKEVM_TESTNET }, - // } as SwitchNetworkResult); - // - // mount( - // - // - // , - // ); - // - // cySmartGet('wallet-network-selector-from-wallet-select__target').click(); - // cySmartGet('wallet-network-selector-from-wallet-list-metamask').click(); - // cySmartGet(`wallet-network-selector-network-list-${ChainId.IMTBL_ZKEVM_TESTNET}`).click(); - // - // cySmartGet('wallet-network-selector-to-wallet-select__target').should('be.visible'); - // cySmartGet('wallet-network-selector-submit-button').should('not.exist'); - // }); - // - // it('should go to bridge from', () => { - // createProviderStub.returns({ provider: mockMetaMaskProvider }); - // checkIsWalletConnectedStub.resolves({ isConnected: false }); - // connectStub.resolves({ provider: mockMetaMaskProvider }); - // - // switchNetworkStub.resolves({ - // provider: mockMetaMaskProvider, - // network: { chainId: ChainId.IMTBL_ZKEVM_TESTNET }, - // } as SwitchNetworkResult); - // - // mount( - // - // - // , - // ); - // - // cySmartGet('wallet-network-selector-from-wallet-select__target').click(); - // cySmartGet('wallet-network-selector-from-wallet-list-metamask').click(); - // cySmartGet(`wallet-network-selector-network-list-${ChainId.IMTBL_ZKEVM_TESTNET}`).click(); - // - // cySmartGet('wallet-network-selector-to-wallet-select__target').click(); - // cySmartGet('wallet-network-selector-to-wallet-list-metamask').click(); - // cySmartGet('wallet-network-selector-submit-button').click(); - // cySmartGet('bridge-form').should('be.visible'); - // }); - // }); - - // describe('Happy path', () => { - // it('should complete a withdrawal from Passport to Metamask', () => { - // createProviderStub - // .onFirstCall() - // .returns({ provider: mockPassportProvider }) - // .onSecondCall() - // .returns({ provider: mockMetaMaskProvider }); - // checkIsWalletConnectedStub.resolves({ isConnected: false }); - // connectStub - // .onFirstCall() - // .returns({ provider: mockPassportProvider }) - // .onSecondCall() - // .returns({ provider: mockMetaMaskProvider }); - // getNetworkInfoStub.resolves({ chainId: ChainId.IMTBL_ZKEVM_TESTNET }); - // getAllBalancesStub.resolves({ - // balances: [ - // { - // balance: BigNumber.from('2000000000000000000'), - // formattedBalance: '2.0', - // token: { - // name: 'IMX', - // symbol: 'IMX', - // decimals: 18, - // }, - // }, - // ], - // }); - // - // const feeData = { - // sourceChainGas: BigNumber.from('10000000000000000'), - // imtblFee: BigNumber.from('0'), - // bridgeFee: BigNumber.from('200000000000000000'), - // totalFees: BigNumber.from('210000000000000000'), - // }; - // - // getFeeStub.resolves(feeData); - // - // getUnsignedApproveBridgeTxStub.resolves({ - // contractToApprove: '0xcontract', - // unsignedTx: { - // to: '0x123456', - // from: '0x', - // }, - // }); - // - // getUnsignedBridgeTxStub.resolves({ - // feeData, - // unsignedTx: { - // to: '0x123456', - // from: '0x', - // }, - // }); - // - // sendTransactionStub.resolves({ - // transactionResponse: { - // wait: cy.stub().resolves({ - // transactionHash: '0x123456789', - // status: 1, - // }), - // }, - // }); - // switchNetworkStub.resolves({ - // provider: mockMetaMaskProvider, - // network: { chainId: ChainId.IMTBL_ZKEVM_TESTNET }, - // } as SwitchNetworkResult); - // - // mount( - // - // - // , - // ); - // - // // Wallet & Network Selector - // cySmartGet('wallet-network-selector-from-wallet-select__target').click(); - // cySmartGet('wallet-network-selector-from-wallet-list-passport').click(); - // cySmartGet('wallet-network-selector-to-wallet-select__target').click(); - // cySmartGet('wallet-network-selector-to-wallet-list-metamask').click(); - // cySmartGet('wallet-network-selector-submit-button').click(); - // - // // Bridge form - // cySmartGet('bridge-token-select__target').click(); - // cySmartGet('bridge-token-coin-selector__option-imx').click(); - // cySmartGet('bridge-amount-text__input').type('1').blur(); - // cySmartGet('bridge-gas-fee__priceDisplay').should('have.text', 'IMX 0.210000~ USD $ 0.32'); - // cySmartGet('bridge-form-button').click(); - // - // // Review screen - // cySmartGet('bridge-review-summary-from-amount__priceDisplay').should('have.text', 'IMX 1~ USD $1.50'); - // cySmartGet('bridge-review-summary-gas-amount__priceDisplay').should('have.text', 'IMX 0.210000~ USD $0.32'); - // cySmartGet('bridge-review-summary-from-address__label').should('include.text', '0x0987...4321'); - // cySmartGet('bridge-review-summary-to-address__label').should('include.text', '0x1234...7890'); - // cySmartGet('bridge-review-summary__submit-button').click(); - // - // // Approvals screen - // cySmartGet('wallet-approve-hero').should('be.visible'); - // cySmartGet('footer-button').click(); - // }); - // - // it('should complete a deposit from Metamask to Passport', () => { - // createProviderStub - // .onFirstCall() - // .returns({ provider: mockMetaMaskProvider }) - // .onSecondCall() - // .returns({ provider: mockPassportProvider }); - // checkIsWalletConnectedStub.resolves({ isConnected: false }); - // connectStub - // .onFirstCall() - // .returns({ provider: mockMetaMaskProvider }) - // .onSecondCall() - // .returns({ provider: mockPassportProvider }); - // getNetworkInfoStub.resolves({ chainId: ChainId.IMTBL_ZKEVM_TESTNET }); - // getAllBalancesStub.resolves({ - // balances: [ - // { - // balance: BigNumber.from('2000000000000000000'), - // formattedBalance: '2.0', - // token: { - // name: 'ETH', - // symbol: 'ETH', - // decimals: 18, - // }, - // }, - // { - // balance: BigNumber.from('2000000000000000000'), - // formattedBalance: '2.0', - // token: { - // name: 'IMX', - // symbol: 'IMX', - // decimals: 18, - // }, - // }, - // ], - // }); - // - // const feeData = { - // sourceChainGas: BigNumber.from('100000000000000'), - // imtblFee: BigNumber.from('0'), - // bridgeFee: BigNumber.from('2000000000000000'), - // totalFees: BigNumber.from('2100000000000000'), - // }; - // - // getFeeStub.resolves(feeData); - // - // getUnsignedApproveBridgeTxStub.resolves({ - // contractToApprove: '0xcontract', - // unsignedTx: { - // to: '0x123456', - // from: '0x', - // }, - // }); - // - // getUnsignedBridgeTxStub.resolves({ - // feeData, - // unsignedTx: { - // to: '0x123456', - // from: '0x', - // }, - // }); - // - // sendTransactionStub.resolves({ - // transactionResponse: { - // wait: cy.stub().resolves({ - // transactionHash: '0x123456789', - // status: 1, - // }), - // }, - // }); - // switchNetworkStub.resolves({ - // provider: mockMetaMaskProvider, - // network: { chainId: ChainId.IMTBL_ZKEVM_TESTNET }, - // } as SwitchNetworkResult); - // - // mount( - // - // - // , - // ); - // - // // Wallet & Network Selector - // cySmartGet('wallet-network-selector-from-wallet-select__target').click(); - // cySmartGet('wallet-network-selector-from-wallet-list-metamask').click(); - // cySmartGet(`wallet-network-selector-network-list-${ChainId.SEPOLIA}`).click(); - // cySmartGet('wallet-network-selector-to-wallet-select__target').click(); - // cySmartGet('wallet-network-selector-to-wallet-list-passport').click(); - // cySmartGet('wallet-network-selector-submit-button').click(); - // - // // Bridge form - // cySmartGet('bridge-token-select__target').click(); - // cySmartGet('bridge-token-coin-selector__option-eth').click(); - // cySmartGet('bridge-amount-text__input').type('0.1').blur(); - // cySmartGet('bridge-gas-fee__priceDisplay').should('have.text', 'ETH 0.002100~ USD $ 4.20'); - // cySmartGet('bridge-form-button').click(); - // - // // // Review screen - // cySmartGet('bridge-review-summary-from-amount__priceDisplay').should('have.text', 'ETH 0.1~ USD $200.00'); - // cySmartGet('bridge-review-summary-gas-amount__priceDisplay').should('have.text', 'ETH 0.002100~ USD $4.20'); - // cySmartGet('bridge-review-summary-from-address__label').should('include.text', '0x1234...7890'); - // cySmartGet('bridge-review-summary-to-address__label').should('include.text', '0x0987...4321'); - // cySmartGet('bridge-review-summary__submit-button').click(); - // - // // // Approvals screen - // cySmartGet('wallet-approve-hero').should('be.visible'); - // cySmartGet('footer-button').click(); - // }); - // }); - - describe('Transactions', () => { - it('should show a withdrawal transaction with action required when withdrawal is ready for claiming', () => { - createProviderStub - .returns({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub - .returns({ provider: mockMetaMaskProvider }); - - getAllBalancesStub.resolves({ - balances: [ - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: '0xe9E96d1aad82562b7588F03f49aD34186f996478', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: 'native', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'USDC', - symbol: 'USDC', - decimals: 6, - address: '0x3B2d8A1931736Fc321C24864BceEe981B11c3c57', - }, - }, - ], - }); - - const mockBridgeTransactionsResponse: { result: Transaction[] } = { result: [] }; - cy.clock(new Date('2024-01-16T00:00:00Z')); // stub date now to day after - const mockDateYesterday = new Date('2024-01-15T00:00:00.000Z'); - - mockTransactionPending.details.current_status.withdrawal_ready_at = mockDateYesterday.toISOString(); - mockBridgeTransactionsResponse.result = [ - mockTransactionPending as Transaction, - ]; - - cy.intercept( - // eslint-disable-next-line max-len - `https://api.sandbox.immutable.com/checkout/v1/transactions?from_address=${mockMetaMaskAddress}&tx_type=bridge`, - mockBridgeTransactionsResponse, - ); - - mount( - - - , - ); - cySmartGet('move-transactions-button').click(); - cySmartGet('transactions-connect-wallet-button').click(); - cySmartGet('select-wallet-drawer-wallet-list-metamask').click(); - - // assert that withdrawal transaction item is there - cySmartGet(`transaction-item-${mockTransactionPending.blockchain_metadata.transaction_hash}`).should('exist'); - // assert that action button is there - // eslint-disable-next-line max-len - cySmartGet(`transaction-item-${mockTransactionPending.blockchain_metadata.transaction_hash}-action-button`).should('exist'); - cySmartGet(`transaction-item-${mockTransactionPending.blockchain_metadata.transaction_hash}-action-message`) - .should('have.text', 'Action required to receive your coins'); - }); - - it('should show a withdrawal transaction with delay text when withdrawal is not ready for claiming', () => { - createProviderStub - .returns({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub - .returns({ provider: mockMetaMaskProvider }); - - getAllBalancesStub.resolves({ - balances: [ - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: '0xe9E96d1aad82562b7588F03f49aD34186f996478', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: 'native', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'USDC', - symbol: 'USDC', - decimals: 6, - address: '0x3B2d8A1931736Fc321C24864BceEe981B11c3c57', - }, - }, - ], - }); - - const mockBridgeTransactionsResponse: { result: Transaction[] } = { result: [] }; - - cy.clock(new Date('2024-01-15T00:00:00Z')); // stub date now - const mockDateIn1Hour = new Date('2024-01-15T01:00:00.000Z'); // 1 hour after date now - - mockTransactionPending.details.current_status.withdrawal_ready_at = mockDateIn1Hour.toISOString(); - mockBridgeTransactionsResponse.result = [ - mockTransactionPending as Transaction, - ]; - - cy.intercept( - // eslint-disable-next-line max-len - `https://api.sandbox.immutable.com/checkout/v1/transactions?from_address=${mockMetaMaskAddress}&tx_type=bridge`, - mockBridgeTransactionsResponse, - ); - - mount( - - - , - ); - cySmartGet('move-transactions-button').click(); - cySmartGet('transactions-connect-wallet-button').click(); - cySmartGet('select-wallet-drawer-wallet-list-metamask').click(); - - // assert that withdrawal transaction item is there - cySmartGet(`transaction-item-${mockTransactionPending.blockchain_metadata.transaction_hash}`).should('exist'); - - // assert that action button is not shown - cySmartGet(`transaction-item-${mockTransactionPending.blockchain_metadata.transaction_hash}-action-button`) - .should('not.exist'); - - // assert it includes the withdrawal delay text - cySmartGet(`transaction-item-${mockTransactionPending.blockchain_metadata.transaction_hash}-action-message`) - .should( - 'include.text', - 'This move has been paused, please return ', - ); - }); - - it('should show transaction items with withdrawal pending status first', () => { - createProviderStub - .returns({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub - .returns({ provider: mockMetaMaskProvider }); - - getAllBalancesStub.resolves({ - balances: [ - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: '0xe9E96d1aad82562b7588F03f49aD34186f996478', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: 'native', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'USDC', - symbol: 'USDC', - decimals: 6, - address: '0x3B2d8A1931736Fc321C24864BceEe981B11c3c57', - }, - }, - ], - }); - - const mockBridgeTransactionsResponse: { result: Transaction[] } = { result: [] }; - - cy.clock(new Date('2024-01-15T00:00:00Z')); // stub date now - const mockDateIn1Hour = new Date('2024-01-15T01:00:00.000Z'); // 1 hour after date now - - mockTransactionPending.details.current_status.withdrawal_ready_at = mockDateIn1Hour.toISOString(); - mockBridgeTransactionsResponse.result = [ - mockTransactionInProgress as Transaction, - mockTransactionPending as Transaction, - ]; - - cy.intercept( - // eslint-disable-next-line max-len - `https://api.sandbox.immutable.com/checkout/v1/transactions?from_address=${mockMetaMaskAddress}&tx_type=bridge`, - mockBridgeTransactionsResponse, - ); - - mount( - - - , - ); - cySmartGet('move-transactions-button').click(); - cySmartGet('transactions-connect-wallet-button').click(); - cySmartGet('select-wallet-drawer-wallet-list-metamask').click(); - - cySmartGet('move-transaction-list').children().first() - .should( - 'have.attr', - 'data-testid', - `transaction-item-${mockTransactionPending.blockchain_metadata.transaction_hash}`, - ); - cySmartGet('move-transaction-list').children().first().next() - .should( - 'have.attr', - 'data-testid', - `transaction-item-${mockTransactionInProgress.blockchain_metadata.transaction_hash}`, - ); - }); - }); - - describe('Claiming Withdrawals', () => { - it('should move to claim withdrawal screen with MetaMask when action required button is clicked', () => { - createProviderStub - .returns({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub - .returns({ provider: mockMetaMaskProvider }); - - getAllBalancesStub.resolves({ - balances: [ - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: '0xe9E96d1aad82562b7588F03f49aD34186f996478', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: 'native', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'USDC', - symbol: 'USDC', - decimals: 6, - address: '0x3B2d8A1931736Fc321C24864BceEe981B11c3c57', - }, - }, - ], - }); - - getFlowRateWithdrawTxStub.resolves({ - pendingWithdrawal: { - canWithdraw: true, - withdrawer: '0xf364930c779c6674472e131898c4b3f7aaccf1b7', - recipient: '0xe98b61832248c698085ffbc4313deb465be857e7', - amount: BigNumber.from('10000000'), - }, - unsignedTx: { - to: '0xL1ContractAddress', - from: mockMetaMaskAddress, - data: 'some-data', - }, - }); - - estimateGasStub.resolves(BigNumber.from('90458')); // withdrawal gas limit estimate - getFeeDataStub.resolves({ - lastBaseFeePerGas: BigNumber.from(20e9), // 20 gwei, - maxFeePerGas: BigNumber.from(40e9), // 40 gwei, - maxPriorityFeePerGas: BigNumber.from(1.5e9), // 1.5 gwei, - }); - sendTransactionStub.resolves({}); // transaction response - - const mockBridgeTransactionsResponse: { result: Transaction[] } = { result: [] }; - cy.clock(new Date('2024-01-16T00:00:00Z')); // stub date now to day after - const mockDateYesterday = new Date('2024-01-15T00:00:00.000Z'); - - mockTransactionPending.details.current_status.withdrawal_ready_at = mockDateYesterday.toISOString(); - mockBridgeTransactionsResponse.result = [ - mockTransactionPending as Transaction, - ]; - - cy.intercept( - // eslint-disable-next-line max-len - `https://api.sandbox.immutable.com/checkout/v1/transactions?from_address=${mockMetaMaskAddress}&tx_type=bridge`, - mockBridgeTransactionsResponse, - ); - - mount( - - - , - ); - - cySmartGet('move-transactions-button').click(); - cySmartGet('transactions-connect-wallet-button').click(); - cySmartGet('select-wallet-drawer-wallet-list-metamask').click(); - cySmartGet('@getAllBalancesStub').should('have.been.calledOnce'); - cySmartGet( - `transaction-item-${mockTransactionPending.blockchain_metadata.transaction_hash}-action-button`, - ).click(); - cySmartGet('claim-withdrawal').should('exist'); - cySmartGet('claim-withdrawal-continue-button').click(); - - cySmartGet('@getAllBalancesStub').should('have.been.calledTwice'); - cySmartGet('@estimateGasStub').should('have.been.calledOnce'); - cySmartGet('@getFeeDataStub').should('have.been.calledOnce'); - cySmartGet('@sendTransactionStub').should('have.been.calledOnceWith', { - provider: mockMetaMaskProvider, - transaction: { - to: '0xL1ContractAddress', - from: mockMetaMaskAddress, - data: 'some-data', - }, - }); - }); - - it('should show the not enough eth withdrawal drawer when gas is more than eth balance', () => { - createProviderStub - .returns({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub - .returns({ provider: mockMetaMaskProvider }); - - getAllBalancesStub.resolves({ - balances: [ - { - balance: BigNumber.from('10000000000000'), - formattedBalance: '0.00001', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: 'native', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: '0ximx', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'USDC', - symbol: 'USDC', - decimals: 6, - address: '0x3B2d8A1931736Fc321C24864BceEe981B11c3c57', - }, - }, - ], - }); - - getFlowRateWithdrawTxStub.resolves({ - pendingWithdrawal: { - canWithdraw: true, - withdrawer: '0xf364930c779c6674472e131898c4b3f7aaccf1b7', - recipient: '0xe98b61832248c698085ffbc4313deb465be857e7', - amount: BigNumber.from('10000000'), - }, - unsignedTx: { - to: '0xL1ContractAddress', - from: mockMetaMaskAddress, - data: 'some-data', - }, - }); - - estimateGasStub.resolves(BigNumber.from('90458')); // withdrawal gas limit estimate - getFeeDataStub.resolves({ - lastBaseFeePerGas: BigNumber.from(20e9), // 20 gwei, - maxFeePerGas: BigNumber.from(40e9), // 40 gwei, - maxPriorityFeePerGas: BigNumber.from(1.5e9), // 1.5 gwei, - }); - sendTransactionStub.resolves({}); // transaction response - - const mockBridgeTransactionsResponse: { result: Transaction[] } = { result: [] }; - cy.clock(new Date('2024-01-16T00:00:00Z')); // stub date now to day after - const mockDateYesterday = new Date('2024-01-15T00:00:00.000Z'); - - mockTransactionPending.details.current_status.withdrawal_ready_at = mockDateYesterday.toISOString(); - mockBridgeTransactionsResponse.result = [ - mockTransactionPending as Transaction, - ]; - - cy.intercept( - // eslint-disable-next-line max-len - `https://api.sandbox.immutable.com/checkout/v1/transactions?from_address=${mockMetaMaskAddress}&tx_type=bridge`, - mockBridgeTransactionsResponse, - ); - - mount( - - - , - ); - - cySmartGet('move-transactions-button').click(); - cySmartGet('transactions-connect-wallet-button').click(); - cySmartGet('select-wallet-drawer-wallet-list-metamask').click(); - cySmartGet('@getAllBalancesStub').should('have.been.calledOnce'); - cySmartGet( - `transaction-item-${mockTransactionPending.blockchain_metadata.transaction_hash}-action-button`, - ).click(); - cySmartGet('claim-withdrawal').should('exist'); - cySmartGet('claim-withdrawal-continue-button').click(); - - cySmartGet('@getAllBalancesStub').should('have.been.calledTwice'); - cySmartGet('@estimateGasStub').should('have.been.calledOnce'); - cySmartGet('@getFeeDataStub').should('have.been.calledOnce'); - cySmartGet('@sendTransactionStub').should('not.have.been.called'); - - cySmartGet('not-enough-eth-drawer').should('be.visible'); - cySmartGet('not-enough-eth-drawer-retry-button').click(); - - cySmartGet('@connectStub').should( - 'have.been.calledWith', - { provider: mockMetaMaskProvider, requestWalletPermissions: true }, - ); - cySmartGet('@getAllBalancesStub').should('have.been.calledThrice'); - cySmartGet('@estimateGasStub').should('have.been.calledTwice'); - cySmartGet('@getFeeDataStub').should('have.been.calledTwice'); - cySmartGet('@sendTransactionStub').should('not.have.been.called'); - }); - - it('should request connection to MM first if provider is Passport', () => { - createProviderStub - .onFirstCall() - .resolves({ provider: mockPassportProvider }) - .onSecondCall() - .resolves({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub - .onFirstCall() - .resolves({ provider: mockPassportProvider }) - .onSecondCall() - .resolves({ provider: mockMetaMaskProvider }); - - getAllBalancesStub - .onFirstCall().resolves({ - balances: [ - { - balance: BigNumber.from('10000000000000'), - formattedBalance: '0.00001', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: 'native', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: '0ximx', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'USDC', - symbol: 'USDC', - decimals: 6, - address: '0x3B2d8A1931736Fc321C24864BceEe981B11c3c57', - }, - }, - ], - }) - .onSecondCall() - .resolves({ - balances: [ - { - balance: BigNumber.from('1000000000000000000'), - formattedBalance: '1', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: 'native', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: '0ximx', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'USDC', - symbol: 'USDC', - decimals: 6, - address: '0x3B2d8A1931736Fc321C24864BceEe981B11c3c57', - }, - }, - ], - }); - - getFlowRateWithdrawTxStub.resolves({ - pendingWithdrawal: { - canWithdraw: true, - withdrawer: '0xf364930c779c6674472e131898c4b3f7aaccf1b7', - recipient: '0xe98b61832248c698085ffbc4313deb465be857e7', - amount: BigNumber.from('10000000'), - }, - unsignedTx: { - to: '0xL1ContractAddress', - from: mockMetaMaskAddress, - data: 'some-data', - }, - }); - - estimateGasStub.resolves(BigNumber.from('90458')); // withdrawal gas limit estimate - getFeeDataStub.resolves({ - lastBaseFeePerGas: BigNumber.from(20e9), // 20 gwei, - maxFeePerGas: BigNumber.from(40e9), // 40 gwei, - maxPriorityFeePerGas: BigNumber.from(1.5e9), // 1.5 gwei, - }); - sendTransactionStub.resolves({}); // transaction response - - const mockBridgeTransactionsResponse: { result: Transaction[] } = { result: [] }; - cy.clock(new Date('2024-01-16T00:00:00Z')); // stub date now to day after - const mockDateYesterday = new Date('2024-01-15T00:00:00.000Z'); - - mockTransactionPending.details.current_status.withdrawal_ready_at = mockDateYesterday.toISOString(); - mockBridgeTransactionsResponse.result = [ - mockTransactionPending as Transaction, - ]; - - cy.intercept( - // eslint-disable-next-line max-len - `https://api.sandbox.immutable.com/checkout/v1/transactions?from_address=${mockMetaMaskAddress}&tx_type=bridge`, - mockBridgeTransactionsResponse, - ); - cy.intercept( - // eslint-disable-next-line max-len - `https://api.sandbox.immutable.com/checkout/v1/transactions?from_address=${mockPassportAddress}&tx_type=bridge`, - mockBridgeTransactionsResponse, - ); - - mount( - - - , - ); - - cySmartGet('move-transactions-button').click(); - cySmartGet('transactions-connect-wallet-button').click(); - cySmartGet('select-wallet-drawer-wallet-list-metamask').click(); - cySmartGet('@getAllBalancesStub').should('have.been.calledOnce'); - cySmartGet( - `transaction-item-${mockTransactionPending.blockchain_metadata.transaction_hash}-action-button`, - ).click(); - cySmartGet('claim-withdrawal').should('exist'); - cySmartGet('claim-withdrawal-continue-button').click(); - - cySmartGet('@getAllBalancesStub').should('have.been.calledTwice'); - cySmartGet('@estimateGasStub').should('have.been.calledOnce'); - cySmartGet('@getFeeDataStub').should('have.been.calledOnce'); - cySmartGet('@sendTransactionStub').should('have.been.called'); - }); - - it('should first request MM, then not enough eth, then retry with enough and call transaction', () => { - createProviderStub - .onFirstCall() - .resolves({ provider: mockPassportProvider }) - .onSecondCall() - .resolves({ provider: mockMetaMaskProvider }) - .onThirdCall() - .resolves({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub - .onFirstCall() - .resolves({ provider: mockPassportProvider }) - .onSecondCall() - .resolves({ provider: mockMetaMaskProvider }) - .onThirdCall() - .resolves({ provider: mockMetaMaskProvider }); - - getAllBalancesStub - .onFirstCall().resolves({ - balances: [ - { - balance: BigNumber.from('10000000000000'), - formattedBalance: '0.00001', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: 'native', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: '0ximx', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'USDC', - symbol: 'USDC', - decimals: 6, - address: '0x3B2d8A1931736Fc321C24864BceEe981B11c3c57', - }, - }, - ], - }) - .onSecondCall() - .resolves({ - balances: [ - { - balance: BigNumber.from('10000000000000'), - formattedBalance: '0.00001', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: 'native', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: '0ximx', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'USDC', - symbol: 'USDC', - decimals: 6, - address: '0x3B2d8A1931736Fc321C24864BceEe981B11c3c57', - }, - }, - ], - }) - .onThirdCall() - .resolves({ - balances: [ - { - balance: BigNumber.from('1000000000000000000'), - formattedBalance: '1', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: 'native', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: '0ximx', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'USDC', - symbol: 'USDC', - decimals: 6, - address: '0x3B2d8A1931736Fc321C24864BceEe981B11c3c57', - }, - }, - ], - }); - - getFlowRateWithdrawTxStub.resolves({ - pendingWithdrawal: { - canWithdraw: true, - withdrawer: '0xf364930c779c6674472e131898c4b3f7aaccf1b7', - recipient: '0xe98b61832248c698085ffbc4313deb465be857e7', - amount: BigNumber.from('10000000'), - }, - unsignedTx: { - to: '0xL1ContractAddress', - from: mockMetaMaskAddress, - data: 'some-data', - }, - }); - - estimateGasStub.resolves(BigNumber.from('90458')); // withdrawal gas limit estimate - getFeeDataStub.resolves({ - lastBaseFeePerGas: BigNumber.from(20e9), // 20 gwei, - maxFeePerGas: BigNumber.from(40e9), // 40 gwei, - maxPriorityFeePerGas: BigNumber.from(1.5e9), // 1.5 gwei, - }); - sendTransactionStub.resolves({}); // transaction response - - const mockBridgeTransactionsResponse: { result: Transaction[] } = { result: [] }; - cy.clock(new Date('2024-01-16T00:00:00Z')); // stub date now to day after - const mockDateYesterday = new Date('2024-01-15T00:00:00.000Z'); - - mockTransactionPending.details.current_status.withdrawal_ready_at = mockDateYesterday.toISOString(); - mockBridgeTransactionsResponse.result = [ - mockTransactionPending as Transaction, - ]; - - cy.intercept( - // eslint-disable-next-line max-len - `https://api.sandbox.immutable.com/checkout/v1/transactions?from_address=${mockMetaMaskAddress}&tx_type=bridge`, - mockBridgeTransactionsResponse, - ); - cy.intercept( - // eslint-disable-next-line max-len - `https://api.sandbox.immutable.com/checkout/v1/transactions?from_address=${mockPassportAddress}&tx_type=bridge`, - mockBridgeTransactionsResponse, - ); - - mount( - - - , - ); - - cySmartGet('move-transactions-button').click(); - cySmartGet('transactions-connect-wallet-button').click(); - cySmartGet('select-wallet-drawer-wallet-list-metamask').click(); - cySmartGet('@getAllBalancesStub').should('have.been.calledOnce'); - cySmartGet( - `transaction-item-${mockTransactionPending.blockchain_metadata.transaction_hash}-action-button`, - ).click(); - cySmartGet('claim-withdrawal').should('exist'); - cySmartGet('claim-withdrawal-continue-button').click(); - - cySmartGet('@getAllBalancesStub').should('have.been.calledTwice'); - cySmartGet('@estimateGasStub').should('have.been.calledOnce'); - cySmartGet('@getFeeDataStub').should('have.been.calledOnce'); - cySmartGet('@sendTransactionStub').should('not.have.been.called'); - - cySmartGet('not-enough-eth-drawer').should('be.visible'); - cySmartGet('not-enough-eth-drawer-retry-button').click(); - - cySmartGet('@connectStub').should( - 'have.been.calledWith', - { provider: mockMetaMaskProvider, requestWalletPermissions: true }, - ); - cySmartGet('@getAllBalancesStub').should('have.been.calledThrice'); - cySmartGet('@estimateGasStub').should('have.been.calledTwice'); - cySmartGet('@getFeeDataStub').should('have.been.calledTwice'); - cySmartGet('@sendTransactionStub').should('have.been.calledWith', { - provider: mockMetaMaskProvider, - transaction: { - to: '0xL1ContractAddress', - from: mockMetaMaskAddress, - data: 'some-data', - }, - }); - }); - - it('should still sendTransaction if there was a problem getting feeData', () => { - createProviderStub - .returns({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub - .returns({ provider: mockMetaMaskProvider }); - - getAllBalancesStub.resolves({ - balances: [ - { - balance: BigNumber.from('10000000000000'), - formattedBalance: '0.00001', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: 'native', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: '0ximx', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'USDC', - symbol: 'USDC', - decimals: 6, - address: '0x3B2d8A1931736Fc321C24864BceEe981B11c3c57', - }, - }, - ], - }); - - getFlowRateWithdrawTxStub.resolves({ - pendingWithdrawal: { - canWithdraw: true, - withdrawer: '0xf364930c779c6674472e131898c4b3f7aaccf1b7', - recipient: '0xe98b61832248c698085ffbc4313deb465be857e7', - amount: BigNumber.from('10000000'), - }, - unsignedTx: { - to: '0xL1ContractAddress', - from: mockMetaMaskAddress, - data: 'some-data', - }, - }); - - estimateGasStub.rejects(BigNumber.from('90458')); // withdrawal gas limit estimate - getFeeDataStub.resolves(null); - sendTransactionStub.resolves({}); // transaction response - - const mockBridgeTransactionsResponse: { result: Transaction[] } = { result: [] }; - cy.clock(new Date('2024-01-16T00:00:00Z')); // stub date now to day after - const mockDateYesterday = new Date('2024-01-15T00:00:00.000Z'); - - mockTransactionPending.details.current_status.withdrawal_ready_at = mockDateYesterday.toISOString(); - mockBridgeTransactionsResponse.result = [ - mockTransactionPending as Transaction, - ]; - - cy.intercept( - // eslint-disable-next-line max-len - `https://api.sandbox.immutable.com/checkout/v1/transactions?from_address=${mockMetaMaskAddress}&tx_type=bridge`, - mockBridgeTransactionsResponse, - ); - - mount( - - - , - ); - - cySmartGet('move-transactions-button').click(); - cySmartGet('transactions-connect-wallet-button').click(); - cySmartGet('select-wallet-drawer-wallet-list-metamask').click(); - cySmartGet('@getAllBalancesStub').should('have.been.calledOnce'); - cySmartGet( - `transaction-item-${mockTransactionPending.blockchain_metadata.transaction_hash}-action-button`, - ).click(); - cySmartGet('claim-withdrawal').should('exist'); - cySmartGet('claim-withdrawal-continue-button').click(); - - cySmartGet('@getAllBalancesStub').should('have.been.calledTwice'); - cySmartGet('@estimateGasStub').should('have.been.calledOnce'); - cySmartGet('@getFeeDataStub').should('have.been.calledOnce'); - cySmartGet('@sendTransactionStub').should('have.been.called'); - }); - - it('should still sendTransaction if there was a problem getting L1 balances to do gas check', () => { - createProviderStub - .returns({ provider: mockMetaMaskProvider }); - checkIsWalletConnectedStub.resolves({ isConnected: false }); - connectStub - .returns({ provider: mockMetaMaskProvider }); - - getAllBalancesStub.onFirstCall().resolves({ - balances: [ - { - balance: BigNumber.from('10000000000000'), - formattedBalance: '0.00001', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: 'native', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: '0ximx', - }, - }, - { - balance: BigNumber.from('2000000000000000000'), - formattedBalance: '2.0', - token: { - name: 'USDC', - symbol: 'USDC', - decimals: 6, - address: '0x3B2d8A1931736Fc321C24864BceEe981B11c3c57', - }, - }, - ], - }).onSecondCall().rejects({}); - - getFlowRateWithdrawTxStub.resolves({ - pendingWithdrawal: { - canWithdraw: true, - withdrawer: '0xf364930c779c6674472e131898c4b3f7aaccf1b7', - recipient: '0xe98b61832248c698085ffbc4313deb465be857e7', - amount: BigNumber.from('10000000'), - }, - unsignedTx: { - to: '0xL1ContractAddress', - from: mockMetaMaskAddress, - data: 'some-data', - }, - }); - - estimateGasStub.rejects(BigNumber.from('90458')); // withdrawal gas limit estimate - getFeeDataStub.resolves({ - lastBaseFeePerGas: BigNumber.from(20e9), // 20 gwei, - maxFeePerGas: BigNumber.from(40e9), // 40 gwei, - maxPriorityFeePerGas: BigNumber.from(1.5e9), // 1.5 gwei, - }); - sendTransactionStub.resolves({}); // transaction response - - const mockBridgeTransactionsResponse: { result: Transaction[] } = { result: [] }; - cy.clock(new Date('2024-01-16T00:00:00Z')); // stub date now to day after - const mockDateYesterday = new Date('2024-01-15T00:00:00.000Z'); - - mockTransactionPending.details.current_status.withdrawal_ready_at = mockDateYesterday.toISOString(); - mockBridgeTransactionsResponse.result = [ - mockTransactionPending as Transaction, - ]; - - cy.intercept( - // eslint-disable-next-line max-len - `https://api.sandbox.immutable.com/checkout/v1/transactions?from_address=${mockMetaMaskAddress}&tx_type=bridge`, - mockBridgeTransactionsResponse, - ); - - mount( - - - , - ); - - cySmartGet('move-transactions-button').click(); - cySmartGet('transactions-connect-wallet-button').click(); - cySmartGet('select-wallet-drawer-wallet-list-metamask').click(); - cySmartGet('@getAllBalancesStub').should('have.been.calledOnce'); - cySmartGet( - `transaction-item-${mockTransactionPending.blockchain_metadata.transaction_hash}-action-button`, - ).click(); - cySmartGet('claim-withdrawal').should('exist'); - cySmartGet('claim-withdrawal-continue-button').click(); - - cySmartGet('@getAllBalancesStub').should('have.been.calledTwice'); - cySmartGet('@estimateGasStub').should('have.been.calledOnce'); - cySmartGet('@getFeeDataStub').should('have.been.calledOnce'); - cySmartGet('@sendTransactionStub').should('have.been.called'); - }); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.cy.tsx b/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.cy.tsx deleted file mode 100644 index 46928782e0..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/connect/ConnectWidget.cy.tsx +++ /dev/null @@ -1,543 +0,0 @@ -import { - ChainId, - ChainName, - Checkout, - WidgetTheme, - ConnectWidgetParams, -} from '@imtbl/checkout-sdk'; -import { describe, it, cy } from 'local-cypress'; -import { mount } from 'cypress/react18'; -import { Environment } from '@imtbl/config'; -import { ExternalProvider, Web3Provider } from '@ethersproject/providers'; -import { Passport } from '@imtbl/passport'; -import { ViewContextTestComponent } from '../../context/view-context/test-components/ViewContextTestComponent'; -import { cyIntercept, cySmartGet } from '../../lib/testUtils'; -import ConnectWidget from './ConnectWidget'; -import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig'; - -describe('ConnectWidget tests', () => { - const config: StrongCheckoutWidgetsConfig = { - environment: Environment.SANDBOX, - theme: WidgetTheme.DARK, - isBridgeEnabled: true, - isSwapEnabled: true, - isOnRampEnabled: true, - }; - - let providerOnStub; - let providerRemoveListenerStub; - - beforeEach(() => { - cyIntercept(); - cy.viewport('ipad-2'); - providerOnStub = cy.stub().as('providerOnStub').returns({}); - providerRemoveListenerStub = cy.stub().as('providerRemoveListenerStub').returns({}); - }); - - const mockWeb3Provider = { - provider: { - on: () => providerOnStub, - removeListener: () => providerRemoveListenerStub, - }, - getSigner: () => ({ - getAddress: () => Promise.resolve(''), - }), - } as unknown as Web3Provider; - - /** mounting the connect widget should be done to start all tests */ - const mountConnectWidget = () => { - const props = {} as ConnectWidgetParams; - const checkout = new Checkout({ baseConfig: { environment: Environment.SANDBOX } }); - - mount( - - - , - ); - }; - - const mountConnectWidgetAndGoToReadyToConnect = () => { - mountConnectWidget(); - cySmartGet('wallet-list-metamask').click(); - }; - - const mockPassportProvider = (request: 'reject' | 'resolve') => { - if (request === 'reject') { - return { - isPassport: true, - request: cy.stub().as('requestStub').rejects({}), - } as any as ExternalProvider; - } - if (request === 'resolve') { - return { - isPassport: true, - request: cy.stub().as('requestStub').resolves({}), - } as any as ExternalProvider; - } - return {}; - }; - - const mountConnectWidgetWithPassport = (passportProviderRequest: 'reject' | 'resolve') => { - const passportProvider = mockPassportProvider(passportProviderRequest); - const testPassportInstance = { - connectEvm: cy.stub().as('connectEvmStub').returns(passportProvider), - } as any as Passport; - const checkout = new Checkout({ baseConfig: { environment: Environment.SANDBOX }, passport: testPassportInstance }); - - mount( - - - , - ); - }; - - const mountConnectWidgetWithPassportAndGoToReadyToConnect = (passportProviderRequest: 'reject' | 'resolve') => { - mountConnectWidgetWithPassport(passportProviderRequest); - cySmartGet('wallet-list-passport').click(); - }; - - describe('Connect Wallet screen', () => { - it('should show MetaMask wallet option on desktop', () => { - mountConnectWidget(); - - cySmartGet('wallet-list').should('exist'); - cySmartGet('wallet-list-metamask').should('be.visible'); - }); - - it('should show Passport wallet option on desktop if passport instance is passed in', () => { - mountConnectWidgetWithPassport('resolve'); - - cySmartGet('wallet-list').should('exist'); - cySmartGet('wallet-list-passport').should('be.visible'); - }); - - it('should show the Immutable Logo in the footer', () => { - mountConnectWidget(); - - cySmartGet('footer-logo-container').should('exist'); - cySmartGet('footer-logo-image').should('exist'); - }); - - it('should update the view to Ready to Connect screen when MetaMask is clicked', () => { - mountConnectWidget(); - - cy.stub(Checkout.prototype, 'createProvider') - .as('createProviderStub') - .resolves({ - provider: {} as Web3Provider, - }); - - cySmartGet('wallet-list-metamask').click(); - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('metamask-connect-hero').should('be.visible'); - }); - - it('should update the view to Ready to Connect screen when Passport is clicked', () => { - mountConnectWidgetWithPassport('resolve'); - - cySmartGet('wallet-list-passport').click(); - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('passport-connect-hero').should('be.visible'); - }); - }); - - describe('Ready to connect screen', () => { - describe('Passport', () => { - it('should show Passport logo in Hero content', () => { - mountConnectWidgetWithPassportAndGoToReadyToConnect('resolve'); - - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('passport-connect-hero').should('be.visible'); - cySmartGet('passport-connect-hero-logo').should('be.visible'); - }); - - it('should call connectEvm on passport instance when Continue is clicked', () => { - mountConnectWidgetWithPassportAndGoToReadyToConnect('resolve'); - - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('footer-button').should('have.text', 'Continue'); - cySmartGet('footer-button').click(); - cySmartGet('@connectEvmStub').should('have.been.called'); - }); - - it('should update footer button text to Try again when user rejects connection request', () => { - mountConnectWidgetWithPassportAndGoToReadyToConnect('reject'); - - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('footer-button').should('have.text', 'Continue'); - cySmartGet('footer-button').click(); - cySmartGet('@requestStub').should('have.been.called'); - cySmartGet('@connectEvmStub').should('have.been.called'); - cySmartGet('footer-button').should('have.text', 'Try again'); - }); - - it('should call request when Try again is clicked', () => { - const provider = mockPassportProvider('reject'); - cy.stub(Checkout.prototype, 'connect').as('connectStub').onFirstCall().rejects({}) - .onSecondCall() - .resolves({ provider: { provider } as Web3Provider, walletProviderName: 'passport' }); - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({}); - - mountConnectWidgetWithPassportAndGoToReadyToConnect('reject'); - - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('footer-button').should('have.text', 'Continue'); - cySmartGet('footer-button').click(); - cySmartGet('@requestStub').should('have.been.called'); - cySmartGet('@connectEvmStub').should('have.been.called'); - cySmartGet('footer-button').should('have.text', 'Try again'); - cySmartGet('footer-button').click(); - cySmartGet('@connectStub').should('have.been.calledTwice'); - }); - - it('should go back to Connect A Wallet screen when back is clicked', () => { - mountConnectWidgetWithPassportAndGoToReadyToConnect('resolve'); - - cySmartGet('back-button').click(); - cySmartGet('ready-to-connect').should('not.exist'); - cySmartGet('connect-wallet').should('be.visible'); - }); - }); - - describe('Metamask', () => { - beforeEach(() => { - cy.stub(Checkout.prototype, 'createProvider') - .as('createProviderStub') - .resolves({ - provider: {} as Web3Provider, - }); - }); - - it('should show MetaMask logo in Hero content', () => { - mountConnectWidgetAndGoToReadyToConnect(); - - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('metamask-connect-hero').should('be.visible'); - cySmartGet('metamask-connect-hero-logo').should('be.visible'); - }); - - it('should call checkout.connect() when Ready to connect is clicked', () => { - cy.stub(Checkout.prototype, 'connect').as('connectStub').resolves({}); - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({}); - mountConnectWidgetAndGoToReadyToConnect(); - - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('footer-button').should('have.text', 'Ready to connect'); - cySmartGet('footer-button').click(); - cySmartGet('@connectStub').should('have.been.calledWith', { provider: {} as Web3Provider }); - }); - - it('should update footer button text to Try again when user rejects connection request', () => { - cy.stub(Checkout.prototype, 'connect').as('connectStub').rejects({}); - mountConnectWidgetAndGoToReadyToConnect(); - - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('footer-button').should('have.text', 'Ready to connect'); - cySmartGet('footer-button').click(); - cySmartGet('@connectStub').should('have.been.called'); - cySmartGet('footer-button').should('have.text', 'Try again'); - }); - - it('should call checkout.connect() when Try again is clicked', () => { - cy.stub(Checkout.prototype, 'connect').as('connectStub').rejects({}); - mountConnectWidgetAndGoToReadyToConnect(); - - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('footer-button').should('have.text', 'Ready to connect'); - cySmartGet('footer-button').click(); - cySmartGet('@connectStub').should('have.been.called'); - cySmartGet('footer-button').should('have.text', 'Try again'); - cySmartGet('footer-button').click(); - cySmartGet('@connectStub').should('have.been.calledTwice'); - }); - - it('should go back to Connect A Wallet screen when back is clicked', () => { - mountConnectWidgetAndGoToReadyToConnect(); - - cySmartGet('back-button').click(); - cySmartGet('ready-to-connect').should('not.exist'); - cySmartGet('connect-wallet').should('be.visible'); - }); - }); - }); - - describe('SwitchNetwork', () => { - describe('No Switch', () => { - beforeEach(() => { - cy.stub(Checkout.prototype, 'connect').as('connectStub').resolves({ - provider: { - provider: { - on: providerOnStub, - removeListener: providerRemoveListenerStub, - request: async () => Promise.resolve(ChainId.IMTBL_ZKEVM_TESTNET), // used for checking chainId - }, - getSigner: () => ({ - getAddress: () => Promise.resolve(''), - getChainId: async () => Promise.resolve(ChainId.IMTBL_ZKEVM_TESTNET), - - }), - } as unknown as Web3Provider, - }); - cy.stub(Checkout.prototype, 'createProvider') - .as('createProviderStub') - .resolves({ - provider: { - provider: { - on: providerOnStub, - removeListener: providerRemoveListenerStub, - request: async () => Promise.resolve(ChainId.IMTBL_ZKEVM_TESTNET), - }, - getSigner: () => ({ - getAddress: () => Promise.resolve(''), - getChainId: async () => Promise.resolve(ChainId.IMTBL_ZKEVM_TESTNET), - }), - } as unknown as Web3Provider, - }); - }); - - it('should not show switch to ZKEVM network if already connected to ZKEVM', () => { - mountConnectWidgetAndGoToReadyToConnect(); - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('footer-button').should('have.text', 'Ready to connect'); - cySmartGet('footer-button').click(); - cySmartGet('switch-network-view').should('not.exist'); - cySmartGet('success-view').should('be.visible'); - }); - - it('should not show switch network if chain is part of allowed chains', () => { - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({ - name: 'Sepolia', - chainId: ChainId.SEPOLIA, - }); - - const props = {} as ConnectWidgetParams; - const checkout = new Checkout({ baseConfig: { environment: Environment.SANDBOX } }); - - mount( - - - , - ); - - cySmartGet('wallet-list-metamask').click(); - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('footer-button').should('have.text', 'Ready to connect'); - cySmartGet('footer-button').click(); - cySmartGet('success-box').should('be.visible'); - }); - }); - - describe('Switch', () => { - beforeEach(() => { - cy.stub(Checkout.prototype, 'connect').as('connectStub').resolves({ - provider: { - provider: { - on: providerOnStub, - removeListener: providerRemoveListenerStub, - request: async () => Promise.resolve(ChainId.SEPOLIA), - }, - getSigner: () => ({ - getAddress: () => Promise.resolve(''), - }), - } as unknown as Web3Provider, - }); - cy.stub(Checkout.prototype, 'createProvider') - .as('createProviderStub') - .resolves({ - provider: { - provider: { - on: providerOnStub, - removeListener: providerRemoveListenerStub, - request: async () => Promise.resolve(ChainId.SEPOLIA), - }, - getSigner: () => ({ - getAddress: () => Promise.resolve(''), - }), - } as unknown as Web3Provider, - }); - }); - - it('should show switch to zkEVM network if not connected to immutable-zkevm', () => { - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({ - name: 'Ethereum', - chainId: ChainId.ETHEREUM, - }); - mountConnectWidgetAndGoToReadyToConnect(); - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('footer-button').should('have.text', 'Ready to connect'); - cySmartGet('footer-button').click(); - cySmartGet('switch-network-view').should('be.visible'); - }); - - it('should show success when ready to connect pressed and network switched', () => { - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({ - name: 'Ethereum', - chainId: ChainId.ETHEREUM, - }); - cy.stub(Checkout.prototype, 'switchNetwork') - .as('switchNetworkStub') - .resolves({ - provider: mockWeb3Provider as Web3Provider, - network: { - name: ChainName.IMTBL_ZKEVM_TESTNET, - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - }, - }); - mountConnectWidgetAndGoToReadyToConnect(); - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('footer-button').should('have.text', 'Ready to connect'); - cySmartGet('footer-button').click(); - cySmartGet('switch-network-view').should('be.visible'); - - cySmartGet('footer-button').click(); - cySmartGet('success-view').should('be.visible'); - }); - - it('should show try again if network switch was rejected', () => { - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({ - name: 'Ethereum', - chainId: ChainId.ETHEREUM, - }); - cy.stub(Checkout.prototype, 'switchNetwork') - .as('switchNetworkStub') - .rejects({}); - mountConnectWidgetAndGoToReadyToConnect(); - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('footer-button').should('have.text', 'Ready to connect'); - cySmartGet('footer-button').click(); - cySmartGet('switch-network-view').should('be.visible'); - cySmartGet('footer-button').click(); - cySmartGet('footer-button').should('have.text', 'Try Again'); - }); - - it('should show success if try again and switch network succeeds', () => { - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({ - name: 'Ethereum', - chainId: ChainId.ETHEREUM, - }); - cy.stub(Checkout.prototype, 'switchNetwork') - .as('switchNetworkStub') - .onFirstCall() - .rejects({}) - .onSecondCall() - .resolves({ - provider: mockWeb3Provider as Web3Provider, - }); - mountConnectWidgetAndGoToReadyToConnect(); - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('footer-button').should('have.text', 'Ready to connect'); - cySmartGet('footer-button').click(); - cySmartGet('switch-network-view').should('be.visible'); - cySmartGet('footer-button').click(); - cySmartGet('footer-button').should('have.text', 'Try Again'); - cySmartGet('footer-button').click(); - cySmartGet('success-view').should('be.visible'); - }); - - it('should not show success if try again and switch network fails', () => { - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({ - name: 'Ethereum', - chainId: ChainId.ETHEREUM, - }); - cy.stub(Checkout.prototype, 'switchNetwork') - .as('switchNetworkStub') - .onFirstCall() - .rejects({}) - .onSecondCall() - .rejects({}); - mountConnectWidgetAndGoToReadyToConnect(); - cySmartGet('ready-to-connect').should('be.visible'); - cySmartGet('footer-button').should('have.text', 'Ready to connect'); - cySmartGet('footer-button').click(); - cySmartGet('switch-network-view').should('be.visible'); - cySmartGet('footer-button').click(); - cySmartGet('footer-button').should('have.text', 'Try Again'); - cySmartGet('footer-button').click(); - cySmartGet('footer-button').should('have.text', 'Try Again'); - cySmartGet('success-view').should('not.exist'); - }); - }); - }); - - describe('BridgeComingSoon for Passport', () => { - beforeEach(() => { - cy.stub(Checkout.prototype, 'connect').as('connectStub').resolves({ - provider: { - provider: { - on: providerOnStub, - removeListener: providerRemoveListenerStub, - isPassport: true, - }, - getSigner: () => ({ - getAddress: () => Promise.resolve(''), - getChainId: async () => Promise.resolve(ChainId.IMTBL_ZKEVM_TESTNET), - }), - }, - }); - cy.stub(Checkout.prototype, 'createProvider') - .as('createProviderStub') - .resolves({ - provider: { - provider: { isPassport: true }, - getSigner: () => ({ - getAddress: () => Promise.resolve(''), - getChainId: async () => Promise.resolve(ChainId.IMTBL_ZKEVM_TESTNET), - }), - }, - }); - }); - }); - - describe('Error Connecting', () => { - it('should show error view if unable to create provider', () => { - cy.stub(Checkout.prototype, 'connect').as('connectStub').resolves({}); - cy.stub(Checkout.prototype, 'createProvider') - .as('createProviderStub') - .rejects({}); - - const props = {} as ConnectWidgetParams; - const checkout = new Checkout({ baseConfig: { environment: Environment.SANDBOX } }); - - mount( - - - , - ); - - cySmartGet('wallet-list-metamask').click(); - cySmartGet('simple-text-body__heading').should('have.text', "Something's gone wrong"); - cySmartGet('footer-button').should('have.text', 'Try again'); - cySmartGet('footer-button').click(); - cySmartGet('wallet-list-metamask').should('be.visible'); - }); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.cy.tsx b/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.cy.tsx deleted file mode 100644 index 347fc9c430..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/on-ramp/OnRampWidget.cy.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { cy, describe, it } from 'local-cypress'; -import { mount } from 'cypress/react18'; -import { Environment } from '@imtbl/config'; -import { - ChainId, ChainName, Checkout, WidgetTheme, -} from '@imtbl/checkout-sdk'; -import { Web3Provider } from '@ethersproject/providers'; -import { cySmartGet } from '../../lib/testUtils'; -import OnRampWidget, { OnRampWidgetInputs } from './OnRampWidget'; -import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig'; -import { - ConnectLoaderTestComponent, -} from '../../context/connect-loader-context/test-components/ConnectLoaderTestComponent'; -import { ConnectionStatus } from '../../context/connect-loader-context/ConnectLoaderContext'; -import { AnalyticsProvider } from '../../context/analytics-provider/SegmentAnalyticsProvider'; - -describe('OnRampWidget tests', () => { - const widgetsConfig: StrongCheckoutWidgetsConfig = { - environment: Environment.SANDBOX, - theme: WidgetTheme.DARK, - isBridgeEnabled: true, - isSwapEnabled: true, - isOnRampEnabled: true, - }; - - const mockProvider = { - getSigner: () => ({ - getAddress: () => Promise.resolve('0xwalletAddress'), - }), - getNetwork: async () => ({ - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - }), - provider: { - request: async () => null, - }, - } as unknown as Web3Provider; - - const connectLoaderState = { - checkout: new Checkout({ - baseConfig: { environment: Environment.SANDBOX }, - }), - provider: mockProvider, - connectionStatus: ConnectionStatus.CONNECTED_WITH_NETWORK, - }; - - describe('OnRamp screen', () => { - it('should have title', () => { - const params = {} as OnRampWidgetInputs; - mount( - - - - - , - ); - - cySmartGet('header-title').should('have.text', 'Add coins'); - }); - - it('should show the loading screen before the on ramp iframe', () => { - const params = {} as OnRampWidgetInputs; - mount( - - - - - , - ); - - cySmartGet('loading-view').should('be.visible'); - cy.wait(1000); - cySmartGet('header-title').should('have.text', 'Add coins'); - }); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OrderInProgress.cy.tsx b/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OrderInProgress.cy.tsx deleted file mode 100644 index 24714a01d9..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/on-ramp/views/OrderInProgress.cy.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { mount } from 'cypress/react18'; -import { cy, describe } from 'local-cypress'; -import { ViewContextTestComponent } from '../../../context/view-context/test-components/ViewContextTestComponent'; -import { cySmartGet } from '../../../lib/testUtils'; -import { OrderInProgress } from './OrderInProgress'; - -describe('OrderInProgress View', () => { - beforeEach(() => { - cy.viewport('ipad-2'); - }); - - it('should render the OrderInProgress view', () => { - mount( - - - , - ); - - cySmartGet('order-in-progress-view').should('exist'); - cySmartGet('simple-text-body__heading').should('have.text', 'Order in progress'); - cySmartGet('simple-text-body__body').should( - 'have.text', - // eslint-disable-next-line max-len - 'You’ll receive an email from Transak when complete. This can take up to 3 mins.You can close this window, the transaction will be reflected in your wallet once complete.', - ); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/swap/GeoblockLoader.cy.tsx b/packages/checkout/widgets-lib/src/widgets/swap/GeoblockLoader.cy.tsx deleted file mode 100644 index f767bb6a9e..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/swap/GeoblockLoader.cy.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { cy } from 'local-cypress'; -import { mount } from 'cypress/react18'; -import { Checkout } from '@imtbl/checkout-sdk'; -import { GeoblockLoader } from './GeoblockLoader'; - -describe('GeoblockLoader', () => { - beforeEach(() => { - cy.viewport('ipad-2'); - }); - - it('should show loading view while waiting for promise', () => { - const checkout = { - isSwapAvailable: () => new Promise(() => {}), - } as Checkout; - - mount( - Inner Widget} - serviceUnavailableView={
Service Unavailable
} - checkout={checkout} - />, - ); - - cy.get('span').contains('Loading').should('exist'); - cy.get('#unavailable-view').should('not.exist'); - cy.get('#inner-widget').should('not.exist'); - }); - - it('should load swap widget if service is available', () => { - const checkout = { - isSwapAvailable: () => Promise.resolve(true), - } as Checkout; - - mount( - Inner Widget} - serviceUnavailableView={
Service Unavailable
} - checkout={checkout} - />, - ); - - cy.get('#inner-widget').should('exist'); - cy.get('#unavailable-view').should('not.exist'); - cy.get('span').contains('Loading').should('not.exist'); - }); - - it('should show service unavailable view if service is unavailable', () => { - const checkout = { - isSwapAvailable: () => Promise.resolve(false), - } as Checkout; - - mount( - Inner Widget} - serviceUnavailableView={
Service Unavailable
} - checkout={checkout} - />, - ); - - cy.get('#unavailable-view').should('exist'); - cy.get('#inner-widget').should('not.exist'); - cy.get('span').contains('Loading').should('not.exist'); - }); - - it('should show service unavailable view if error thrown', () => { - const checkout = { - isSwapAvailable: () => Promise.reject(), - } as Checkout; - - mount( - Inner Widget} - serviceUnavailableView={
Service Unavailable
} - checkout={checkout} - />, - ); - - cy.get('#unavailable-view').should('exist'); - cy.get('#inner-widget').should('not.exist'); - cy.get('span').contains('Loading').should('not.exist'); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/swap/SwapWidget.cy.tsx b/packages/checkout/widgets-lib/src/widgets/swap/SwapWidget.cy.tsx deleted file mode 100644 index f66da969d4..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/swap/SwapWidget.cy.tsx +++ /dev/null @@ -1,714 +0,0 @@ -import { - describe, it, cy, beforeEach, -} from 'local-cypress'; -import { mount } from 'cypress/react18'; -import { - ChainId, ChainName, Checkout, SwapWidgetParams, WidgetTheme, -} from '@imtbl/checkout-sdk'; -import { BigNumber } from 'ethers'; -import { Environment } from '@imtbl/config'; -import { Web3Provider } from '@ethersproject/providers'; -import { ViewContextTestComponent } from '../../context/view-context/test-components/ViewContextTestComponent'; -import { cyIntercept, cySmartGet } from '../../lib/testUtils'; -import SwapWidget from './SwapWidget'; -import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig'; -import { quotesProcessor } from './functions/FetchQuote'; -import { ConnectionStatus } from '../../context/connect-loader-context/ConnectLoaderContext'; -import { - ConnectLoaderTestComponent, -} from '../../context/connect-loader-context/test-components/ConnectLoaderTestComponent'; -import { NATIVE } from '../../lib'; - -describe('SwapWidget tests', () => { - const mockProvider = { - getSigner: () => ({ - getAddress: () => Promise.resolve('0xwalletAddress'), - populateTransaction: (tx) => Promise.resolve(tx), - }), - getNetwork: async () => ({ - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - }), - provider: { - request: async () => null, - }, - } as unknown as Web3Provider; - - const connectLoaderState = { - checkout: new Checkout({ - baseConfig: { environment: Environment.SANDBOX }, - }), - provider: mockProvider, - connectionStatus: ConnectionStatus.CONNECTED_WITH_NETWORK, - }; - - beforeEach(() => { - cy.viewport('ipad-2'); - cyIntercept(); - - cy.stub(Checkout.prototype, 'connect') - .as('connectStub') - .resolves({ - provider: mockProvider, - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - }, - }); - - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({ - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - isSupported: true, - nativeCurrency: { - symbol: 'eth', - }, - }); - - cy.stub(Checkout.prototype, 'getTokenAllowList') - .as('getTokenAllowListStub') - .resolves({ - tokens: [ - { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '0xf57e7e7c23978c3caec3c3548e3d615c346e79ff', - }, - { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - ], - }); - }); - - const params = {} as SwapWidgetParams; - const config: StrongCheckoutWidgetsConfig = { - environment: Environment.SANDBOX, - theme: WidgetTheme.DARK, - isBridgeEnabled: true, - isSwapEnabled: true, - isOnRampEnabled: true, - }; - - describe('SwapWidget Gas Balance Checks', () => { - it('should show not enough imx drawer when user has no imx balance on load', () => { - cy.stub(Checkout.prototype, 'getAllBalances') - .as('getAllBalancesStub') - .resolves({ - balances: [ - { - balance: BigNumber.from('0'), - formattedBalance: '0', - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - }, - }, - ], - }); - - mount( - - - , - ); - - cySmartGet('not-enough-gas-bottom-sheet').should('be.visible'); - cySmartGet('not-enough-gas-cancel-button').should('be.visible'); - cySmartGet('not-enough-gas-add-imx-button').should('be.visible'); - cySmartGet('not-enough-gas-adjust-amount-button').should('not.exist'); - - cySmartGet('not-enough-gas-cancel-button').click(); - cySmartGet('not-enough-gas-add-imx-button').should('not.exist'); - }); - - it('should show top up view when add imx coins pressed', () => { - cy.stub(Checkout.prototype, 'getAllBalances') - .as('getAllBalancesStub') - .resolves({ - balances: [ - { - balance: BigNumber.from('0'), - formattedBalance: '0', - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - }, - }, - ], - }); - - mount( - - - , - ); - - cySmartGet('not-enough-gas-bottom-sheet').should('be.visible'); - cySmartGet('not-enough-gas-cancel-button').should('be.visible'); - cySmartGet('not-enough-gas-add-imx-button').should('be.visible'); - cySmartGet('not-enough-gas-adjust-amount-button').should('not.exist'); - - cySmartGet('not-enough-gas-add-imx-button').click(); - cySmartGet('top-up-view').should('be.visible'); - }); - - it('should load swap form if user has enough for gas', () => { - cy.stub(Checkout.prototype, 'getAllBalances') - .as('getAllBalancesStub') - .resolves({ - balances: [ - { - balance: BigNumber.from('100000000000001'), - formattedBalance: '1', - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - }, - }, - ], - }); - - mount( - - - , - ); - - cySmartGet('not-enough-gas-bottom-sheet').should('not.exist'); - }); - - it('should show top up view with coins if getAllBalances succeed at least once', () => { - cy.stub(Checkout.prototype, 'getAllBalances') - .as('getAllBalancesStub') - .rejects() - .resolves({ - balances: [ - { - balance: BigNumber.from('0'), - formattedBalance: '0', - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - }, - }, - ], - }); - - mount( - - - , - ); - - cySmartGet('not-enough-gas-add-imx-button').click(); - cySmartGet('top-up-view').should('be.visible'); - }); - }); - - describe('SwapWidget Form', () => { - let getAllBalancesStub: any; - - beforeEach(() => { - getAllBalancesStub = cy.stub(Checkout.prototype, 'getAllBalances') - .as('getAllBalancesStub') - .resolves({ - balances: [ - { - balance: BigNumber.from('50000000000000000000'), - formattedBalance: '0.5', - token: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '0xf57e7e7c23978c3caec3c3548e3d615c346e79ff', - }, - }, - { - balance: BigNumber.from('90000000000000000000'), - formattedBalance: '20', - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - }, - { - balance: BigNumber.from('100000000'), - formattedBalance: '100', - token: { - name: 'USDCoin', - symbol: 'USDC', - decimals: 6, - address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', - }, - }, - ], - }); - }); - - it('should show swap widget on mount', () => { - mount( - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').should('be.visible'); - cySmartGet('fromTokenInputs-text-form-text').should('be.visible'); - cySmartGet('toTokenInputs-select-form-select__target').should('be.visible'); - cySmartGet('toTokenInputs-text-form-text').should('be.visible'); - }); - - it('should show balances after getAllBalances failure', () => { - getAllBalancesStub.rejects() - .resolves({ - balances: [ - { - balance: BigNumber.from('10000000000000000000'), - formattedBalance: '0.1', - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - }, - }, - ], - }); - - mount( - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-imx-native') - .should('exist'); - }); - - it('should show error screen after getAllBalances unrecoverable failure', () => { - getAllBalancesStub - .onFirstCall() - .rejects({ data: { code: 500 } }) - .onSecondCall() - .resolves({ - balances: [ - { - balance: BigNumber.from('10000000000000000000'), - formattedBalance: '0.1', - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - }, - }, - ], - }); - - mount( - - - , - ); - - cySmartGet('error-view').should('be.visible'); - cySmartGet('footer-button').click(); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-imx-native') - .should('exist'); - }); - - it('should set fromTokens to user balances filtered by the token allow list', () => { - mount( - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .should('exist'); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-imx-native') - .should('exist'); - cySmartGet('fromTokenInputs-select-form-USDC-USDCoin').should('not.exist'); - }); - - describe('Swap Form Submit', () => { - const mockQuoteFromAmountIn = { - quote: { - amount: { - token: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF', - }, - value: BigNumber.from('100000000000000000'), - }, - amountWithMaxSlippage: { - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: '', - }, - value: BigNumber.from('10000000000000000'), - }, - slippage: 10, - }, - swap: { - gasFeeEstimate: { - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: '', - }, - value: BigNumber.from('10000000000000000'), - }, - transaction: { - to: 'toSwapAddress', - from: 'fromSwapAddress', - }, - }, - approval: { - gasFeeEstimate: { - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: '', - }, - value: BigNumber.from('10000000000000000'), - }, - transaction: { - to: 'toApprovalAddress', - from: 'fromApprovalAddress', - }, - }, - }; - let fromAmountInStub; - beforeEach(() => { - fromAmountInStub = cy.stub(quotesProcessor, 'fromAmountIn') - .as('fromAmountInStub') - .resolves(mockQuoteFromAmountIn); - - mount( - - - - - , - ); - }); - - describe('No approval txn needed', () => { - it('should submit swap and show success when no approval txn needed', () => { - cy.stub(Checkout.prototype, 'sendTransaction').as('sendTransactionStub') - .resolves({ - transactionResponse: { - wait: () => new Promise((resolve) => { - setTimeout(() => { - resolve({ - status: 1, - }); - }, 1000); - }), - }, - }); - - // Set up so no approval transaction is needed - fromAmountInStub.resolves({ ...mockQuoteFromAmountIn, approval: null }); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); - - cySmartGet('fromTokenInputs-text-form-text__input').type('0.1').trigger('change'); - cySmartGet('@fromAmountInStub').should('have.been.called'); - cySmartGet('swap-button').click(); - - cySmartGet('@sendTransactionStub').should('have.been.calledOnce'); - cySmartGet('loading-view').should('be.visible'); - cy.wait(1000); - cySmartGet('success-box').should('be.visible'); - }); - - it('should submit swap and show fail view', () => { - cy.stub(Checkout.prototype, 'sendTransaction').as('sendTransactionStub') - .onFirstCall() - .resolves({ - transactionResponse: { - wait: () => new Promise((resolve) => { - setTimeout(() => { - resolve({ - status: 0, - }); - }, 1000); - }), - }, - }); - - // Set up so no approval transaction is needed - fromAmountInStub.resolves({ ...mockQuoteFromAmountIn, approval: null }); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - - cySmartGet('toTokenInputs-select-form-select__target').click(); - // eslint-disable-next-line max-len - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); - - cySmartGet('fromTokenInputs-text-form-text__input').type('0.1').trigger('change'); - cySmartGet('@fromAmountInStub').should('have.been.called'); - cySmartGet('swap-button').click(); - - cySmartGet('@sendTransactionStub').should('have.been.calledOnce'); - cySmartGet('loading-view').should('be.visible'); - cy.wait(1000); - cySmartGet('failure-box').should('be.visible'); - }); - }); - - describe('swap flow with approval needed', () => { - it('should go through Approve ERC20 flow, submit swap and succeed', () => { - cy.stub(Checkout.prototype, 'sendTransaction').as('sendTransactionStub') - .onFirstCall() - .resolves({ - transactionResponse: { - wait: () => new Promise((resolve) => { - setTimeout(() => { - resolve({ - status: 1, - }); - }, 1000); - }), - }, - }) - .onSecondCall() - .resolves({ - transactionResponse: { - wait: () => new Promise((resolve) => { - setTimeout(() => { - resolve({ - status: 1, - }); - }, 1000); - }), - }, - }); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - - cySmartGet('toTokenInputs-select-form-select__target').click(); - // eslint-disable-next-line max-len - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); - - cySmartGet('fromTokenInputs-text-form-text__input').type('0.1').trigger('change'); - cySmartGet('@fromAmountInStub').should('have.been.called'); - cySmartGet('swap-button').click(); - - cySmartGet('simple-text-body__heading').should( - 'have.text', - 'You\'ll be asked to set a spending cap for this transaction', - ); - cySmartGet('simple-text-body__body').should( - 'include.text', - 'Input at least 0.1 ETH for this transaction and future transactions, then follow the prompts.', - ); - cySmartGet('footer-button').should('have.text', 'Got it'); - - // click button for Approval transaction - cySmartGet('footer-button').click(); - cySmartGet('@sendTransactionStub').should('have.been.calledOnce'); - cySmartGet('@sendTransactionStub') - .should( - 'have.been.calledWith', - { - provider: mockProvider, - transaction: { from: 'fromApprovalAddress', to: 'toApprovalAddress' }, - }, - ); - cySmartGet('loading-view').should('be.visible'); - cy.wait(1000); - - cySmartGet('simple-text-body__heading').should( - 'have.text', - 'Now you\'ll just need to confirm the transaction', - ); - cySmartGet('simple-text-body__body').should( - 'include.text', - 'Follow the prompts in your wallet.', - ); - cySmartGet('footer-button').should('have.text', 'Okay'); - - // click button for Swap transaction - cySmartGet('footer-button').click(); - cySmartGet('@sendTransactionStub').should('have.been.calledTwice'); - cySmartGet('@sendTransactionStub').should('have.been.calledWith', { - provider: mockProvider, - transaction: { from: 'fromSwapAddress', to: 'toSwapAddress' }, - }); - - cySmartGet('loading-view').should('be.visible'); - - cy.wait(1000); - cySmartGet('success-box').should('be.visible'); - }); - - it('should go through Approve ERC20 flow, submit swap and fail', () => { - cy.stub(Checkout.prototype, 'sendTransaction').as('sendTransactionStub') - .onFirstCall() - .resolves({ - transactionResponse: { - wait: () => new Promise((resolve) => { - setTimeout(() => { - resolve({ - status: 1, - }); - }, 1000); - }), - }, - }) - .onSecondCall() - .resolves({ - transactionResponse: { - wait: () => new Promise((resolve) => { - setTimeout(() => { - resolve({ - status: 0, - }); - }, 1000); - }), - }, - }); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - - cySmartGet('toTokenInputs-select-form-select__target').click(); - // eslint-disable-next-line max-len - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').click(); - - cySmartGet('fromTokenInputs-text-form-text__input').type('0.1').trigger('change'); - cySmartGet('@fromAmountInStub').should('have.been.called'); - - cySmartGet('swap-button').click(); - - cySmartGet('simple-text-body__heading').should( - 'have.text', - 'You\'ll be asked to set a spending cap for this transaction', - ); - cySmartGet('simple-text-body__body').should( - 'include.text', - 'Input at least 0.1 ETH for this transaction and future transactions, then follow the prompts.', - ); - cySmartGet('footer-button').should('have.text', 'Got it'); - - // click button for Approval transaction - cySmartGet('footer-button').click(); - - cySmartGet('@fromAmountInStub').should('have.been.called'); - cySmartGet('@sendTransactionStub').should('have.been.calledOnce'); - cySmartGet('@sendTransactionStub') - .should( - 'have.been.calledWith', - { - provider: mockProvider, - transaction: { from: 'fromApprovalAddress', to: 'toApprovalAddress' }, - }, - ); - cySmartGet('loading-view').should('be.visible'); - cy.wait(1000); - - cySmartGet('simple-text-body__heading').should( - 'have.text', - 'Now you\'ll just need to confirm the transaction', - ); - cySmartGet('simple-text-body__body').should( - 'include.text', - 'Follow the prompts in your wallet.', - ); - cySmartGet('footer-button').should('have.text', 'Okay'); - - // click button for Swap transaction - cySmartGet('footer-button').click(); - cySmartGet('@sendTransactionStub').should('have.been.calledTwice'); - cySmartGet('@sendTransactionStub').should('have.been.calledWith', { - provider: mockProvider, - transaction: { from: 'fromSwapAddress', to: 'toSwapAddress' }, - }); - - cySmartGet('loading-view').should('be.visible'); - - cy.wait(1000); - cySmartGet('failure-box').should('be.visible'); - }); - }); - }); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.cy.tsx b/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.cy.tsx deleted file mode 100644 index 29b8e81705..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/swap/components/SwapForm.cy.tsx +++ /dev/null @@ -1,1187 +0,0 @@ -import { mount } from 'cypress/react18'; -import { BigNumber } from 'ethers'; -import { cy } from 'local-cypress'; -import { Web3Provider } from '@ethersproject/providers'; -import { - ChainId, ChainName, Checkout, CheckoutErrorType, - WidgetTheme, -} from '@imtbl/checkout-sdk'; -import { Exchange } from '@imtbl/dex-sdk'; -import { Environment } from '@imtbl/config'; -import { SinonStub } from 'cypress/types/sinon'; -import { cyIntercept, cySmartGet } from '../../../lib/testUtils'; -import { SwapWidgetTestComponent } from '../test-components/SwapWidgetTestComponent'; -import { SwapForm } from './SwapForm'; -import { SwapState, initialSwapState } from '../context/SwapContext'; -import { SwapCoins } from '../views/SwapCoins'; -import { quotesProcessor } from '../functions/FetchQuote'; -import { ConnectionStatus } from '../../../context/connect-loader-context/ConnectLoaderContext'; -import { - ConnectLoaderTestComponent, -} from '../../../context/connect-loader-context/test-components/ConnectLoaderTestComponent'; -import { NATIVE } from '../../../lib'; - -describe('SwapForm', () => { - let testSwapState: SwapState; - let cryptoConversions; - - beforeEach(() => { - cy.viewport('ipad-2'); - cyIntercept(); - - cryptoConversions = new Map([['eth', 1800], ['imx', 0.75]]); - - testSwapState = { - ...initialSwapState, - exchange: {} as Exchange, - tokenBalances: [ - { - balance: BigNumber.from('10000000000000'), - formattedBalance: '0.1', - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - }, - { - balance: BigNumber.from('10000000000000'), - formattedBalance: '0.1', - token: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF', - }, - }, - ], - allowedTokens: [ - { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF', - }, - ], - network: { - name: ChainName.IMTBL_ZKEVM_TESTNET, - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - isSupported: true, - }, - }; - }); - const connectLoaderState = { - checkout: new Checkout({ - baseConfig: { environment: Environment.SANDBOX }, - }), - provider: {} as Web3Provider, - connectionStatus: ConnectionStatus.CONNECTED_WITH_NETWORK, - }; - - describe('initial form state', () => { - it('should show all swap inputs with initial state', () => { - mount( - - - , - ); - cySmartGet('fromTokenInputs-select-form-select__target').should('be.visible'); - cySmartGet('fromTokenInputs-select-form-select__target').should('have.text', 'Select token'); - cySmartGet('fromTokenInputs-text-form-text') - .should('be.visible'); - cySmartGet('fromTokenInputs-text-form-text__input') - .should('have.attr', 'placeholder', '0'); - cySmartGet('toTokenInputs-select-form-select__target').should('be.visible'); - cySmartGet('toTokenInputs-select-form-select__target').should('have.text', 'Select token'); - cySmartGet('toTokenInputs-text-form-text').should('be.visible'); - cySmartGet('toTokenInputs-text-form-text__input').should( - 'have.attr', - 'placeholder', - '0', - ); - }); - - it('should set native token as from if native token is provided in from address', () => { - mount( - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').should('be.visible'); - cySmartGet('fromTokenInputs-select-form-select__target').should('have.text', 'IMX'); - }); - - it('should set native token as to if native token is provided in to address', () => { - mount( - - - , - ); - - cySmartGet('toTokenInputs-select-form-select__target').should('be.visible'); - cySmartGet('toTokenInputs-select-form-select__target').should('have.text', 'IMX'); - }); - - it('should set from token matching the from token address provided', () => { - mount( - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').should('be.visible'); - cySmartGet('fromTokenInputs-select-form-select__target').should('have.text', 'ETH'); - }); - - it('should set to token matching the to token address provided', () => { - mount( - - - , - ); - - cySmartGet('toTokenInputs-select-form-select__target').should('be.visible'); - cySmartGet('toTokenInputs-select-form-select__target').should('have.text', 'ETH'); - }); - - it('should set both from and to token when token addresses are unique', () => { - mount( - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').should('be.visible'); - cySmartGet('fromTokenInputs-select-form-select__target').should('have.text', 'IMX'); - cySmartGet('toTokenInputs-select-form-select__target').should('be.visible'); - cySmartGet('toTokenInputs-select-form-select__target').should('have.text', 'ETH'); - }); - - it('should set only from token when to and from token addresses match', () => { - mount( - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').should('be.visible'); - cySmartGet('fromTokenInputs-select-form-select__target').should('have.text', 'ETH'); - cySmartGet('toTokenInputs-select-form-select__target').should('be.visible'); - cySmartGet('toTokenInputs-select-form-select__target').should('have.text', 'Select token'); - }); - }); - - describe('swapFromAmount input validation', () => { - const swapFromAmountTestCases = [ - { - name: 'should allow for numbers and decimal place', - input: '123.4', - expected: '123.4', - }, - { - name: 'should allow only one decimal place', - input: '123.4.3', - expected: '123.43', - }, - { - name: 'should allow for decimal place with 6 decimals', - input: '123.123456', - expected: '123.123456', - }, - { - name: 'should not allow any alpha character inputs', - input: 'abc', - expected: '', - }, - { - name: 'should not allow spaces', - input: ' ', - expected: '', - }, - { - name: 'should not allow spaces 2', - input: '123 .456', - expected: '123.456', - }, - { - name: 'should not allow special characters', - input: '!@#$%^&*()', - expected: '', - }, - { - name: 'should only keep numeric values from alpha numeric input', - input: '123a', - expected: '123', - }, - { - name: 'should only keep numeric values from alpha numeric input 2', - input: '123a4', - expected: '1234', - }, - { - name: 'should truncate to 6 if more than 6 decimals typed', - input: '123.123456789', - expected: '123.123456', - }, - { - name: 'should not allow decimal place to start', - input: '.1', - expected: '1', - }, - { - name: 'should force number before decimal place', - input: '0.1', - expected: '0.1', - }, - ]; - swapFromAmountTestCases.forEach((testCase) => { - it(`should only allow numbers with 6 decimal places in the swapFromAmount input - ${testCase.name}`, () => { - mount( - - - , - ); - - // Have had to modify the onChange method to reset to previous state if input is not valid - cySmartGet('fromTokenInputs-text-form-text__input').type(testCase.input).trigger('change'); - cySmartGet('fromTokenInputs-text-form-text__input').should('have.attr', 'value', testCase.expected); - }); - }); - }); - - describe('swap form behaviour', () => { - it('should validate from input when direction is from and Swap Button is clicked', () => { - mount( - - - , - ); - - cySmartGet('fromTokenInputs-text-form-text__input').focus(); - cySmartGet('swap-button').click(); - - cySmartGet('fromTokenInputs-select-form-select-control-error') - .should('exist') - .should('have.text', 'Select a coin to swap'); - - cySmartGet('fromTokenInputs-text-form-text-control-error') - .should('exist') - .should('have.text', 'Please input amount'); - - cySmartGet('toTokenInputs-select-form-select-control-error') - .should('exist') - .should('have.text', 'Select a coin to receive'); - - cySmartGet('toTokenInputs-text-form-text-control-error') - .should('not.exist'); - }); - - it('should validate to input when direction is to and Swap Button is clicked', () => { - mount( - - - , - ); - - cySmartGet('toTokenInputs-text-form-text__input').focus(); - cySmartGet('swap-button').click(); - - cySmartGet('fromTokenInputs-select-form-select-control-error') - .should('exist') - .should('have.text', 'Select a coin to swap'); - - cySmartGet('toTokenInputs-text-form-text-control-error') - .should('exist') - .should('have.text', 'Please input amount'); - - cySmartGet('toTokenInputs-select-form-select-control-error') - .should('exist') - .should('have.text', 'Select a coin to receive'); - - cySmartGet('fromTokenInputs-text-form-text-control-error') - .should('not.exist'); - }); - - it('should show insufficient balance error when swap from amount is larger than token balance', () => { - mount( - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - cySmartGet('fromTokenInputs-text-form-text__input').type('20').trigger('change'); - - cySmartGet('swap-button').click(); - - cySmartGet('fromTokenInputs-text-form-text-control-error') - .should('exist') - .should('have.text', 'Insufficient balance'); - }); - - it('should show no amount error when swap from amount missing', () => { - mount( - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - - cySmartGet('swap-button').click(); - - cySmartGet('fromTokenInputs-text-form-text-control-error') - .should('exist') - .should('have.text', 'Please input amount'); - }); - - it('should remove validation error when swap from amount is fixed', () => { - mount( - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - - cySmartGet('swap-button').click(); - cySmartGet('fromTokenInputs-text-form-text-control-error') - .should('exist') - .should('have.text', 'Please input amount'); - - cySmartGet('fromTokenInputs-text-form-text__input').type('0.01').blur(); - - cySmartGet('fromTokenInputs-text-form-text-control-error') - .should('not.exist'); - }); - - it('should remove validation error when swap from token is chosen', () => { - mount( - - - , - ); - - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); - cySmartGet('fromTokenInputs-text-form-text__input').type('0.01').blur(); - cySmartGet('swap-button').click(); - cySmartGet('fromTokenInputs-select-form-select-control-error') - .should('exist') - .should('have.text', 'Select a coin to swap'); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - - cySmartGet('fromTokenInputs-text-form-text-control-error') - .should('not.exist'); - }); - }); - - describe('when to fetch a quote', () => { - let fromAmountInStub: SinonStub; - - beforeEach(() => { - fromAmountInStub = cy.stub(quotesProcessor, 'fromAmountIn') - .as('fromAmountInStub'); - fromAmountInStub.resolves({ - quote: { - amount: { - token: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '0xf57e7e7c23978c3caec3c3548e3d615c346e79ff', - }, - value: BigNumber.from('112300000000000012'), - }, - amountWithMaxSlippage: { - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - value: BigNumber.from('112300000000000032'), - }, - slippage: 10, - }, - swap: { - gasFeeEstimate: { - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - value: BigNumber.from('112300000000000045'), - }, - transaction: { - to: 'toSwapAddress', - from: 'fromSwapAddress', - }, - }, - approval: {}, - }); - }); - - it('should only fetch a quote when from token and to token are selected and swap amount has value', () => { - mount( - - - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); - cySmartGet('fromTokenInputs-text-form-text__input').type('0.01').trigger('change'); - - const params = [ - // exchange - {}, - // provider - {}, - // fromToken - { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF', - }, - // fromAmount - '0.01', - // toToken - { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - ]; - cySmartGet('@fromAmountInStub').should('have.been.calledWith', ...params); - }); - - it('should set to amount and fees after quote is fetched', () => { - mount( - - - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); - cySmartGet('fromTokenInputs-text-form-text__input').type('0.01').trigger('change'); - cySmartGet('@fromAmountInStub').should('have.been.called'); - - const params = [ - // exchange - {}, - // provider - {}, - // fromToken - { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF', - }, - // fromAmount - '0.01', - // toToken - { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - ]; - cySmartGet('@fromAmountInStub').should('have.been.calledWith', ...params); - cySmartGet('fees-gas-fee__priceDisplay__price').should('have.text', '≈ IMX 0.112300'); - cySmartGet('fees-gas-fee__priceDisplay__fiatAmount').should('have.text', '≈ USD $0.08'); - }); - - it('should fetch a quote after from amount max button is clicked', () => { - mount( - - - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); - cySmartGet('fromTokenInputs-text-form-max-button').click(); - - const params = [ - // exchange - {}, - // provider - {}, - // fromToken - { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF', - }, - // fromAmount - '0.1', // From balance - // toToken - { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - ]; - - cySmartGet('@fromAmountInStub').should('have.been.calledWith', ...params); - }); - - it('should not fetch a quote when to token is not selected', () => { - mount( - - - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - cySmartGet('fromTokenInputs-text-form-text__input').type('0.01').trigger('change'); - cySmartGet('@fromAmountInStub').should('not.have.been.called'); - - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); - cySmartGet('@fromAmountInStub').should('have.been.called'); - }); - - it('should not fetch a quote when from token is not selected', () => { - mount( - - - - - , - ); - - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); - cySmartGet('fromTokenInputs-text-form-text__input').type('0.01').trigger('change'); - cySmartGet('@fromAmountInStub').should('not.have.been.called'); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - cySmartGet('@fromAmountInStub').should('have.been.called'); - }); - - it('should not fetch a quote when from amount is 0', () => { - mount( - - - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); - cySmartGet('fromTokenInputs-text-form-text__input').type('0').trigger('change'); - cySmartGet('@fromAmountInStub').should('not.have.been.called'); - - cySmartGet('fromTokenInputs-text-form-text__input').type('0.01').trigger('change'); - cySmartGet('@fromAmountInStub').should('have.been.called'); - }); - - it('should add swap and approval fees into single total gas when approval required', () => { - // Override from quote to include approval - fromAmountInStub.resolves({ - quote: { - amount: { - token: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '0xf57e7e7c23978c3caec3c3548e3d615c346e79ff', - }, - value: BigNumber.from('112300000000000012'), - }, - amountWithMaxSlippage: { - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - value: BigNumber.from('112300000000000032'), - }, - slippage: 10, - }, - swap: { - gasFeeEstimate: { - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - value: BigNumber.from('112300000000000045'), - }, - transaction: { - to: 'toSwapAddress', - from: 'fromSwapAddress', - }, - }, - approval: { - gasFeeEstimate: { - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - value: BigNumber.from('112300000000000045'), - }, - transaction: { - to: 'toApprovalAddress', - from: 'fromApprovalAddress', - }, - }, - }); - - mount( - - - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); - cySmartGet('fromTokenInputs-text-form-text__input').type('0.01').trigger('change'); - cySmartGet('@fromAmountInStub').should('have.been.called'); - - const params = [ - // exchange - {}, - // provider - {}, - // fromToken - { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF', - }, - // fromAmount - '0.01', - // toToken - { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - ]; - cySmartGet('@fromAmountInStub').should('have.been.calledWith', ...params); - cySmartGet('fees-gas-fee__priceDisplay__price').should('have.text', '≈ IMX 0.224600'); - cySmartGet('fees-gas-fee__priceDisplay__fiatAmount').should('have.text', '≈ USD $0.17'); - }); - }); - - describe('submitting a swap', () => { - describe('dex success', () => { - beforeEach(() => { - cy.stub(quotesProcessor, 'fromAmountIn') - .as('fromAmountInStub') - .resolves({ - quote: { - amount: { - token: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF', - }, - value: BigNumber.from('112300000000000012'), - }, - amountWithMaxSlippage: { - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - value: BigNumber.from('112300000000000032'), - }, - slippage: 10, - }, - swap: { - gasFeeEstimate: { - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - value: BigNumber.from('100000000000000'), - }, - transaction: { - to: 'toSwapAddress', - from: 'fromSwapAddress', - }, - }, - }); - cy.stub(quotesProcessor, 'fromAmountOut') - .as('fromAmountOutStub') - .resolves({ - quote: { - amount: { - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - value: BigNumber.from('100000000000000'), - }, - amountWithMaxSlippage: { - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - value: BigNumber.from('100000000000000000'), - }, - slippage: 10, - }, - swap: { - gasFeeEstimate: { - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - value: BigNumber.from('100000000000000'), - }, - transaction: { - to: 'toSwapAddress', - from: 'fromSwapAddress', - }, - }, - }); - }); - - it('should open the transaction rejected drawer if the user rejects the transaction', () => { - cy.stub(Checkout.prototype, 'sendTransaction').as('sendTransactionStub') - .rejects({ - type: CheckoutErrorType.USER_REJECTED_REQUEST_ERROR, - }); - - mount( - - - - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); - - cySmartGet('fromTokenInputs-text-form-text__input').type('0.1').trigger('change'); - cySmartGet('@fromAmountInStub').should('have.been.called'); - cySmartGet('swap-button').click(); - - cySmartGet('transaction-rejected-heading').should('be.visible'); - }); - - it('should show not enough imx drawer if user has zero imx', () => { - mount( - - - - - - , - ); - - cySmartGet('not-enough-gas-bottom-sheet').should('be.visible'); - cySmartGet('not-enough-gas-add-imx-button').should('be.visible'); - cySmartGet('not-enough-gas-cancel-button').should('be.visible'); - cySmartGet('not-enough-gas-adjust-amount-button').should('not.exist'); - }); - - it('should show adjust button if user does not have enough imx and imx is in from', () => { - mount( - - - - - - , - ); - - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-native').click(); - - cySmartGet('toTokenInputs-text-form-text__input').type('0.00001').trigger('change'); - cySmartGet('@fromAmountInStub').should('have.been.called'); - cySmartGet('swap-button').click(); - - cySmartGet('not-enough-gas-bottom-sheet').should('be.visible'); - cySmartGet('not-enough-gas-add-imx-button').should('be.visible'); - cySmartGet('not-enough-gas-cancel-button').should('be.visible'); - cySmartGet('not-enough-gas-adjust-amount-button').should('be.visible'); - - cySmartGet('not-enough-gas-adjust-amount-button').click(); - cySmartGet('not-enough-gas-bottom-sheet').should('not.exist'); - }); - - it('should show loading if user has enough imx and does not reject the transaction', () => { - cy.stub(Checkout.prototype, 'sendTransaction').as('sendTransactionStub') - .resolves({}); - - mount( - - - - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); - - cySmartGet('fromTokenInputs-text-form-text__input').type('0.1').trigger('change'); - cySmartGet('@fromAmountInStub').should('have.been.called'); - cySmartGet('swap-button').click(); - - cySmartGet('not-enough-gas-bottom-sheet').should('not.exist'); - cySmartGet('transaction-rejected-heading').should('not.exist'); - cySmartGet('swap-button__icon').should('have.attr', 'data-icon', 'Loading'); - }); - }); - - describe('dex error', () => { - it('should show unable to swap if dex returns an error and clear form when closed', () => { - cy.stub(quotesProcessor, 'fromAmountIn') - .as('fromAmountInStub') - .rejects({}); - - mount( - - - - - - , - ); - - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-native').click(); - - cySmartGet('fromTokenInputs-text-form-text__input').type('0.00001').trigger('change'); - cySmartGet('@fromAmountInStub').should('have.been.called'); - cySmartGet('unable-to-swap-bottom-sheet').should('be.visible'); - cySmartGet('unable-to-swap-cancel-button').should('be.visible'); - - cySmartGet('unable-to-swap-cancel-button').click(); - cySmartGet('unable-to-swap-bottom-sheet').should('not.exist'); - cySmartGet('fromTokenInputs-select-form-select__target').should('have.text', 'Select token'); - cySmartGet('fromTokenInputs-text-form-text__input').should('have.text', ''); - cySmartGet('toTokenInputs-select-form-select__target').should('have.text', 'Select token'); - cySmartGet('toTokenInputs-text-form-text__input').should('have.text', ''); - }); - }); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/swap/views/ApproveERC20Onboarding.cy.tsx b/packages/checkout/widgets-lib/src/widgets/swap/views/ApproveERC20Onboarding.cy.tsx deleted file mode 100644 index 06b3e95100..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/swap/views/ApproveERC20Onboarding.cy.tsx +++ /dev/null @@ -1,274 +0,0 @@ -import { mount } from 'cypress/react18'; -import { cy } from 'local-cypress'; -import { BigNumber } from 'ethers'; -import { ExternalProvider, TransactionRequest, Web3Provider } from '@ethersproject/providers'; -import { Checkout, CheckoutErrorType } from '@imtbl/checkout-sdk'; -import { Quote } from '@imtbl/dex-sdk'; -import { ApproveERC20Onboarding } from './ApproveERC20Onboarding'; -import { cyIntercept, cySmartGet } from '../../../lib/testUtils'; -import { - ApproveERC20SwapData, - PrefilledSwapForm, -} from '../../../context/view-context/SwapViewContextTypes'; -import { SwapState } from '../context/SwapContext'; -import { SwapWidgetTestComponent } from '../test-components/SwapWidgetTestComponent'; -import { ConnectLoaderState, ConnectionStatus } from '../../../context/connect-loader-context/ConnectLoaderContext'; -import { - ConnectLoaderTestComponent, -} from '../../../context/connect-loader-context/test-components/ConnectLoaderTestComponent'; -import { CustomAnalyticsProvider } from '../../../context/analytics-provider/CustomAnalyticsProvider'; - -describe('Approve ERC20 Onboarding', () => { - let initialSwapState: SwapState; - let connectLoaderState: ConnectLoaderState; - let mockApproveERC20Swap: ApproveERC20SwapData; - let sendTransactionStub; - const mockProvider = { - getSigner: () => ({ - getAddress: () => Promise.resolve('0xwalletAddress'), - populateTransaction: (tx) => Promise.resolve(tx), - }), - } as Web3Provider; - - beforeEach(() => { - cy.viewport('ipad-2'); - cyIntercept(); - sendTransactionStub = cy.stub(Checkout.prototype, 'sendTransaction').as('sendTransactionStub'); - - connectLoaderState = { - checkout: { - sendTransaction: sendTransactionStub, - } as unknown as Checkout, - provider: mockProvider, - connectionStatus: ConnectionStatus.CONNECTED_WITH_NETWORK, - }; - - initialSwapState = { - exchange: null, - walletProviderName: null, - network: null, - tokenBalances: [ - { - balance: BigNumber.from('10000000000000'), - formattedBalance: '0.1', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF', - }, - }, - ], - supportedTopUps: null, - allowedTokens: [ - { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '', - }, - { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF', - }, - ], - }; - - mockApproveERC20Swap = { - approveTransaction: { - from: 'test-approval', - to: 'test-approval', - } as TransactionRequest, - transaction: { - from: 'test-swap', - to: 'test-swap', - } as TransactionRequest, - info: {} as Quote, - swapFormInfo: { - fromAmount: '0.5', - fromTokenAddress: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF', - } as PrefilledSwapForm, - }; - }); - - describe('Approve Spending Step', () => { - it('should request user to approve spending transaction on button click', () => { - mount( - - - - - - - , - ); - - cySmartGet('footer-button').click(); - cySmartGet('@sendTransactionStub') - .should( - 'have.been.calledOnceWith', - { - provider: mockProvider, - transaction: { from: 'test-approval', to: 'test-approval' }, - }, - ); - }); - - it('should move to the approve swap content when transaction approved', () => { - sendTransactionStub.resolves({ - transactionResponse: { wait: () => Promise.resolve({ status: 1 }) }, - }); - mount( - - - - - - - , - ); - - // assert approve spending copy - cySmartGet('simple-text-body__heading').should( - 'have.text', - 'You\'ll be asked to set a spending cap for this transaction', - ); - cySmartGet('simple-text-body__body').should( - 'include.text', - 'Input at least 0.5 IMX for this transaction and future transactions, then follow the prompts.', - ); - cySmartGet('footer-button').should('have.text', 'Got it'); - - // make transaction - cySmartGet('footer-button').click(); - - // assert approve swap copy - cySmartGet('simple-text-body__heading').should('have.text', 'Now you\'ll just need to confirm the transaction'); - cySmartGet('simple-text-body__body').should('include.text', 'Follow the prompts in your wallet.'); - cySmartGet('footer-button').should('have.text', 'Okay'); - }); - - it('should move to the approve swap content with Passport', () => { - sendTransactionStub.resolves({ - transactionResponse: { wait: () => Promise.resolve({ status: 1 }) }, - }); - mount( - - - - - - - , - ); - - // assert approve spending copy - cySmartGet('simple-text-body__heading').should( - 'have.text', - 'You\'ll be asked to approve a spending cap for this transaction', - ); - cySmartGet('simple-text-body__body').should( - 'include.text', - 'Follow the prompts in your wallet to approve the spending cap.', - ); - cySmartGet('footer-button').should('have.text', 'Got it'); - - // make transaction - cySmartGet('footer-button').click(); - - // assert approve swap copy - cySmartGet('simple-text-body__heading').should('have.text', 'Now you\'ll just need to confirm the transaction'); - cySmartGet('simple-text-body__body').should('include.text', 'Follow the prompts in your wallet.'); - cySmartGet('footer-button').should('have.text', 'Okay'); - }); - - it('should show correct approval spending hint (amount and symbol) in body', () => { - mount( - - - - - - - , - ); - - cySmartGet('simple-text-body__body').should('include.text', '0.5 IMX'); - }); - - it('should reset the button text when user rejects request', () => { - sendTransactionStub.rejects({ type: CheckoutErrorType.USER_REJECTED_REQUEST_ERROR }); - mount( - - - - - - - , - ); - cySmartGet('footer-button').should('have.text', 'Got it'); - - cySmartGet('footer-button').click(); - - cySmartGet('footer-button').should('have.text', 'Try again'); - }); - }); - - describe('Approve Swap step', () => { - it('should request user to approve swap transaction on button click', () => { - sendTransactionStub.resolves({ - transactionResponse: { wait: () => Promise.resolve({ status: 1 }) }, - }); - mount( - - - - - - - , - ); - - cySmartGet('footer-button').click(); - cySmartGet('@sendTransactionStub') - .should( - 'have.been.calledOnceWith', - { - provider: mockProvider, - transaction: { from: 'test-approval', to: 'test-approval' }, - }, - ); - - // second time clicking should be for the swap transaction - cySmartGet('footer-button').click(); - cySmartGet('@sendTransactionStub') - .should( - 'have.been.calledWith', - { - provider: mockProvider, - transaction: { from: 'test-swap', to: 'test-swap' }, - }, - ); - }); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/swap/views/SwapCoins.cy.tsx b/packages/checkout/widgets-lib/src/widgets/swap/views/SwapCoins.cy.tsx deleted file mode 100644 index bd3481a549..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/swap/views/SwapCoins.cy.tsx +++ /dev/null @@ -1,122 +0,0 @@ -import { - describe, it, cy, beforeEach, -} from 'local-cypress'; -import { mount } from 'cypress/react18'; -import { BigNumber } from 'ethers'; -import { ChainId, ChainName, WidgetTheme } from '@imtbl/checkout-sdk'; -import { cyIntercept, cySmartGet } from '../../../lib/testUtils'; -import { SwapWidgetTestComponent } from '../test-components/SwapWidgetTestComponent'; -import { SwapCoins } from './SwapCoins'; -import { SwapState } from '../context/SwapContext'; -import { NATIVE } from '../../../lib'; - -describe('SwapCoins tests', () => { - beforeEach(() => { - cy.viewport('ipad-2'); - cyIntercept(); - }); - - let cryptoConversions; - beforeEach(() => { - cryptoConversions = new Map([['eth', 1800], ['imx', 0.75]]); - const initialSwapState: SwapState = { - exchange: null, - walletProviderName: null, - network: { - name: ChainName.IMTBL_ZKEVM_TESTNET, - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - isSupported: true, - }, - tokenBalances: [ - { - balance: BigNumber.from('10000000000000'), - formattedBalance: '0.1', - token: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - }, - ], - supportedTopUps: null, - allowedTokens: [ - { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - address: '0xF57e7e7C23978C3cAEC3C3548E3D615c346e79fF', - }, - { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - ], - }; - - mount( - - - , - ); - }); - - it('should only allow valid number up to 6 decimal places in from field', () => { - cySmartGet('fromTokenInputs-text-form-text__input').focus().type('1234567'); - cySmartGet('fromTokenInputs-text-form-text__input').should('have.value', '1234567'); - cySmartGet('fromTokenInputs-text-form-text__input').clear(); - cySmartGet('fromTokenInputs-text-form-text__input').focus().type('12.123e4'); - cySmartGet('fromTokenInputs-text-form-text__input').should('have.value', '12.1234'); - cySmartGet('fromTokenInputs-text-form-text__input').clear(); - cySmartGet('fromTokenInputs-text-form-text__input').focus().type('12.1234567'); - cySmartGet('fromTokenInputs-text-form-text__input').should('have.value', '12.123456'); - }); - - it('should only allow valid number up to 6 decimal places in to field', () => { - cySmartGet('toTokenInputs-text-form-text__input').focus().type('1234567'); - cySmartGet('toTokenInputs-text-form-text__input').should('have.value', '1234567'); - cySmartGet('toTokenInputs-text-form-text__input').clear(); - - cySmartGet('toTokenInputs-text-form-text__input').focus().type('12.123e4'); - cySmartGet('toTokenInputs-text-form-text__input').should('have.value', '12.1234'); - cySmartGet('toTokenInputs-text-form-text__input').clear(); - - cySmartGet('toTokenInputs-text-form-text__input').focus().type('12.1234567'); - cySmartGet('toTokenInputs-text-form-text__input').should('have.value', '12.123456'); - }); - - it('should show token balances list in from select', () => { - cySmartGet('fromTokenInputs-select-form-select__target').click(); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-imx-native') - .should('be.visible'); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .should('not.exist'); - cySmartGet('fromTokenInputs-select-form-coin-selector__option-imx-native') - .click(); - cySmartGet('fromTokenInputs-select-form-select__target') - .find('span') - .should('have.text', 'IMX'); - }); - - it('should show allowed tokens list in to select', () => { - cySmartGet('toTokenInputs-select-form-select__target').click(); - cySmartGet('toTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .should('be.visible'); - cySmartGet('toTokenInputs-select-form-coin-selector__option-imx-native').should('be.visible'); - cySmartGet('toTokenInputs-select-form-coin-selector__option-eth-0xf57e7e7c23978c3caec3c3548e3d615c346e79ff') - .click(); - cySmartGet('toTokenInputs-select-form-select__target') - .find('span') - .should('have.text', 'ETH'); - cySmartGet('toTokenInputs-select-form-IMX-IMX').should('not.exist'); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/swap/views/SwapInProgress.cy.tsx b/packages/checkout/widgets-lib/src/widgets/swap/views/SwapInProgress.cy.tsx deleted file mode 100644 index 1ac2ed8db4..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/swap/views/SwapInProgress.cy.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { mount } from 'cypress/react18'; -import { cy, describe } from 'local-cypress'; -import { TransactionResponse } from '@ethersproject/providers'; -import { cyIntercept, cySmartGet } from '../../../lib/testUtils'; -import { SwapInProgress } from './SwapInProgress'; -import { SwapWidgetTestComponent } from '../test-components/SwapWidgetTestComponent'; - -describe('SwapInProgress View', () => { - beforeEach(() => { - cy.viewport('ipad-2'); - cyIntercept(); - }); - - it('should render the SwapInProgress view', () => { - mount( - - ({ status: 1 }), - } as unknown as TransactionResponse} - swapForm={{ - fromAmount: '', - fromTokenAddress: '', - toTokenAddress: '', - toAmount: '', - }} - /> - , - ); - - cySmartGet('loading-view').should('exist'); - cySmartGet('loading-text').should('have.text', 'Swap in progress'); - cySmartGet('footer-logo-container').should('exist'); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.cy.tsx deleted file mode 100644 index 73212f8e77..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/wallet/WalletWidget.cy.tsx +++ /dev/null @@ -1,788 +0,0 @@ -import { - ChainId, ChainName, Checkout, GasEstimateType, IMTBLWidgetEvents, WidgetTheme, -} from '@imtbl/checkout-sdk'; -import { - describe, it, cy, -} from 'local-cypress'; -import { mount } from 'cypress/react18'; -import { ExternalProvider, Web3Provider } from '@ethersproject/providers'; -import { BigNumber } from 'ethers'; -import { Environment } from '@imtbl/config'; -import { CryptoFiat } from '@imtbl/cryptofiat'; -import WalletWidget from './WalletWidget'; -import { cyIntercept, cySmartGet } from '../../lib/testUtils'; -import { StrongCheckoutWidgetsConfig } from '../../lib/withDefaultWidgetConfig'; -import { - ConnectLoaderTestComponent, -} from '../../context/connect-loader-context/test-components/ConnectLoaderTestComponent'; -import { ConnectionStatus } from '../../context/connect-loader-context/ConnectLoaderContext'; -import { NATIVE } from '../../lib'; -import { WalletConfiguration } from './context/WalletContext'; - -describe('WalletWidget tests', () => { - beforeEach(() => { - cy.viewport('ipad-2'); - cyIntercept(); - }); - - const mockProvider = { - getSigner: () => ({ - getAddress: () => Promise.resolve('0xwalletAddress'), - }), - } as Web3Provider; - - const mockPassportProvider = { - getSigner: () => ({ - getAddress: () => Promise.resolve('0xwalletAddress'), - }), - provider: { isPassport: true } as ExternalProvider, - } as Web3Provider; - - const connectLoaderState = { - checkout: new Checkout({ - baseConfig: { environment: Environment.SANDBOX }, - }), - provider: mockProvider, - connectionStatus: ConnectionStatus.CONNECTED_WITH_NETWORK, - }; - - const walletConfig = { - showDisconnectButton: true, - showNetworkMenu: true, - } as WalletConfiguration; - - describe('WalletWidget initialisation', () => { - beforeEach(() => { - }); - - it('should show loading screen when component is mounted', () => { - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - const balanceStub = cy - .stub(Checkout.prototype, 'getBalance') - .as('balanceNoNetworkStub'); - balanceStub.rejects({}); - const connectStub = cy - .stub(Checkout.prototype, 'connect') - .as('connectNoNetworkStub'); - connectStub.resolves({ - provider: mockProvider, - network: { name: '' }, - }); - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({ - chainId: ChainId.SEPOLIA, - isSupported: true, - nativeCurrency: { - symbol: 'eth', - }, - }); - - mount( - - - , - ); - - cySmartGet('loading-view').should('be.visible'); - cySmartGet('wallet-balances').should('be.visible'); - }); - - it('should show error view on error initialising and retry when try again pressed', () => { - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - cyIntercept(); - - const balanceStub = cy - .stub(Checkout.prototype, 'getBalance') - .as('balanceNoNetworkStub'); - balanceStub.rejects({}); - const connectStub = cy - .stub(Checkout.prototype, 'connect') - .as('connectNoNetworkStub'); - connectStub.resolves({ - provider: mockProvider, - network: { name: '' }, - }); - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .onFirstCall() - .rejects({}) - .onSecondCall() - .resolves({ - chainId: ChainId.SEPOLIA, - isSupported: true, - nativeCurrency: { - symbol: 'eth', - }, - }); - const isSwapAvailableStub = cy - .stub(Checkout.prototype, 'isSwapAvailable') - .as('isSwapAvailableStub'); - isSwapAvailableStub.resolves(true); - - mount( - - - , - ); - - cySmartGet('error-view').should('be.visible'); - cySmartGet('footer-button').click(); - cySmartGet('error-view').should('not.exist'); - cySmartGet('wallet-balances').should('be.visible'); - }); - }); - - describe('Connected Wallet', () => { - let getAllBalancesStub; - beforeEach(() => { - cy.stub(Checkout.prototype, 'connect') - .as('connectStub') - .onFirstCall() - .resolves({ - provider: { - getSigner: () => ({ - getAddress: () => Promise.resolve('dss'), - }), - getNetwork: async () => ({ - chainId: ChainId.ETHEREUM, - name: 'Ethereum', - }), - }, - network: { - chainId: ChainId.ETHEREUM, - name: 'Ethereum', - nativeCurrency: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - }, - }, - }) - .onSecondCall() - .resolves({ - provider: { - getSigner: () => ({ - getAddress: () => Promise.resolve('dss'), - }), - getNetwork: async () => ({ - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - }), - }, - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - }, - }); - - cy.stub(Checkout.prototype, 'getNetworkInfo') - .as('getNetworkInfoStub') - .resolves({ - chainId: ChainId.SEPOLIA, - isSupported: true, - nativeCurrency: { - symbol: 'eth', - }, - }); - - cy.stub(Checkout.prototype, 'getNetworkAllowList') - .as('getNetworkAllowListStub') - .resolves({ - networks: [ - { - name: 'Immutable zkEVM testnet', - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - }, - { - name: 'Sepolia', - chainId: ChainId.SEPOLIA, - }, - ], - }); - - getAllBalancesStub = cy - .stub(Checkout.prototype, 'getAllBalances') - .as('balanceStub'); - getAllBalancesStub.resolves({ - balances: [ - { - balance: BigNumber.from(1), - formattedBalance: '12.12', - token: { - name: 'Ether', - symbol: 'ETH', - decimals: 18, - }, - }, - { - balance: BigNumber.from(2), - formattedBalance: '899', - token: { - name: 'Immutable X', - symbol: 'IMX', - decimals: 18, - }, - }, - { - balance: BigNumber.from(3), - formattedBalance: '100.2', - token: { - name: 'Gods Unchained', - symbol: 'GODS', - decimals: 18, - }, - }, - ], - }); - - cy.stub(Checkout.prototype, 'switchNetwork') - .as('switchNetworkStub') - .resolves({ - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: 'Immutable zkEVM testnet', - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - }, - }); - - const signerStub = { - getAddress: cy.stub().resolves('0x123'), - }; - cy.stub(Web3Provider.prototype, 'getSigner').returns(signerStub); - - cy.stub(CryptoFiat.prototype, 'convert') - .as('cryptoFiatStub') - .resolves({ - eth: { - usd: 1800, - }, - imx: { - usd: 0.7, - }, - gods: { - usd: 0.8, - }, - }); - - cy.stub(Checkout.prototype, 'gasEstimate') - .as('gasEstimateStub') - .resolves({ - gasEstimateType: GasEstimateType.BRIDGE_TO_L2, - gasFee: { - estimatedAmount: BigNumber.from('10000000000000000'), - }, - }); - }); - - describe('WalletWidget balances', () => { - it('should show the network and user balances on that network', () => { - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - mount( - - - , - , - ); - - cySmartGet('@balanceStub').should('have.been.called'); - - cySmartGet('close-button').should('be.visible'); - cySmartGet('network-heading').should('be.visible'); - cySmartGet('Sepolia-network-button').should( - 'include.text', - 'Sepolia', - ); - - cySmartGet('total-token-balance').should('exist'); - cySmartGet('total-token-balance').should( - 'have.text', - '≈ USD $22525.46', - ); - - cySmartGet('balance-item-ETH').should('exist'); - cySmartGet('balance-item-GODS').should('exist'); - cySmartGet('balance-item-IMX').should('exist'); - }); - - it('should show the balance details for each token', () => { - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - mount( - - - , - , - ); - - cySmartGet('@balanceStub').should('have.been.called'); - - cySmartGet('balance-item-ETH').should('exist'); - cySmartGet('balance-item-ETH').should('include.text', 'ETH'); - cySmartGet('balance-item-ETH').should('include.text', 'Ether'); - cySmartGet('balance-item-ETH__price').should('have.text', '12.12'); - - cySmartGet('balance-item-IMX').should('exist'); - cySmartGet('balance-item-IMX').should('include.text', 'IMX'); - cySmartGet('balance-item-IMX').should('include.text', 'Immutable X'); - cySmartGet('balance-item-IMX__price').should('have.text', '899'); - - cySmartGet('balance-item-GODS').should('exist'); - cySmartGet('balance-item-GODS').should('include.text', 'GODS'); - cySmartGet('balance-item-GODS').should( - 'include.text', - 'Gods Unchained', - ); - cySmartGet('balance-item-GODS__price').should('have.text', '100.20'); - }); - - it('should show error screen after getAllBalances unrecoverable failure', () => { - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - getAllBalancesStub - .onFirstCall() - .rejects({ data: { code: 500 } }) - .onSecondCall() - .resolves({ - balances: [ - { - balance: BigNumber.from('10000000000000'), - formattedBalance: '0.1', - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - icon: '123', - }, - }, - ], - }); - - mount( - - - , - ); - - cySmartGet('error-view').should('be.visible'); - cySmartGet('footer-button').click(); - cySmartGet('error-view').should('not.exist'); - cySmartGet('wallet-balances').should('be.visible'); - }); - - it('should show balances after getAllBalances failure', () => { - getAllBalancesStub - .rejects() - .resolves({ - balances: [ - { - balance: BigNumber.from('1000000000000000000'), - formattedBalance: '0.1', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: '', - icon: '123', - }, - }, - { - balance: BigNumber.from('10000000000000'), - formattedBalance: '0.1', - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - icon: '123', - }, - }, - ], - }); - - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - mount( - - - , - , - ); - - cySmartGet('balance-item-IMX').should('exist'); - cySmartGet('balance-item-ETH').should('exist'); - }); - }); - - describe('WalletWidget settings', () => { - it('should show the settings view if the settings button is clicked', () => { - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - mount( - - - , - , - ); - - cySmartGet('settings-button').click(); - cySmartGet('header-title').should('have.text', 'Settings'); - cySmartGet('close-button').should('be.visible'); - cySmartGet('back-button').should('be.visible'); - }); - - it('should show correct wallet address on the settings page', () => { - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - mount( - - - , - , - ); - cySmartGet('settings-button').click(); - cySmartGet('wallet-address').should('have.text', '0xwalletAddress'); - }); - - it('should show a disconnect button for Metamask that fires the right event when clicked', () => { - cy.window().then((window) => { - window.addEventListener( - IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, - cy.stub().as('disconnectEvent'), - ); - }); - - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - mount( - - - ,x - , - ); - cySmartGet('settings-button').click(); - cySmartGet('disconnect-button').should( - 'have.text', - 'Disconnect Wallet', - ); - cySmartGet('disconnect-button').click(); - cySmartGet('@disconnectEvent').should('have.been.calledOnce'); - }); - - it('should show a disconnect button for Passport that fires the right event when clicked', () => { - cy.window().then((window) => { - window.addEventListener( - IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, - cy.stub().as('disconnectEvent'), - ); - }); - - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - mount( - - - , - ); - cySmartGet('settings-button').click(); - cySmartGet('disconnect-button').should( - 'have.text', - 'Disconnect Wallet', - ); - cySmartGet('disconnect-button').click(); - cySmartGet('@disconnectEvent').should('have.been.calledOnce'); - }); - - it('should NOT show a disconnect button when wallet config showDisconnectButton is false', () => { - cy.window().then((window) => { - window.addEventListener( - IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, - cy.stub().as('disconnectEvent'), - ); - }); - - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - mount( - - - ,x - , - ); - cySmartGet('settings-button').click(); - cySmartGet('disconnect-button').should('not.exist'); - cySmartGet('@disconnectEvent').should('not.have.been.called'); - }); - }); - - describe('WalletWidget coin info', () => { - let signerStub; - beforeEach(() => { - signerStub = { - getAddress: cy.stub().resolves('0x123'), - }; - }); - it('should show the coin info view if the coin info icon is clicked', () => { - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - mount( - - - , - , - ); - - cySmartGet('coin-info-icon').click(); - cy.get('body').contains('You can switch networks to add coins or move them from one network to another'); - cy.get('body').contains('Coins and collectibles are native to networks'); - cySmartGet('back-button').should('be.visible'); - }); - - it('should show the coin info view if the coin info icon is clicked and provider is passport', () => { - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - const connectLoaderStateWithPassport = { - ...connectLoaderState, - provider: { - provider: { isPassport: true } as ExternalProvider, - getSigner: () => signerStub, - } as any as Web3Provider, - }; - mount( - - - , - , - ); - - cySmartGet('coin-info-icon').click(); - // eslint-disable-next-line max-len - cy.get('body').contains('This network is called Immutable zkEVM. If you have other coins in your Passport and can’t see them here, they might be on another network. '); - cy.get('body').contains(' for more info.'); - cy.get('body').contains('Visit our FAQs'); - cy.get('body').contains('Coins and collectibles are native to networks'); - cySmartGet('back-button').should('be.visible'); - }); - }); - - describe('Network menu', () => { - it('should not show the Network Menu when wallet config showNetworkMenu is false', () => { - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - mount( - - - , - ); - - cySmartGet('wallet-balances').should('exist'); - cySmartGet('network-menu').should('not.exist'); - }); - }); - - describe('Passport Wallet Widget', () => { - const passportConnectLoaderState = { - checkout: new Checkout({ - baseConfig: { environment: Environment.SANDBOX }, - }), - provider: mockPassportProvider, - connectionStatus: ConnectionStatus.CONNECTED_WITH_NETWORK, - }; - - it('should not show Network Menu when provider is passport', () => { - const widgetConfig = { - theme: WidgetTheme.DARK, - environment: Environment.SANDBOX, - isBridgeEnabled: false, - isSwapEnabled: false, - isOnRampEnabled: false, - } as StrongCheckoutWidgetsConfig; - - mount( - - - , - ); - - cySmartGet('wallet-balances').should('exist'); - cySmartGet('network-menu').should('not.exist'); - }); - }); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.cy.tsx deleted file mode 100644 index a8efa6a3d4..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/wallet/components/BalanceItem/BalanceItem.cy.tsx +++ /dev/null @@ -1,574 +0,0 @@ -import React from 'react'; -import { mount } from 'cypress/react18'; -import { - ChainId, - ChainName, - Checkout, - WalletProviderName, - IMTBLWidgetEvents, - GetBalanceResult, - WidgetTheme, -} from '@imtbl/checkout-sdk'; -import { cy } from 'local-cypress'; -import { Environment } from '@imtbl/config'; -import { Web3Provider } from '@ethersproject/providers'; -import { BigNumber } from 'ethers'; -import { BalanceInfo } from '../../functions/tokenBalances'; -import { WalletState } from '../../context/WalletContext'; -import { BalanceItem } from './BalanceItem'; -import { cyIntercept, cySmartGet } from '../../../../lib/testUtils'; -import { WalletWidgetTestComponent } from '../../test-components/WalletWidgetTestComponent'; -import { orchestrationEvents } from '../../../../lib/orchestrationEvents'; -import { ConnectionStatus } from '../../../../context/connect-loader-context/ConnectLoaderContext'; -import { - ConnectLoaderTestComponent, -} from '../../../../context/connect-loader-context/test-components/ConnectLoaderTestComponent'; -import { NATIVE } from '../../../../lib'; - -describe('BalanceItem', () => { - const connectLoaderState = { - checkout: new Checkout({ - baseConfig: { environment: Environment.SANDBOX }, - }), - provider: {} as Web3Provider, - connectionStatus: ConnectionStatus.CONNECTED_WITH_NETWORK, - }; - - const testTokenBalances: GetBalanceResult[] = [{ - balance: BigNumber.from('21320000000000000000'), - formattedBalance: '21.32', - token: { - name: 'Immutable X', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - }]; - - const baseWalletState: WalletState = { - network: null, - walletProviderName: WalletProviderName.METAMASK, - tokenBalances: testTokenBalances, - supportedTopUps: null, - walletConfig: { - showNetworkMenu: true, - showDisconnectButton: true, - }, - }; - - const testBalanceInfo: BalanceInfo = { - fiatAmount: '3412.08', - id: '1', - symbol: 'IMX', - balance: '21.32', - address: NATIVE, - description: 'some description', - }; - - beforeEach(() => { - cy.stub(orchestrationEvents, 'sendRequestSwapEvent').as( - 'requestSwapEventStub', - ); - cy.stub(orchestrationEvents, 'sendRequestOnrampEvent').as( - 'requestOnrampEventStub', - ); - cyIntercept(); - }); - - it('should show balance details', () => { - mount( - - - {}} - theme={WidgetTheme.DARK} - /> - - , - ); - - cySmartGet('balance-item-IMX').should('include.text', 'IMX'); - cySmartGet('balance-item-IMX').should('include.text', 'some description'); - cySmartGet('balance-item-IMX__price').should('have.text', '21.32'); - cySmartGet('balance-item-IMX__fiatAmount').should( - 'include.text', - '≈ USD $3,412.08', - ); - }); - - it('should show menu options for the token', () => { - const testWalletState = { - ...baseWalletState, - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - }, - isSupported: true, - }, - tokenBalances: testTokenBalances, - supportedTopUps: { - isOnRampEnabled: true, - isSwapEnabled: true, - isBridgeEnabled: true, - isSwapAvailable: true, - }, - }; - - mount( - - - {}} - theme={WidgetTheme.DARK} - /> - - , - ); - - cySmartGet('token-menu').should('exist'); - }); - - it('should show the move option on zkEVM when all topUps are enabled', () => { - const testWalletState = { - ...baseWalletState, - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - isSupported: true, - }, - tokenBalances: testTokenBalances, - supportedTopUps: { - isOnRampEnabled: true, - isSwapEnabled: true, - isBridgeEnabled: true, - isSwapAvailable: true, - }, - }; - - mount( - - - {}} - theme={WidgetTheme.DARK} - /> - - , - , - ); - - cySmartGet('token-menu').should('exist'); - cySmartGet('token-menu').click(); - cySmartGet('balance-item-move-option').should('be.visible'); - cySmartGet('balance-item-move-option').should('have.text', 'Move IMX'); - }); - - it('should show the swap option on zkEVM when all topUps are enabled', () => { - const testWalletState = { - ...baseWalletState, - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - isSupported: true, - }, - tokenBalances: testTokenBalances, - supportedTopUps: { - isOnRampEnabled: true, - isSwapEnabled: true, - isBridgeEnabled: true, - isSwapAvailable: true, - }, - }; - - mount( - - - {}} - theme={WidgetTheme.DARK} - /> - - , - , - ); - - cySmartGet('token-menu').should('exist'); - cySmartGet('token-menu').click(); - cySmartGet('balance-item-swap-option').should('be.visible'); - cySmartGet('balance-item-swap-option').should('have.text', 'Swap IMX'); - }); - - it('should hide the swap option on zkEVM when swap is unavailable', () => { - const testWalletState = { - ...baseWalletState, - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - isSupported: true, - }, - tokenBalances: testTokenBalances, - supportedTopUps: { - isOnRampEnabled: true, - isSwapEnabled: true, - isBridgeEnabled: true, - isSwapAvailable: false, - }, - }; - - mount( - - - {}} - theme={WidgetTheme.DARK} - /> - - , - ); - - cySmartGet('token-menu').should('exist'); - cySmartGet('token-menu').click(); - cySmartGet('balance-item-swap-option').should('not.be.visible'); - cySmartGet('balance-item-swap-option').should('have.text', 'Swap IMX'); - }); - - it('should show the add option on zkEVM when token is in onramp allowlist', () => { - cy.stub(Checkout.prototype, 'getTokenAllowList') - .as('tokenAllowListStub') - .resolves({ - tokens: [ - { - name: 'tIMX', - symbol: 'tIMX', - decimals: 18, - address: NATIVE, - }, - ], - }); - const testWalletState = { - ...baseWalletState, - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - isSupported: true, - }, - tokenBalances: testTokenBalances, - supportedTopUps: { - isOnRampEnabled: true, - isSwapEnabled: true, - isBridgeEnabled: true, - }, - }; - - mount( - - - {}} - theme={WidgetTheme.DARK} - /> - - , - , - ); - - cySmartGet('token-menu').should('exist'); - cySmartGet('token-menu').click(); - cySmartGet('balance-item-add-option').should('be.visible'); - cySmartGet('balance-item-add-option').should('have.text', 'Add IMX'); - cySmartGet('balance-item-swap-option').should('be.visible'); - cySmartGet('balance-item-swap-option').should('have.text', 'Swap IMX'); - }); - - it('should NOT show the add option on zkEVM if token is not in allowlist', () => { - cy.stub(Checkout.prototype, 'getTokenAllowList') - .as('tokenAllowListStub') - .resolves({ - tokens: [ - { - name: 'tIMX', - symbol: 'tIMX', - decimals: 18, - address: NATIVE, - }, - ], - }); - const balanceInfoNotInAllowList = { - fiatAmount: '3412.08', - id: '1', - symbol: 'zkTEST', - balance: '21.32', - address: '0x1234567890123456789012345678901234567890', - description: 'some description', - }; - const testWalletState = { - ...baseWalletState, - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - isSupported: true, - }, - tokenBalances: [], - supportedTopUps: { - isOnRampEnabled: true, - isSwapEnabled: true, - isBridgeEnabled: true, - }, - }; - - mount( - - - {}} - theme={WidgetTheme.DARK} - /> - - , - , - ); - - cySmartGet('token-menu').should('exist'); - cySmartGet('token-menu').click(); - cySmartGet('balance-item-add-option').should('not.be.visible'); - cySmartGet('balance-item-swap-option').should('be.visible'); - cySmartGet('balance-item-swap-option').should('have.text', 'Swap zkTEST'); - }); - - it('should ONLY show swap option on zkEVM if onramp is disabled', () => { - const testWalletState = { - ...baseWalletState, - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - isSupported: true, - }, - tokenBalances: testTokenBalances, - supportedTopUps: { - isOnRampEnabled: false, - isSwapEnabled: true, - isBridgeEnabled: true, - isSwapAvailable: true, - }, - }; - - mount( - - - {}} - theme={WidgetTheme.DARK} - /> - - , - , - ); - - cySmartGet('token-menu').should('exist'); - cySmartGet('token-menu').click(); - cySmartGet('balance-item-add-option').should('not.be.visible'); - cySmartGet('balance-item-swap-option').should('be.visible'); - cySmartGet('balance-item-swap-option').should('have.text', 'Swap IMX'); - }); - - it('should show ONLY the move option on Ethereum when all topUps are enabled', () => { - const testWalletState = { - ...baseWalletState, - network: { - chainId: ChainId.SEPOLIA, - name: 'Ethereum', - nativeCurrency: { - name: 'Ethereum', - symbol: 'ETH', - decimals: 18, - }, - isSupported: true, - }, - tokenBalances: testTokenBalances, - supportedTopUps: { - isOnRampEnabled: true, - isSwapEnabled: true, - isBridgeEnabled: true, - }, - }; - - mount( - - - {}} - theme={WidgetTheme.DARK} - /> - - , - ); - cySmartGet('token-menu').should('exist'); - cySmartGet('token-menu').click(); - cySmartGet('balance-item-add-option').should('not.be.visible'); - cySmartGet('balance-item-swap-option').should('not.be.visible'); - cySmartGet('balance-item-move-option').should('be.visible'); - cySmartGet('balance-item-move-option').should('have.text', 'Move IMX'); - }); - - it('should NOT show menu options for the token when all top ups are disabled', () => { - const testWalletState = { - ...baseWalletState, - supportedTopUps: { - isOnRampEnabled: false, - isSwapEnabled: false, - isBridgeEnabled: false, - }, - }; - mount( - - - {}} - theme={WidgetTheme.DARK} - /> - - , - ); - - cySmartGet('token-menu').should('not.exist'); - }); - - describe('Balance Item events', () => { - let testWalletState; - beforeEach(() => { - cy.stub(Checkout.prototype, 'getTokenAllowList') - .as('tokenAllowListStub') - .resolves({ - tokens: [ - { - name: 'tIMX', - symbol: 'tIMX', - decimals: 18, - address: NATIVE, - }, - ], - }); - testWalletState = { - ...baseWalletState, - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - isSupported: true, - }, - tokenBalances: [testBalanceInfo], - supportedTopUps: { - isOnRampEnabled: true, - isSwapEnabled: true, - isBridgeEnabled: true, - }, - }; - }); - - it('should emit sendRequestSwapEvent when swap menu button is clicked', () => { - mount( - - - {}} - theme={WidgetTheme.DARK} - /> - - , - ); - - cySmartGet('token-menu').should('exist'); - cySmartGet('token-menu').click(); - cySmartGet('balance-item-swap-option').click(); - cySmartGet('@requestSwapEventStub').should('have.been.called'); - cySmartGet('@requestSwapEventStub').should( - 'have.been.calledWith', - window, - IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, - { - toTokenAddress: '', - fromTokenAddress: NATIVE, - amount: '', - }, - ); - }); - - it('should emit sendRequestOnrampEvent when add menu button is clicked', () => { - mount( - - - {}} - theme={WidgetTheme.DARK} - /> - - , - ); - - cySmartGet('token-menu').should('exist'); - cySmartGet('token-menu').click(); - cySmartGet('balance-item-add-option').click(); - cySmartGet('@requestOnrampEventStub').should('have.been.called'); - cySmartGet('@requestOnrampEventStub').should( - 'have.been.calledWith', - window, - IMTBLWidgetEvents.IMTBL_WALLET_WIDGET_EVENT, - { - tokenAddress: NATIVE, - amount: '', - }, - ); - }); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.cy.tsx deleted file mode 100644 index d3f4ca6ecd..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/wallet/components/NetworkMenu/NetworkMenu.cy.tsx +++ /dev/null @@ -1,141 +0,0 @@ -import { mount } from 'cypress/react18'; -import React from 'react'; -import { cy, it } from 'local-cypress'; -import { - Checkout, WalletProviderName, TokenInfo, ChainId, ChainName, -} from '@imtbl/checkout-sdk'; -import { Web3Provider } from '@ethersproject/providers'; -import { Environment } from '@imtbl/config'; -import { ViewContextTestComponent } from '../../../../context/view-context/test-components/ViewContextTestComponent'; -import { WalletContext, WalletState } from '../../context/WalletContext'; -import { cyIntercept, cySmartGet } from '../../../../lib/testUtils'; -import { NetworkMenu } from './NetworkMenu'; -import { ConnectionStatus } from '../../../../context/connect-loader-context/ConnectLoaderContext'; -import { - ConnectLoaderTestComponent, -} from '../../../../context/connect-loader-context/test-components/ConnectLoaderTestComponent'; - -describe('Network Menu', () => { - const connectLoaderState = { - checkout: new Checkout({ - baseConfig: { environment: Environment.SANDBOX }, - }), - provider: {} as Web3Provider, - connectionStatus: ConnectionStatus.CONNECTED_WITH_NETWORK, - }; - - beforeEach(() => { - cy.stub(Checkout.prototype, 'getNetworkAllowList') - .as('getNetworkAllowListStub') - .resolves({ - networks: [ - { - name: 'Ethereum', - chainId: ChainId.ETHEREUM, - }, - { - name: 'ImmutablezkEVMTestnet', - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - }, - ], - }); - cyIntercept(); - }); - - it('should have heading', () => { - mount( - - - - - , - ); - cySmartGet('network-heading').should( - 'include.text', - 'Network', - ); - }); - it('should have network buttons', () => { - const walletState: WalletState = { - network: null, - walletProviderName: WalletProviderName.METAMASK, - tokenBalances: [], - supportedTopUps: null, - walletConfig: { - showNetworkMenu: true, - showDisconnectButton: true, - }, - }; - mount( - - - {} }} - > - - - - , - ); - cySmartGet('@getNetworkAllowListStub').should('have.been.called'); - cySmartGet('Ethereum-network-button').should('exist'); - cySmartGet('ImmutablezkEVMTestnet-network-button').should('exist'); - }); - - it('should switch network', () => { - cy.stub(Checkout.prototype, 'switchNetwork') - .as('switchNetworkStub') - .resolves({ - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - nativeCurrency: { - name: 'IMX', - symbol: 'IMX', - decimals: 18, - }, - }, - }); - - const walletState: WalletState = { - network: { - chainId: ChainId.ETHEREUM, - name: 'Ethereum', - nativeCurrency: {} as unknown as TokenInfo, - isSupported: false, - }, - walletProviderName: WalletProviderName.METAMASK, - tokenBalances: [], - supportedTopUps: null, - walletConfig: { - showNetworkMenu: true, - showDisconnectButton: true, - }, - }; - mount( - - - {} }} - > - - - - , - ); - - cySmartGet('ImmutablezkEVMTestnet-network-button').click(); - - cySmartGet('@switchNetworkStub').should('have.been.called'); - cySmartGet('@switchNetworkStub').should('have.been.calledWith', { - provider: {}, - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - }); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.cy.tsx deleted file mode 100644 index 4ab984db93..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/wallet/components/TokenBalanceList/TokenBalanceList.cy.tsx +++ /dev/null @@ -1,86 +0,0 @@ -import { describe, it, cy } from 'local-cypress'; -import { mount } from 'cypress/react18'; -import { WidgetTheme } from '@imtbl/checkout-sdk'; -import { ViewContextTestComponent } from '../../../../context/view-context/test-components/ViewContextTestComponent'; -import { TokenBalanceList } from './TokenBalanceList'; -import { cyIntercept, cySmartGet } from '../../../../lib/testUtils'; -import { ZERO_BALANCE_STRING } from '../../../../lib'; - -describe('TokenBalanceList', () => { - beforeEach(() => { - cy.viewport('ipad-2'); - cyIntercept(); - }); - - it('should say no tokens found if balance info items empty', () => { - mount( - - {}} - theme={WidgetTheme.DARK} - /> - , - ); - - cySmartGet('no-tokens-found').should('have.text', 'No tokens found'); - }); - - it('should show native token when balance is zero', () => { - mount( - - {}} - theme={WidgetTheme.DARK} - /> - , - ); - - cySmartGet('balance-item-IMX').should('exist'); - }); - - it('should show non-zero balances', () => { - mount( - - {}} - theme={WidgetTheme.DARK} - /> - , - ); - - cySmartGet('balance-item-IMX').should('exist'); - cySmartGet('balance-item-zkONE').should('exist'); - cySmartGet('balance-item-zkTOKEN').should('not.exist'); - }); -}); diff --git a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx b/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx deleted file mode 100644 index e887a6f78b..0000000000 --- a/packages/checkout/widgets-lib/src/widgets/wallet/views/WalletBalances.cy.tsx +++ /dev/null @@ -1,308 +0,0 @@ -import { - Checkout, WalletProviderName, TokenInfo, ChainId, ChainName, - WidgetTheme, -} from '@imtbl/checkout-sdk'; -import { describe, it, cy } from 'local-cypress'; -import { mount } from 'cypress/react18'; -import { BigNumber } from 'ethers'; -import { Web3Provider } from '@ethersproject/providers'; -import { Environment } from '@imtbl/config'; -import { ViewContextTestComponent } from '../../../context/view-context/test-components/ViewContextTestComponent'; -import { WalletBalances } from './WalletBalances'; -import { WalletContext, WalletState } from '../context/WalletContext'; -import { cyIntercept, cySmartGet } from '../../../lib/testUtils'; -import { WalletWidgetTestComponent } from '../test-components/WalletWidgetTestComponent'; -import { ConnectionStatus } from '../../../context/connect-loader-context/ConnectLoaderContext'; -import { - ConnectLoaderTestComponent, -} from '../../../context/connect-loader-context/test-components/ConnectLoaderTestComponent'; -import { NATIVE } from '../../../lib'; - -describe('WalletBalances', () => { - const config = { - environment: Environment.SANDBOX, - theme: WidgetTheme.DARK, - isBridgeEnabled: true, - isSwapEnabled: true, - isOnRampEnabled: true, - }; - - beforeEach(() => { - cy.viewport('ipad-2'); - cyIntercept(); - }); - - const connectLoaderState = { - checkout: new Checkout({ - baseConfig: { environment: Environment.SANDBOX }, - }), - provider: { - getSigner: () => ({ - getAddress: async () => Promise.resolve(''), - }), - getNetwork: async () => ({ - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - }), - provider: { - request: () => {}, - }, - } as any as Web3Provider, - connectionStatus: ConnectionStatus.CONNECTED_WITH_NETWORK, - }; - - const cryptoConversions = new Map([['eth', 1800], ['imx', 0.75]]); - - describe('balances', () => { - const balancesMock = [ - { - balance: BigNumber.from('1000000000000000000'), - formattedBalance: '0.1', - token: { - name: 'ETH', - symbol: 'ETH', - decimals: 18, - address: '', - icon: '123', - }, - }, - { - balance: BigNumber.from('10000000000000'), - formattedBalance: '0.1', - token: { - name: 'ImmutableX', - symbol: 'IMX', - decimals: 18, - address: NATIVE, - icon: '123', - }, - }, - ]; - - const baseWalletState: WalletState = { - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - nativeCurrency: {} as unknown as TokenInfo, - isSupported: true, - }, - walletProviderName: WalletProviderName.METAMASK, - tokenBalances: balancesMock, - supportedTopUps: null, - walletConfig: { - showNetworkMenu: true, - showDisconnectButton: true, - }, - }; - - it('should show balances', () => { - mount( - - - - - - - , - ); - - cySmartGet('balance-item-IMX').should('exist'); - cySmartGet('balance-item-ETH').should('exist'); - }); - - it('should show shimmer while waiting for balances to load', () => { - mount( - - - - - - - , - ); - - cySmartGet('balance-item-shimmer--1__shimmer').should('be.visible'); - cySmartGet('balance-item-shimmer--2__shimmer').should('be.visible'); - cySmartGet('balance-item-shimmer--3__shimmer').should('be.visible'); - cySmartGet('total-token-balance-value__shimmer').should('be.visible'); - }); - - it('should not show shimmers once balances has loaded', () => { - mount( - - - - - - - , - ); - - cySmartGet('balance-item-shimmer--1__shimmer').should('not.exist'); - cySmartGet('balance-item-shimmer--2__shimmer').should('not.exist'); - cySmartGet('balance-item-shimmer--3__shimmer').should('not.exist'); - cySmartGet('total-token-balance-value__shimmer').should('not.exist'); - }); - - it('should show no balances', () => { - mount( - - - - - - - , - ); - - cySmartGet('no-tokens-found').should('exist'); - }); - }); - - describe('add coins button', () => { - const baseWalletState: WalletState = { - network: { - chainId: ChainId.IMTBL_ZKEVM_TESTNET, - name: ChainName.IMTBL_ZKEVM_TESTNET, - nativeCurrency: {} as unknown as TokenInfo, - isSupported: true, - }, - walletProviderName: WalletProviderName.METAMASK, - tokenBalances: [], - supportedTopUps: null, - walletConfig: { - showNetworkMenu: true, - showDisconnectButton: true, - }, - }; - - it('should show add coins button on zkEVM when topUps are supported', () => { - const topUpFeatureTestCases = [ - { - isOnRampEnabled: true, - isSwapEnabled: false, - isBridgeEnabled: false, - }, - { - isOnRampEnabled: false, - isSwapEnabled: true, - isBridgeEnabled: false, - }, - { - isOnRampEnabled: false, - isSwapEnabled: false, - isBridgeEnabled: true, - }, - ]; - topUpFeatureTestCases.forEach((topUpFeatures) => { - const testWalletState = { - ...baseWalletState, - supportedTopUps: { - ...topUpFeatures, - }, - }; - mount( - - - - {} }} - > - - - - - , - ); - cySmartGet('add-coins').should('exist'); - }); - }); - - it('should NOT show add coins on zkEVM when all supportedTopUps are disabled', () => { - const testWalletState = { - ...baseWalletState, - supportedTopUps: { - isOnRampEnabled: false, - isSwapEnabled: false, - isBridgeEnabled: false, - }, - }; - mount( - - - - {} }} - > - - - - - , - ); - cySmartGet('add-coins').should('not.exist'); - }); - - it('should NOT show add coins button on Sepolia', () => { - const walletState: WalletState = { - network: { - chainId: ChainId.SEPOLIA, - name: 'Sepolia', - nativeCurrency: {} as unknown as TokenInfo, - isSupported: true, - }, - walletProviderName: WalletProviderName.METAMASK, - tokenBalances: [], - supportedTopUps: { - isOnRampEnabled: true, - isSwapEnabled: true, - isBridgeEnabled: true, - }, - walletConfig: { - showNetworkMenu: true, - showDisconnectButton: true, - }, - }; - mount( - - - - {} }} - > - - - - - , - ); - cySmartGet('add-coins').should('not.exist'); - }); - }); -}); diff --git a/sdk/package.json b/sdk/package.json index 7126e7a17d..af3f7d3594 100644 --- a/sdk/package.json +++ b/sdk/package.json @@ -168,4 +168,4 @@ }, "type": "module", "types": "./dist/index.d.ts" -} +} \ No newline at end of file