@cardano-sdk/e2e 0.14.2 → 0.16.0

package/test/web-extension/extension/ui.ts

@@ -10,10 +10,16 @@ import {
 import { adaPriceServiceChannel, getObservableWalletName, userPromptServiceChannel, walletName } from './const';
 import { bip32Ed25519Factory, keyManagementFactory } from '../../../src';
 
+import { Cardano } from '@cardano-sdk/core';
 import { combineLatest, firstValueFrom, of } from 'rxjs';
 import { runtime } from 'webextension-polyfill';
 import { setupWallet } from '@cardano-sdk/wallet';
 
+const delegationConfig = {
+  count: 3,
+  distribution: [10, 30, 60]
+};
+
 const api: UserPromptService = {
   allowOrigin(origin) {
     const container = document.querySelector<HTMLDivElement>('#requestAccess')!;
@@ -66,6 +72,30 @@ combineLatest([supplyDistribution.lovelaceSupply$, supplyDistribution.stake$]).s
     (document.querySelector('#supplyDistribution')!.textContent = `${stake.live} out of ${lovelaceSupply.total}`)
 );
 
+/** Get pools from background service and assign weights */
+const displayPoolIdsAndPreparePortfolio = async (): Promise<{ pool: Cardano.StakePool; weight: number }[]> => {
+  const pools = await backgroundServices.getPoolIds(delegationConfig.count);
+  const poolsSpan = document.querySelector('#multiDelegation .delegate .pools');
+  poolsSpan!.textContent = pools.map(({ id }) => id).join(' ');
+  return pools.map((pool, idx) => ({ pool, weight: delegationConfig.distribution[idx] }));
+};
+
+/** Build, sign and submit delegation transaction */
+const sendDelegationTx = async (portfolio: { pool: Cardano.StakePool; weight: number }[]): Promise<void> => {
+  const pools = portfolio.map(({ pool: { hexId: id }, weight }) => ({ id, weight }));
+  const txBuilder = wallet.createTxBuilder();
+
+  let msg: string;
+  try {
+    const signedTx = await txBuilder.delegatePortfolio({ pools }).build().sign();
+    const txId = await wallet.submitTx(signedTx);
+    msg = `TxId: ${txId}`;
+  } catch (error) {
+    msg = `ERROR delegating: ${JSON.stringify(error)}`;
+  }
+  document.querySelector('#multiDelegation .delegateTxId')!.textContent = msg;
+};
+
 const setAddresses = ({ address, stakeAddress }: { address: string; stakeAddress: string }): void => {
   document.querySelector('#address')!.textContent = address;
   document.querySelector('#stakeAddress')!.textContent = stakeAddress;
@@ -100,6 +130,45 @@ const deactivateWallet = async (): Promise<void> => {
   clearWalletValues();
 };
 
+/**
+ * Wallet does not have any active delegations.
+ * Show a `<p class="noDelegation">No delegation found</p>`
+ */
+const createEmptyDelegationEl = () => {
+  const emptyDistribution = document.createElement('p');
+  emptyDistribution.classList.add('noDelegation');
+  emptyDistribution.textContent = 'No delegation found';
+  return emptyDistribution;
+};
+
+/**
+ * Create a list item for a delegation
+ * `<li> <span class="poolId">thePoolId</span> <span class="percent">50</span> </li>`
+ */
+const createDelegationLi = (poolId: string, percent: string) => {
+  const delegationLi = document.createElement('li');
+  const poolIdSpan = document.createElement('span');
+  poolIdSpan.classList.add('poolId');
+  poolIdSpan.textContent = poolId;
+  const delegationPercentageSpan = document.createElement('span');
+  delegationPercentageSpan.classList.add('percent');
+  delegationPercentageSpan.textContent = percent;
+  const separatorSpan = document.createElement('span');
+  separatorSpan.textContent = ' - ';
+  delegationLi.append(poolIdSpan);
+  delegationLi.append(separatorSpan);
+  delegationLi.append(delegationPercentageSpan);
+  return delegationLi;
+};
+
+/** Remove empty delegation message or multi-delegation list items to display new data */
+const cleanupMultidelegationInfo = (multiDelegationDiv: Element) => {
+  multiDelegationDiv.querySelector('p.noDelegation')?.remove();
+  for (const delegationLi of multiDelegationDiv.querySelectorAll('ul > li')) {
+    delegationLi.remove();
+  }
+};
+
 const walletManager = new WalletManagerUi({ walletName }, { logger, runtime });
 // Wallet object does not change when wallets are activated/deactivated.
 // Instead, it's observable properties emit from the currently active wallet.
@@ -108,6 +177,19 @@ const wallet = walletManager.wallet;
 // Wallet can be subscribed can be used even before it is actually created.
 wallet.addresses$.subscribe(([{ address, rewardAccount }]) => setAddresses({ address, stakeAddress: rewardAccount }));
 wallet.balance.utxo.available$.subscribe(({ coins }) => setBalance(coins.toString()));
+wallet.delegation.distribution$.subscribe((delegationDistrib) => {
+  const multiDelegationDiv = document.querySelector('#multiDelegation .distribution');
+  cleanupMultidelegationInfo(multiDelegationDiv!);
+
+  if (delegationDistrib.size === 0) {
+    multiDelegationDiv?.appendChild(createEmptyDelegationEl());
+  } else {
+    const distributionUl = multiDelegationDiv?.querySelector('ul');
+    for (const [poolId, delegation] of delegationDistrib) {
+      distributionUl?.appendChild(createDelegationLi(poolId, (delegation.percentage * 100).toString()));
+    }
+  }
+});
 
 const createWallet = async (accountIndex: number) => {
   clearWalletValues();
@@ -142,6 +224,11 @@ document.querySelector('#activateWallet1')!.addEventListener('click', async () =
 document.querySelector('#activateWallet2')!.addEventListener('click', async () => await createWallet(1));
 document.querySelector('#deactivateWallet')!.addEventListener('click', async () => await deactivateWallet());
 document.querySelector('#destroyWallet')!.addEventListener('click', async () => await destroyWallet());
+document.querySelector('#multiDelegation .delegate button')!.addEventListener('click', async () => {
+  const poolsAndWeights = await displayPoolIdsAndPreparePortfolio();
+  // multi-delegate with 10%, 30%, 60% distribution
+  await sendDelegationTx(poolsAndWeights);
+});
 
 document.querySelector('#buildAndSignTx')!.addEventListener('click', async () => {
   const [{ address: ownAddress }] = await firstValueFrom(wallet.addresses$);

package/test/web-extension/extension/util.ts

@@ -1,3 +1,4 @@
+import { Cardano } from '@cardano-sdk/core';
 import { Observable } from 'rxjs';
 import { Origin } from '@cardano-sdk/dapp-connector';
 import { RemoteApiProperties, RemoteApiPropertyType } from '@cardano-sdk/web-extension';
@@ -11,11 +12,13 @@ export interface UserPromptService {
 export interface BackgroundServices {
   adaUsd$: Observable<number>;
   clearAllowList(): Promise<void>;
+  getPoolIds(count: number): Promise<Cardano.StakePool[]>;
 }
 
 export const adaPriceProperties: RemoteApiProperties<BackgroundServices> = {
   adaUsd$: RemoteApiPropertyType.HotObservable,
-  clearAllowList: RemoteApiPropertyType.MethodReturningPromise
+  clearAllowList: RemoteApiPropertyType.MethodReturningPromise,
+  getPoolIds: RemoteApiPropertyType.MethodReturningPromise
 };
 
 export const logger = console;

package/test/web-extension/specs/wallet.spec.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-statements */
 import { getObservableWalletName } from '../extension/const';
 
 const switchToWalletUi = async () => {
@@ -11,6 +12,8 @@ const switchToWalletUi = async () => {
   });
 };
 
+const NUM_POOLS = 3;
+
 describe('wallet', () => {
   const pWalletFound = '#root > div > p:nth-child(4)';
   const btnRefresh = '#root > div > button';
@@ -37,6 +40,11 @@ describe('wallet', () => {
   const dappStakingAddress = '#root > div > p:nth-child(12)';
   const dappUsedAddress = '#root > div > p:nth-child(13)';
 
+  const btnDelegate = '#multiDelegation .delegate button';
+  const spanPoolIds = '#multiDelegation .delegate .pools';
+  const liPools = '#multiDelegation .distribution li';
+  const liPercents = '#multiDelegation .distribution li .percent';
+
   // The address is filled in by the tests, which are order dependent
   let walletAddr1 = '';
   let walletStakeAddr1 = '';
@@ -67,12 +75,12 @@ describe('wallet', () => {
       await expect($(divAdaPrice)).toHaveText('2.99');
     });
 
-    describe('ui grants access and creates key agent', () => {
+    describe('web-extension grants access and creates key agent', () => {
       before(async () => {
         await $(btnGrantAccess).click();
         await $(btnActivateWallet1).click();
       });
-      it('ui has access to remote ObservableWallet and SupplyDistribution', async () => {
+      it('web-extension has access to remote ObservableWallet and SupplyDistribution', async () => {
         await browser.waitUntil(async () => {
           try {
             BigInt(await $(spanBalance).getText());
@@ -88,6 +96,9 @@ describe('wallet', () => {
         expect(walletStakeAddr1).toHaveTextContaining('stake');
         await expect($(activeWalletName)).toHaveText(getObservableWalletName(0));
       });
+    });
+
+    describe('dapp can use cip30 wallet api', () => {
       it('dapp has access to cip30 WalletApi', async () => {
         await browser.switchWindow('React App');
         await expect($(pNetworkId)).toHaveText('Network Id (0 = testnet; 1 = mainnet): 0');
@@ -105,11 +116,49 @@ describe('wallet', () => {
         await expect($(dappStakingAddress)).toHaveTextContaining(walletStakeAddr1);
         await expect($(dappUsedAddress)).toHaveTextContaining(walletAddr1);
       });
+    });
 
+    describe('web-extension can build transactions and use wallet manager', () => {
       it('can build and sign a transaction', async () => {
         await switchToWalletUi();
         await buildAndSign();
       });
+
+      it('can delegate to multiple pools', async () => {
+        (await $(btnDelegate)).click();
+
+        // There should be 3 pools available
+        await browser.waitUntil(async () => {
+          try {
+            const poolIds = await $(spanPoolIds).getText();
+            return poolIds.split(' ').length === NUM_POOLS;
+          } catch {
+            return false;
+          }
+        });
+
+        // Delegation transaction was submitted successfully
+        const txId = await $('#multiDelegation .delegateTxId').getText();
+        expect(txId).toHaveTextContaining('TxId');
+
+        // Wallet reports delegating to 3 pools
+        await browser.waitUntil(
+          async () => {
+            try {
+              const delegatedPools = await $$(liPools);
+              return delegatedPools.length === NUM_POOLS;
+            } catch {
+              return false;
+            }
+          },
+          { timeout: 30_000, timeoutMsg: 'Expected wallet.delegation.distribution to report 3 delegations' }
+        );
+
+        // Check wallet delegation distribution is applied and displayed correctly
+        const delegationPercents = await $$(liPercents).map((el) => el.getText());
+        expect(delegationPercents.map((percent) => Math.round(Number.parseFloat(percent)))).toEqual([10, 30, 60]);
+      });
+
       it('can switch to another wallet', async () => {
         // Automatically deactivates first wallet, but keeps the store available for future activation
         await $(btnActivateWallet2).click();