feat(web): integrate cert management from akashjs

refs akash-network/akashjs#76
akash-network · May 15, 2024 · 4e1d0fa · 4e1d0fa
1 parent 1344fe5
commit 4e1d0fa
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 132 deletions.
diff --git a/deploy-web/package-lock.json b/deploy-web/package-lock.json
diff --git a/deploy-web/package.json b/deploy-web/package.json
@@ -15,7 +15,7 @@
   },
   "dependencies": {
     "@akashnetwork/akash-api": "^1.3.0",
-    "@akashnetwork/akashjs": "^0.8.1",
+    "@akashnetwork/akashjs": "^0.9.0",
     "@auth0/nextjs-auth0": "^3.5.0",
     "@cosmjs/encoding": "^0.29.5",
     "@cosmjs/stargate": "^0.29.5",
@@ -81,7 +81,6 @@
     "js-yaml": "^4.1.0",
     "json-stable-stringify": "^1.0.2",
     "json2csv": "^5.0.7",
-    "jsrsasign": "^10.6.1",
     "lodash": "^4.17.21",
     "long": "^5.2.3",
     "lucide-react": "^0.292.0",

diff --git a/deploy-web/src/components/new-deployment/ManifestEdit.tsx b/deploy-web/src/components/new-deployment/ManifestEdit.tsx
@@ -1,8 +1,14 @@
 "use client";
 import { useState, useEffect, Dispatch, useRef } from "react";
+import { useRouter } from "next/navigation";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTheme as useMuiTheme } from "@mui/material/styles";
+import { useAtom } from "jotai";
+import { event } from "nextjs-google-analytics";
+import { certificateManager } from "@akashnetwork/akashjs/build/certificates/certificate-manager";
+
 import { useSettings } from "../../context/SettingsProvider";
 import { useWallet } from "@src/context/WalletProvider";
-import { useRouter } from "next/navigation";
 import { Timer } from "@src/utils/timer";
 import { defaultInitialDeposit, RouteStepKeys } from "@src/utils/constants";
 import { deploymentData } from "@src/utils/deploymentData";
@@ -12,19 +18,15 @@ import ViewPanel from "../shared/ViewPanel";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { saveDeploymentManifestAndName } from "@src/utils/deploymentLocalDataUtils";
 import { UrlService, domainName, handleDocClick } from "@src/utils/urlUtils";
-import { event } from "nextjs-google-analytics";
 import { AnalyticsEvents } from "@src/utils/analytics";
 import { PrerequisiteList } from "../shared/PrerequisiteList";
 import { TemplateCreation } from "@src/types";
 import { useCertificate } from "@src/context/CertificateProvider";
-import { generateCertificate } from "@src/utils/certificateUtils";
 import { updateWallet } from "@src/utils/walletUtils";
 import sdlStore from "@src/store/sdlStore";
-import { useAtom } from "jotai";
 import { SdlBuilder, SdlBuilderRefType } from "./SdlBuilder";
 import { validateDeploymentData } from "@src/utils/deploymentUtils";
 import { useChainParam } from "@src/context/ChainParamProvider";
-import { useTheme as useMuiTheme } from "@mui/material/styles";
 import { EncodeObject } from "@cosmjs/proto-signing";
 import { Alert } from "../ui/alert";
 import { Button } from "../ui/button";
@@ -35,7 +37,6 @@ import { InputWithIcon } from "../ui/input";
 import { DeploymentDepositModal } from "../deployments/DeploymentDepositModal";
 import { CustomNextSeo } from "../shared/CustomNextSeo";
 import { cn } from "@src/utils/styleUtils";
