src/pages/settings/relays/index.tsx

@@ -54,7 +54,10 @@ export const RelaysPage = () => {
   const relayMap = useAppSelector((state) => state.relays?.map)
   const relaysInfo = useAppSelector((state) => state.relays?.info)
 
-  const webSocketPrefix = 'wss://'
+  const webSocketPrefix =
+    newRelayURI?.startsWith('wss://') || newRelayURI?.startsWith('ws://')
+      ? ''
+      : 'wss://'
 
   // fetch relay list from relays
   useEffect(() => {
@@ -197,7 +200,7 @@ export const RelaysPage = () => {
     // Check if new relay URI is a valid string
     if (
       relayURI &&
-      !/^wss:\/\/[-a-zA-Z0-9@:%._\\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}/.test(
+      !/^wss?:\/\/[-a-zA-Z0-9@:%._\\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}/.test(
         relayURI
       )
     ) {
@@ -260,7 +263,13 @@ export const RelaysPage = () => {
           }}
           className={styles.relayURItextfield}
         />
-        <Button variant="contained" onClick={() => handleAddNewRelay()}>
+        <Button
+          sx={{
+            height: '56px'
+          }}
+          variant="contained"
+          onClick={() => handleAddNewRelay()}
+        >
           Add
         </Button>
       </Box>

src/pages/settings/relays/style.module.scss

@@ -12,6 +12,7 @@
     flex-direction: row;
     gap: 10px;
     width: 100%;
+    align-items: start;
   }
 
   .sectionIcon {