[Gateway] monorepo changes

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

@@ -123,7 +123,7 @@ jobs:
       - name: "Build and Push Docker Image"
         run: |
           DOCKER_BUILDKIT=1 docker build \
-            --build-arg NEXT_PUBLIC_API_HOST_ENVIRONMENT="${{ github.event.inputs.testnet_type }}"" \
+            --build-arg NEXT_PUBLIC_API_HOST_ENVIRONMENT="${{ github.event.inputs.testnet_type }}" \
             --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 }}" \

packages/ui/components/common/connect-wallet.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import {
   Link2Icon,
   LinkBreak2Icon,
@@ -7,18 +8,14 @@ import { cn, downloadMetaMask, ethereum } from "../../lib/utils";
 import useWalletStore from "../../stores/wallet-store";
 import TruncatedAddress from "./truncated-address";
 import { Button } from "../shared/button";
-import { ButtonVariants } from "../../lib/types/ui";
-
-interface ConnectWalletButtonProps {
-  className?: string;
-  variant?: ButtonVariants;
-  text?: string;
-}
+import { ConnectWalletButtonProps } from "../../lib/interfaces/ui";
 
 const ConnectWalletButton = ({
   className,
   text = "Connect Wallet",
   variant = "outline",
+  onConnect,
+  renderContent,
 }: ConnectWalletButtonProps) => {
   const {
     walletConnected,
@@ -42,12 +39,14 @@ const ConnectWalletButton = ({
 
     if (walletConnected) {
       disconnectWallet();
+    } else if (onConnect) {
+      onConnect();
     } else {
-      connectWallet();
+      connectWallet?.();
     }
   };
 
-  const renderButtonContent = () => {
+  const defaultRenderContent = () => {
     if (!ethereum) {
       return (
         <>
@@ -79,14 +78,23 @@ const ConnectWalletButton = ({
     );
   };
 
+  const content = renderContent
+    ? renderContent({
+        walletConnected,
+        isWrongNetwork,
+        address,
+        text,
+      })
+    : defaultRenderContent();
+
   return (
     <Button
       className={cn("text-sm font-medium leading-none", className)}
       variant={variant}
       onClick={handleClick}
       suppressHydrationWarning
     >
-      {renderButtonContent()}
+      {content}
     </Button>
   );
 };

packages/ui/components/shared/skeleton.tsx

@@ -11,7 +11,7 @@ function Skeleton({
   height?: number | string;
 }) {
   return (
-    <div
+    <span
       className={cn(
         "animate-pulse rounded-md bg-muted",
         width && `w-${width}`,

packages/ui/lib/interfaces/ui.ts

@@ -1,3 +1,5 @@
+import { ButtonVariants } from "../types/ui";
+
 export interface SeoProps {
   title: string;
   description: string;
@@ -39,3 +41,16 @@ export interface ErrorType {
   children?: React.ReactNode;
   [key: string]: any;
 }
+
+export interface ConnectWalletButtonProps {
+  className?: string;
+  text?: string;
+  variant?: ButtonVariants;
+  onConnect?: () => void;
+  renderContent?: (props: {
+    walletConnected: boolean;
+    isWrongNetwork: boolean;
+    address: string | null;
+    text: string;
+  }) => React.ReactNode;
+}

packages/ui/lib/interfaces/wallet.ts

@@ -47,8 +47,8 @@ export interface IWalletState {
   isWrongNetwork: boolean;
   loading: boolean;
   initializeProvider: () => void;
-  connectWallet: () => void;
+  connectWallet?: () => void;
   disconnectWallet: () => void;
   switchNetwork: () => void;
-  restoreWalletState: () => void;
+  restoreWalletState?: () => void;
 }

packages/ui/lib/utils/walletEvents.ts

@@ -41,7 +41,7 @@ export const setupEventListeners = (
       toast({
         title: "Wrong Network",
         description: "Please switch to the correct network.",
-        variant: ToastType.WARNING,
+        variant: ToastType.INFO,
       });
     } else {
       toast({

packages/ui/services/walletService.ts

@@ -55,21 +55,21 @@ export const walletService = {
   proceedWithProviderInitialization: async (set: StoreSet, get: StoreGet) => {
     try {
       const { provider: detectedProvider } = get();
-      const accounts = await detectedProvider?.send("eth_requestAccounts", []);
 
       const signer = await initializeSigner(detectedProvider!);
+      const accounts = await walletService.getAccounts(detectedProvider!);
       const network = await detectedProvider?.getNetwork();
       const chainId = network?.chainId;
       const expectedChainId = currentNetwork.l2;
 
       const isWrongNetwork = chainId !== expectedChainId;
 
-      if (isWrongNetwork) {
-        toast({
-          description: "You are on the wrong network. Please switch to TEN.",
-          variant: ToastType.INFO,
-        });
-      }
+      // if (isWrongNetwork) {
+      //   toast({
+      //     description: "You are on the wrong network. Please switch to TEN.",
+      //     variant: ToastType.INFO,
+      //   });
+      // }
 
       set({
         address: accounts[0],
@@ -189,4 +189,21 @@ export const walletService = {
       set({ loading: false });
     }
   },
+
+  getAccounts: async (detectedProvider: ethers.providers.Web3Provider) => {
+    try {
+      const accounts = await detectedProvider?.send("eth_requestAccounts", []);
+      if (accounts.length === 0) {
+        toast({
+          description: "No accounts found.",
+          variant: ToastType.DESTRUCTIVE,
+        });
+        return [];
+      }
+      return accounts;
+    } catch (error) {
+      console.error("Error getting accounts:", error);
+      throw error;
+    }
+  },
 };

tools/walletextension/frontend/.nvmrc

@@ -0,0 +1 @@
+v20.11.0

tools/walletextension/frontend/Dockerfile

@@ -1,51 +1,39 @@
 # Use an official Node.js LTS version as a base image
-FROM node:20-alpine AS base
+FROM node:18-buster AS base
+
 # Install pnpm
 RUN npm install -g pnpm
 
+# Set the working directory
+WORKDIR /home/obscuro/go-obscuro/
+
+# Copy the entire project
+COPY . .
+
+# Install dependencies for the entire project
+RUN pnpm install
+
+# Set the working directory for the frontend
+WORKDIR /home/obscuro/go-obscuro/tools/walletextension/frontend
 
+# Install dependencies specific to the frontend
+RUN pnpm install --filter ./tools/walletextension/frontend...
+
+# Build the Next.js app (if needed)
+# RUN pnpm run build
+
+# Set environment variables
 ARG NEXT_PUBLIC_NETWORK_NAME
 ARG NEXT_PUBLIC_TENSCAN_URL
 ARG NEXT_PUBLIC_GATEWAY_URL
 ARG NEXT_PUBLIC_API_HOST_ENVIRONMENT
-
 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
 ENV NEXT_PUBLIC_API_HOST_ENVIRONMENT=${NEXT_PUBLIC_API_HOST_ENVIRONMENT}
 
-# Set the working directory
-WORKDIR /usr/src/app
-
-# Copy the necessary files to the working directory
-COPY tools/walletextension/frontend/ .
-
-# Install dependencies
-RUN pnpm ci
-
-# Build the Next.js app
-RUN pnpm run build
-
-# Reduce the size of the final image by using a lighter base image
-FROM node:20-alpine AS runner
-
-# Set the working directory
-WORKDIR /usr/src/app
-
-# Copy only the necessary files from the build stage
-COPY --from=base /usr/src/app/.next ./.next
-COPY --from=base /usr/src/app/public ./public
-COPY --from=base /usr/src/app/package*.json ./
-
-# Install production dependencies
-RUN pnpm ci --production
-
-
-# Set the environment variables
-ENV PORT=80
-
 # Expose the port
 EXPOSE 80
 
 # Start the application
-CMD ["pnpm", "start"]
+CMD ["pnpm", "run", "start"]

tools/walletextension/frontend/next.config.js

@@ -1,6 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  transpilePackages: ["@repo/ui"],
   images: {
     unoptimized: true,
   },