feat: bridge

app/(general)/page.tsx

@@ -23,8 +23,8 @@ export default function HomePage() {
           LightImage={"/logo-light.png"}
           DarkImage={"/logo-dark.png"}
           alt={"Meat-Logo"}
-          height={80}
-          width={80}
+          height={160}
+          width={160}
           className="h-40 w-40 rounded-2xl"
         />
         <PageHeaderHeading>MEAT</PageHeaderHeading>

app/bridge/layout.tsx

@@ -0,0 +1,23 @@
+'use client'
+import { ReactNode } from "react"
+
+import { NetworkStatus } from "@/components/blockchain/network-status"
+import { WalletConnect } from "@/components/blockchain/wallet-connect"
+import { Footer } from "@/components/layout/footer"
+import { SiteHeader } from "@/components/layout/site-header"
+
+interface BridgeLayoutProps {
+  children: ReactNode
+}
+
+export default function BridgeLayout({ children }: BridgeLayoutProps) {
+  return (
+    <>
+      <div className="relative flex min-h-screen flex-col">
+        <SiteHeader />
+        <main className="flex-1">{children}</main>
+        <Footer />
+      </div>
+    </>
+  )
+}

app/bridge/page.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { meatAddress, siteConfig } from "@/config/site"
+import { Bridge } from "@/components/blockchain/bridge"
+import {
+  PageHeader,
+  PageHeaderCTA,
+  PageHeaderDescription,
+  PageHeaderHeading,
+} from "@/components/layout/page-header"
+import { CopyButton } from "@/components/shared/copy-button"
+import { LightDarkImage } from "@/components/shared/light-dark-image"
+
+export default function BridgePage() {
+  return (
+    <div className="container relative mt-20 px-0">
+      <PageHeader className="pb-8">
+        <LightDarkImage
+          LightImage={"/logo-light.png"}
+          DarkImage={"/logo-dark.png"}
+          alt={"Meat-Logo"}
+          height={160}
+          width={160}
+          className="h-40 w-40 rounded-2xl"
+        />
+        <PageHeaderHeading>MEAT</PageHeaderHeading>
+        <PageHeaderDescription>{siteConfig.description}</PageHeaderDescription>
+
+        <Bridge />
+      </PageHeader>
+    </div>
+  )
+}

app/dashboard/collections/page.tsx

@@ -3,7 +3,6 @@
 import { motion } from "framer-motion"
 
 import { FADE_DOWN_ANIMATION_VARIANTS } from "@/config/design"
-import { meatAddress } from "@/config/site"
 import { Card } from "@/components/ui/card"
 
 export default function PageDashboardCollections() {

components/blockchain/bridge.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useState } from "react"
+import Link from "next/link"
+import { ethers } from "ethers"
+import Form from "react-bootstrap/Form"
+import { useAccount, useContractWrite, useNetwork } from "wagmi"
+
+import { meatAddress } from "@/config/site"
+import { Button, buttonVariants } from "@/components/ui/button"
+
+import {
+  addressToBytes32,
+  bridgeTokens,
+  encodePackedUint16Uint256,
+  getLayerZeroFee,
+  getMeatBalance,
+  meatAbi,
+} from "../../lib/utils/layerZero"
+
+// use client
+
+// TODO:
+// Handle errors in utils.js as toasts as well, including rejected transactions
+// Add toasts for sent and confirmed transactions, and for added network or LS token to wallet
+// Convert to TypeScript
+
+export function Bridge() {
+  const { address, isConnected } = useAccount()
+  const { chain } = useNetwork()
+
+  const [amount, setAmount] = useState(0)
+  const [balance, setBalance] = useState(0)
+  const [fee, setFee] = useState(0)
+  const [targetChain, setTargetChain] = useState(
+    chain?.network === "arbitrum" ? "avalanche" : "arbitrum"
+  )
+
+  useEffect(() => {
+    const main = async () => {
+      try {
+        const lsBalance = await getMeatBalance(chain?.network, address)
+        setBalance(Number(lsBalance))
+
+        const fee = await getLayerZeroFee(
+          chain?.network,
+          targetChain,
+          address,
+          amount
+        )
+        setFee(Number(fee))
+      } catch (error) {
+        console.error(error)
+      }
+    }
+
+    main()
+  }, [chain?.network, targetChain, amount, address])
+
+  const handleChangeAmount = (e: any) => {
+    setAmount(e.target.value)
+  }
+
+  const handleChangeTargetChain = (e: any) => {
+    setTargetChain(e.target.value)
+  }
+
+  const bridge = async () => {
+    setAmount(0)
+    console.log({
+      address,
+      chain: chain?.network,
+      targetChain,
+      amount,
+    })
+    await bridgeTokens(address, chain?.network, targetChain, amount)
+  }
+
+  return (
+    <div className="">
+      <Form className="container">
+        <Form.Group className="mb-3 mt-4">
+          <div className="flex justify-between mb-3">
+            <h1 className="bridge-label">Balance</h1>
+            <span>{balance}</span>
+          </div>
+          <div className="flex justify-between">
+            <h1 className="bridge-label">Amount</h1>
+            <Form.Control
+              type="number"
+              placeholder="Enter amount"
+              className="w-1/2"
+              value={amount}
+              onChange={handleChangeAmount}
+            />
+          </div>
+        </Form.Group>
+
+        <Form.Group className="mb-3">
+          <div className="flex justify-between">
+            <Form.Label className="bridge-label">Send to</Form.Label>
+            <Form.Select>
+              <option
+                value="arbitrum"
+                selected={targetChain === "arbitrum"}
+                disabled={chain?.network === "arbitrum"}
+                onChange={handleChangeTargetChain}
+              >
+                Arbitrum
+              </option>
+              <option
+                value="avalanche"
+                selected={targetChain === "avalanche"}
+                disabled={chain?.network === "avalanche"}
+                onChange={handleChangeTargetChain}
+              >
+                Avalanche C-Chain
+              </option>
+            </Form.Select>
+          </div>
+        </Form.Group>
+
+        <div className="bridge-fee-container">
+          <span className="bridge-label">Fee</span>
+          <span>
+            {Math.round(fee * 100000) / 100000}{" "}
+            {chain?.network === "avalanche" ? "AVAX" : "ETH"}
+          </span>
+        </div>
+        <div className="flex justify-center p-4">
+          <Button
+            className={buttonVariants({ variant: "ghost" })}
+            type="button"
+            disabled={!isConnected}
+            onClick={bridge}
+          >
+            {isConnected ? "Bridge Meat" : "Connect Wallet"}{" "}
+          </Button>
+        </div>
+      </Form>
+    </div>
+  )
+}

components/blockchain/wallet-meat-balance.tsx

@@ -18,7 +18,7 @@ export const WalletMeatBalance = ({
   const { address } = useAccount()
   const { chain } = useNetwork()
   const { data: balance } = useContractRead({
-    address: chain?.id == 43114 ? meatAddress : meatTestAddress,
+    address: meatAddress,
     abi: erc20ABI,
     functionName: "balanceOf",
     args: [address ?? "" as `0x${string}`],

components/layout/main-nav.tsx

@@ -3,19 +3,14 @@
 import React from "react"
 import Link from "next/link"
 
-
 import { siteConfig } from "@/config/site"
 import {
   NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
   NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu"
-import { Separator } from "@/components/ui/separator"
 import { LightDarkImage } from "@/components/shared/light-dark-image"
+import { Button, buttonVariants } from "@/components/ui/button"
+
 
 import { LinkComponent } from "../shared/link-component"
 
@@ -35,6 +30,13 @@ export function MainNav() {
           {siteConfig.name}
         </span>
       </Link>
+      <Link href="/bridge" className="mr-6 flex items-center space-x-2">
+        <Button 
+        variant="ghost"
+        className="hidden bg-gradient-to-br from-black to-stone-500 bg-clip-text text-2xl text-transparent dark:from-stone-200 dark:to-red-400 sm:inline-block">
+          Bridge
+        </Button>
+      </Link>
       <nav className="flex items-center space-x-6 text-base font-medium">
         <MainNavMenu />
       </nav>

components/layout/mobile-nav.tsx

@@ -3,7 +3,6 @@
 import { useState } from "react"
 import Link, { LinkProps } from "next/link"
 import { useRouter } from "next/navigation"
-
 import { LuMenu } from "react-icons/lu"
 
 import { menuDashboard } from "@/config/menu-dashboard"
@@ -41,10 +40,18 @@ export function MobileNav() {
             height={32}
             width={32}
           />
-          <span className="inline-block bg-gradient-to-br from-black to-stone-500 bg-clip-text text-xl font-bold text-transparent dark:from-stone-100 dark:to-yellow-200 sm:text-2xl">
+          <span className="meat inline-block bg-gradient-to-br from-black to-stone-500 bg-clip-text text-2xl text-transparent dark:from-stone-200 dark:to-red-400 sm:text-2xl">
             {siteConfig.name}
           </span>
         </Link>
+        <Link href="/bridge" className="mr-6 flex items-center space-x-2">
+          <Button
+            variant="ghost"
+            className="inline-block bg-gradient-to-br from-black to-stone-500 bg-clip-text text-xl text-transparent dark:from-stone-200 dark:to-red-400 sm:text-2xl"
+          >
+            Bridge
+          </Button>
+        </Link>
         <SheetTrigger asChild>
           <Button
             variant="ghost"

config/networks.ts

@@ -5,7 +5,8 @@ import { env } from "@/env.mjs"
 import { Chain, ChainProviderFn, configureChains } from "wagmi"
 import {
   avalanche,
-  avalancheFuji
+  avalancheFuji,
+  arbitrum
 } from "wagmi/chains"
 import { alchemyProvider } from "wagmi/providers/alchemy"
 import { infuraProvider } from "wagmi/providers/infura"
@@ -15,9 +16,11 @@ import { publicProvider } from "wagmi/providers/public"
 export const ETH_CHAINS_TEST = [
   avalanche,
   avalancheFuji,
+  arbitrum
 ]
 export const ETH_CHAINS_PROD = [
-  avalanche
+  avalanche,
+  arbitrum
 ]
 export const ETH_CHAINS_DEV =
   env.NEXT_PUBLIC_PROD_NETWORKS_DEV === "true"

lib/generated/blockchain.ts

@@ -1,4 +1,4 @@
-// Generated by @wagmi/[email protected] on 12/6/2023 at 10:41:54 PM
+// Generated by @wagmi/[email protected] on 12/29/2023 at 5:17:10 PM
 import {
   useContractEvent,
   UseContractEventConfig,