feat(console): add metamask (#334)

akash-network · Oct 7, 2024 · bc68df8 · bc68df8
1 parent 34dbbf1
commit bc68df8
Show file tree

Hide file tree

Showing 8 changed files with 258 additions and 107 deletions.
diff --git a/apps/deploy-web/package.json b/apps/deploy-web/package.json
@@ -26,6 +26,7 @@
     "@cosmjs/encoding": "^0.32.4",
     "@cosmjs/proto-signing": "^0.32.4",
     "@cosmjs/stargate": "^0.32.4",
+    "@cosmos-kit/cosmos-extension-metamask": "0.10.0",
     "@cosmos-kit/cosmostation-extension": "^2.12.2",
     "@cosmos-kit/keplr": "^2.12.2",
     "@cosmos-kit/leap": "^2.12.2",

diff --git a/apps/deploy-web/src/components/layout/WalletStatus.tsx b/apps/deploy-web/src/components/layout/WalletStatus.tsx
@@ -23,6 +23,7 @@ import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useWallet } from "@src/context/WalletProvider";
 import { useLoginRequiredEventHandler } from "@src/hooks/useLoginRequiredEventHandler";
 import { useManagedEscrowFaqModal } from "@src/hooks/useManagedEscrowFaqModal";
+import { getSplitText } from "@src/hooks/useShortText";
 import { useWalletBalance } from "@src/hooks/useWalletBalance";
 import { udenomToDenom } from "@src/utils/mathHelpers";
 import { uaktToAKT } from "@src/utils/priceUtils";
@@ -104,10 +105,15 @@ export function WalletStatus() {
                     <Link className="ml-2 cursor-pointer leading-4" href={`https://stats.akash.network/addresses/${address}`} target="_blank">
                       <Tooltip>
                         <TooltipTrigger asChild>
-                          <span>{walletName}</span>
+                          {walletName?.length > 20 ? (
+                            <span className="text-xs">{getSplitText(walletName, 4, 4)}</span>
+                          ) : (
+                            <span className="text-xs">{walletName}</span>
+                          )}
                         </TooltipTrigger>
                         <TooltipContent>
-                          <Address address={address} isCopyable disableTooltip />
+                          <div className="text-xs">{walletName}</div>
+                          <Address address={address} isCopyable disableTooltip disableTruncate />
                         </TooltipContent>
                       </Tooltip>
                     </Link>

diff --git a/apps/deploy-web/src/components/settings/CertificateList.tsx b/apps/deploy-web/src/components/settings/CertificateList.tsx
@@ -1,7 +1,7 @@
 "use client";
-import { useState, useEffect } from "react";
+import { useEffect,useState } from "react";
 import { FormattedDate } from "react-intl";
-import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow, CustomPagination } from "@akashnetwork/ui/components";
+import { Button, CustomPagination,Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@akashnetwork/ui/components";
 import { Check } from "iconoir-react";
 
 import { ConnectWallet } from "@src/components/shared/ConnectWallet";

diff --git a/apps/deploy-web/src/context/CertificateProvider/CertificateProviderContext.tsx b/apps/deploy-web/src/context/CertificateProvider/CertificateProviderContext.tsx
@@ -7,11 +7,11 @@ import { useSnackbar } from "notistack";
 
 import { RestApiCertificate } from "@src/types/certificate";
 import { AnalyticsEvents } from "@src/utils/analytics";
+import { ApiUrlService, loadWithPagination } from "@src/utils/apiUtils";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { getStorageWallets, updateWallet } from "@src/utils/walletUtils";
 import { useSettings } from "../SettingsProvider";
 import { useWallet } from "../WalletProvider";
-import { ApiUrlService, loadWithPagination } from "@src/utils/apiUtils";
 
 export type LocalCert = {
   certPem: string;

diff --git a/apps/deploy-web/src/context/CustomChainProvider/CustomChainProvider.tsx b/apps/deploy-web/src/context/CustomChainProvider/CustomChainProvider.tsx
@@ -3,6 +3,7 @@ import "@interchain-ui/react/styles";
 import "@interchain-ui/react/globalStyles";
 
 import { GasPrice } from "@cosmjs/stargate";
+import { wallets as metamask } from "@cosmos-kit/cosmos-extension-metamask";
 import { wallets as cosmostation } from "@cosmos-kit/cosmostation-extension";
 import { wallets as keplr } from "@cosmos-kit/keplr";
 import { wallets as leap } from "@cosmos-kit/leap";
@@ -22,7 +23,7 @@ export function CustomChainProvider({ children }: Props) {
     <ChainProvider
       chains={[akash, akashSandbox, akashTestnet]}
       assetLists={assetLists}
-      wallets={[...keplr, ...leap, ...cosmostation]}
+      wallets={[...keplr, ...leap, ...cosmostation, ...metamask]}
       sessionOptions={{
         duration: 31_556_926_000, // 1 year
         callback: () => {