[Bridge] Frontend Development

.github/workflows/manual-deploy-ten-bridge.yml

@@ -0,0 +1,65 @@
+# Deploys Ten Bridge on Azure for Testnet
+# Builds the Ten Bridge image, pushes the image to dockerhub and starts the Ten Bridge on Azure
+
+name: "[M] Deploy Bridge Testnet"
+run-name: "[M] Deploy Bridge Testnet ( ${{ github.event.inputs.testnet_type }} )"
+on:
+  workflow_dispatch:
+    inputs:
+      testnet_type:
+        description: "Testnet Type"
+        required: true
+        default: "dev-testnet"
+        type: choice
+        options:
+          - "dev-testnet"
+          - "uat-testnet"
+          - "sepolia-testnet"
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: ${{ github.event.inputs.testnet_type }}
+    steps:
+      - name: "Print GitHub variables"
+        # This is a useful record of what the environment variables were at the time the job ran, for debugging and reference
+        run: |
+          echo "GitHub Variables = ${{ toJSON(vars) }}"
+
+      - uses: actions/checkout@v3
+
+      - name: "Set up Docker"
+        uses: docker/setup-buildx-action@v1
+
+      - name: "Login to Azure docker registry"
+        uses: azure/docker-login@v1
+        with:
+          login-server: testnetobscuronet.azurecr.io
+          username: testnetobscuronet
+          password: ${{ secrets.REGISTRY_PASSWORD }}
+
+      - name: "Login via Azure CLI"
+        uses: azure/login@v1
+        with:
+          creds: ${{ secrets.AZURE_CREDENTIALS }}
+
+      - name: Build and Push Docker FE Image
+        run: |
+          DOCKER_BUILDKIT=1 docker build -t ${{ vars.DOCKER_BUILD_TAG_BRIDGE_FE }} -f ./contracts/src/bridge/frontend/Dockerfile . 
+          docker push ${{ vars.DOCKER_BUILD_TAG_BRIDGE_FE }}
+
+      - name: "Deploy FE to Azure Container Instances"
+        uses: "azure/aci-deploy@v1"
+        with:
+          resource-group: ${{ secrets.RESOURCE_GROUP }}
+          dns-name-label: ${{ github.event.inputs.testnet_type }}-ten-bridge
+          image: ${{ vars.DOCKER_BUILD_TAG_BRIDGE_FE }}
+          name: ${{ github.event.inputs.testnet_type }}-fe-ten-bridge
+          location: "uksouth"
+          restart-policy: "Never"
+          environment-variables: NEXT_PUBLIC_BRIDGE_API_HOST=https://${{ github.event.inputs.testnet_type }}-api.tenscan.io NEXT_PUBLIC_FE_VERSION=${{ GITHUB.RUN_NUMBER }}-${{ GITHUB.SHA }}
+          command-line: npm run start-prod
+          ports: "80"
+          cpu: 2
+          memory: 2

contracts/src/bridge/frontend/Dockerfile

@@ -0,0 +1,27 @@
+# Use an official Node.js 22 as a parent image
+FROM node:22-alpine
+
+WORKDIR /usr/src/app
+
+# ARG for build-time variable
+ARG API_HOST
+ARG L1_BRIDGE
+ARG L2_BRIDGE
+ARG MESSAGE_BUS
+ARG GOOGLE_ANALYTICS_ID
+
+# ENV for URL to be used in the app
+ENV NEXT_PUBLIC_BRIDGE_API_HOST=${API_HOST}
+ENV NEXT_PUBLIC_BRIDGE_L1=${L1_BRIDGE}
+ENV NEXT_PUBLIC_BRIDGE_L2=${L2_BRIDGE}
+ENV NEXT_PUBLIC_BRIDGE_MESSAGE_BUS=${MESSAGE_BUS}
+ENV NEXT_PUBLIC_BRIDGE_GOOGLE_ANALYTICS_ID=${GOOGLE_ANALYTICS_ID}
+
+# Copy package.json and package-lock.json (or yarn.lock) into the container
+COPY package*.json ./
+
+RUN npm install
+COPY . .
+RUN npm run build
+EXPOSE 80
+CMD ["npm", "start"]

contracts/src/bridge/frontend/api/general.ts

@@ -7,8 +7,7 @@ export const fetchTestnetStatus = async (): Promise<
   ResponseDataInterface<boolean>
 > => {
   return await httpRequest<ResponseDataInterface<boolean>>({
-    method: "post",
+    method: "get",
     url: pathToUrl(apiRoutes.getHealthStatus),
-    data: { jsonrpc: "2.0", method: "obscuro_health", params: [], id: 1 },
   });
 };

