Token minimum deposit + versions on protocol page (#192)

* Token minimum deposit
* protocol version in protocol page

---------

Co-authored-by: 0xdavinchee <0xdavinchee@gmail.com>

src/pages/[_network]/protocol.tsx

@@ -10,6 +10,7 @@ import {
   List,
   ListItem,
   ListItemText,
+  Skeleton,
   Stack,
   Tooltip,
   Typography,
@@ -23,6 +24,8 @@ import NetworkTabs from "../../components/NetworkTabs";
 import { useNetworkContext } from "../../contexts/NetworkContext";
 import { Network, networks } from "../../redux/networks";
 import protocolContracts from "../../redux/protocolContracts";
+import { rpcApi } from "../../redux/store";
+import { pseudoAddressToVersionString } from "../../utils/versionUtils";
 
 interface AddressListItemProps {
   title: string;
@@ -76,6 +79,10 @@ const Protocol: NextPage = () => {
   const network = useNetworkContext();
   const router = useRouter();
 
+  const protocolVersionResponse = rpcApi.useProtocolVersionQuery({
+    chainId: network.chainId,
+  });
+
   const onTabChange = (newValue: string) =>
     router.replace({
       query: {
@@ -299,6 +306,37 @@ const Protocol: NextPage = () => {
                 />
               </List>
             </Card>
+            <Typography
+              variant="h5"
+              component="h2"
+              sx={{
+                px: 2,
+                mt: 4,
+                mb: 2,
+              }}
+            >
+              Versions
+            </Typography>
+            <Card>
+              <CardContent>
+                <ListItemText
+                  data-cy={"protocol-contracts"}
+                  primary="Protocol Contracts"
+                  secondary={
+                    <>
+                      {protocolVersionResponse.data ? (
+                        pseudoAddressToVersionString(
+                          protocolVersionResponse.data
+                        )
+                      ) : (
+                        <Skeleton sx={{ width: "200px" }} />
+                      )}
+                      <InfoTooltipBtn title="The version format is {major}.{minor}.{patch}-{gitRevision}." />
+                    </>
+                  }
+                />
+              </CardContent>
+            </Card>
           </TabPanel>
         ))}
       </TabContext>

src/pages/[_network]/supertokens/[_id].tsx

@@ -31,16 +31,16 @@ import EventList from "../../../components/EventList";
 import FlowingBalance from "../../../components/FlowingBalance";
 import InfoTooltipBtn from "../../../components/InfoTooltipBtn";
 import NetworkDisplay from "../../../components/NetworkDisplay";
-import SkeletonAddress from "../../../components/skeletons/SkeletonAddress";
-import SkeletonTokenName from "../../../components/skeletons/SkeletonTokenName";
 import SubgraphQueryLink from "../../../components/SubgraphQueryLink";
 import SuperTokenIndexes from "../../../components/SuperTokenIndexes";
 import SuperTokenStreams from "../../../components/SuperTokenStreams";
+import SkeletonAddress from "../../../components/skeletons/SkeletonAddress";
+import SkeletonTokenName from "../../../components/skeletons/SkeletonTokenName";
 import IdContext from "../../../contexts/IdContext";
 import { useNetworkContext } from "../../../contexts/NetworkContext";
 import { useAppSelector } from "../../../redux/hooks";
 import { streamGranularityInSeconds } from "../../../redux/slices/appPreferences.slice";
-import { sfSubgraph } from "../../../redux/store";
+import { rpcApi, sfSubgraph } from "../../../redux/store";
 
 const SuperTokenPage: NextPage = () => {
   const network = useNetworkContext();
@@ -53,6 +53,11 @@ const SuperTokenPage: NextPage = () => {
 
   const superToken: Token | null | undefined = tokenQuery.data;
 
+  const minimumDepositQuery = rpcApi.useMinimumDepositQuery({
+    chainId: network.chainId,
+    tokenAddress: address,
+  });
+
   const tokenStatisticsQuery = sfSubgraph.useTokenStatisticQuery({
     chainId: network.chainId,
     id: address,
@@ -483,6 +488,19 @@ const SuperTokenPage: NextPage = () => {
               }
             />
           </ListItem>
+
+          <ListItem>
+            <ListItemText
+              secondary="Minimum deposit"
+              primary={
+                minimumDepositQuery.data ? (
+                  <EtherFormatted wei={minimumDepositQuery.data} />
+                ) : (
+                  <Skeleton sx={{ width: "200px" }} />
+                )
+              }
+            />
+          </ListItem>
         </List>
       </Card>
 

src/redux/adhocRpcEndpoints.ts

@@ -0,0 +1,52 @@
+import { Address } from "@superfluid-finance/sdk-core";
+import {
+  RpcEndpointBuilder,
+  getFramework,
+} from "@superfluid-finance/sdk-redux";
+
+export const adhocRpcEndpoints = {
+  endpoints: (builder: RpcEndpointBuilder) => ({
+    minimumDeposit: builder.query<
+      string,
+      { tokenAddress: Address; chainId: number }
+    >({
+      queryFn: async ({ tokenAddress, chainId }) => {
+        const framework = await getFramework(chainId);
+
+        const minimumDeposit = await framework.governance.getMinimumDeposit({
+          token: tokenAddress,
+          providerOrSigner: framework.settings.provider,
+        });
+
+        return {
+          data: minimumDeposit,
+        };
+      },
+      providesTags: (_result, _error, arg) => [
+        {
+          type: "GENERAL",
+          id: arg.chainId, // TODO(KK): Could be made more specific.
+        },
+      ],
+    }),
+    protocolVersion: builder.query<string, { chainId: number }>({
+      queryFn: async ({ chainId }) => {
+        const framework = await getFramework(chainId);
+
+        const protocolVersion = await framework.contracts.resolver
+          .connect(framework.settings.provider)
+          .get("versionString.v1");
+
+        return {
+          data: protocolVersion,
+        };
+      },
+      providesTags: (_result, _error, arg) => [
+        {
+          type: "GENERAL",
+          id: arg.chainId, // TODO(KK): Could be made more specific.
+        },
+      ],
+    }),
+  }),
+};

src/redux/store.ts

@@ -33,10 +33,11 @@ import { networks } from "./networks";
 import { addressBookSlice } from "./slices/addressBook.slice";
 import { themePreferenceSlice } from "./slices/appPreferences.slice";
 import { ensApi } from "./slices/ensResolver.slice";
+import { adhocRpcEndpoints } from "./adhocRpcEndpoints";
 
-export const rpcApi = initializeRpcApiSlice(
-  createApiWithReactHooks
-).injectEndpoints(balanceRpcApiEndpoints);
+export const rpcApi = initializeRpcApiSlice(createApiWithReactHooks)
+  .injectEndpoints(balanceRpcApiEndpoints)
+  .injectEndpoints(adhocRpcEndpoints);
 
 export const sfSubgraph = initializeSubgraphApiSlice(
   createApiWithReactHooks
@@ -64,7 +65,6 @@ export const makeStore = wrapMakeStore(() => {
     addressBookSlice.reducer
   );
 
-
   const store = configureStore({
     reducer: {
       [rpcApi.reducerPath]: rpcApi.reducer,

src/utils/versionUtils.ts

@@ -0,0 +1,23 @@
+/**
+ * Takes a `pseudoAddress` and returns the `versionString`.
+ * @param pseudoAddress format: 0x000000000000000000${major}${minor}${patch}${gitRevision}
+ * @returns `versionString` with format: major.minor.patch-rrrrrrrrrrrrrrrr, r: 16-digit git revision (hex)
+ */
+export function pseudoAddressToVersionString(pseudoAddress: string) {
+  const str = pseudoAddress.replace(/^0x/, "").toLowerCase(); // remove leading 0x
+  const major = parseInt(str.slice(18, 20), 10);
+  const minor = parseInt(str.slice(20, 22), 10);
+  const patch = parseInt(str.slice(22, 24), 10);
+  const revision = str.slice(24);
+
+  if (
+    !str.startsWith("000000000000000000") ||
+    isNaN(major) ||
+    isNaN(minor) ||
+    isNaN(patch)
+  ) {
+    return undefined;
+  }
+
+  return `${major}.${minor}.${patch}-${revision}`;
+}