[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
ten-protocol · Jan 8, 2024 · 856e72e · 856e72e
1 parent 8d534c0
commit 856e72e
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 55 deletions.
diff --git 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
@@ -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
@@ -7,34 +7,43 @@ 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();
 
   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/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>