From 639d86b7c8c2a4f1ad691cf023518a55ada20724 Mon Sep 17 00:00:00 2001
From: Iveta <quietbits@gmail.com>
Date: Wed, 13 Mar 2024 14:21:38 -0400
Subject: [PATCH] Add warning for futurenet

---
 src/components/NetworkSelector/index.tsx   | 13 ++++++++++++-
 src/components/NetworkSelector/styles.scss |  2 ++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/NetworkSelector/index.tsx b/src/components/NetworkSelector/index.tsx
index f8665ada..1d58fae1 100644
--- a/src/components/NetworkSelector/index.tsx
+++ b/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";
@@ -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"
diff --git a/src/components/NetworkSelector/styles.scss b/src/components/NetworkSelector/styles.scss
index 26b2eb24..4475b96f 100644
--- a/src/components/NetworkSelector/styles.scss
+++ b/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);