feat: vestings (#10)

* save

* feat: display vestings

package.json

@@ -52,7 +52,7 @@
     "use-element-position": "^1.0.13",
     "use-local-storage-state": "^19.2.0",
     "viem": "^1.21.1",
-    "wagmi": "^1.4.12",
+    "wagmi": "^1.4.13",
     "yup": "^1.4.0"
   },
   "devDependencies": {

src/AppRoutes.tsx

@@ -3,6 +3,8 @@ import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
 import { NetworkLayout } from '@layouts/NetworkLayout';
+import { AssetsPage } from '@pages/AssetsPage/AssetsPage.tsx';
+import { Vesting } from '@pages/AssetsPage/Vesting.tsx';
 import { DashboardPage } from '@pages/DashboardPage/DashboardPage.tsx';
 import { DelegationsPage } from '@pages/DelegationsPage/DelegationsPage.tsx';
 import { AddNewGateway } from '@pages/GatewaysPage/AddNewGateway.tsx';
@@ -24,6 +26,10 @@ export const AppRoutes = () => {
         <Route element={<DashboardPage />} index />
         <Route element={<Worker backPath="/dashboard" />} path="workers/:peerId" />
       </Route>
+      <Route element={<NetworkLayout />} path="/assets">
+        <Route element={<AssetsPage />} index />
+        <Route element={<Vesting backPath="/assets" />} path="vestings/:address" />
+      </Route>
       <Route element={<NetworkLayout />} path="/workers">
         <Route element={<WorkersPage />} index />
         <Route element={<AddNewWorker />} path="add" />

src/api/contracts/vesting.abi.ts

@@ -1,4 +1,43 @@
 export const VESTING_CONTRACT_ABI = [
+  {
+    type: 'function',
+    name: 'depositedIntoProtocol',
+    inputs: [],
+    outputs: [
+      {
+        name: '',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'duration',
+    inputs: [],
+    outputs: [
+      {
+        name: '',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'end',
+    inputs: [],
+    outputs: [
+      {
+        name: '',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+  },
   {
     type: 'function',
     name: 'execute',
@@ -46,4 +85,131 @@ export const VESTING_CONTRACT_ABI = [
     ],
     stateMutability: 'nonpayable',
   },
+  {
+    type: 'function',
+    name: 'expectedTotalAmount',
+    inputs: [],
+    outputs: [
+      {
+        name: '',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'immediateReleaseBIP',
+    inputs: [],
+    outputs: [
+      {
+        name: '',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'releasable',
+    inputs: [
+      {
+        name: 'token',
+        type: 'address',
+        internalType: 'address',
+      },
+    ],
+    outputs: [
+      {
+        name: '',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'releasable',
+    inputs: [],
+    outputs: [
+      {
+        name: '',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'release',
+    inputs: [
+      {
+        name: 'token',
+        type: 'address',
+        internalType: 'address',
+      },
+    ],
+    outputs: [],
+    stateMutability: 'nonpayable',
+  },
+  {
+    type: 'function',
+    name: 'released',
+    inputs: [
+      {
+        name: 'token',
+        type: 'address',
+        internalType: 'address',
+      },
+    ],
+    outputs: [
+      {
+        name: '',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'start',
+    inputs: [],
+    outputs: [
+      {
+        name: '',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+  },
+  {
+    type: 'function',
+    name: 'vestedAmount',
+    inputs: [
+      {
+        name: 'token',
+        type: 'address',
+        internalType: 'address',
+      },
+      {
+        name: 'timestamp',
+        type: 'uint64',
+        internalType: 'uint64',
+      },
+    ],
+    outputs: [
+      {
+        name: '',
+        type: 'uint256',
+        internalType: 'uint256',
+      },
+    ],
+    stateMutability: 'view',
+  },
 ] as const;

src/api/contracts/vesting.ts

@@ -0,0 +1,125 @@
+import { useState } from 'react';
+
+import { chunk } from 'lodash-es';
+import { MulticallResult } from 'viem';
+import { useContractReads, useContractWrite, usePublicClient } from 'wagmi';
+
+import { useSquidNetworkHeightHooks } from '@hooks/useSquidNetworkHeightHooks';
+import { useContracts } from '@network/useContracts';
+
+import { errorMessage, WriteContractRes } from './utils';
+import { VESTING_CONTRACT_ABI } from './vesting.abi';
+
+export function useVestings({ addresses }: { addresses?: `0x${string}`[] }) {
+  const contracts = useContracts();
+  const { currentHeight } = useSquidNetworkHeightHooks();
+
+  const { data, isLoading } = useContractReads({
+    contracts: addresses?.flatMap(address => {
+      const vestingContract = { abi: VESTING_CONTRACT_ABI, address } as const;
+      return [
+        {
+          ...vestingContract,
+          functionName: 'start',
+        },
+        {
+          ...vestingContract,
+          functionName: 'end',
+        },
+        {
+          ...vestingContract,
+          functionName: 'depositedIntoProtocol',
+        },
+        {
+          ...vestingContract,
+          functionName: 'releasable',
+          args: [contracts.SQD],
+        },
+        {
+          ...vestingContract,
+          functionName: 'released',
+          args: [contracts.SQD],
+        },
+        {
+          ...vestingContract,
+          functionName: 'expectedTotalAmount',
+        },
+        {
+          ...vestingContract,
+          functionName: 'immediateReleaseBIP',
+        },
+      ] as const;
+    }),
+    allowFailure: true,
+    enabled: !!addresses,
+    blockNumber: currentHeight ? BigInt(currentHeight) : undefined,
+  });
+
+  return {
+    data: data
+      ? chunk(data, 7).map(ch => ({
+          start: unwrapResult(ch[0])?.toString(),
+          end: unwrapResult(ch[1])?.toString(),
+          deposited: unwrapResult(ch[2])?.toString(),
+          releasable: unwrapResult(ch[3])?.toString(),
+          released: unwrapResult(ch[4])?.toString(),
+          total: unwrapResult(ch[5])?.toString(),
+          initialRelease: Number(unwrapResult(ch[6]) || 0) / 100,
+        }))
+      : undefined,
+    isLoading,
+  };
+}
+
+export function useVesting({ address }: { address?: `0x${string}` }) {
+  const { data, isLoading } = useVestings({ addresses: address ? [address] : undefined });
+
+  return {
+    data: data?.[0],
+    isLoading,
+  };
+}
+
+function unwrapResult<T>(result?: MulticallResult<T>): T | undefined {
+  return result?.status === 'success' ? (result.result as T) : undefined;
+}
+
+export function useVestingRelease({ address }: { address?: `0x${string}` }) {
+  const client = usePublicClient();
+  const { setWaitHeight } = useSquidNetworkHeightHooks();
+  const [isLoading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const { SQD } = useContracts();
+
+  const { writeAsync } = useContractWrite({
+    abi: VESTING_CONTRACT_ABI,
+    functionName: 'release',
+    args: [SQD],
+    address,
+  });
+
+  const release = async (): Promise<WriteContractRes> => {
+    setLoading(true);
+
+    try {
+      const tx = await writeAsync();
+
+      const receipt = await client.waitForTransactionReceipt(tx);
+      setWaitHeight(receipt.blockNumber, []);
+
+      return { success: true };
+    } catch (e) {
+      const failedReason = errorMessage(e);
+      setError(failedReason);
+      return { success: false, failedReason };
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return {
+    release,
+    isLoading,
+    error,
+  };
+}

src/layouts/NetworkLayout/NetworkMenu.tsx

@@ -142,6 +142,7 @@ export const NetworkMenu = ({ onItemClick }: NetworkMenuProps) => {
       {/*/>*/}
 
       <Item LeftIcon={DashboardIcon} label="Dashboard" onClick={onItemClick} path="/dashboard" />
+      <Item LeftIcon={AccountIcon} label="Assets" onClick={onItemClick} path="/assets" />
       <Item LeftIcon={ComputersIcon} label="Workers" onClick={onItemClick} path="/workers" />
       <Item LeftIcon={AccountIcon} label="Delegations" onClick={onItemClick} path="/delegations" />
       <Item LeftIcon={DocumentIcon} label="Gateways" onClick={onItemClick} path="/gateways" />

src/lib/formatters/formatters.ts

@@ -1,4 +1,5 @@
 import prettyBytes from 'pretty-bytes';
+import { zeroAddress } from 'viem';
 import { getAddress } from 'viem/utils';
 
 export function percentFormatter(value?: number | string) {
@@ -23,7 +24,9 @@ export function bytesFormatter(val?: number | string) {
   return prettyBytes(Number(val), { maximumFractionDigits: 0 });
 }
 
-export function addressFormatter(val: string, shortify?: boolean) {
+export function addressFormatter(val?: string, shortify?: boolean) {
+  val = val || zeroAddress;
+
   const address = getAddress(val);
   return shortify ? `${address.substring(0, 6)}...${address?.slice(-4)}` : address;
 }

src/pages/AssetsPage/AssetsPage.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { Box } from '@mui/material';
+import { Outlet } from 'react-router-dom';
+
+import { CenteredPageWrapper } from '@layouts/NetworkLayout';
+
+import { MyAssets } from './Assets';
+import { MyVestings } from './Vestings';
+
+export function AssetsPage() {
+  return (
+    <CenteredPageWrapper className="wide">
+      <MyAssets />
+      <Box sx={{ height: 64 }} />
+      <MyVestings />
+      <Outlet />
+    </CenteredPageWrapper>
+  );
+}