-import useMediaQuery from "@mui/material/useMediaQuery";
 
 type Props = {
   selectedTemplate: TemplateCreation;
@@ -157,7 +158,7 @@ export const ManifestEdit: React.FunctionComponent<Props> = ({ editedManifest, s
 
       // Create a cert if the user doesn't have one
       if (!hasValidCert) {
-        const { crtpem, pubpem, encryptedKey } = generateCertificate(address);
+        const { cert: crtpem, publicKey: pubpem, privateKey: encryptedKey } = certificateManager.generatePEM(address);
         _crtpem = crtpem;
         _encryptedKey = encryptedKey;
         messages.push(TransactionMessageData.getCreateCertificateMsg(address, crtpem, pubpem));

diff --git a/deploy-web/src/components/sdl/RentGpusForm.tsx b/deploy-web/src/components/sdl/RentGpusForm.tsx
@@ -4,8 +4,11 @@ import { useEffect, useRef, useState } from "react";
 import { ApiTemplate, ProfileGpuModel, RentGpusFormValues, Service } from "@src/types";
 import { defaultAnyRegion, defaultRentGpuService } from "@src/utils/sdl/data";
 import { useRouter, useSearchParams } from "next/navigation";
-import sdlStore from "@src/store/sdlStore";
 import { useAtom } from "jotai";
+import { EncodeObject } from "@cosmjs/proto-signing";
+import { certificateManager } from "@akashnetwork/akashjs/build/certificates/certificate-manager";
+
+import sdlStore from "@src/store/sdlStore";
 import { RegionSelect } from "./RegionSelect";
 import { AdvancedConfig } from "./AdvancedConfig";
 import { GpuFormControl } from "./GpuFormControl";
@@ -21,7 +24,6 @@ import { useCertificate } from "@src/context/CertificateProvider";
 import { useSettings } from "@src/context/SettingsProvider";
 import { useWallet } from "@src/context/WalletProvider";
 import { validateDeploymentData } from "@src/utils/deploymentUtils";
-import { generateCertificate } from "@src/utils/certificateUtils";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { updateWallet } from "@src/utils/walletUtils";
 import { saveDeploymentManifestAndName } from "@src/utils/deploymentLocalDataUtils";
@@ -35,7 +37,6 @@ import { event } from "nextjs-google-analytics";
 import { AnalyticsEvents } from "@src/utils/analytics";
 import { useChainParam } from "@src/context/ChainParamProvider";
 import { useGpuModels } from "@src/queries/useGpuQuery";
-import { EncodeObject } from "@cosmjs/proto-signing";
 import { Alert } from "../ui/alert";
 import { FormPaper } from "./FormPaper";
 import { Button } from "../ui/button";
@@ -211,7 +212,7 @@ export const RentGpusForm: React.FunctionComponent<Props> = ({}) => {
 
       // Create a cert if the user doesn't have one
       if (!hasValidCert) {
-        const { crtpem, pubpem, encryptedKey } = generateCertificate(address);
+        const { cert: crtpem, publicKey: pubpem, privateKey: encryptedKey } = certificateManager.generatePEM(address);
         _crtpem = crtpem;
         _encryptedKey = encryptedKey;
         messages.push(TransactionMessageData.getCreateCertificateMsg(address, crtpem, pubpem));

diff --git a/deploy-web/src/context/CertificateProvider/CertificateProviderContext.tsx b/deploy-web/src/context/CertificateProvider/CertificateProviderContext.tsx
@@ -1,17 +1,18 @@
 "use client";
 import React, { useState, useCallback, useEffect } from "react";
 import axios from "axios";
+import { useSnackbar } from "notistack";
+import { certificateManager } from "@akashnetwork/akashjs/build/certificates/certificate-manager";
+
 import { useSettings } from "../SettingsProvider";
 import { networkVersion } from "@src/utils/constants";
-import { generateCertificate, getCertPem, openCert } from "@src/utils/certificateUtils";
+import { Snackbar } from "@src/components/shared/Snackbar";
 import { getSelectedStorageWallet, getStorageWallets, updateWallet } from "@src/utils/walletUtils";
 import { useWallet } from "../WalletProvider";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { event } from "nextjs-google-analytics";
 import { AnalyticsEvents } from "@src/utils/analytics";
 import { RestApiCertificatesResponseType } from "@src/types/certificate";
-import { useSnackbar } from "notistack";
-import { Snackbar } from "@src/components/shared/Snackbar";
 
 export type LocalCert = {
   certPem: string;
@@ -83,7 +84,7 @@ export const CertificateProvider = ({ children }) => {
         );
         const certs = (response.data.certificates || []).map(cert => {
           const parsed = atob(cert.certificate.cert);
-          const pem = getCertPem(parsed);
+          const pem = certificateManager.parsePem(parsed);
 
           return {
             ...cert,
@@ -159,8 +160,7 @@ export const CertificateProvider = ({ children }) => {
     for (let i = 0; i < wallets.length; i++) {
       const _wallet = wallets[i];
 
-      const cert = await openCert(_wallet.cert as string, _wallet.certKey as string);
-      const _cert = { ...cert, address: _wallet.address };
+      const _cert = { certPem: _wallet.cert, keyPem: _wallet.certKey, address: _wallet.address };
 
       certs.push(_cert as LocalCert);
 
@@ -178,7 +178,7 @@ export const CertificateProvider = ({ children }) => {
   async function createCertificate() {
     setIsCreatingCert(true);
 
-    const { crtpem, pubpem, encryptedKey } = generateCertificate(address);
+    const { cert: crtpem, publicKey: pubpem, privateKey: encryptedKey } = certificateManager.generatePEM(address);
 
     try {
       const message = TransactionMessageData.getCreateCertificateMsg(address, crtpem, pubpem);
@@ -215,7 +215,7 @@ export const CertificateProvider = ({ children }) => {
    */
   async function regenerateCertificate() {
     setIsCreatingCert(true);
-    const { crtpem, pubpem, encryptedKey } = generateCertificate(address);
+    const { cert: crtpem, publicKey: pubpem, privateKey: encryptedKey } = certificateManager.generatePEM(address);
 
     try {
       const revokeCertMsg = TransactionMessageData.getRevokeCertificateMsg(address, selectedCertificate?.serial as string);

diff --git a/deploy-web/src/utils/certificateUtils.ts b/deploy-web/src/utils/certificateUtils.ts