Optimize USDC deployment flow (#97)

* Fix SDL pricing message update on placement token change (#63) * Change placement modal action button text (#63) From Close to Done which semantically suggests that modal changes are applied * Move token select from placement modal to SDL builder (#63) * Update a denom in a generated yml sdl (#63)
akash-network · Feb 15, 2024 · fad3169 · fad3169
1 parent 22448f4
commit fad3169
Show file tree

Hide file tree

Showing 8 changed files with 87 additions and 73 deletions.
diff --git a/.gitignore b/.gitignore
@@ -87,6 +87,9 @@ dist
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test
 
+# IDE files
+.idea
+
 # yarn v2
 .yarn/cache
 .yarn/unplugged
@@ -98,4 +101,4 @@ dist
 build.ps1
 
 # Data Folder
-data
+data
diff --git a/deploy-web/src/components/sdl/PlacementFormModal.tsx b/deploy-web/src/components/sdl/PlacementFormModal.tsx
@@ -10,7 +10,7 @@ import { AttributesFormControl, AttributesRefType } from "./AttributesFormContro
 import { CustomTooltip } from "../shared/CustomTooltip";
 import InfoIcon from "@mui/icons-material/Info";
 import { PriceValue } from "../shared/PriceValue";
-import { getAvgCostPerMonth } from "@src/utils/priceUtils";
+import { getAvgCostPerMonth, toReadableDenom } from "@src/utils/priceUtils";
 import { uAktDenom } from "@src/utils/constants";
 import { useSdlDenoms } from "@src/hooks/useDenom";
 import { FormattedNumber } from "react-intl";
@@ -81,7 +81,7 @@ export const PlacementFormModal: React.FunctionComponent<Props> = ({ control, se
       title="Edit placement"
       actions={[
         {
-          label: "Close",
+          label: "Done",
           color: "primary",
           variant: "text",
           side: "right",
@@ -150,27 +150,6 @@ export const PlacementFormModal: React.FunctionComponent<Props> = ({ control, se
 
             <Grid item xs={12} sm={6}>
               <FormControl className={classes.formControl} fullWidth sx={{ display: "flex", alignItems: "center", flexDirection: "row" }}>
-                <InputLabel id="grant-token">Token</InputLabel>
-                <Controller
-                  control={control}
-                  name={`services.${serviceIndex}.placement.pricing.denom`}
-                  defaultValue=""
-                  rules={{
-                    required: true
-                  }}
-                  render={({ fieldState, field }) => {
-                    return (
-                      <Select {...field} labelId="sdl-token" label="Token" size="small" error={!!fieldState.error}>
-                        {supportedSdlDenoms.map(token => (
-                          <MenuItem key={token.id} value={token.value}>
-                            {token.label}
-                          </MenuItem>
-                        ))}
-                      </Select>
-                    );
-                  }}
-                />
-
                 <Box sx={{ display: "flex", alignItems: "center", flexGrow: 1, marginLeft: ".5rem" }}>
                   <Controller
                     control={control}
@@ -180,7 +159,7 @@ export const PlacementFormModal: React.FunctionComponent<Props> = ({ control, se
                       <TextField
                         type="number"
                         variant="outlined"
-                        label="Pricing"
+                        label={`Pricing, ${toReadableDenom(currentService.placement.pricing.denom)}`}
                         fullWidth
                         value={field.value}
                         error={!!fieldState.error}

diff --git a/deploy-web/src/components/sdl/RentGpusForm.tsx b/deploy-web/src/components/sdl/RentGpusForm.tsx
@@ -1,20 +1,19 @@
-import { Alert, Box, Button, CircularProgress, FormControl, Grid, InputLabel, MenuItem, Paper, Select, Typography, useTheme } from "@mui/material";
-import { useForm, Controller } from "react-hook-form";
+import { Alert, Box, Button, CircularProgress, Grid, Paper, Typography } from "@mui/material";
+import { useForm } from "react-hook-form";
 import { useEffect, useRef, useState } from "react";
 import { ApiTemplate, RentGpusFormValues, Service } from "@src/types";
 import { defaultAnyRegion, defaultRentGpuService } from "@src/utils/sdl/data";
 import { useRouter } from "next/router";
 import sdlStore from "@src/store/sdlStore";
 import { useAtom } from "jotai";
 import { useProviderAttributesSchema } from "@src/queries/useProvidersQuery";
-import { makeStyles } from "tss-react/mui";
-import { useSdlDenoms } from "@src/hooks/useDenom";
 import { RegionSelect } from "./RegionSelect";
 import { AdvancedConfig } from "./AdvancedConfig";
 import { GpuFormControl } from "./GpuFormControl";
 import { CpuFormControl } from "./CpuFormControl";
 import { MemoryFormControl } from "./MemoryFormControl";
 import { StorageFormControl } from "./StorageFormControl";
+import { TokenFormControl } from "./TokenFormControl";
 import { generateSdl } from "@src/utils/sdl/sdlGenerator";
 import { UrlService, handleDocClick } from "@src/utils/urlUtils";
 import { RouteStepKeys, defaultInitialDeposit } from "@src/utils/constants";
@@ -41,15 +40,7 @@ const yaml = require("js-yaml");
 
 type Props = {};
 
-const useStyles = makeStyles()(theme => ({
-  formControl: {
-    marginBottom: theme.spacing(1.5)
-  }
-}));
-
 export const RentGpusForm: React.FunctionComponent<Props> = ({}) => {
-  const theme = useTheme();
-  const { classes } = useStyles();
   const [error, setError] = useState(null);
   // const [templateMetadata, setTemplateMetadata] = useState<ITemplate>(null);
   const [isCreatingDeployment, setIsCreatingDeployment] = useState(false);
@@ -65,9 +56,8 @@ export const RentGpusForm: React.FunctionComponent<Props> = ({}) => {
       region: { ...defaultAnyRegion }
     }
   });
-  const { services: _services, region: _region } = watch();
+  const { services: _services } = watch();
   const router = useRouter();
-  const supportedSdlDenoms = useSdlDenoms();
   const currentService: Service = _services[0] || ({} as any);
   const { settings } = useSettings();
   const { address, signAndBroadcastTx } = useWallet();
@@ -273,36 +263,7 @@ export const RentGpusForm: React.FunctionComponent<Props> = ({}) => {
               <RegionSelect control={control} />
             </Grid>
             <Grid item xs={6}>
-              <FormControl className={classes.formControl} fullWidth sx={{ display: "flex", alignItems: "center", flexDirection: "row" }}>
-                <InputLabel id="grant-token">Token</InputLabel>
-                <Controller
-                  control={control}
-                  name={`services.0.placement.pricing.denom`}
-                  defaultValue=""
-                  rules={{
-                    required: true
-                  }}
-                  render={({ fieldState, field }) => {
-                    return (
-                      <Select
-                        {...field}
-                        labelId="sdl-token"
-                        label="Token"
-                        size="small"
-                        error={!!fieldState.error}
-                        fullWidth
-                        MenuProps={{ disableScrollLock: true }}
-                      >
-                        {supportedSdlDenoms.map(token => (
-                          <MenuItem key={token.id} value={token.value}>
-                            {token.tokenLabel}
-                          </MenuItem>
-                        ))}
-                      </Select>
-                    );
-                  }}
-                />
-              </FormControl>
+              <TokenFormControl control={control} name="services.0.placement.pricing.denom" />
             </Grid>
           </Grid>
         </Paper>

diff --git a/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx b/deploy-web/src/components/sdl/SimpleServiceFormControl.tsx
@@ -19,7 +19,7 @@ import { PlacementFormModal } from "./PlacementFormModal";
 import { udenomToDenom } from "@src/utils/mathHelpers";
 import Link from "next/link";
 import { PriceValue } from "../shared/PriceValue";
-import { getAvgCostPerMonth } from "@src/utils/priceUtils";
+import { getAvgCostPerMonth, toReadableDenom } from "@src/utils/priceUtils";
 import Image from "next/legacy/image";
 import { uAktDenom } from "@src/utils/constants";
 import { ProviderAttributesSchema } from "@src/types/providerAttributes";
@@ -31,6 +31,7 @@ import { GpuFormControl } from "./GpuFormControl";
 import { CpuFormControl } from "./CpuFormControl";
 import { MemoryFormControl } from "./MemoryFormControl";
 import { StorageFormControl } from "./StorageFormControl";
+import { TokenFormControl } from "./TokenFormControl";
 
 type Props = {
   _services: Service[];
@@ -391,6 +392,10 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
                   )}
                 />
               </Grid>
+
+              <Grid item xs={12} sx={{ marginTop: "1rem" }}>
+                <TokenFormControl control={control} name={`services.${serviceIndex}.placement.pricing.denom`} />
+              </Grid>
             </Grid>
           </Grid>
           <Box sx={{ marginTop: "1rem", wordBreak: "break-all" }}>
@@ -434,7 +439,7 @@ export const SimpleServiceFormControl: React.FunctionComponent<Props> = ({
                     <div>
                       <strong>Pricing</strong>&nbsp;&nbsp;
                       <Box component="span" className={classes.formValue} sx={{ display: "inline-flex", alignItems: "center" }}>
-                        Max {udenomToDenom(currentService.placement.pricing.amount, 6)} AKT per block
+                        Max {udenomToDenom(currentService.placement.pricing.amount, 6)} {toReadableDenom(currentService.placement.pricing.denom)} per block
                         <CustomTooltip
                           arrow
                           title={

diff --git a/deploy-web/src/components/sdl/TokenFormControl.tsx b/deploy-web/src/components/sdl/TokenFormControl.tsx
@@ -0,0 +1,55 @@
+import { ReactElement } from "react";
+import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
+import { makeStyles } from "tss-react/mui";
+import { Control, Controller, Path } from "react-hook-form";
+import { FieldValues } from "react-hook-form/dist/types/fields";
+import { FieldPathValue } from "react-hook-form/dist/types";
+
+import { Service } from "@src/types";
+import { useSdlDenoms } from "@src/hooks/useDenom";
+
+interface ServicesFieldValues extends FieldValues {
+  services: Service[];
+}
+
+interface Props<TFieldValues extends ServicesFieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> {
+  name: TName;
+  defaultValue?: FieldPathValue<TFieldValues, TName>;
+  control: Control<TFieldValues>;
+}
+
+const useStyles = makeStyles()(theme => ({
+  formControl: {
+    marginBottom: theme.spacing(1.5)
+  }
+}));
+
+export const TokenFormControl = <F extends ServicesFieldValues>({ control, name, defaultValue }: Props<F>): ReactElement<Props<F>> => {
+  const { classes } = useStyles();
+  const supportedSdlDenoms = useSdlDenoms();
+
+  return (
+    <FormControl className={classes.formControl} fullWidth sx={{ display: "flex", alignItems: "center", flexDirection: "row" }}>
+      <InputLabel id="grant-token">Token</InputLabel>
+      <Controller
+        control={control}
+        name={name}
+        defaultValue={defaultValue}
+        rules={{
+          required: true
+        }}
+        render={({ fieldState, field }) => {
+          return (
+            <Select {...field} labelId="sdl-token" label="Token" size="small" error={!!fieldState.error} fullWidth MenuProps={{ disableScrollLock: true }}>
+              {supportedSdlDenoms.map(token => (
+                <MenuItem key={token.id} value={token.value}>
+                  {token.tokenLabel}
+                </MenuItem>
+              ))}
+            </Select>
+          );
+        }}
+      />
+    </FormControl>
+  );
+};
diff --git a/deploy-web/src/utils/constants.ts b/deploy-web/src/utils/constants.ts
@@ -56,6 +56,13 @@ export const usdcIbcDenoms = {
   [mainnetId]: "ibc/170C677610AC31DF0904FFE09CD3B5C657492170E7E52372E48756B71E56F2F1",
   [sandboxId]: "ibc/12C6A0C374171B595A0A9E18B83FA09D295FB1F2D8C6DAA3AC28683471752D84"
 };
+const readableAktDenom = "AKT";
+const readableUsdcDenom = "USDC";
+export const readableDenoms = {
+  [uAktDenom]: readableAktDenom,
+  [usdcIbcDenoms[mainnetId]]: readableUsdcDenom,
+  [usdcIbcDenoms[sandboxId]]: readableUsdcDenom
+};
 
 // Cloudmos fee
 export const feePercent = 3;

diff --git a/deploy-web/src/utils/priceUtils.ts b/deploy-web/src/utils/priceUtils.ts
@@ -4,7 +4,7 @@ import { averageDaysInMonth } from "./dateUtils";
 import { Coin } from "@cosmjs/stargate";
 import { denomToUdenom } from "./mathHelpers";
 import { getUsdcDenom } from "@src/hooks/useDenom";
-import { uAktDenom } from "./constants";
+import { readableDenoms, uAktDenom } from "./constants";
 
 export const averageBlockTime = 6.098;
 
@@ -76,3 +76,7 @@ export function useRealTimeLeft(pricePerBlock: number, balance: number, settledA
     amountSpent: Math.min(blocksSinceCreation * pricePerBlock, balance)
   };
 }
+
+export function toReadableDenom(denom: string) {
+  return readableDenoms[denom];
+}
diff --git a/deploy-web/src/utils/sdl/sdlGenerator.ts b/deploy-web/src/utils/sdl/sdlGenerator.ts
@@ -128,7 +128,7 @@ export const generateSdl = (services: Service[], region?: string) => {
     // Placement
     sdl.profiles.placement[service.placement.name] = sdl.profiles.placement[service.placement.name] || { pricing: {} };
     sdl.profiles.placement[service.placement.name].pricing[service.title] = {
-      denom: "uakt",
+      denom: service.placement.pricing.denom,
       amount: service.placement.pricing.amount
     };