Fix Metamask URL in the Gateway (#2042)

.github/workflows/manual-deploy-obscuro-gateway.yml

@@ -1,8 +1,20 @@
 # Deploys TEN Gateway on Azure for Testnet
 # Builds the TEN Gateway image, pushes the image to dockerhub and starts the TEN Gateway on Azure VM
 
-name: "[M] Deploy TEN Gateway Backend"
-run-name: "[M] Deploy TEN Gateway Backend ( ${{ github.event.inputs.testnet_type }} )"
+# This action requires the following environment variables to be set:
+#  - DOCKER_BUILD_TAG_GATEWAY
+#  - AZURE_DEPLOY_GROUP_GATEWAY
+#  - L2_RPC_URL_VALIDATOR
+#  - GATEWAY_RATE_LIMIT_USER_COMPUTE_TIME
+#  - GATEWAY_RATE_LIMIT_WINDOW
+#  - GATEWAY_MAX_CONCURRENT_REQUESTS_PER_USER
+
+# If we are deploying to a non primary instance all those variables should be prefixed with the instance name
+# example: dexynth-DOCKER_BUILD_TAG_GATEWAY
+
+
+name: '[M] Deploy Ten Gateway Backend'
+run-name: '[M] Deploy Ten Gateway Backend ( ${{ github.event.inputs.testnet_type }} )'
 on:
   workflow_dispatch:
     inputs:

.github/workflows/manual-deploy-ten-gateway-frontend.yml

@@ -1,8 +1,16 @@
 # Deploys TEN Gateway Frontend on Azure for Testnet
 # Builds the TEN Gateway image, pushes the image to dockerhub and starts the TEN Gateway on Azure VM
+# This action requires the following environment variables to be set:
+# - DOCKER_BUILD_TAG_GATEWAY_FE
+# - GATEWAY_URL
+# - NETWORK_NAME
+# - TENSCAN_URL
 
-name: "[M] Deploy TEN Gateway Frontend"
-run-name: "[M] Deploy TEN Gateway Frontend ( ${{ github.event.inputs.testnet_type }} )"
+# If we are deploying to a non primary instance all those variables should be prefixed with the instance name
+# example: dexynth-GATEWAY_URL
+
+name: '[M] Deploy Ten Gateway Frontend'
+run-name: '[M] Deploy Ten Gateway Frontend ( ${{ github.event.inputs.testnet_type }} )'
 on:
   workflow_dispatch:
     inputs:
@@ -63,6 +71,8 @@ jobs:
           declare -a VAR_NAMES=(
             "DOCKER_BUILD_TAG_GATEWAY_FE"
             "GATEWAY_URL"
+            "NETWORK_NAME"
+            "TENSCAN_URL"
           )
 
           for VAR_NAME in "${VAR_NAMES[@]}"; do
@@ -83,6 +93,8 @@ jobs:
           echo "IMAGE_NAME_GATEWAY_FE: $IMAGE_NAME_GATEWAY_FE"
           echo "DOCKER_BUILD_TAG_GATEWAY_FE: $DOCKER_BUILD_TAG_GATEWAY_FE"
           echo "GATEWAY_URL: $GATEWAY_URL"
+          echo "NETWORK_NAME: $NETWORK_NAME"
+          echo "TENSCAN_URL: $TENSCAN_URL"
 
       - uses: actions/checkout@v4
 
@@ -107,12 +119,17 @@ jobs:
         with:
           creds: ${{ secrets.AZURE_CREDENTIALS }}
 
-      - name: Build and Push Docker Image
+      - name: 'Build and Push Docker Image'
         run: |
-          DOCKER_BUILDKIT=1 docker build --build-arg GATEWAY_API_URL=${{ env.GATEWAY_URL }} -t ${{ env.DOCKER_BUILD_TAG_GATEWAY_FE }} -f ./tools/walletextension/frontend/Dockerfile .
+          DOCKER_BUILDKIT=1 docker build \
+            --build-arg NEXT_PUBLIC_NETWORK_NAME=${{ env.NETWORK_NAME }} \
+            --build-arg NEXT_PUBLIC_TENSCAN_URL=${{ env.TENSCAN_URL }} \
+            --build-arg NEXT_PUBLIC_GATEWAY_URL=${{ env.GATEWAY_URL }} \
+            -t ${{ env.DOCKER_BUILD_TAG_GATEWAY_FE }} \
+            -f ./tools/walletextension/frontend/Dockerfile .
           docker push ${{ env.DOCKER_BUILD_TAG_GATEWAY_FE }}
 
-      - name: "Deploy Gateway FE to Azure Container Instances"
+      - name: 'Deploy Gateway FE to Azure Container Instances'
         uses: "azure/aci-deploy@v1"
         with:
           resource-group: ${{ secrets.RESOURCE_GROUP }}
@@ -123,4 +140,4 @@ jobs:
           restart-policy: "Never"
           ports: "80"
           cpu: 2
-          memory: 2
+          memory: 2

tools/walletextension/frontend/Dockerfile

@@ -1,8 +1,14 @@
 # Use an official Node.js LTS version as a base image
 FROM node:20-alpine AS base
 
-ARG GATEWAY_API_URL
-ENV NEXT_PUBLIC_API_GATEWAY_URL=${GATEWAY_API_URL}
+
+ARG NEXT_PUBLIC_NETWORK_NAME
+ARG NEXT_PUBLIC_TENSCAN_URL
+ARG NEXT_PUBLIC_GATEWAY_URL
+
+ENV NEXT_PUBLIC_NETWORK_NAME=$NEXT_PUBLIC_NETWORK_NAME
+ENV NEXT_PUBLIC_TENSCAN_URL=$NEXT_PUBLIC_TENSCAN_URL
+ENV NEXT_PUBLIC_GATEWAY_URL=$NEXT_PUBLIC_GATEWAY_URL
 
 # Set the working directory
 WORKDIR /usr/src/app

tools/walletextension/frontend/src/api/ethRequests.ts

@@ -1,12 +1,11 @@
 import {
   nativeCurrency,
   tenChainIDDecimal,
-  tenChainIDHex,
-  tenscanLink,
+  tenChainIDHex, tenNetworkName,
+  tenscanAddress,
   userStorageAddress,
 } from "@/lib/constants";
 import {
-  getNetworkName,
   getRandomIntAsString,
   isTenChain,
   ethereum,
@@ -114,10 +113,10 @@ export async function addNetworkToMetaMask(rpcUrls: string[]) {
       params: [
         {
           chainId: tenChainIDHex,
-          chainName: getNetworkName(),
+          chainName: tenNetworkName,
           nativeCurrency,
           rpcUrls,
-          blockExplorerUrls: [tenscanLink],
+          blockExplorerUrls: [tenscanAddress],
         },
       ],
     });

tools/walletextension/frontend/src/components/modules/home/disconnected.tsx

@@ -15,11 +15,7 @@ import {
   DialogTrigger,
 } from "../../ui/dialog";
 import Copy from "../common/copy";
-import {
-  testnetUrls,
-  tenChainIDDecimal,
-  CONNECTION_STEPS,
-} from "../../../lib/constants";
+import {tenChainIDDecimal, tenGatewayAddress, CONNECTION_STEPS} from "../../../lib/constants";
 import { downloadMetaMask, ethereum } from "@/lib/utils";
 
 const Disconnected = () => {
@@ -73,7 +69,7 @@ const Disconnected = () => {
             </p>
             <div className="flex items-center space-x-2">
               <Badge className="h-4 w-4" />
-              <p className="text-sm">RPC URL: {testnetUrls.default.url}</p>
+              <p className="text-sm">RPC URL: {tenGatewayAddress}</p>
             </div>
             <Alert variant={"warning"} className="flex items-center space-x-2">
               <Terminal className="h-4 w-4" />

tools/walletextension/frontend/src/lib/constants.ts

@@ -1,7 +1,11 @@
 export const tenGatewayAddress =
-  process.env.NEXT_PUBLIC_API_GATEWAY_URL || "http://127.0.0.1:1443";
+  process.env.NEXT_PUBLIC_GATEWAY_URL || "http://127.0.0.1:1443";
 
-export const tenscanLink = "https://testnet.tenscan.io";
+export const tenNetworkName =
+    process.env.NEXT_PUBLIC_NETWORK_NAME || "Ten Testnet";
+
+export const tenscanAddress =
+    process.env.NEXT_PUBLIC_TENSCAN_URL || "https://tenscan.io";
 
 export const socialLinks = {
   github: "https://github.com/ten-protocol",
@@ -12,28 +16,6 @@ export const socialLinks = {
 
 export const GOOGLE_ANALYTICS_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_ID;
 
-export const testnetUrls = {
-  sepolia: {
-    name: "TEN Testnet",
-    url: "https://sepolia-testnet.ten.xyz",
-    rpc: "https://rpc.sepolia-testnet.ten.xyz",
-  },
-  uat: {
-    name: "TEN UAT-Testnet",
-    url: "https://uat-testnet.ten.xyz",
-    rpc: "https://rpc.uat-testnet.ten.xyz",
-  },
-  dev: {
-    name: "TEN Dev-Testnet",
-    url: "https://dev-testnet.ten.xyz",
-    rpc: "https://rpc.dev-testnet.ten.xyz",
-  },
-  default: {
-    name: "TEN Testnet",
-    url: tenGatewayAddress,
-  },
-};
-
 export const SWITCHED_CODE = 4902;
 export const tokenHexLength = 42;
 

tools/walletextension/frontend/src/lib/utils.ts

@@ -3,8 +3,6 @@ import { formatDistanceToNow } from "date-fns";
 import { twMerge } from "tailwind-merge";
 import {
   tenChainIDHex,
-  tenGatewayAddress,
-  testnetUrls,
   tokenHexLength,
 } from "./constants";
 
@@ -28,17 +26,6 @@ export function getRandomIntAsString(min: number, max: number) {
   return randomInt.toString();
 }
 
-export function getNetworkName() {
-  switch (tenGatewayAddress) {
-    case testnetUrls.uat.url:
-      return testnetUrls.uat.name;
-    case testnetUrls.sepolia.url:
-      return testnetUrls.sepolia.name;
-    default:
-      return testnetUrls.default.name;
-  }
-}
-
 export async function isTenChain() {
   if (!ethereum) {
     return false;