enable sending a token or a SAC payment to a C address (#1424)

* enable sending a token or a SAC payment to a C address * adding tests for various payment to C address flows * add timeouts and screenshot checks
stellar · Aug 21, 2024 · d56456d · d56456d
1 parent e693c0c
commit d56456d
Show file tree

Hide file tree

Showing 10 changed files with 277 additions and 49 deletions.
diff --git a/extension/e2e-tests/addAsset.test.ts b/extension/e2e-tests/addAsset.test.ts
@@ -33,7 +33,7 @@ test("Adding unverified Soroban token", async ({ page, extensionId }) => {
     screenshot: "manage-assets-unverified-token.png",
   });
   await page.getByTestId("add-asset").dispatchEvent("click");
-  await expect(page.getByTestId("account-view")).toContainText("100 E2E");
+  await expect(page.getByTestId("account-view")).toContainText("E2E");
 });
 test("Adding Soroban verified token", async ({ page, extensionId }) => {
   const assetsList = await fetch(
@@ -77,7 +77,7 @@ test("Adding Soroban verified token", async ({ page, extensionId }) => {
 
   await page.getByText("Manage Assets").click({ force: true });
   await page
-    .getByTestId("ManageAssetRowButton__ellipsis")
+    .getByTestId("ManageAssetRowButton__ellipsis-USDC")
     .click({ force: true });
   await page.getByText("Remove asset").click({ force: true });
 

diff --git a/extension/e2e-tests/sendPayment.test.ts b/extension/e2e-tests/sendPayment.test.ts
@@ -1,7 +1,7 @@
 import { test, expect, expectPageToHaveScreenshot } from "./test-fixtures";
-import { loginAndFund, PASSWORD } from "./helpers/login";
+import { loginAndFund, loginToTestAccount, PASSWORD } from "./helpers/login";
 
-test("Send XLM payment", async ({ page, extensionId }) => {
+test("Send XLM payment to G address", async ({ page, extensionId }) => {
   test.slow();
   await loginAndFund({ page, extensionId });
   await page.getByTitle("Send Payment").click({ force: true });
@@ -55,7 +55,7 @@ test("Send XLM payment", async ({ page, extensionId }) => {
   await page.getByTestId("transaction-details-btn-send").click({ force: true });
 
   await expect(page.getByText("Successfully sent")).toBeVisible({
-    timeout: 20000,
+    timeout: 60000,
   });
   await expectPageToHaveScreenshot({
     page,
@@ -70,3 +70,196 @@ test("Send XLM payment", async ({ page, extensionId }) => {
   await expect(page.getByText("Sent XLM")).toBeVisible();
   await expect(page.getByTestId("asset-amount")).toContainText("1 XLM");
 });
+
+test("Send XLM payment to C address", async ({ page, extensionId }) => {
+  test.slow();
+  await loginToTestAccount({ page, extensionId });
+
+  // send XLM to C address
+  await page.getByTitle("Send Payment").click({ force: true });
+  await expect(page.getByText("Send To")).toBeVisible();
+  await page
+    .getByTestId("send-to-input")
+    .fill("CAHX2LUNQ4YKNJTDEFW2LSFOXDAL4QI4736RV52ZUGCIRJK5U7MWQWW6");
+  await page.getByText("Continue").click({ force: true });
+
+  await expect(page.getByText("Send XLM")).toBeVisible();
+  await page.getByTestId("send-amount-amount-input").fill(".001");
+  await page.getByText("Continue").click({ force: true });
+
+  await expect(page.getByText("Send Settings")).toBeVisible();
+  await expect(page.getByTestId("SendSettingsTransactionFee")).toHaveText(
+    /[0-9]/,
+  );
+  await page.getByText("Review Send").click({ force: true });
+
+  await expect(page.getByText("Verification")).toBeVisible();
+  await page.getByPlaceholder("Enter password").fill(PASSWORD);
+  await page.getByText("Submit").click({ force: true });
+
+  await expect(page.getByText("Confirm Send")).toBeVisible();
+  await expectPageToHaveScreenshot({
+    page,
+    screenshot: "send-payment-confirm.png",
+  });
+  await page.getByTestId("transaction-details-btn-send").click();
+
+  await expect(page.getByText("Successfully sent")).toBeVisible({
+    timeout: 60000,
+  });
+
+  await page.getByText("Details").click({ force: true });
+
+  await expect(page.getByText("Sent XLM")).toBeVisible();
+  await expect(page.getByTestId("asset-amount")).toContainText(".001 XLM");
+
+  await page.getByTestId("BackButton").click({ force: true });
+  await page.getByTestId("BottomNav-link-account").click({ force: true });
+});
+
+test("Send SAC to C address", async ({ page, extensionId }) => {
+  test.slow();
+  await loginToTestAccount({ page, extensionId });
+
+  // add USDC asset
+  await page.getByText("Manage Assets").click({ force: true });
+  await page.getByPlaceholder("Enter password").fill(PASSWORD);
+  await page.getByText("Log In").click({ force: true });
+
+  await page.getByText("Add an asset").click({ force: true });
+  await page
+    .getByTestId("search-asset-input")
+    .fill("GBBD47IF6LWK7P7MDEVSCWR7DPUWV3NY3DTQEVFL4NAT4AQH3ZLLFLA5");
+  await expect(page.getByText("USDC")).toBeVisible();
+
+  await page.getByTestId("ManageAssetRowButton").click({ force: true });
+  await expect(page.getByTestId("NewAssetWarningAddButton")).toBeVisible({
+    timeout: 20000,
+  });
+
+  await page.getByText("Add asset").dispatchEvent("click");
+  await expect(page.getByTestId("account-view")).toBeVisible({
+    timeout: 30000,
+  });
+
+  // swap to get some USDC
+  await page.getByTestId("BottomNav-link-swap").click({ force: true });
+  await expect(page.getByText("Swap XLM")).toBeVisible();
+  await expect(
+    page.getByTestId("AssetSelect").filter({ hasText: "USDC" }),
+  ).toBeVisible({
+    timeout: 20000,
+  });
+  await page.getByTestId("send-amount-amount-input").fill(".001");
+  await expect(page.getByTestId("SendAmountRateAmount")).toBeVisible({
+    timeout: 20000,
+  });
+  await page.getByText("Continue").click({ force: true });
+
+  await expect(page.getByText("Swap Settings")).toBeVisible();
+  await expect(page.getByTestId("SendSettingsTransactionFee")).toHaveText(
+    /[0-9]/,
+  );
+  await page.getByText("Review Swap").click({ force: true });
+
+  await expect(page.getByText("Confirm Swap")).toBeVisible();
+  await page.getByTestId("transaction-details-btn-send").click({ force: true });
+
+  await expect(page.getByText("Successfully swapped")).toBeVisible({
+    timeout: 40000,
+  });
+  await page.getByText("Done").click({ force: true });
+
+  // send SAC to C address
+  await page.getByTitle("Send Payment").click({ force: true });
+  await page
+    .getByTestId("send-to-input")
+    .fill("CAHX2LUNQ4YKNJTDEFW2LSFOXDAL4QI4736RV52ZUGCIRJK5U7MWQWW6");
+  await page.getByText("Continue").click({ force: true });
+
+  await page.getByTestId("send-amount-asset-select").click({ force: true });
+  await page.getByTestId("Select-assets-row-USDC").click({ force: true });
+
+  await expect(page.getByText("Send USDC")).toBeVisible();
+
+  await page.getByTestId("SendAmountSetMax").click({ force: true });
+  await page.getByText("Continue").click({ force: true });
+
+  await expect(page.getByText("Send Settings")).toBeVisible();
+  await expect(page.getByText("Review Send")).toBeEnabled();
+  await page.getByText("Review Send").click({ force: true });
+
+  await expect(page.getByText("Confirm Send")).toBeVisible();
+  await page.getByTestId("transaction-details-btn-send").click({ force: true });
+
+  await expect(page.getByText("Successfully sent")).toBeVisible({
+    timeout: 40000,
+  });
+
+  await page.getByText("Details").click({ force: true });
+
+  await expect(page.getByText("Sent USDC")).toBeVisible();
+
+  await page.getByTestId("BackButton").click({ force: true });
+  await page.getByTestId("BottomNav-link-account").click({ force: true });
+
+  // remove USDC
+
+  await page.getByText("Manage Assets").click({ force: true });
+  await page
+    .getByTestId("ManageAssetRowButton__ellipsis-USDC")
+    .click({ force: true });
+  await page.getByText("Remove asset").click({ force: true });
+
+  await expect(page.getByTestId("account-view")).toBeVisible({
+    timeout: 30000,
+  });
+});
+
+test("Send token payment to C address", async ({ page, extensionId }) => {
+  test.slow();
+  await loginToTestAccount({ page, extensionId });
+
+  // add E2E token
+  await page.getByText("Manage Assets").click({ force: true });
+  await page.getByPlaceholder("Enter password").fill(PASSWORD);
+  await page.getByText("Log In").click({ force: true });
+  await expect(page.getByText("Your assets")).toBeVisible();
+  await page.getByText("Add an asset").click({ force: true });
+  await page.getByText("Add manually").click({ force: true });
+  await page
+    .getByTestId("search-token-input")
+    .fill("CAHX2LUNQ4YKNJTDEFW2LSFOXDAL4QI4736RV52ZUGCIRJK5U7MWQWW6");
+  await page.getByTestId("ManageAssetRowButton").click({ force: true });
+  await page.getByTestId("add-asset").dispatchEvent("click");
+
+  // send E2E token to C address
+  await page.getByTitle("Send Payment").click({ force: true });
+  await page
+    .getByTestId("send-to-input")
+    .fill("CAHX2LUNQ4YKNJTDEFW2LSFOXDAL4QI4736RV52ZUGCIRJK5U7MWQWW6");
+  await page.getByText("Continue").click({ force: true });
+
+  await page.getByTestId("send-amount-asset-select").click({ force: true });
+  await page.getByTestId("Select-assets-row-E2E").click({ force: true });
+
+  await expect(page.getByText("Send E2E")).toBeVisible();
+  await page.getByTestId("send-amount-amount-input").fill(".001");
+  await page.getByText("Continue").click({ force: true });
+
+  await expect(page.getByText("Send Settings")).toBeVisible();
+  await expect(page.getByText("Review Send")).toBeEnabled();
+  await page.getByText("Review Send").click({ force: true });
+
+  await expect(page.getByText("Confirm Send")).toBeVisible();
+  await page.getByTestId("transaction-details-btn-send").click({ force: true });
+
+  await expect(page.getByText("Successfully sent")).toBeVisible({
+    timeout: 60000,
+  });
+
+  await page.getByText("Details").click({ force: true });
+
+  await expect(page.getByText("Sent E2E")).toBeVisible();
+  await expect(page.getByTestId("asset-amount")).toContainText(".001 E2E");
+});
diff --git a/extension/src/popup/basics/buttons/BackButton/index.tsx b/extension/src/popup/basics/buttons/BackButton/index.tsx
@@ -34,6 +34,7 @@ export const BackButton = ({
   return (
     <div
       className={`BackButton ${hasBackCopy ? "BackButton--has-copy" : ""}`}
+      data-testid="BackButton"
       onClick={handleClick}
     >
       {customBackIcon || <Icon.ArrowLeft />}

diff --git a/extension/src/popup/components/BottomNav/index.tsx b/extension/src/popup/components/BottomNav/index.tsx
@@ -22,6 +22,7 @@ const BottomNavLink = ({ children, to }: NavLinkProps) => (
     to={to}
     activeClassName="BottomNav--link--active"
     className="BottomNav--link"
+    data-testid={`BottomNav-link-${to.replace("/", "")}`}
   >
     {children}
   </NavLink>

diff --git a/extension/src/popup/components/manageAssets/ChooseAsset/index.tsx b/extension/src/popup/components/manageAssets/ChooseAsset/index.tsx
@@ -46,7 +46,7 @@ export const ChooseAsset = ({ balances }: ChooseAssetProps) => {
   const isSwap = useIsSwap();
   const isSoroswapEnabled = useIsSoroswapEnabled();
 
-  const managingAssets = assetSelect.type === AssetSelectType.MANAGE;
+  const isManagingAssets = assetSelect.type === AssetSelectType.MANAGE;
 
   useEffect(() => {
     const fetchDomains = async () => {
@@ -101,7 +101,7 @@ export const ChooseAsset = ({ balances }: ChooseAssetProps) => {
             contract: contractId,
           });
           // include native asset for asset dropdown selection
-        } else if (!managingAssets) {
+        } else if (!isManagingAssets) {
           collection.push({
             code,
             issuer: "",
@@ -144,7 +144,7 @@ export const ChooseAsset = ({ balances }: ChooseAssetProps) => {
   }, [
     assetIcons,
     balances,
-    managingAssets,
+    isManagingAssets,
     isSorobanSuported,
     isSwap,
     isSoroswapEnabled,
@@ -157,7 +157,7 @@ export const ChooseAsset = ({ balances }: ChooseAssetProps) => {
     <React.Fragment>
       <SubviewHeader
         title={t("Your assets")}
-        customBackIcon={!managingAssets ? <Icon.Close /> : undefined}
+        customBackIcon={!isManagingAssets ? <Icon.Close /> : undefined}
       />
       <View.Content>
         {isLoading && (
@@ -168,19 +168,19 @@ export const ChooseAsset = ({ balances }: ChooseAssetProps) => {
         <div className="ChooseAsset__wrapper">
           <div
             className={`ChooseAsset__assets${
-              managingAssets && isSorobanSuported ? "--short" : ""
+              isManagingAssets && isSorobanSuported ? "--short" : ""
             }`}
             ref={ManageAssetRowsWrapperRef}
           >
-            {managingAssets ? (
+            {isManagingAssets ? (
               <ManageAssetRows assetRows={assetRows} />
             ) : (
               <SelectAssetRows assetRows={assetRows} />
             )}
           </div>
         </div>
       </View.Content>
-      {managingAssets && (
+      {isManagingAssets && (
         <View.Footer isInline allowWrap>
           <div className="ChooseAsset__button">
             <Link to={ROUTES.searchAsset}>

diff --git a/extension/src/popup/components/manageAssets/ManageAssetRowButton/index.tsx b/extension/src/popup/components/manageAssets/ManageAssetRowButton/index.tsx
@@ -312,7 +312,7 @@ export const ManageAssetRowButton = ({
                 ? `ManageAssetRowButton__ellipsis--is-pending`
                 : ""
             }`}
-            data-testid="ManageAssetRowButton__ellipsis"
+            data-testid={`ManageAssetRowButton__ellipsis-${code}`}
             onClick={() => {
               if (!isActionPending) {
                 setRowButtonShowing(

diff --git a/extension/src/popup/components/manageAssets/SelectAssetRows/index.tsx b/extension/src/popup/components/manageAssets/SelectAssetRows/index.tsx
@@ -98,6 +98,7 @@ export const SelectAssetRows = ({ assetRows }: SelectAssetRowsProps) => {
             return (
               <div
                 className="SelectAssetRows__row selectable"
+                data-testid={`Select-assets-row-${code}`}
                 key={canonical}
                 onClick={() => {
                   if (assetSelect.isSource) {