V2 Network selector (#742)

* Network selector functional

* Improved network dropdown functionality

* Network selector done

* Updated network links

package.json

@@ -14,7 +14,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.1",
+    "@stellar/design-system": "^2.0.0-beta.4",
     "immer": "^10.0.3",
     "next": "14.0.4",
     "react": "^18",

src/components/NetworkIndicator/index.tsx

@@ -0,0 +1,20 @@
+import "./styles.scss";
+
+export const NetworkIndicator = ({
+  networkId,
+  networkLabel,
+}: {
+  networkId: string;
+  networkLabel: string;
+}) => {
+  return (
+    <div className="NetworkIndicator">
+      <span
+        className="NetworkIndicator__dot"
+        aria-hidden="true"
+        data-network={networkId}
+      ></span>
+      {networkLabel}
+    </div>
+  );
+};

src/components/NetworkIndicator/styles.scss

@@ -0,0 +1,30 @@
+@use "../../styles/utils.scss" as *;
+
+.NetworkIndicator {
+  --NetworkSelector-dot-color: var(--sds-clr-gray-09);
+
+  display: flex;
+  align-items: center;
+  gap: pxToRem(4px);
+
+  font-size: pxToRem(14px);
+  line-height: pxToRem(20px);
+  font-weight: var(--sds-fw-medium);
+  color: var(--sds-clr-gray-12);
+
+  &__dot {
+    display: block;
+    width: pxToRem(6px);
+    height: pxToRem(6px);
+    border-radius: pxToRem(3px);
+    background-color: var(--NetworkSelector-dot-color);
+
+    &[data-network="futurenet"] {
+      --NetworkSelector-dot-color: var(--sds-clr-lilac-09);
+    }
+
+    &[data-network="mainnet"] {
+      --NetworkSelector-dot-color: var(--sds-clr-green-09);
+    }
+  }
+}