diff --git a/packages/foundry/.env.example b/packages/foundry/.env.example
deleted file mode 100644
index 7fe93e3..0000000
--- a/packages/foundry/.env.example
+++ /dev/null
@@ -1,3 +0,0 @@
-DEPLOYER_PRIVATE_KEY=
-ETHERSCAN_API_KEY=
-ALCHEMY_API_KEY=
\ No newline at end of file
diff --git a/packages/foundry/foundry.toml b/packages/foundry/foundry.toml
index 0e4c8f1..e57001d 100644
--- a/packages/foundry/foundry.toml
+++ b/packages/foundry/foundry.toml
@@ -6,7 +6,7 @@ libs = ['lib']
 fs_permissions = [{ access = "read-write", path = "./"}]
 
 [rpc_endpoints]
-default_network = "http://127.0.0.1:8545"
+default_network = "https://polygon-mainnet.g.alchemy.com/v2/${ALCHEMY_API_KEY}"
 localhost = "http://127.0.0.1:8545"
 
 mainnet = "https://eth-mainnet.alchemyapi.io/v2/${ALCHEMY_API_KEY}"
diff --git a/packages/nextjs/components/index/abis/xocpin.ts b/packages/nextjs/components/index/abis/xocpin.ts
new file mode 100644
index 0000000..6864def
--- /dev/null
+++ b/packages/nextjs/components/index/abis/xocpin.ts
@@ -0,0 +1,309 @@
+export const xocPinABI = [
+  {
+    inputs: [{ internalType: "string", name: "_tokenURI", type: "string" }],
+    stateMutability: "nonpayable",
+    type: "constructor",
+  },
+  { inputs: [{ internalType: "address", name: "target", type: "address" }], name: "AddressEmptyCode", type: "error" },
+  {
+    inputs: [{ internalType: "address", name: "account", type: "address" }],
+    name: "AddressInsufficientBalance",
+    type: "error",
+  },
+  {
+    inputs: [
+      { internalType: "address", name: "sender", type: "address" },
+      { internalType: "uint256", name: "tokenId", type: "uint256" },
+      { internalType: "address", name: "owner", type: "address" },
+    ],
+    name: "ERC721IncorrectOwner",
+    type: "error",
+  },
+  {
+    inputs: [
+      { internalType: "address", name: "operator", type: "address" },
+      { internalType: "uint256", name: "tokenId", type: "uint256" },
+    ],
+    name: "ERC721InsufficientApproval",
+    type: "error",
+  },
+  {
+    inputs: [{ internalType: "address", name: "approver", type: "address" }],
+    name: "ERC721InvalidApprover",
+    type: "error",
+  },
+  {
+    inputs: [{ internalType: "address", name: "operator", type: "address" }],
+    name: "ERC721InvalidOperator",
+    type: "error",
+  },
+  { inputs: [{ internalType: "address", name: "owner", type: "address" }], name: "ERC721InvalidOwner", type: "error" },
+  {
+    inputs: [{ internalType: "address", name: "receiver", type: "address" }],
+    name: "ERC721InvalidReceiver",
+    type: "error",
+  },
+  {
+    inputs: [{ internalType: "address", name: "sender", type: "address" }],
+    name: "ERC721InvalidSender",
+    type: "error",
+  },
+  {
+    inputs: [{ internalType: "uint256", name: "tokenId", type: "uint256" }],
+    name: "ERC721NonexistentToken",
+    type: "error",
+  },
+  { inputs: [], name: "FailedInnerCall", type: "error" },
+  { inputs: [{ internalType: "address", name: "owner", type: "address" }], name: "OwnableInvalidOwner", type: "error" },
+  {
+    inputs: [{ internalType: "address", name: "account", type: "address" }],
+    name: "OwnableUnauthorizedAccount",
+    type: "error",
+  },
+  {
+    inputs: [{ internalType: "address", name: "token", type: "address" }],
+    name: "SafeERC20FailedOperation",
+    type: "error",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, internalType: "address", name: "owner", type: "address" },
+      { indexed: true, internalType: "address", name: "approved", type: "address" },
+      { indexed: true, internalType: "uint256", name: "tokenId", type: "uint256" },
+    ],
+    name: "Approval",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, internalType: "address", name: "owner", type: "address" },
+      { indexed: true, internalType: "address", name: "operator", type: "address" },
+      { indexed: false, internalType: "bool", name: "approved", type: "bool" },
+    ],
+    name: "ApprovalForAll",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: false, internalType: "uint256", name: "_fromTokenId", type: "uint256" },
+      { indexed: false, internalType: "uint256", name: "_toTokenId", type: "uint256" },
+    ],
+    name: "BatchMetadataUpdate",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [{ indexed: false, internalType: "uint256", name: "_tokenId", type: "uint256" }],
+    name: "MetadataUpdate",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, internalType: "address", name: "previousOwner", type: "address" },
+      { indexed: true, internalType: "address", name: "newOwner", type: "address" },
+    ],
+    name: "OwnershipTransferred",
+    type: "event",
+  },
+  {
+    anonymous: false,
+    inputs: [
+      { indexed: true, internalType: "address", name: "from", type: "address" },
+      { indexed: true, internalType: "address", name: "to", type: "address" },
+      { indexed: true, internalType: "uint256", name: "tokenId", type: "uint256" },
+    ],
+    name: "Transfer",
+    type: "event",
+  },
+  {
+    inputs: [],
+    name: "MINT_PRICE",
+    outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "TREASURY",
+    outputs: [{ internalType: "address", name: "", type: "address" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "XOCOLATL",
+    outputs: [{ internalType: "address", name: "", type: "address" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "address", name: "to", type: "address" },
+      { internalType: "uint256", name: "tokenId", type: "uint256" },
+    ],
+    name: "approve",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [{ internalType: "address", name: "owner", type: "address" }],
+    name: "balanceOf",
+    outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "baseTokenURI",
+    outputs: [{ internalType: "string", name: "", type: "string" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [{ internalType: "uint256", name: "tokenId", type: "uint256" }],
+    name: "getApproved",
+    outputs: [{ internalType: "address", name: "", type: "address" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "address", name: "owner", type: "address" },
+      { internalType: "address", name: "operator", type: "address" },
+    ],
+    name: "isApprovedForAll",
+    outputs: [{ internalType: "bool", name: "", type: "bool" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [{ internalType: "address", name: "to", type: "address" }],
+    name: "mint",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "name",
+    outputs: [{ internalType: "string", name: "", type: "string" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "nextTokenId",
+    outputs: [{ internalType: "uint256", name: "", type: "uint256" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "owner",
+    outputs: [{ internalType: "address", name: "", type: "address" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [{ internalType: "uint256", name: "tokenId", type: "uint256" }],
+    name: "ownerOf",
+    outputs: [{ internalType: "address", name: "", type: "address" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  { inputs: [], name: "renounceOwnership", outputs: [], stateMutability: "nonpayable", type: "function" },
+  {
+    inputs: [
+      { internalType: "address", name: "from", type: "address" },
+      { internalType: "address", name: "to", type: "address" },
+      { internalType: "uint256", name: "tokenId", type: "uint256" },
+    ],
+    name: "safeTransferFrom",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "address", name: "from", type: "address" },
+      { internalType: "address", name: "to", type: "address" },
+      { internalType: "uint256", name: "tokenId", type: "uint256" },
+      { internalType: "bytes", name: "data", type: "bytes" },
+    ],
+    name: "safeTransferFrom",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "address", name: "operator", type: "address" },
+      { internalType: "bool", name: "approved", type: "bool" },
+    ],
+    name: "setApprovalForAll",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [{ internalType: "string", name: "_baseTokenURI", type: "string" }],
+    name: "setBaseTokenURI",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "uint256", name: "tokenId", type: "uint256" },
+      { internalType: "string", name: "_tokenURI", type: "string" },
+    ],
+    name: "setTokenURI",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [{ internalType: "bytes4", name: "interfaceId", type: "bytes4" }],
+    name: "supportsInterface",
+    outputs: [{ internalType: "bool", name: "", type: "bool" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [],
+    name: "symbol",
+    outputs: [{ internalType: "string", name: "", type: "string" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [{ internalType: "uint256", name: "tokenId", type: "uint256" }],
+    name: "tokenURI",
+    outputs: [{ internalType: "string", name: "", type: "string" }],
+    stateMutability: "view",
+    type: "function",
+  },
+  {
+    inputs: [
+      { internalType: "address", name: "from", type: "address" },
+      { internalType: "address", name: "to", type: "address" },
+      { internalType: "uint256", name: "tokenId", type: "uint256" },
+    ],
+    name: "transferFrom",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+  {
+    inputs: [{ internalType: "address", name: "newOwner", type: "address" }],
+    name: "transferOwnership",
+    outputs: [],
+    stateMutability: "nonpayable",
+    type: "function",
+  },
+];
diff --git a/packages/nextjs/components/index/cta.js b/packages/nextjs/components/index/cta.js
index 7926c8c..1164b8e 100644
--- a/packages/nextjs/components/index/cta.js
+++ b/packages/nextjs/components/index/cta.js
@@ -1,7 +1,38 @@
-import React from "react";
+import React, { useState } from "react";
+import Image from "next/image";
+import { xocolatlABI } from "../xoc-dapp/abis/xocabis";
+import { xocPinABI } from "./abis/xocpin";
 import Container from "./container";
+import { parseEther } from "viem";
+import { useContractWrite } from "wagmi";
+import { useAccount } from "wagmi";
 
 const Cta = () => {
+  const [showCard, setShowCard] = useState(false);
+  const account = useAccount();
+
+  const handleButtonClick = () => {
+    setShowCard(true);
+  };
+
+  const handleCloseCard = () => {
+    setShowCard(false);
+  };
+
+  const { write: approve } = useContractWrite({
+    address: "0xa411c9Aa00E020e4f88Bc19996d29c5B7ADB4ACf",
+    abi: xocolatlABI,
+    functionName: "approve",
+    args: ["0x72fa57b14b83D165EACab4E2bB3B3B9D5B9C5A52", parseEther("100")],
+  });
+
+  const { write: mintNFT } = useContractWrite({
+    address: "0x72fa57b14b83D165EACab4E2bB3B3B9D5B9C5A52",
+    abi: xocPinABI,
+    functionName: "mint",
+    args: [account.address],
+  });
+
   return (
     <Container>
       <div className="flex flex-wrap items-center justify-between w-full max-w-4xl gap-5 mx-auto text-white bg-indigo-600 px-7 py-7 lg:px-12 lg:py-12 lg:flex-nowrap rounded-xl">
@@ -12,16 +43,60 @@ const Cta = () => {
           </p>
         </div>
         <div className="flex-shrink-0 w-full text-center lg:w-auto">
-          <a
-            href="https://github.com/web3templates"
-            target="_blank"
-            rel="noopener noreferrer" // Fix: Added 'noreferrer' attribute
-            className="inline-block py-3 mx-auto text-lg font-medium text-center text-indigo-600 bg-white rounded-md px-7 lg:px-10 lg:py-5 "
+          <button
+            onClick={handleButtonClick}
+            className="inline-block py-3 mx-auto text-lg font-medium text-center text-indigo-600 bg-white rounded-md px-7 lg:px-10 lg:py-5"
           >
             Mintea tu NFT de membresía
-          </a>
+          </button>
         </div>
       </div>
+      {showCard && (
+        <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-base-100 shadow-xl p-8 rounded-lg z-10 max-w-screen-lg w-full ">
+          <div className="card-actions justify-end">
+            <button className="btn btn-square btn-sm" onClick={handleCloseCard}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div className="card bg-base-100 shadow-xl">
+            <figure>
+              <Image src="https://daisyui.com/images/stock/photo-1494232410401-ad00d5433cfa.jpg" alt="Album" />
+            </figure>
+            <div className="card-body">
+              <div className="stats stats-vertical lg:stats-horizontal shadow mb-5">
+                <div className="stat">
+                  <div className="stat-title">Price to Mint</div>
+                  <div className="stat-value">100 $XOC</div>
+                  <div className="stat-desc">First Come, First Served</div>
+                </div>
+                <div className="stat">
+                  <div className="stat-title">NFTs Minted</div>
+                  <div className="stat-value">4,200</div>
+                  <div className="stat-desc">↗︎ 400 (22%)</div>
+                </div>
+              </div>
+              <div className="card-actions justify-center">
+                <button onClick={approve} className="btn btn-warning">
+                  Approve 100 $XOC
+                </button>
+                <div className="card-actions justify-end">
+                  <button onClick={mintNFT} className="btn btn-primary">
+                    Mint NFT
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </Container>
   );
 };
diff --git a/packages/nextjs/components/index/hero.tsx b/packages/nextjs/components/index/hero.tsx
index a4a4d76..6b94e92 100644
--- a/packages/nextjs/components/index/hero.tsx
+++ b/packages/nextjs/components/index/hero.tsx
@@ -49,6 +49,7 @@ const Hero = () => {
     }
   }, [latestPriceData, ONE_HUNDRED_XOC]);
 
+
   const { write: approve } = useContractWrite({
     address: ADDR_LIB.polygon.weth.address,
     abi: erc20ABI,
diff --git a/packages/nextjs/components/streams/FlowingBalance.tsx b/packages/nextjs/components/streams/FlowingBalance.tsx
new file mode 100644
index 0000000..552cf5d
--- /dev/null
+++ b/packages/nextjs/components/streams/FlowingBalance.tsx
@@ -0,0 +1,102 @@
+import React, { memo, useEffect, useMemo, useState } from "react";
+import { formatEther } from "viem";
+
+// Constants
+export const ANIMATION_MINIMUM_STEP_TIME = 40;
+
+// Utility functions
+export const absoluteValue = (n: bigint) => {
+  return n >= BigInt(0) ? n : -n;
+};
+
+export function toFixedUsingString(numStr: string, decimalPlaces: number): string {
+  const [wholePart, decimalPart] = numStr.split(".");
+
+  if (!decimalPart || decimalPart.length <= decimalPlaces) {
+    return numStr.padEnd(wholePart.length + 1 + decimalPlaces, "0");
+  }
+
+  const decimalPartBigInt = BigInt(
+    `${decimalPart.slice(0, decimalPlaces)}${decimalPart[decimalPlaces] >= "5" ? "1" : "0"}`,
+  );
+
+  return `${wholePart}.${decimalPartBigInt.toString().padStart(decimalPlaces, "0")}`;
+}
+
+// Hooks
+export const useSignificantFlowingDecimal = (flowRate: bigint, animationStepTimeInMs: number): number | undefined =>
+  useMemo(() => {
+    if (flowRate === BigInt(0)) {
+      return undefined;
+    }
+
+    const ticksPerSecond = 1000 / animationStepTimeInMs;
+    const flowRatePerTick = flowRate / BigInt(ticksPerSecond);
+
+    const [beforeEtherDecimal, afterEtherDecimal] = formatEther(flowRatePerTick).split(".");
+
+    const isFlowingInWholeNumbers = absoluteValue(BigInt(beforeEtherDecimal)) > BigInt(0);
+
+    if (isFlowingInWholeNumbers) {
+      return 0; // Flowing in whole numbers per tick.
+    }
+    const numberAfterDecimalWithoutLeadingZeroes = BigInt(afterEtherDecimal);
+
+    const lengthToFirstSignificantDecimal = afterEtherDecimal
+      .toString()
+      .replace(numberAfterDecimalWithoutLeadingZeroes.toString(), "").length; // We're basically counting the zeroes.
+
+    return Math.min(lengthToFirstSignificantDecimal + 2, 18); // Don't go over 18.
+  }, [flowRate, animationStepTimeInMs]);
+
+const useFlowingBalance = (startingBalance: bigint, startingBalanceDate: Date, flowRate: bigint) => {
+  const [flowingBalance, setFlowingBalance] = useState(startingBalance);
+
+  const startingBalanceTime = startingBalanceDate.getTime();
+  useEffect(() => {
+    if (flowRate === BigInt(0)) return;
+
+    let lastAnimationTimestamp = 0;
+
+    const animationStep = (currentAnimationTimestamp: number) => {
+      const animationFrameId = window.requestAnimationFrame(animationStep);
+      if (currentAnimationTimestamp - lastAnimationTimestamp > ANIMATION_MINIMUM_STEP_TIME) {
+        const elapsedTimeInMilliseconds = BigInt(Date.now() - startingBalanceTime);
+        const flowingBalance_ = startingBalance + (flowRate * elapsedTimeInMilliseconds) / BigInt(1000);
+
+        setFlowingBalance(flowingBalance_);
+
+        lastAnimationTimestamp = currentAnimationTimestamp;
+      }
+
+      return () => window.cancelAnimationFrame(animationFrameId);
+    };
+
+    const animationFrameId = window.requestAnimationFrame(animationStep);
+
+    return () => window.cancelAnimationFrame(animationFrameId);
+  }, [startingBalance, startingBalanceTime, flowRate]);
+
+  return flowingBalance;
+};
+
+// FlowingBalance Component
+const FlowingBalance: React.FC<{
+  startingBalance: bigint;
+  startingBalanceDate: Date;
+  flowRate: bigint;
+}> = memo(function FlowingBalance({ startingBalance, startingBalanceDate, flowRate }) {
+  const flowingBalance = useFlowingBalance(startingBalance, startingBalanceDate, flowRate);
+
+  const decimalPlaces = useSignificantFlowingDecimal(flowRate, ANIMATION_MINIMUM_STEP_TIME);
+
+  return (
+    <div className="flowing-balance stat-value text-accent text-8xl align-middle">
+      {decimalPlaces !== undefined
+        ? toFixedUsingString(formatEther(flowingBalance), decimalPlaces)
+        : formatEther(flowingBalance)}
+    </div>
+  );
+});
+
+export default FlowingBalance;
diff --git a/packages/nextjs/components/streams/SuperTokens.tsx b/packages/nextjs/components/streams/SuperTokens.tsx
index bedc85a..c063ac8 100644
--- a/packages/nextjs/components/streams/SuperTokens.tsx
+++ b/packages/nextjs/components/streams/SuperTokens.tsx
@@ -38,7 +38,7 @@ const SupertokensComponent: React.FC = () => {
     address: "0xcfA132E353cB4E398080B9700609bb008eceB125",
     abi: CFAv1ForwarderABI,
     functionName: "setFlowrate",
-    args: ["0x36d9a149895d905D117C38F3090f4344B76Ec9F4", receiverAddress, BigInt(100)],
+    args: ["0x36d9a149895d905D117C38F3090f4344B76Ec9F4", receiverAddress, BigInt(100000000000000)],
   });
 
   const { write: deleteFlow } = useContractWrite({
@@ -50,70 +50,76 @@ const SupertokensComponent: React.FC = () => {
 
   return (
     <>
-      <div>
-        <h1>Approve Upgrade</h1>
-        <input
-          type="text"
-          placeholder="Type here"
-          className="input input-bordered w-full max-w-xs"
-          value={approveAmount}
-          onChange={e => setApproveAmount(e.target.value)}
-        />
-        <button className="btn btn-success" onClick={() => approveUpgrade()}>
-          Approve Upgrade
-        </button>
-      </div>
-      <div>
-        <h1>Upgrade</h1>
-        <input
-          type="text"
-          placeholder="Type here"
-          className="input input-bordered w-full max-w-xs"
-          value={upgradeAmount}
-          onChange={e => setUpgradeAmount(e.target.value)}
-        />
-        <button className="btn btn-success" onClick={() => upgrade()}>
-          Upgrade
-        </button>
-      </div>
-      <div>
-        <h1>Downgrade</h1>
-        <input
-          type="text"
-          placeholder="Type here"
-          className="input input-bordered w-full max-w-xs"
-          value={downgradeAmount}
-          onChange={e => setDowngradeAmount(e.target.value)}
-        />
-        <button className="btn btn-error" onClick={() => downgrade()}>
-          Downgrade
-        </button>
-      </div>
-      <div>
-        <h1>Set Flowrate</h1>
-        <input
-          type="text"
-          placeholder="Type here"
-          className="input input-bordered w-full max-w-xs"
-          value={receiverAddress}
-          onChange={e => setReceiverAddress(e.target.value)}
-        />
-        <button className="btn btn-success" onClick={() => forwarder()}>
-          Set Flowrate
-        </button>
-      </div>
-      <div>
-        <h1>Delete Flowrate</h1>
-        <input
-          type="text"
-          placeholder="Type receiver address"
-          className="input input-bordered w-full max-w-xs"
-          value={deleteAddress}
-          onChange={e => setDeleteAddress(e.target.value)}
-        />
-        <button className="btn btn-error" onClick={() => deleteFlow()}>
-          Delete Flowrate
-        </button>
+      <div className="flex items-center justify-center space-y-8">
+        <div className="text-center">
+          <h1>Approve Upgrade</h1>
+          <input
+            type="text"
+            placeholder="Type here"
+            className="input input-bordered w-full max-w-xs"
+            value={approveAmount}
+            onChange={e => setApproveAmount(e.target.value)}
+          />
+          <button className="btn btn-success mt-2" onClick={() => approveUpgrade()}>
+            Approve Upgrade
+          </button>
+        </div>
+
+        <div className="text-center">
+          <h1>Upgrade</h1>
+          <input
+            type="text"
+            placeholder="Type here"
+            className="input input-bordered w-full max-w-xs"
+            value={upgradeAmount}
+            onChange={e => setUpgradeAmount(e.target.value)}
+          />
+          <button className="btn btn-success mt-2" onClick={() => upgrade()}>
+            Upgrade
+          </button>
+        </div>
+
+        <div className="text-center">
+          <h1>Downgrade</h1>
+          <input
+            type="text"
+            placeholder="Type here"
+            className="input input-bordered w-full max-w-xs"
+            value={downgradeAmount}
+            onChange={e => setDowngradeAmount(e.target.value)}
+          />
+          <button className="btn btn-error mt-2" onClick={() => downgrade()}>
+            Downgrade
+          </button>
+        </div>
+
+        <div className="text-center">
+          <h1>Set Flowrate</h1>
+          <input
+            type="text"
+            placeholder="Type here"
+            className="input input-bordered w-full max-w-xs"
+            value={receiverAddress}
+            onChange={e => setReceiverAddress(e.target.value)}
+          />
+          <button className="btn btn-success mt-2" onClick={() => forwarder()}>
+            Set Flowrate
+          </button>
+        </div>
+
+        <div className="text-center">
+          <h1>Delete Flowrate</h1>
+          <input
+            type="text"
+            placeholder="Type receiver address"
+            className="input input-bordered w-full max-w-xs"
+            value={deleteAddress}
+            onChange={e => setDeleteAddress(e.target.value)}
+          />
+          <button className="btn btn-error mt-2" onClick={() => deleteFlow()}>
+            Delete Flowrate
+          </button>
+        </div>
       </div>
     </>
   );
diff --git a/packages/nextjs/components/xoc-dapp/Dashboard.tsx b/packages/nextjs/components/xoc-dapp/Dashboard.tsx
index 81df5a6..51a9d83 100644
--- a/packages/nextjs/components/xoc-dapp/Dashboard.tsx
+++ b/packages/nextjs/components/xoc-dapp/Dashboard.tsx
@@ -3,7 +3,6 @@ import { useState } from "react";
 import AmountInput from "./AmountInput";
 import CollateralInfo from "./CollateralInfo";
 import PillNavigation from "./PillNavigation";
-import Swap from "./Swap";
 import { houseOfCoinABI, houseOfReserveABI } from "./abis/xocabis";
 import { parseEther } from "viem";
 import { useContractWrite } from "wagmi";
@@ -110,7 +109,7 @@ const Dashboard: React.FC = () => {
               />
             )}
             <div style={{ display: "flex", justifyContent: "center", alignItems: "center" }}>
-              {selectedTab === "exchange" && <Swap />}
+              {selectedTab === "exchange"}
             </div>
             {(depositError || depositLoading) && <div>Hello!!!</div>}
             {mintingError && <div>Hello!!!</div>}
diff --git a/packages/nextjs/components/xoc-dapp/Swap/SwapButton.tsx b/packages/nextjs/components/xoc-dapp/Swap/SwapButton.tsx
deleted file mode 100644
index 519b1f3..0000000
--- a/packages/nextjs/components/xoc-dapp/Swap/SwapButton.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from "react";
-import { GetBalances } from "./SwapInputBox";
-import { NUMBER_REGEX } from "./utils";
-import type { actionType } from "./utils";
-import { useConnectModal } from "@rainbow-me/rainbowkit";
-import { scroll } from "viem/chains";
-import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
-import { ArrowsRightLeftIcon } from "@heroicons/react/24/outline";
-
-type SwapButtonProps = {
-  action: actionType;
-  swap: () => void;
-  isLoading: boolean;
-  value: string;
-};
-
-const SwapButton: React.FC<SwapButtonProps> = ({ action, swap, isLoading, value }) => {
-  const { isConnected, isConnecting } = useAccount();
-  const { chain: connectedChain } = useNetwork();
-  const { switchNetwork } = useSwitchNetwork();
-  const { openConnectModal } = useConnectModal();
-  const { data: Balances } = GetBalances({ token: "All" });
-  const inSufficientFunds =
-    action === "Wrap" ? Balances.ethBalance < Number(value) : Balances.wethBalance < Number(value);
-
-  return (
-    <>
-      {isConnected && connectedChain ? (
-        <button
-          className="w-full py-2 text-center rounded-lg cursor-pointer btn btn-secondary"
-          onClick={() => swap()}
-          disabled={isLoading || !NUMBER_REGEX.test(value) || inSufficientFunds || value === ""}
-        >
-          {isLoading ? (
-            <span className="loading loading-spinner loading-sm"></span>
-          ) : !value ? (
-            <span>Enter Amount</span>
-          ) : (
-            <span>{inSufficientFunds ? "Insufficient Balance" : action}</span>
-          )}
-        </button>
-      ) : connectedChain && connectedChain?.id !== scroll.id ? (
-        <button
-          className="flex items-center justify-center w-full gap-2 py-2 text-center rounded-lg btn btn-secondary"
-          type="button"
-          onClick={() => switchNetwork?.(scroll.id)}
-        >
-          <ArrowsRightLeftIcon className="w-4 h-6 ml-2 sm:ml-0" />
-          <span className="whitespace-nowrap">Switch to Scroll</span>
-        </button>
-      ) : (
-        <button
-          onClick={openConnectModal}
-          disabled={isConnecting}
-          className="w-full py-2 text-center rounded-lg cursor-pointer btn btn-secondary"
-        >
-          {isConnecting && <span className="loading loading-spinner loading-sm"></span>}
-          <span>Connect Wallet</span>
-        </button>
-      )}
-    </>
-  );
-};
-
-export default SwapButton;
diff --git a/packages/nextjs/components/xoc-dapp/Swap/SwapFee.tsx b/packages/nextjs/components/xoc-dapp/Swap/SwapFee.tsx
deleted file mode 100644
index b3b4781..0000000
--- a/packages/nextjs/components/xoc-dapp/Swap/SwapFee.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import useIsMounted from "../../../hooks/scaffold-eth/isMounted";
-import { useFeeData } from "wagmi";
-
-function SwapFee() {
-  const isMouted = useIsMounted();
-  //fix hydration error
-  const { data, isError, isLoading } = useFeeData({
-    watch: true,
-  });
-
-  if (isMouted && isLoading) return <span className="text-[12px] font-[485] text-[#9b9b9b]">~$0.00</span>;
-  if (isMouted && isError) return <div>Error fetching fee data</div>;
-  // const gasPrice = Number(data?.formatted.gasPrice);
-  if (isMouted && data)
-    return (
-      <span className="text-[12px] font-[485] text-[#9b9b9b]">~${Number(data?.formatted.gasPrice).toFixed(3)}</span>
-    );
-}
-
-export default SwapFee;
diff --git a/packages/nextjs/components/xoc-dapp/Swap/SwapInputBox.tsx b/packages/nextjs/components/xoc-dapp/Swap/SwapInputBox.tsx
deleted file mode 100644
index b0acb28..0000000
--- a/packages/nextjs/components/xoc-dapp/Swap/SwapInputBox.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from "react";
-import Image from "next/image";
-import { InputBase } from "../../scaffold-eth/Input/InputBase";
-import { NUMBER_REGEX, stripWeth } from "./utils";
-import type { tokenType } from "./utils";
-import { useAccount } from "wagmi";
-import { useAccountBalance, useScaffoldContractRead } from "~~/hooks/scaffold-eth";
-import useIsMounted from "~~/hooks/scaffold-eth/isMounted";
-
-interface Props {
-  isInput?: boolean;
-  token: tokenType;
-  value: string;
-  setValue: (value: string) => void;
-}
-
-const SwapInputBox: React.FC<Props> = ({ isInput, token, value, setValue }) => {
-  const ticker = token === "Ether" ? "ETH" : "WETH";
-
-  const { jsx: Balance } = GetBalances({ token });
-
-  return (
-    <div
-      className={`${
-        isInput ? "bg-primary" : "bg-primary/50"
-      } w-full px-4 py-3 border-[1px] border-gray-400 box-shadow-custom rounded-2xl dark:border-gray-700 `}
-    >
-      <p className="text-[13px] font-[485] ">{token}</p>
-      <div className="flex w-full gap-4 my-2">
-        <div className="flex items-center justify-center gap-1">
-          <Image
-            src="/path/to/image"
-            width={24}
-            height={24}
-            alt={`${ticker} Icon`}
-            style={{ height: "24px", width: "24px" }}
-          />
-          <span>{ticker}</span>
-        </div>
-        <InputBase
-          placeholder="0"
-          value={value}
-          onChange={value => setValue(value)}
-          error={Boolean(value) && !NUMBER_REGEX.test(value)}
-          disabled={!isInput}
-        />
-      </div>
-      <div className="text-[13px] font-[485] text-[#9b9b9b] flex items-center gap-2">
-        <span>Balance:</span> {Balance}
-      </div>
-    </div>
-  );
-};
-
-export default SwapInputBox;
-
-export function GetBalances({ token }: { token: tokenType }) {
-  const { address } = useAccount();
-  const isMounted = useIsMounted();
-  const account = isMounted && address ? address : "";
-  const { balance, isError, isLoading } = useAccountBalance(account);
-  const {
-    data,
-    isError: isErrorWeth,
-    isLoading: isLoadingWeth,
-  } = useScaffoldContractRead({ contractName: "WETH9", functionName: "balanceOf", args: [account] });
-
-  let jsxToRender = <span>0.00</span>;
-  let balanceData = { ethBalance: 0, wethBalance: 0 };
-
-  if (token === "All")
-    balanceData = {
-      ethBalance: Number(balance?.toFixed(4) as string),
-      wethBalance: stripWeth(data),
-    };
-  else if (token === "Wrapped Ether") {
-    if (isLoadingWeth) jsxToRender = <span className="inline-flex w-8 h-4 rounded-sm animate-pulse bg-primary/40" />;
-    if (isErrorWeth) jsxToRender = <span>Error</span>;
-    jsxToRender = <span> {data !== undefined ? stripWeth(data) : "0"}</span>;
-  } else {
-    if (isLoading) jsxToRender = <span className="inline-flex w-8 h-4 rounded-sm animate-pulse bg-primary/40" />;
-    if (isError) jsxToRender = <span>Error</span>;
-    jsxToRender = <span>{balance ? balance.toFixed(4) : "0"}</span>;
-  }
-  return { jsx: jsxToRender, data: balanceData };
-}
diff --git a/packages/nextjs/components/xoc-dapp/Swap/index.tsx b/packages/nextjs/components/xoc-dapp/Swap/index.tsx
deleted file mode 100644
index 3323c97..0000000
--- a/packages/nextjs/components/xoc-dapp/Swap/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { useState } from "react";
-import Arrow from "../../../public/Arrow";
-import GasStation from "../../../public/GasStation";
-import SwapButton from "./SwapButton";
-import SwapFee from "./SwapFee";
-import SwapInputBox from "./SwapInputBox";
-import type { actionType } from "./utils";
-import { NUMBER_REGEX } from "./utils";
-import { parseEther } from "viem";
-import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
-
-const Swap = () => {
-  const [action, setAction] = useState<actionType>("Wrap");
-  const [value, setValue] = useState("");
-
-  // Blockcalls
-  const { writeAsync: depositETH, isLoading: isWrapping } = useScaffoldContractWrite({
-    contractName: "WETH9",
-    functionName: "deposit",
-    value: NUMBER_REGEX.test(value) ? parseEther(value) : undefined,
-  });
-  const { writeAsync: withdrawETH, isLoading: isUnwrapping } = useScaffoldContractWrite({
-    contractName: "WETH9",
-    functionName: "withdraw",
-    args: [NUMBER_REGEX.test(value) ? parseEther(value) : undefined],
-  });
-
-  return (
-    <section className="rounded-lg bg-base-100 border border-gray-400 dark:border-gray-700 p-2 lg:w-[480px] max-w-full">
-      <p className="mb-2 ml-3">{action}</p>
-      <SwapInputBox isInput token={action === "Wrap" ? "Ether" : "Wrapped Ether"} value={value} setValue={setValue} />
-      <div className="relative w-full my-1">
-        <Arrow
-          onClick={() => setAction(action === "Wrap" ? "Unwrap" : "Wrap")}
-          className="p-2 rounded-lg bg-secondary w-[35px] h-[35px] cursor-pointer border-[#243c5a] border-[3px] m-auto absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 transition-all duration-300 hover:rotate-180"
-        />
-      </div>
-      <SwapInputBox token={action === "Wrap" ? "Wrapped Ether" : "Ether"} value={value} setValue={setValue} />
-      <div className="flex items-center justify-end gap-1 my-2">
-        <GasStation /> <SwapFee />
-      </div>
-      <SwapButton
-        action={action}
-        value={value}
-        swap={action === "Wrap" ? depositETH : withdrawETH}
-        isLoading={action === "Wrap" ? isWrapping : isUnwrapping}
-      />
-    </section>
-  );
-};
-
-export default Swap;
diff --git a/packages/nextjs/components/xoc-dapp/Swap/utils.ts b/packages/nextjs/components/xoc-dapp/Swap/utils.ts
deleted file mode 100644
index 9599788..0000000
--- a/packages/nextjs/components/xoc-dapp/Swap/utils.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-//TYPES
-export type tokenType = "Ether" | "Wrapped Ether" | "All";
-export type actionType = "Wrap" | "Unwrap";
-
-// UTILS
-
-export const NUMBER_REGEX = /^\.?\d+\.?\d*$/;
-export const stripWeth = (token: bigint | undefined) => {
-  let weth = 0;
-  if (token !== undefined) {
-    const _weth = Number(token) / 1e18;
-    _weth === 0 ? (weth = 0) : (weth = _weth).toFixed(4);
-  }
-  return weth;
-};
diff --git a/packages/nextjs/contracts/deployedContracts.ts b/packages/nextjs/contracts/deployedContracts.ts
index 008d4eb..d0f3e22 100644
--- a/packages/nextjs/contracts/deployedContracts.ts
+++ b/packages/nextjs/contracts/deployedContracts.ts
@@ -4,6 +4,1449 @@
  */
 import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 
-const deployedContracts = {} as const;
+const deployedContracts = {
+  137: {
+    XocPin: {
+      address: "0x5f9e56c45b76917e71B7F3fDa61718Ab2C319e26",
+      abi: [
+        {
+          inputs: [
+            {
+              internalType: "string",
+              name: "_tokenURI",
+              type: "string",
+            },
+          ],
+          stateMutability: "nonpayable",
+          type: "constructor",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "target",
+              type: "address",
+            },
+          ],
+          name: "AddressEmptyCode",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "account",
+              type: "address",
+            },
+          ],
+          name: "AddressInsufficientBalance",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "sender",
+              type: "address",
+            },
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+            {
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+          ],
+          name: "ERC721IncorrectOwner",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "operator",
+              type: "address",
+            },
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "ERC721InsufficientApproval",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "approver",
+              type: "address",
+            },
+          ],
+          name: "ERC721InvalidApprover",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "operator",
+              type: "address",
+            },
+          ],
+          name: "ERC721InvalidOperator",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+          ],
+          name: "ERC721InvalidOwner",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "receiver",
+              type: "address",
+            },
+          ],
+          name: "ERC721InvalidReceiver",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "sender",
+              type: "address",
+            },
+          ],
+          name: "ERC721InvalidSender",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "ERC721NonexistentToken",
+          type: "error",
+        },
+        {
+          inputs: [],
+          name: "FailedInnerCall",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+          ],
+          name: "OwnableInvalidOwner",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "account",
+              type: "address",
+            },
+          ],
+          name: "OwnableUnauthorizedAccount",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "token",
+              type: "address",
+            },
+          ],
+          name: "SafeERC20FailedOperation",
+          type: "error",
+        },
+        {
+          anonymous: false,
+          inputs: [
+            {
+              indexed: true,
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+            {
+              indexed: true,
+              internalType: "address",
+              name: "approved",
+              type: "address",
+            },
+            {
+              indexed: true,
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "Approval",
+          type: "event",
+        },
+        {
+          anonymous: false,
+          inputs: [
+            {
+              indexed: true,
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+            {
+              indexed: true,
+              internalType: "address",
+              name: "operator",
+              type: "address",
+            },
+            {
+              indexed: false,
+              internalType: "bool",
+              name: "approved",
+              type: "bool",
+            },
+          ],
+          name: "ApprovalForAll",
+          type: "event",
+        },
+        {
+          anonymous: false,
+          inputs: [
+            {
+              indexed: false,
+              internalType: "uint256",
+              name: "_fromTokenId",
+              type: "uint256",
+            },
+            {
+              indexed: false,
+              internalType: "uint256",
+              name: "_toTokenId",
+              type: "uint256",
+            },
+          ],
+          name: "BatchMetadataUpdate",
+          type: "event",
+        },
+        {
+          anonymous: false,
+          inputs: [
+            {
+              indexed: false,
+              internalType: "uint256",
+              name: "_tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "MetadataUpdate",
+          type: "event",
+        },
+        {
+          anonymous: false,
+          inputs: [
+            {
+              indexed: true,
+              internalType: "address",
+              name: "previousOwner",
+              type: "address",
+            },
+            {
+              indexed: true,
+              internalType: "address",
+              name: "newOwner",
+              type: "address",
+            },
+          ],
+          name: "OwnershipTransferred",
+          type: "event",
+        },
+        {
+          anonymous: false,
+          inputs: [
+            {
+              indexed: true,
+              internalType: "address",
+              name: "from",
+              type: "address",
+            },
+            {
+              indexed: true,
+              internalType: "address",
+              name: "to",
+              type: "address",
+            },
+            {
+              indexed: true,
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "Transfer",
+          type: "event",
+        },
+        {
+          inputs: [],
+          name: "MINT_PRICE",
+          outputs: [
+            {
+              internalType: "uint256",
+              name: "",
+              type: "uint256",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "TREASURY",
+          outputs: [
+            {
+              internalType: "address",
+              name: "",
+              type: "address",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "XOCOLATL",
+          outputs: [
+            {
+              internalType: "address",
+              name: "",
+              type: "address",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "to",
+              type: "address",
+            },
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "approve",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+          ],
+          name: "balanceOf",
+          outputs: [
+            {
+              internalType: "uint256",
+              name: "",
+              type: "uint256",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "baseTokenURI",
+          outputs: [
+            {
+              internalType: "string",
+              name: "",
+              type: "string",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "getApproved",
+          outputs: [
+            {
+              internalType: "address",
+              name: "",
+              type: "address",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+            {
+              internalType: "address",
+              name: "operator",
+              type: "address",
+            },
+          ],
+          name: "isApprovedForAll",
+          outputs: [
+            {
+              internalType: "bool",
+              name: "",
+              type: "bool",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "to",
+              type: "address",
+            },
+          ],
+          name: "mint",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "name",
+          outputs: [
+            {
+              internalType: "string",
+              name: "",
+              type: "string",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "nextTokenId",
+          outputs: [
+            {
+              internalType: "uint256",
+              name: "",
+              type: "uint256",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "owner",
+          outputs: [
+            {
+              internalType: "address",
+              name: "",
+              type: "address",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "ownerOf",
+          outputs: [
+            {
+              internalType: "address",
+              name: "",
+              type: "address",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "renounceOwnership",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "from",
+              type: "address",
+            },
+            {
+              internalType: "address",
+              name: "to",
+              type: "address",
+            },
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "safeTransferFrom",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "from",
+              type: "address",
+            },
+            {
+              internalType: "address",
+              name: "to",
+              type: "address",
+            },
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+            {
+              internalType: "bytes",
+              name: "data",
+              type: "bytes",
+            },
+          ],
+          name: "safeTransferFrom",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "operator",
+              type: "address",
+            },
+            {
+              internalType: "bool",
+              name: "approved",
+              type: "bool",
+            },
+          ],
+          name: "setApprovalForAll",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "string",
+              name: "_baseTokenURI",
+              type: "string",
+            },
+          ],
+          name: "setBaseTokenURI",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+            {
+              internalType: "string",
+              name: "_tokenURI",
+              type: "string",
+            },
+          ],
+          name: "setTokenURI",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "bytes4",
+              name: "interfaceId",
+              type: "bytes4",
+            },
+          ],
+          name: "supportsInterface",
+          outputs: [
+            {
+              internalType: "bool",
+              name: "",
+              type: "bool",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "symbol",
+          outputs: [
+            {
+              internalType: "string",
+              name: "",
+              type: "string",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "tokenURI",
+          outputs: [
+            {
+              internalType: "string",
+              name: "",
+              type: "string",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "from",
+              type: "address",
+            },
+            {
+              internalType: "address",
+              name: "to",
+              type: "address",
+            },
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "transferFrom",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "newOwner",
+              type: "address",
+            },
+          ],
+          name: "transferOwnership",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+      ],
+      inheritedFunctions: {
+        approve: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        balanceOf: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        getApproved: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        isApprovedForAll: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        name: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        ownerOf: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        safeTransferFrom: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        setApprovalForAll: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        supportsInterface: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        symbol: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        tokenURI: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        transferFrom: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        owner: "lib/openzeppelin-contracts/contracts/access/Ownable.sol",
+        renounceOwnership: "lib/openzeppelin-contracts/contracts/access/Ownable.sol",
+        transferOwnership: "lib/openzeppelin-contracts/contracts/access/Ownable.sol",
+      },
+    },
+  },
+  31337: {
+    XocPin: {
+      address: "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512",
+      abi: [
+        {
+          inputs: [
+            {
+              internalType: "string",
+              name: "_tokenURI",
+              type: "string",
+            },
+          ],
+          stateMutability: "nonpayable",
+          type: "constructor",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "target",
+              type: "address",
+            },
+          ],
+          name: "AddressEmptyCode",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "account",
+              type: "address",
+            },
+          ],
+          name: "AddressInsufficientBalance",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "sender",
+              type: "address",
+            },
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+            {
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+          ],
+          name: "ERC721IncorrectOwner",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "operator",
+              type: "address",
+            },
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "ERC721InsufficientApproval",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "approver",
+              type: "address",
+            },
+          ],
+          name: "ERC721InvalidApprover",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "operator",
+              type: "address",
+            },
+          ],
+          name: "ERC721InvalidOperator",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+          ],
+          name: "ERC721InvalidOwner",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "receiver",
+              type: "address",
+            },
+          ],
+          name: "ERC721InvalidReceiver",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "sender",
+              type: "address",
+            },
+          ],
+          name: "ERC721InvalidSender",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "ERC721NonexistentToken",
+          type: "error",
+        },
+        {
+          inputs: [],
+          name: "FailedInnerCall",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+          ],
+          name: "OwnableInvalidOwner",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "account",
+              type: "address",
+            },
+          ],
+          name: "OwnableUnauthorizedAccount",
+          type: "error",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "token",
+              type: "address",
+            },
+          ],
+          name: "SafeERC20FailedOperation",
+          type: "error",
+        },
+        {
+          anonymous: false,
+          inputs: [
+            {
+              indexed: true,
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+            {
+              indexed: true,
+              internalType: "address",
+              name: "approved",
+              type: "address",
+            },
+            {
+              indexed: true,
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "Approval",
+          type: "event",
+        },
+        {
+          anonymous: false,
+          inputs: [
+            {
+              indexed: true,
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+            {
+              indexed: true,
+              internalType: "address",
+              name: "operator",
+              type: "address",
+            },
+            {
+              indexed: false,
+              internalType: "bool",
+              name: "approved",
+              type: "bool",
+            },
+          ],
+          name: "ApprovalForAll",
+          type: "event",
+        },
+        {
+          anonymous: false,
+          inputs: [
+            {
+              indexed: false,
+              internalType: "uint256",
+              name: "_fromTokenId",
+              type: "uint256",
+            },
+            {
+              indexed: false,
+              internalType: "uint256",
+              name: "_toTokenId",
+              type: "uint256",
+            },
+          ],
+          name: "BatchMetadataUpdate",
+          type: "event",
+        },
+        {
+          anonymous: false,
+          inputs: [
+            {
+              indexed: false,
+              internalType: "uint256",
+              name: "_tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "MetadataUpdate",
+          type: "event",
+        },
+        {
+          anonymous: false,
+          inputs: [
+            {
+              indexed: true,
+              internalType: "address",
+              name: "previousOwner",
+              type: "address",
+            },
+            {
+              indexed: true,
+              internalType: "address",
+              name: "newOwner",
+              type: "address",
+            },
+          ],
+          name: "OwnershipTransferred",
+          type: "event",
+        },
+        {
+          anonymous: false,
+          inputs: [
+            {
+              indexed: true,
+              internalType: "address",
+              name: "from",
+              type: "address",
+            },
+            {
+              indexed: true,
+              internalType: "address",
+              name: "to",
+              type: "address",
+            },
+            {
+              indexed: true,
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "Transfer",
+          type: "event",
+        },
+        {
+          inputs: [],
+          name: "MINT_PRICE",
+          outputs: [
+            {
+              internalType: "uint256",
+              name: "",
+              type: "uint256",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "TREASURY",
+          outputs: [
+            {
+              internalType: "address",
+              name: "",
+              type: "address",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "XOCOLATL",
+          outputs: [
+            {
+              internalType: "address",
+              name: "",
+              type: "address",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "to",
+              type: "address",
+            },
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "approve",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+          ],
+          name: "balanceOf",
+          outputs: [
+            {
+              internalType: "uint256",
+              name: "",
+              type: "uint256",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "baseTokenURI",
+          outputs: [
+            {
+              internalType: "string",
+              name: "",
+              type: "string",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "getApproved",
+          outputs: [
+            {
+              internalType: "address",
+              name: "",
+              type: "address",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "owner",
+              type: "address",
+            },
+            {
+              internalType: "address",
+              name: "operator",
+              type: "address",
+            },
+          ],
+          name: "isApprovedForAll",
+          outputs: [
+            {
+              internalType: "bool",
+              name: "",
+              type: "bool",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "to",
+              type: "address",
+            },
+          ],
+          name: "mint",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "name",
+          outputs: [
+            {
+              internalType: "string",
+              name: "",
+              type: "string",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "nextTokenId",
+          outputs: [
+            {
+              internalType: "uint256",
+              name: "",
+              type: "uint256",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "owner",
+          outputs: [
+            {
+              internalType: "address",
+              name: "",
+              type: "address",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "ownerOf",
+          outputs: [
+            {
+              internalType: "address",
+              name: "",
+              type: "address",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "renounceOwnership",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "from",
+              type: "address",
+            },
+            {
+              internalType: "address",
+              name: "to",
+              type: "address",
+            },
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "safeTransferFrom",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "from",
+              type: "address",
+            },
+            {
+              internalType: "address",
+              name: "to",
+              type: "address",
+            },
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+            {
+              internalType: "bytes",
+              name: "data",
+              type: "bytes",
+            },
+          ],
+          name: "safeTransferFrom",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "operator",
+              type: "address",
+            },
+            {
+              internalType: "bool",
+              name: "approved",
+              type: "bool",
+            },
+          ],
+          name: "setApprovalForAll",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "string",
+              name: "_baseTokenURI",
+              type: "string",
+            },
+          ],
+          name: "setBaseTokenURI",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+            {
+              internalType: "string",
+              name: "_tokenURI",
+              type: "string",
+            },
+          ],
+          name: "setTokenURI",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "bytes4",
+              name: "interfaceId",
+              type: "bytes4",
+            },
+          ],
+          name: "supportsInterface",
+          outputs: [
+            {
+              internalType: "bool",
+              name: "",
+              type: "bool",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [],
+          name: "symbol",
+          outputs: [
+            {
+              internalType: "string",
+              name: "",
+              type: "string",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "tokenURI",
+          outputs: [
+            {
+              internalType: "string",
+              name: "",
+              type: "string",
+            },
+          ],
+          stateMutability: "view",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "from",
+              type: "address",
+            },
+            {
+              internalType: "address",
+              name: "to",
+              type: "address",
+            },
+            {
+              internalType: "uint256",
+              name: "tokenId",
+              type: "uint256",
+            },
+          ],
+          name: "transferFrom",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+        {
+          inputs: [
+            {
+              internalType: "address",
+              name: "newOwner",
+              type: "address",
+            },
+          ],
+          name: "transferOwnership",
+          outputs: [],
+          stateMutability: "nonpayable",
+          type: "function",
+        },
+      ],
+      inheritedFunctions: {
+        approve: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        balanceOf: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        getApproved: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        isApprovedForAll: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        name: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        ownerOf: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        safeTransferFrom: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        setApprovalForAll: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        supportsInterface: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        symbol: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        tokenURI: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        transferFrom: "lib/openzeppelin-contracts/contracts/token/ERC721/extensions/ERC721URIStorage.sol",
+        owner: "lib/openzeppelin-contracts/contracts/access/Ownable.sol",
+        renounceOwnership: "lib/openzeppelin-contracts/contracts/access/Ownable.sol",
+        transferOwnership: "lib/openzeppelin-contracts/contracts/access/Ownable.sol",
+      },
+    },
+  },
+} as const;
 
 export default deployedContracts satisfies GenericContractsDeclaration;
diff --git a/packages/nextjs/pages/streams.tsx b/packages/nextjs/pages/streams.tsx
index cf29660..f25d762 100644
--- a/packages/nextjs/pages/streams.tsx
+++ b/packages/nextjs/pages/streams.tsx
@@ -1,12 +1,47 @@
 import { MetaHeader } from "../components/MetaHeader";
 import type { NextPage } from "next";
+import { useContractRead } from "wagmi";
+import { useAccount } from "wagmi";
+import FlowingBalance from "~~/components/streams/FlowingBalance";
 import SuperTokens from "~~/components/streams/SuperTokens";
+import { CFAv1ForwarderABI } from "~~/components/streams/abis/CFAv1Forwarder";
+import { SuperTokenABI } from "~~/components/streams/abis/SuperTokenABI";
 
 const Streams: NextPage = () => {
+  const account = useAccount();
+
+  const { data: balanceOf } = useContractRead({
+    address: "0x36d9a149895d905D117C38F3090f4344B76Ec9F4",
+    abi: SuperTokenABI,
+    functionName: "balanceOf",
+    args: [account.address],
+  });
+
+  console.log(balanceOf);
+
+  const { data: getAccountFlowrate } = useContractRead({
+    address: "0xcfA132E353cB4E398080B9700609bb008eceB125",
+    abi: CFAv1ForwarderABI,
+    functionName: "getAccountFlowrate",
+    args: ["0x36d9a149895d905D117C38F3090f4344B76Ec9F4", account.address],
+  });
+
   return (
     <>
       <MetaHeader title="XocDapp | Wagmi" description="XocDapp page" />
-      <SuperTokens />
+      <div className="flex flex-col m-10 p-20 items-center ">
+        <SuperTokens />
+        <div className="card w-3/5 bg-base-100 shadow-xl mt-16">
+          <div className="card-body">
+            <FlowingBalance
+              startingBalance={BigInt(balanceOf?.toString() ?? "0")}
+              startingBalanceDate={new Date()}
+              flowRate={BigInt(getAccountFlowrate?.toString() ?? "0")}
+            />
+            <div className="stat-title">Account&apos;s Flowrate</div>
+          </div>
+        </div>
+      </div>
     </>
   );
 };