feat: add initial web and contracts code

.gitmodules

@@ -0,0 +1,9 @@
+[submodule "protocol/core/lib/forge-std"]
+	path = protocol/core/lib/forge-std
+	url = https://github.com/foundry-rs/forge-std
+[submodule "protocol/core/lib/permit2"]
+	path = protocol/core/lib/permit2
+	url = https://github.com/Uniswap/permit2
+[submodule "protocol/core/lib/openzeppelin-contracts"]
+	path = protocol/core/lib/openzeppelin-contracts
+	url = https://github.com/OpenZeppelin/openzeppelin-contracts

apps/web/components/AppBar.tsx

@@ -0,0 +1,20 @@
+import { Button, Navbar, Text } from "@nextui-org/react";
+
+import { ConnectButton } from "@rainbow-me/rainbowkit";
+
+export default function AppBar() {
+  return (
+    <Navbar isBordered variant="sticky">
+      <Navbar.Brand>
+        <Text b color="inherit" hideIn="xs">
+          Disperse
+        </Text>
+      </Navbar.Brand>
+      <Navbar.Content>
+        <Navbar.Item>
+          <ConnectButton />
+        </Navbar.Item>
+      </Navbar.Content>
+    </Navbar>
+  );
+}

apps/web/components/Send.tsx

@@ -0,0 +1,143 @@
+import {
+  erc20ABI,
+  useContract,
+  useContractRead,
+  useContractWrite,
+  usePrepareContractWrite,
+  useProvider,
+  useSigner,
+  Address,
+} from "wagmi";
+import { Button } from "@nextui-org/react";
+
+import {
+  // permit2 contract address
+  PERMIT2_ADDRESS,
+  // the type of permit that we need to sign
+  // this will help us get domain, types and values that we need to create a signature
+  AllowanceTransfer,
+  AllowanceProvider,
+  MaxUint48,
+  AllowanceData,
+} from "@uniswap/permit2-sdk";
+
+import disperseAbi from "../constants/abis/disperse";
+import { useEffect, useState } from "react";
+import { BigNumber } from "ethers";
+import { MaxUint256 } from "@uniswap/permit2-sdk";
+
+const TOKEN_ADDRESS = "0xda5bb55c0eA3f77321A888CA202cb84aE30C6AF5";
+const DISPERSE_ADDRESS = "0xC5ac98C06391981A4802A31ca5C62e6c3EfdA48d";
+
+interface PermitSingle {
+  details: {
+    token: `0x${string}`;
+    amount: BigNumber;
+    expiration: number;
+    nonce: number;
+  };
+  spender: `0x${string}`;
+  sigDeadline: BigNumber;
+}
+
+const Send = ({
+  tokenAddress,
+  transferDetails,
+  isNative,
+  totalValue,
+}: {
+  isNative: boolean;
+  tokenAddress: `0x${string}`;
+  transferDetails: {
+    recipients: Address[];
+    values: string[];
+  };
+  totalValue: BigNumber;
+}) => {
+  const token = useContract({
+    address: tokenAddress,
+    abi: erc20ABI,
+  });
+
+  const [allowanceData, setAllowanceData] = useState<AllowanceData | null>(
+    null
+  );
+
+  const signer = useSigner();
+
+  const disperse = useContract({
+    abi: disperseAbi,
+    address: DISPERSE_ADDRESS,
+    signerOrProvider: signer.data,
+  });
+
+  const provider = useProvider();
+
+  const handleClick = async () => {
+    if (!allowanceData) return;
+
+    if (allowanceData.amount.lt(totalValue)) {
+      try {
+        await token?.approve(PERMIT2_ADDRESS, MaxUint256);
+      } catch {
+        return;
+      }
+    }
+
+    const permit: PermitSingle = {
+      details: {
+        token: tokenAddress,
+        amount: BigNumber.from(1),
+        expiration: MaxUint48.toNumber(),
+        nonce: allowanceData.nonce,
+      },
+      spender: disperse?.address || "0x",
+      sigDeadline: MaxUint48,
+    };
+
+    console.log(permit);
+
+    const { domain, types, values } = AllowanceTransfer.getPermitData(
+      permit,
+      PERMIT2_ADDRESS,
+      1337
+    );
+    //@ts-ignore
+    let signature = await signer.data._signTypedData(domain, types, values);
+
+    const fire = await disperse?.disperseSingleWithPermit2(
+      tokenAddress,
+      transferDetails.recipients,
+      transferDetails.values.map((v) => BigNumber.from(v)),
+      permit,
+      signature
+    );
+  };
+
+  useEffect(() => {
+    async function update() {
+      const allowanceProvider = new AllowanceProvider(
+        provider,
+        PERMIT2_ADDRESS
+      );
+
+      const allowanceData = await allowanceProvider.getAllowanceData(
+        "0xda5bb55c0eA3f77321A888CA202cb84aE30C6AF5",
+        "0xDe485812E28824e542B9c2270B6b8eD9232B7D0b",
+        "0xC5ac98C06391981A4802A31ca5C62e6c3EfdA48d"
+      );
+
+      setAllowanceData(allowanceData);
+    }
+
+    update();
+  }, [provider]);
+
+  return (
+    <Button color="default" onClick={handleClick}>
+      Send
+    </Button>
+  );
+};
+
+export default Send;

apps/web/components/TokenInfo.tsx

@@ -0,0 +1,42 @@
+import { useToken, erc20ABI, useContractRead, useAccount } from "wagmi";
+import { utils as ethersUtils } from "ethers";
+
+const Balance = ({ contractAddress, userAddress, decimals }) => {
+  const balance = useContractRead({
+    abi: erc20ABI,
+    address: contractAddress,
+    functionName: "balanceOf",
+    args: [userAddress],
+  });
+
+  if (balance.isLoading) return <div>Fetching token…</div>;
+
+  return <p>Balance: {ethersUtils.formatUnits(balance.data, decimals)}</p>;
+};
+
+export default function TokenInfo({ address }: { address: `0x${string}` }) {
+  const { data, isError, isLoading } = useToken({
+    address,
+  });
+
+  const account = useAccount();
+
+  console.log(data);
+
+  if (isLoading) return <div>Fetching token…</div>;
+  if (isError) return <div>Error fetching token</div>;
+
+  return (
+    <div>
+      <p>Symbol: {data?.symbol}</p>
+      <p>Name: {data?.name}</p>
+      {account.address ? (
+        <Balance
+          userAddress={account.address}
+          contractAddress={address}
+          decimals={data.decimals}
+        />
+      ) : null}
+    </div>
+  );
+}