Merge branch 'main' into add-alchemy

tahowallet · Nov 20, 2023 · 66715c9 · 66715c9
2 parents f08c2d2 + 080b4d0
commit 66715c9
Show file tree

Hide file tree

Showing 14 changed files with 142 additions and 80 deletions.
diff --git a/e2e-tests/fork-based/transactions.spec.ts b/e2e-tests/fork-based/transactions.spec.ts
@@ -105,9 +105,9 @@ test.describe("Transactions", () => {
        * Confirm there is "Transaction signed, broadcasting..." snackbar visible
        * and there is no "Transaction failed to broadcast" snackbar visible.
        */
-      await expect(
-        popup.getByText("Transaction signed, broadcasting...").first(),
-      ).toBeVisible() // we need to use `.first()` because sometimes Playwright catches 2 elements matching that copy
+      await expect
+        .soft(popup.getByText("Transaction signed, broadcasting...").first())
+        .toBeVisible() // we need to use `.first()` because sometimes Playwright catches 2 elements matching that copy
       await expect(
         popup.getByText("Transaction failed to broadcast."),
       ).toHaveCount(0)
@@ -478,9 +478,9 @@ test.describe("Transactions", () => {
        * Confirm there is "Transaction signed, broadcasting..." snackbar visible
        * and there is no "Transaction failed to broadcast" snackbar visible.
        */
-      await expect(
-        popup.getByText("Transaction signed, broadcasting...").first(),
-      ).toBeVisible() // we need to use `.first()` because sometimes Playwright catches 2 elements matching that copy
+      await expect
+        .soft(popup.getByText("Transaction signed, broadcasting...").first())
+        .toBeVisible() // we need to use `.first()` because sometimes Playwright catches 2 elements matching that copy
       await expect(
         popup.getByText("Transaction failed to broadcast."),
       ).toHaveCount(0)

diff --git a/e2e-tests/regular/nfts.spec.ts b/e2e-tests/regular/nfts.spec.ts
@@ -180,7 +180,7 @@ test.describe("NFTs", () => {
         const nftCollection = page
           .getByTestId("nft_list_item")
           .filter({ has: page.getByTestId("nft_list_item_collection") })
-          .filter({ hasText: "Notable Crypto Punks" })
+          .filter({ hasText: "Notable Punks" })
           .first()
 
         await nftCollection.hover()

diff --git a/e2e-tests/regular/onboarding.spec.ts b/e2e-tests/regular/onboarding.spec.ts
@@ -72,7 +72,11 @@ test.describe("Onboarding", () => {
     await page.getByRole("button", { name: "Begin the hunt" }).click()
     await page.getByRole("button", { name: "Create recovery phrase" }).click()
 
-    // Verify seed
+    // Wait for the seed phrase to load.
+    const seedPhraseWord = await page.locator(".seed_phrase .word")
+    await expect(seedPhraseWord).toHaveCount(24)
+
+    // Extract seed into an array of words with no spaces or dashes.
     const seedWords = (
       await page.locator(".seed_phrase .word").allTextContents()
     ).map((word) => word.replace(/-|\s/, ""))
@@ -83,6 +87,8 @@ test.describe("Onboarding", () => {
       "verify_seed_word_placeholder",
     )
 
+    // Extract the ids of the seed phrase words that need to be verified and
+    // store them as an array of numbers.
     const wordsToVerify = (await seedWordPlaceholders.allTextContents()).map(
       (word) => Number((word.match(/\d+/) ?? ["0"])[0]),
     )

diff --git a/e2e-tests/regular/signing.spec.ts b/e2e-tests/regular/signing.spec.ts
@@ -26,8 +26,11 @@ test.describe("Signing", () => {
     await signDataPromptOpens.then(async (prompt) => {
       await prompt.getByRole("button", { name: "Sign" }).click()
     })
-
-    // If we see this then it means we were able to sign in
+    // There's a bug on login.xyz that makes the test fail
+    // (https://discord.com/channels/862419652286218251/886997073650655232/1173226370776694794).
+    // We're adding the expectation of failure. Playwright will throw `Expected
+    // to fail, but passed.` when bug is fixed.
+    test.fail()
     await expect(siwe.getByText("Vote for your favorite emoji")).toBeVisible()
   })
 

diff --git a/e2e-tests/regular/token-trust.spec.ts b/e2e-tests/regular/token-trust.spec.ts
@@ -135,16 +135,10 @@ test.describe("Token Trust", () => {
        * Verify there are no unverified assets on the Swap screen.
        */
       await popup.getByLabel("Swap", { exact: true }).click()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .first()
-        .click()
+      await popup.getByLabel("Swap from:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(untrustedAssets)
       await assetsHelper.closeSelectTokenPopup()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .nth(1)
-        .click()
+      await popup.getByLabel("Swap to:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(untrustedAssets)
       await assetsHelper.closeSelectTokenPopup()
     })
@@ -265,16 +259,10 @@ test.describe("Token Trust", () => {
        * Verify there are no unverified assets on the Swap screen.
        */
       await popup.getByLabel("Swap", { exact: true }).click()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .first()
-        .click()
+      await popup.getByLabel("Swap from:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(untrustedAssets)
       await assetsHelper.closeSelectTokenPopup()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .nth(1)
-        .click()
+      await popup.getByLabel("Swap to:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(untrustedAssets)
       await assetsHelper.closeSelectTokenPopup()
     })
@@ -305,9 +293,9 @@ test.describe("Token Trust", () => {
       /**
        * Confirm there is `Asset removed from list` snackbar visible.
        */
-      await expect(
-        popup.getByText("Asset removed from list").first(),
-      ).toBeVisible({ timeout: 5000 })
+      await expect
+        .soft(popup.getByText("Asset removed from list").first())
+        .toBeVisible({ timeout: 5000 })
 
       /**
        * Make sure `Wallet` page is opened and there are unverified assets
@@ -345,16 +333,10 @@ test.describe("Token Trust", () => {
        * Verify there is no "pAAVE" asset on the Swap screen.
        */
       await popup.getByLabel("Swap", { exact: true }).click()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .first()
-        .click()
+      await popup.getByLabel("Swap from:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(["pAAVE"])
       await assetsHelper.closeSelectTokenPopup()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .nth(1)
-        .click()
+      await popup.getByLabel("Swap to:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(["pAAVE"])
       await assetsHelper.closeSelectTokenPopup()
     })
@@ -385,9 +367,11 @@ test.describe("Token Trust", () => {
       /**
        * Confirm there is `Asset added to list` snackbar visible.
        */
-      await expect(popup.getByText("Asset added to list").first()).toBeVisible({
-        timeout: 5000,
-      })
+      await expect
+        .soft(popup.getByText("Asset added to list").first())
+        .toBeVisible({
+          timeout: 5000,
+        })
 
       /**
        * Confirm asset's details are opened. Ensure there are fields related to
@@ -423,16 +407,10 @@ test.describe("Token Trust", () => {
        * Verify recently trusted asset is available on the Swap screen.
        */
       await popup.getByLabel("Swap", { exact: true }).click()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .first()
-        .click()
+      await popup.getByLabel("Swap from:").click()
       await assetsHelper.assertAssetsPresentOnAssetsList(["BANANA"])
       await assetsHelper.closeSelectTokenPopup()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .nth(1)
-        .click()
+      await popup.getByLabel("Swap to:").click()
       await assetsHelper.assertAssetsPresentOnAssetsList(["BANANA"])
       await assetsHelper.closeSelectTokenPopup()
     })
@@ -460,9 +438,9 @@ test.describe("Token Trust", () => {
       /**
        * Confirm there is `Asset removed from list` snackbar visible.
        */
-      await expect(
-        popup.getByText("Asset removed from list").first(),
-      ).toBeVisible({ timeout: 5000 })
+      await expect
+        .soft(popup.getByText("Asset removed from list").first())
+        .toBeVisible({ timeout: 5000 })
 
       /**
        * Make sure `Wallet` page is opened and there are unverified assets
@@ -500,16 +478,10 @@ test.describe("Token Trust", () => {
        * Verify there is no "BANANA" asset on the Swap screen.
        */
       await popup.getByLabel("Swap", { exact: true }).click()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .first()
-        .click()
+      await popup.getByLabel("Swap from:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(["BANANA"])
       await assetsHelper.closeSelectTokenPopup()
-      await popup
-        .getByRole("button", { name: "Select token", exact: true })
-        .nth(1)
-        .click()
+      await popup.getByLabel("Swap to:").click()
       await assetsHelper.assertAssetsNotPresentOnAssetsList(["BANANA"])
       await assetsHelper.closeSelectTokenPopup()
     })

diff --git a/e2e-tests/regular/transactions.spec.ts b/e2e-tests/regular/transactions.spec.ts
@@ -136,9 +136,9 @@ test.describe("Transactions", () => {
        * Confirm there is "Transaction signed, broadcasting..." snackbar visible
        * and there is no "Transaction failed to broadcast" snackbar visible.
        */
-      await expect(
-        popup.getByText("Transaction signed, broadcasting...").first(),
-      ).toBeVisible() // we need to use `.first()` because sometimes Playwright catches 2 elements matching that copy
+      await expect
+        .soft(popup.getByText("Transaction signed, broadcasting...").first())
+        .toBeVisible() // we need to use `.first()` because sometimes Playwright catches 2 elements matching that copy
       await expect(
         popup.getByText("Transaction failed to broadcast."),
       ).toHaveCount(0)

diff --git a/e2e-tests/utils/onboarding.ts b/e2e-tests/utils/onboarding.ts
@@ -183,17 +183,23 @@ export default class OnboardingHelper {
     await page.getByRole("button", { name: "Begin the hunt" }).click()
     await page.getByRole("button", { name: "Create recovery phrase" }).click()
 
-    // Verify seed
-    const seedWords = (
-      await page.locator(".seed_phrase .word").allTextContents()
-    ).map((word) => word.replace(/-|\s/, ""))
+    // Wait for the seed phrase to load.
+    const seedPhraseWord = await page.locator(".seed_phrase .word")
+    await expect(seedPhraseWord).toHaveCount(24)
+
+    // Extract seed into an array of words with no spaces or dashes.
+    const seedWords = (await seedPhraseWord.allTextContents()).map((word) =>
+      word.replace(/-|\s/, ""),
+    )
 
     await page.getByRole("button", { name: "I wrote it down" }).click()
 
     const seedWordPlaceholders = page.getByTestId(
       "verify_seed_word_placeholder",
     )
 
+    // Extract the ids of the seed phrase words that need to be verified and
+    // store them as an array of numbers.
     const wordsToVerify = (await seedWordPlaceholders.allTextContents()).map(
       (word) => Number((word.match(/\d+/) ?? ["0"])[0]),
     )

diff --git a/e2e-tests/utils/transactions.ts b/e2e-tests/utils/transactions.ts
@@ -271,7 +271,7 @@ export default class TransactionsHelper {
       timestampRow
         .locator(".right")
         // eslint-disable-next-line no-irregular-whitespace
-        .getByText(/^\d{1,2}\/\d{1,2}\/\d{4}, \d{1,2}:\d{2}:\d{2}( AM| PM)*$/),
+        .getByText(/^\d{1,2}\/\d{1,2}\/\d{4}, \d{1,2}:\d{2}:\d{2}( AM| PM)*$/),
     ).toBeVisible()
   }
 

diff --git a/package.json b/package.json
@@ -99,7 +99,7 @@
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.11",
     "@babel/register": "^7.22.5",
-    "@playwright/test": "^1.31",
+    "@playwright/test": "^1.39",
     "@redux-devtools/cli": "^2.0.0",
     "@thesis-co/eslint-config": "^0.6.1",
     "@types/archiver": "^5.1.0",

diff --git a/ui/components/Wallet/WalletSubscapeLink.tsx b/ui/components/Wallet/WalletSubscapeLink.tsx
@@ -0,0 +1,59 @@
+import React, { ReactElement, useState } from "react"
+import classNames from "classnames"
+import SharedIcon from "../Shared/SharedIcon"
+
+export default function WalletSubspaceLink(): ReactElement {
+  const [isIconOnly, setIsIconOnly] = useState(true)
+
+  return (
+    <button
+      type="button"
+      className={classNames("subscape_link", { icon_only: isIconOnly })}
+      onClick={() => {
+        window.open("https://app.taho.xyz/", "_blank")?.focus()
+      }}
+      onMouseEnter={() => setIsIconOnly(false)}
+      onMouseLeave={() => setIsIconOnly(true)}
+    >
+      <SharedIcon
+        icon="subscape-logo.svg"
+        width={22}
+        color="var(--subscape)"
+        customStyles="margin-right: 10px;"
+      />
+      <span>Subscape Beta</span>
+      <SharedIcon
+        icon="new_tab@2x.png"
+        width={16}
+        color="var(--trophy-gold)"
+        customStyles="margin-left: 5px;"
+      />
+      <style jsx>{`
+        .subscape_link {
+          cursor: pointer;
+          position: absolute;
+          z-index: 998; // Above the UI, below the menu
+          right: 0;
+          top: 90;
+          transform: translateX(0px);
+          transition: transform 0.3s ease-in-out;
+          padding: 5px 10px 5px 5px;
+          border-radius: 16px 0 0 16px;
+          display: flex;
+          align-items: center;
+          color: var(--trophy-gold);
+          font-size: 18px;
+          font-weight: 600;
+          background: var(--subscape-background);
+          box-shadow:
+            0px 10px 12px 0px rgba(7, 17, 17, 0.34),
+            0px 14px 16px 0px rgba(7, 17, 17, 0.24),
+            0px 24px 24px 0px rgba(7, 17, 17, 0.14);
+        }
+        .subscape_link.icon_only {
+          transform: translateX(160px);
+        }
+      `}</style>
+    </button>
+  )
+}
diff --git a/ui/pages/Wallet.tsx b/ui/pages/Wallet.tsx
@@ -27,6 +27,7 @@ import WalletHiddenAssets from "../components/Wallet/WalletHiddenAssets"
 import SharedButton from "../components/Shared/SharedButton"
 import SharedIcon from "../components/Shared/SharedIcon"
 import PortalBanner from "../components/Wallet/Banner/PortalBanner"
+import WalletSubspaceLink from "../components/Wallet/WalletSubscapeLink"
 
 export default function Wallet(): ReactElement {
   const { t } = useTranslation()
@@ -101,6 +102,7 @@ export default function Wallet(): ReactElement {
   return (
     <>
       <div className="page_content">
+        <WalletSubspaceLink />
         <WalletAnalyticsNotificationBanner />
         <div className="section">
           <WalletAccountBalanceControl
@@ -188,10 +190,12 @@ export default function Wallet(): ReactElement {
           .page_content {
             width: 100%;
             height: inherit;
+            position: relative;
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: space-between;
+            overflow-x: hidden;
           }
           .section {
             display: flex;

diff --git a/ui/public/images/subscape-logo.svg b/ui/public/images/subscape-logo.svg
diff --git a/ui/public/index.css b/ui/public/index.css
@@ -36,6 +36,9 @@
   --trading-outgoing: #ef6194;
   --trading-incoming: #11bea9;
 
+  --subscape: #e4eeee;
+  --subscape-background: #315a5a;
+
   --shadow: 0px 16px 16px rgba(0, 33, 30, 0.14),
     0px 6px 8px rgba(0, 33, 30, 0.24), 0px 2px 4px rgba(0, 33, 30, 0.34);
 }