contracts/src/bridge/frontend/env.example

@@ -1,2 +1,6 @@
-NEXT_PUBLIC_L1_BRIDGE=
-NEXT_PUBLIC_L2_BRIDGE=
+NEXT_PUBLIC_BRIDGE_API_HOST=
+
+NEXT_PUBLIC_BRIDGE_L1=
+NEXT_PUBLIC_BRIDGE_L2=
+NEXT_PUBLIC_BRIDGE_MESSAGE_BUS=
+NEXT_PUBLIC_BRIDGE_GOOGLE_ANALYTICS_ID=

contracts/src/bridge/frontend/pages/500.tsx

@@ -1,4 +1,4 @@
-import { ErrorType } from "@/src/types/interfaces";
+import { ErrorType } from "@/src/types";
 import Error from "./_error";
 
 function Custom500Error({

contracts/src/bridge/frontend/pages/docs/[id].tsx

@@ -5,7 +5,7 @@ import { useRouter } from "next/router";
 import React from "react";
 import Custom404Error from "../404";
 import { showToast } from "@/src/components/ui/use-toast";
-import { ToastType } from "@/src/types/interfaces";
+import { ToastType } from "@/src/types";
 
 type Document = {
   title: string;

contracts/src/bridge/frontend/pages/transactions/index.tsx

@@ -9,16 +9,17 @@ import {
   TabsList,
   TabsTrigger,
 } from "@/src/components/ui/tabs";
-import Web3Service from "@/src/services/web3service";
 import { useWalletStore } from "@/src/components/providers/wallet-provider";
+import { useContract } from "@/src/hooks/useContract";
 
 export const metadata: Metadata = {
   title: "Transactions",
   description: "A table of transactions.",
 };
 
 export default function Transactions() {
-  const { signer, provider, address } = useWalletStore();
+  const { provider, address } = useWalletStore();
+  const { getBridgeTransactions } = useContract();
   const { transactions, refetchTransactions } = {
     transactions: {
       result: {
@@ -34,16 +35,13 @@ export default function Transactions() {
   };
 
   const getTransactions = async () => {
-    const web3Service = new Web3Service(signer);
-    const transactions = await web3Service.getBridgeTransactions(
-      provider,
-      address
-    );
+    const transactions = await getBridgeTransactions(provider, address);
     console.log(transactions);
   };
 
   React.useEffect(() => {
     getTransactions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (

contracts/src/bridge/frontend/src/components/modules/bridge/index.tsx

@@ -8,7 +8,7 @@ import {
 } from "@/src/components/ui/card";
 import { Button } from "@/src/components/ui/button";
 import { Skeleton } from "@/src/components/ui/skeleton";
-import { ArrowDownUpIcon, Terminal } from "lucide-react";
+import { ArrowDownUpIcon, Loader, PlusIcon, Terminal } from "lucide-react";
 import {
   Select,
   SelectContent,
@@ -33,53 +33,49 @@ import { DrawerDialog } from "../common/drawer-dialog";
 import { L1TOKENS, L2TOKENS, PERCENTAGES } from "@/src/lib/constants";
 import { z } from "zod";
 import { useFormHook } from "@/src/hooks/useForm";
-import Web3Service from "@/src/services/web3service";
 import { useWalletStore } from "../../providers/wallet-provider";
 import { ToastType, Token } from "@/src/types";
 import { Alert, AlertDescription } from "../../ui/alert";
 import ConnectWalletButton from "../common/connect-wallet";
-import Copy from "../common/copy";
+import TruncatedAddress from "../common/truncated-address";
+import { useContract } from "@/src/hooks/useContract";
 
 export default function Dashboard() {
   const {
-    signer,
     provider,
     address,
     walletConnected,
     switchNetwork,
     isL1ToL2,
     fromChains,
     toChains,
-    connectWallet,
   } = useWalletStore();
-  const web3Service = new Web3Service(signer);
+  const { getNativeBalance, getTokenBalance, sendERC20, sendNative } =
+    useContract();
 
   const { form, FormSchema } = useFormHook();
   const [loading, setLoading] = React.useState(false);
   const [fromTokenBalance, setFromTokenBalance] = React.useState<any>(0);
 
   const tokens = isL1ToL2 ? L1TOKENS : L2TOKENS;
-  const receiver = React.useMemo(() => form.watch("receiver"), [form.watch]);
+  const receiver = form.watch("receiver");
 
   const swapTokens = () => {
     switchNetwork(isL1ToL2 ? "L2" : "L1");
   };
 
+  const [open, setOpen] = React.useState(false);
   const watchTokenChange = form.watch("token");
   React.useEffect(() => {
-    const getTokenBalance = async (value: string, token: Token) => {
+    const tokenBalance = async (value: string, token: Token) => {
       setLoading(true);
       try {
         tokens.find((t) => t.value === value);
         let balance;
         if (token.isNative) {
-          balance = await web3Service.getNativeBalance(provider, address);
+          balance = await getNativeBalance(provider, address);
         } else {
-          balance = await web3Service.getTokenBalance(
-            token.address,
-            address,
-            provider
-          );
+          balance = await getTokenBalance(token.address, address, provider);
         }
         setFromTokenBalance(balance);
       } catch (error) {
@@ -92,39 +88,44 @@ export default function Dashboard() {
     if (watchTokenChange) {
       const token = tokens.find((t) => t.value === watchTokenChange);
       if (token) {
-        getTokenBalance(watchTokenChange, token);
+        tokenBalance(watchTokenChange, token);
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [watchTokenChange, address, provider]);
 
   async function onSubmit(data: z.infer<typeof FormSchema>) {
-    if (!walletConnected) {
-      return connectWallet();
-    }
     try {
-      console.log(data);
+      setLoading(true);
+      const d = {
+        ...data,
+        receiver: receiver ? receiver : address,
+      };
       toast({
         title: "Bridge Transaction",
         description: "Bridge transaction initiated",
         variant: ToastType.INFO,
       });
-      const token = data.token;
+      const token = d.token;
       const t = tokens.find((t) => t.value === token);
       if (!t) {
         throw new Error("Invalid token");
       }
 
-      const sendTransaction = t.isNative
-        ? web3Service.sendNative
-        : web3Service.sendERC20;
-      await sendTransaction(data.receiver ?? address, data.amount, t.address);
+      const sendTransaction = t.isNative ? sendNative : sendERC20;
+      const res = await sendTransaction(
+        d.receiver ? d.receiver : address,
+        d.amount,
+        t.address
+      );
       toast({
         title: "Bridge Transaction",
-        description: "Bridge transaction completed",
+        description: `Bridge transaction completed: ${res.transactionHash}`,
         variant: ToastType.SUCCESS,
       });
       form.reset();
     } catch (error) {
+      setLoading(false);
       console.error(error);
       toast({
         title: "Bridge Transaction",
@@ -135,6 +136,8 @@ export default function Dashboard() {
         }`,
         variant: ToastType.DESTRUCTIVE,
       });
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -247,6 +250,7 @@ export default function Dashboard() {
                         )}
                       />
 
+                      {/* Balance */}
                       <div className="pl-2">
                         <p className="text-sm text-muted-foreground">
                           Balance:
@@ -354,7 +358,14 @@ export default function Dashboard() {
 
                   <div className="flex items-center justify-end">
                     {/* Destination Address Input */}
-                    <DrawerDialog />
+                    <Button
+                      variant="ghost"
+                      className="text-sm font-bold leading-none"
+                      onClick={() => setOpen(true)}
+                    >
+                      <PlusIcon className="h-3 w-3 mr-1" />
+                      <small>Edit destination address</small>
+                    </Button>
                   </div>
                   <div className="bg-muted dark:bg-[#15171D]">
                     <div className="flex items-center justify-between p-2">
@@ -377,7 +388,7 @@ export default function Dashboard() {
                     <strong className="text-lg">Receiver Address</strong>
                     <div className="flex items-center">
                       {receiver || address ? (
-                        <Copy value={receiver ?? address} />
+                        <TruncatedAddress address={receiver || address} />
                       ) : null}
                     </div>
                   </div>
@@ -388,9 +399,9 @@ export default function Dashboard() {
                       type="submit"
                       className="text-sm font-bold leading-none w-full"
                       size={"lg"}
-                      disabled={!isL1ToL2}
+                      disabled={!isL1ToL2 || loading || fromTokenBalance <= 0}
                     >
-                      Initiate Bridge Transaction
+                      {loading ? <Loader /> : "Initiate Bridge Transaction"}
                     </Button>
                   ) : (
                     <ConnectWalletButton
@@ -401,6 +412,7 @@ export default function Dashboard() {
                 </div>
               </form>
             </Form>
+            <DrawerDialog open={open} setOpen={setOpen} />
           </CardContent>
         </Card>
       </div>

contracts/src/bridge/frontend/src/components/modules/common/copy.tsx

@@ -5,6 +5,7 @@ import { CopyIcon, CheckIcon } from "@radix-ui/react-icons";
 
 const Copy = ({ value }: { value: string | number | undefined }) => {
   const { copyToClipboard, copied } = useCopy();
+  if (!value) return null;
   return (
     <Button
       type="button"