From 856e72e3bc04c703a68bd66f686b30f10d04eb52 Mon Sep 17 00:00:00 2001
From: Jennifer Echenim <echenimjennifer@gmail.com>
Date: Mon, 8 Jan 2024 22:00:01 +0400
Subject: [PATCH] [Gateway] Update expired Discord link and add warning msg to
 gateway UI (#1709)

* Update gateway warning msg
* update expired discord link in Tenscan
* open links on blank page
---
 .../src/components/layouts/footer.tsx         | 51 +++++++++++--------
 tools/tenscan/frontend/src/lib/constants.ts   |  2 +-
 .../src/components/layouts/footer.tsx         | 51 +++++++++++--------
 .../components/modules/home/disconnected.tsx  | 20 +++-----
 4 files changed, 69 insertions(+), 55 deletions(-)

diff --git a/tools/tenscan/frontend/src/components/layouts/footer.tsx b/tools/tenscan/frontend/src/components/layouts/footer.tsx
index 12ca506fa5..319c42835c 100644
--- a/tools/tenscan/frontend/src/components/layouts/footer.tsx
+++ b/tools/tenscan/frontend/src/components/layouts/footer.tsx
@@ -6,32 +6,41 @@ import {
   DiscordLogoIcon,
 } from "@radix-ui/react-icons";
 
+const SOCIAL_LINKS = [
+  {
+    name: "GitHub",
+    href: socialLinks.github,
+    icon: GitHubLogoIcon,
+  },
+  {
+    name: "Twitter",
+    href: socialLinks.twitter,
+    icon: TwitterLogoIcon,
+  },
+  {
+    name: "Discord",
+    href: socialLinks.discord,
+    icon: DiscordLogoIcon,
+  },
+];
+
 export default function Footer() {
   return (
     <div className="border-t p-2">
       <div className="flex h-16 items-center justify-between px-4 flex-wrap">
         <div className="flex items-center space-x-4 pr-2">
-          <a
-            href={socialLinks.github}
-            aria-label="GitHub"
-            className="text-muted-foreground hover:text-primary transition-colors"
-          >
-            <GitHubLogoIcon />
-          </a>
-          <a
-            href={socialLinks.twitter}
-            aria-label="Twitter"
-            className="text-muted-foreground hover:text-primary transition-colors"
-          >
-            <TwitterLogoIcon />
-          </a>
-          <a
-            href={socialLinks.discord}
-            aria-label="Discord"
-            className="text-muted-foreground hover:text-primary transition-colors"
-          >
-            <DiscordLogoIcon />
-          </a>
+          {SOCIAL_LINKS.map((item, index) => (
+            <a
+              key={item.name}
+              href={item.href}
+              aria-label={item.name}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-muted-foreground hover:text-primary transition-colors"
+            >
+              <item.icon />
+            </a>
+          ))}
         </div>
         <div className="flex items-center justify-center space-x-4 pr-2">
           <h3 className="text-xs text-muted-foreground">
diff --git a/tools/tenscan/frontend/src/lib/constants.ts b/tools/tenscan/frontend/src/lib/constants.ts
index c4047556f2..ebff60209e 100644
--- a/tools/tenscan/frontend/src/lib/constants.ts
+++ b/tools/tenscan/frontend/src/lib/constants.ts
@@ -1,6 +1,6 @@
 export const socialLinks = {
   github: "https://github.com/ten-protocol",
-  discord: "https://discord.gg/2JQ2Z3r",
+  discord: "https://discord.gg/QJZ39Den7d",
   twitter: "https://twitter.com/tenprotocol",
   twitterHandle: "@tenprotocol",
 };
diff --git a/tools/walletextension/frontend/src/components/layouts/footer.tsx b/tools/walletextension/frontend/src/components/layouts/footer.tsx
index 035216c2a4..401641c035 100644
--- a/tools/walletextension/frontend/src/components/layouts/footer.tsx
+++ b/tools/walletextension/frontend/src/components/layouts/footer.tsx
@@ -7,6 +7,24 @@ import {
 } from "@radix-ui/react-icons";
 import { useWalletConnection } from "../providers/wallet-provider";
 
+const SOCIAL_LINKS = [
+  {
+    name: "GitHub",
+    href: socialLinks.github,
+    icon: GitHubLogoIcon,
+  },
+  {
+    name: "Twitter",
+    href: socialLinks.twitter,
+    icon: TwitterLogoIcon,
+  },
+  {
+    name: "Discord",
+    href: socialLinks.discord,
+    icon: DiscordLogoIcon,
+  },
+];
+
 export default function Footer() {
   const { version } = useWalletConnection();
 
@@ -14,27 +32,18 @@ export default function Footer() {
     <div className="border-t p-2">
       <div className="flex h-16 items-center justify-between px-4 flex-wrap">
         <div className="flex items-center space-x-4 pr-2">
-          <a
-            href={socialLinks.github}
-            aria-label="GitHub"
-            className="text-muted-foreground hover:text-primary transition-colors"
-          >
-            <GitHubLogoIcon />
-          </a>
-          <a
-            href={socialLinks.twitter}
-            aria-label="Twitter"
-            className="text-muted-foreground hover:text-primary transition-colors"
-          >
-            <TwitterLogoIcon />
-          </a>
-          <a
-            href={socialLinks.discord}
-            aria-label="Discord"
-            className="text-muted-foreground hover:text-primary transition-colors"
-          >
-            <DiscordLogoIcon />
-          </a>
+          {SOCIAL_LINKS.map((item, index) => (
+            <a
+              key={item.name}
+              href={item.href}
+              aria-label={item.name}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-muted-foreground hover:text-primary transition-colors"
+            >
+              <item.icon />
+            </a>
+          ))}
         </div>
         <div className="flex items-center justify-center space-x-4 pr-2">
           <h3 className="text-xs text-muted-foreground">
diff --git a/tools/walletextension/frontend/src/components/modules/home/disconnected.tsx b/tools/walletextension/frontend/src/components/modules/home/disconnected.tsx
index 33de612f4a..6e741517e8 100644
--- a/tools/walletextension/frontend/src/components/modules/home/disconnected.tsx
+++ b/tools/walletextension/frontend/src/components/modules/home/disconnected.tsx
@@ -75,19 +75,15 @@ const Disconnected = () => {
             </p>
             <div className="flex items-center space-x-2">
               <Badge className="h-4 w-4" />
-              <p className="text-sm">
-                RPC URL:{" "}
-                <a
-                  href={testnetUrls.default.url}
-                  className="underline"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  {testnetUrls.default.url}
-                </a>
-              </p>
-              <Copy value={testnetUrls.default.url} />
+              <p className="text-sm">RPC URL: {testnetUrls.default.url}</p>
             </div>
+            <Alert variant={"warning"} className="flex items-center space-x-2">
+              <Terminal className="h-4 w-4" />
+              <AlertDescription>
+                You can only get your RPC link when you begin the connection
+                process.
+              </AlertDescription>
+            </Alert>
             <div className="flex items-center space-x-2">
               <Badge className="h-4 w-4" />
               <p className="text-sm">Chain ID: {tenChainIDDecimal}</p>