sync staging to main

README.md

@@ -42,10 +42,15 @@ Read more on all available environment variables in [`.env.example`](.env.exampl
 - build production bundle: `npm run build`
 - run production server: `npm run start` (must run `build` first)
 
+## Testing
+
+`npm run test` will run the unit tests.
+`npm run test:e2e` will run the automated end-to-end tests. Make sure you have `WORD_PHRASE_KEY=""`(12 word phrase key) in your `.env` file. This will be used to importing the wallet and perform the tests.
+
 ## Contributing
 
 Feel free to open an issue or submit a pull request for any bugs and/or improvements.
 
 ## Contact
 
-Reach out to our [support email](mailto:[email protected]), or join our [Discord](https://skip.money/discord) server.
+Reach out by joining our [Discord](https://skip.money/discord) server.

env.d.ts

@@ -11,6 +11,7 @@ declare namespace NodeJS {
     readonly NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID?: string;
     readonly RESEND_API_KEY?: string;
     readonly WALLETCONNECT_VERIFY_KEY?: string;
+    readonly WORD_PHRASE_KEY?: string;
   }
 }
 

package.json

@@ -56,7 +56,7 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@sentry/nextjs": "^7.99.0",
-    "@skip-router/core": "^1.3.5",
+    "@skip-router/core": "^1.3.12",
     "@tailwindcss/forms": "^0.5.7",
     "@tanstack/query-sync-storage-persister": "^5.18.1",
     "@tanstack/react-query": "^5.18.1",
@@ -71,6 +71,7 @@
     "clsx": "^2.1.0",
     "cosmjs-types": "0.8.x",
     "date-fns": "^3.3.1",
+    "dotenv": "^16.4.5",
     "download": "^8.0.0",
     "match-sorter": "^6.3.3",
     "next": "^14.1.0",

playwright.config.ts

@@ -2,9 +2,11 @@ import { defineConfig, devices } from "@playwright/test";
 
 export default defineConfig({
   testDir: "./tests",
+  globalSetup: "./tests/lib/globalSetup.ts",
+  timeout: 600000,
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
+  retries: process.env.CI ? 2 : 2,
   workers: 1,
   reporter: "html",
   use: {
@@ -17,4 +19,9 @@ export default defineConfig({
       use: { ...devices["Desktop Chrome"] },
     },
   ],
+  webServer: {
+    command: "npm run dev",
+    url: "http://localhost:3000",
+    reuseExistingServer: !process.env.CI,
+  },
 });

src/components/AssetSelect/AssetSelectContent.tsx

@@ -89,6 +89,7 @@ function AssetSelectContent({ assets = [], balances, onChange, onClose, showChai
           {filteredAssets.map((asset) => (
             <button
               key={`${asset.chainID}-${asset.denom}`}
+              data-testid="asset-item"
               className="flex w-full items-center gap-4 rounded-xl p-4 text-left transition-colors hover:bg-[#ECD9D9] focus:-outline-offset-2"
               onClick={() => (onClose(), onChange?.(asset))}
             >

src/components/AssetSelect/index.tsx

@@ -32,6 +32,7 @@ function AssetSelect({ asset, assets, balances, onChange, showChainInfo, isBalan
             "disabled:cursor-not-allowed disabled:opacity-50",
           )}
           disabled={!assets || assets.length === 0}
+          data-testid="select-asset"
         >
           {asset && (
             <img

src/components/ChainSelect/ChainSelectContent.tsx

@@ -84,6 +84,7 @@ function ChainSelectContent({ chains, onChange, onClose }: Props) {
                 className="flex w-full items-center gap-4 rounded-xl p-4 text-left transition-colors hover:bg-[#ECD9D9] focus:-outline-offset-2"
                 key={chain.chainID}
                 onClick={() => onChange(chain)}
+                data-testid="chain-item"
               >
                 <img
                   alt={chain.prettyName}

src/components/ChainSelect/ChainSelectTrigger.tsx

@@ -18,6 +18,7 @@ const ChainSelectTrigger = forwardRef<HTMLButtonElement, Props>(
           "border border-neutral-200 hover:border-neutral-300",
         )}
         ref={ref}
+        data-testid={"select-chain"}
         {...props}
       >
         <span className="flex-1">{chain ? chain.prettyName : "Select Chain"}</span>

src/components/Icons/ExpandArrow.tsx

@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+
+export const ExpandArrow = ({ className, ...props }: ComponentProps<"svg">) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    className={className}
+    {...props}
+  >
+    <path
+      fillRule="evenodd"
+      d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+      clipRule="evenodd"
+    />
+  </svg>
+);

src/components/Icons/Spinner.tsx

@@ -0,0 +1,27 @@
+import { ComponentProps } from "react";
+
+import { cn } from "@/utils/ui";
+
+export const Spinner = ({ className, ...props }: ComponentProps<"svg">) => (
+  <svg
+    className={cn("animate-spin", className)}
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    {...props}
+  >
+    <circle
+      className="opacity-25"
+      cx={12}
+      cy={12}
+      r={10}
+      stroke="currentColor"
+      strokeWidth={4}
+    />
+    <path
+      className="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    />
+  </svg>
+);