PoolTogether V4 Admin Dashboard

The PoolTogether V4 Admin Dashboard simplifies reading and writing to the V4 protocol smart contracts.

admin.pooltogether.com

Getting Started

Development

yarn dev

Production

yarn build

When the production is updated a new build will be deployed on Netlify.

Overview

Core Web3 Components

The application is built with modularity in mind. Components can express what data is required and the fetching/normalizing for the frontend will be handled automatically.

• ContractIsolatedMulticall
• ContractMulticallAndRender
• ContractReadValuesGenericRender
• GenericReadFunction
• Web3TypeRender
• Web3SafeTypeRender

Example View

The ContractDrawBeacon view defines with reads should be executed and the values are passed to dynamic render component.

Ideally, the generic render components utilize the Tailwind CSS classes for modularity and minimally perriptive in design.

import React from 'react';

import { AppPageHeader } from '@src/components/App/AppPageHeader';
import { ContractMulticallAndRender } from '@src/components/Web3/Contracts/ContractMulticallAndRender';
import { ContractReadValuesGenericRender } from '@src/components/Web3/Contracts/ContractReadValuesGenericRender';
import { InterfaceDrawBeacon } from '@src/contracts/interfaces';
import { Admin } from '@src/templates/Admin';

const ContractDrawBeacon = () => {
 const methods = [
   'owner',
   'getDrawBuffer',
   'getRngService',
   'canStartDraw',
   'canCompleteDraw',
   'calculateNextBeaconPeriodStartTimeFromCurrentTime',
   'calculateNextBeaconPeriodStartTime',
   'beaconPeriodRemainingSeconds',
   'beaconPeriodEndAt',
   'getNextDrawId',
   'getBeaconPeriodSeconds',
   'getLastRngLockBlock',
   'getLastRngRequestId',
   'getRngTimeout',
   'isBeaconPeriodOver',
   'isRngCompleted',
   'isRngRequested',
   'isRngTimedOut',
 ];
 const inputs = [];

 return (
   <div className="card">
     <AppPageHeader
       className="mt-0"
       title="DrawBeacon"
       description="Create and Propagates Draws"
     />
     <ContractMulticallAndRender
       contractInterface={InterfaceDrawBeacon}
       contractName="DrawBeacon"
       methods={methods}
       args={inputs}
       component={(props) => (
         <>
           <ContractReadValuesGenericRender
             className="text-base block px-8 pb-8 pt-5 shadow-md border-t-2 rounded-xl mt-5 "
             classNameRender="flex justify-between border-b-2 py-2 "
             classNameValue="text-sm"
             classNameLabel="font-bold text-sm"
             values={props.values}
           />
         </>
       )}
     />
   </div>
 );
};

ContractDrawBeacon.layout = Admin;

export default ContractDrawBeacon;

Changelog

0.0.1: Calculate PrizeDistributions and verify live parameters in the monitor view.