Network switch update (#778)

* Update network order

* Fix test

* Upgrade SDS

* Add warning for futurenet

package.json

@@ -15,7 +15,7 @@
     "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\", \\\"version\\\": \\\"$(git describe --tags --always)\\\"};\" > src/generated/gitInfo.ts"
   },
   "dependencies": {
-    "@stellar/design-system": "^2.0.0-beta.5",
+    "@stellar/design-system": "^2.0.0-beta.7",
     "@tanstack/react-query": "^5.24.1",
     "@tanstack/react-query-devtools": "^5.24.1",
     "dompurify": "^3.0.9",

src/components/NetworkIndicator/styles.scss

@@ -23,6 +23,10 @@
       --NetworkSelector-dot-color: var(--sds-clr-lilac-09);
     }
 
+    &[data-network="testnet"] {
+      --NetworkSelector-dot-color: var(--sds-clr-sky-09);
+    }
+
     &[data-network="mainnet"] {
       --NetworkSelector-dot-color: var(--sds-clr-green-09);
     }

src/components/NetworkSelector/index.tsx

@@ -5,7 +5,7 @@ import {
   useRef,
   useState,
 } from "react";
-import { Button, Icon, Input } from "@stellar/design-system";
+import { Button, Icon, Input, Notification } from "@stellar/design-system";
 
 import { NetworkIndicator } from "@/components/NetworkIndicator";
 import { localStorageSavedNetwork } from "@/helpers/localStorageSavedNetwork";
@@ -22,20 +22,20 @@ const NetworkOptions: Network[] = [
     rpcUrl: "https://rpc-futurenet.stellar.org",
     passphrase: "Test SDF Future Network ; October 2022",
   },
-  {
-    id: "mainnet",
-    label: "Mainnet",
-    horizonUrl: "https://horizon.stellar.org",
-    rpcUrl: "",
-    passphrase: "Public Global Stellar Network ; September 2015",
-  },
   {
     id: "testnet",
     label: "Testnet",
     horizonUrl: "https://horizon-testnet.stellar.org",
     rpcUrl: "https://soroban-testnet.stellar.org",
     passphrase: "Test SDF Network ; September 2015",
   },
+  {
+    id: "mainnet",
+    label: "Mainnet",
+    horizonUrl: "https://horizon.stellar.org",
+    rpcUrl: "",
+    passphrase: "Public Global Stellar Network ; September 2015",
+  },
   {
     id: "custom",
     label: "Custom",
@@ -277,6 +277,17 @@ export const NetworkSelector = () => {
           </div>
 
           <div className="NetworkSelector__body__inputs">
+            {activeNetworkId === "futurenet" ? (
+              <Notification
+                variant="warning"
+                title="Warning"
+                icon={<Icon.AlertTriangle />}
+              >
+                Futurenet is an unstable network. We recommend using Testnet for
+                your development purposes.
+              </Notification>
+            ) : null}
+
             <form onSubmit={handleSelectNetwork}>
               <Input
                 id="rpc-url"

src/components/NetworkSelector/styles.scss

@@ -109,6 +109,8 @@
     }
 
     &__inputs {
+      display: grid;
+      gap: pxToRem(8px);
       padding: pxToRem(6px) pxToRem(8px);
       background-color: transparent;
       border-radius: pxToRem(4px);

tests/networkSelector.test.ts

@@ -22,7 +22,7 @@ test.describe("Network selector", () => {
       page
         .getByTestId("networkSelector-dropdown")
         .getByTestId("networkSelector-option"),
-    ).toContainText(["Futurenet", "Mainnet", "Testnet", "Custom"]);
+    ).toContainText(["Futurenet", "Testnet", "Mainnet", "Custom"]);
   });
 
   test("Shows correct network data for the selected network", async ({

yarn.lock

@@ -192,10 +192,10 @@
   resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz"
   integrity sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw==
 
-"@stellar/design-system@^2.0.0-beta.5":
-  version "2.0.0-beta.5"
-  resolved "https://registry.npmjs.org/@stellar/design-system/-/design-system-2.0.0-beta.5.tgz"
-  integrity sha512-fnFZq+doZcqeX2hTgKUVT6SbSmFaZx6tahBl+qN0z6EuxusNbA29HcWNsptwiZK3lLlqm88Wu3jWcVmhvB6zzg==
+"@stellar/design-system@^2.0.0-beta.7":
+  version "2.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/@stellar/design-system/-/design-system-2.0.0-beta.7.tgz#26ee99e67dad5bf260045d5756fb7589fd259a76"
+  integrity sha512-ofoW/U7wMWsogQI+v4lc4fi+KHVw0MoNFOsH1U2esKa7j3n3AJgpNZogmp2cEYmXplzRlQXrN47rB/u1GspdJg==
   dependencies:
     "@floating-ui/dom" "^1.5.3"
     bignumber.js "^9.1.1"