feat: Connect to Leap Wallet support (#33)

* feat: Connect to Leap Wallet support * refactor: add isSettingsInit check * refactor: PR suggested change --------- Co-authored-by: Himanshu Singh <[email protected]>
akash-network · Oct 16, 2023 · 9cf7242 · 9cf7242
1 parent 19ff443
commit 9cf7242
Show file tree

Hide file tree

Showing 52 changed files with 263 additions and 158 deletions.
diff --git a/deploy-web/public/images/leap-cosmos-logo.png b/deploy-web/public/images/leap-cosmos-logo.png
diff --git a/deploy-web/src/components/address/SendAktModal.tsx b/deploy-web/src/components/address/SendAktModal.tsx
@@ -1,7 +1,7 @@
 import { ReactNode, useEffect, useState } from "react";
 import { Popup } from "../shared/Popup";
 import { Box, Paper } from "@mui/material";
-import { useKeplr } from "@src/context/KeplrWalletProvider";
+import { useWallet } from "@src/context/WalletProvider";
 import SendIcon from "@mui/icons-material/Send";
 import { Address } from "../shared/Address";
 import { AKTAmountInput } from "../shared/AKTAmountInput";
@@ -20,7 +20,7 @@ type Props = {
 export const SendAktModal: React.FunctionComponent<Props> = ({ open, toAddress, onClose }) => {
   const [amount, setAmount] = useState<number>(1);
   const [isKeplrOpened, setIsKeplrOpened] = useState(false);
-  const { signAndBroadcastTx, address } = useKeplr();
+  const { signAndBroadcastTx, address } = useWallet();
 
   useEffect(() => {
     setAmount(1);
@@ -102,3 +102,4 @@ export const SendAktModal: React.FunctionComponent<Props> = ({ open, toAddress,
     </Popup>
   );
 };
+
diff --git a/deploy-web/src/components/certificates/CertificateDisplay.tsx b/deploy-web/src/components/certificates/CertificateDisplay.tsx
@@ -11,7 +11,7 @@ import { ExportCertificate } from "./ExportCertificate";
 import { makeStyles } from "tss-react/mui";
 import { Box, Button, CircularProgress, IconButton, Menu, Paper, Tooltip, Typography, useTheme } from "@mui/material";
 import { CustomMenuItem } from "../shared/CustomMenuItem";
-import { useKeplr } from "@src/context/KeplrWalletProvider";
+import { useWallet } from "@src/context/WalletProvider";
 import CheckIcon from "@mui/icons-material/Check";
 
 const useStyles = makeStyles()({
@@ -37,7 +37,7 @@ export function CertificateDisplay() {
     revokeCertificate
   } = useCertificate();
   const { classes } = useStyles();
-  const { address } = useKeplr();
+  const { address } = useWallet();
   const [anchorEl, setAnchorEl] = useState(null);
   const theme = useTheme();
 
@@ -159,3 +159,4 @@ export function CertificateDisplay() {
     </>
   );
 }
+
diff --git a/deploy-web/src/components/certificates/CertificateList.tsx b/deploy-web/src/components/certificates/CertificateList.tsx
@@ -4,14 +4,14 @@ import { FormattedDate } from "react-intl";
 import { Box, Button, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Typography } from "@mui/material";
 import { CertificateDisplay } from "./CertificateDisplay";
 import { CustomTableHeader, CustomTableRow } from "../shared/CustomTable";
-import { useKeplr } from "@src/context/KeplrWalletProvider";
+import { useWallet } from "@src/context/WalletProvider";
 import { ConnectWallet } from "../shared/ConnectWallet";
 
 type Props = {};
 
 export const CertificateList: React.FunctionComponent<Props> = ({}) => {
   const { validCertificates, localCert, selectedCertificate, revokeCertificate, revokeAllCertificates, isLoadingCertificates } = useCertificate();
-  const { address } = useKeplr();
+  const { address } = useWallet();
 
   return (
     <Box>
@@ -82,3 +82,4 @@ export const CertificateList: React.FunctionComponent<Props> = ({}) => {
     </Box>
   );
 };
+
diff --git a/deploy-web/src/components/deployment/DeploymentListRow.tsx b/deploy-web/src/components/deployment/DeploymentListRow.tsx
@@ -20,7 +20,7 @@ import { UrlService } from "@src/utils/urlUtils";
 import { cx } from "@emotion/css";
 import { CustomMenuItem } from "../shared/CustomMenuItem";
 import { DeploymentDepositModal } from "../deploymentDetail/DeploymentDepositModal";
-import { useKeplr } from "@src/context/KeplrWalletProvider";
+import { useWallet } from "@src/context/WalletProvider";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { event } from "nextjs-google-analytics";
 import { AnalyticsEvents } from "@src/utils/analytics";
@@ -104,7 +104,7 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
   const [isDepositingDeployment, setIsDepositingDeployment] = useState(false);
   const [anchorEl, setAnchorEl] = useState(null);
   const { changeDeploymentName, getDeploymentData } = useLocalNotes();
-  const { address, signAndBroadcastTx } = useKeplr();
+  const { address, signAndBroadcastTx } = useWallet();
   const isActive = deployment.state === "active";
   const { data: leases, isLoading: isLoadingLeases } = useAllLeases(address, { enabled: !!deployment && isActive });
   const filteredLeases = leases?.filter(l => l.dseq === deployment.dseq);
@@ -367,3 +367,4 @@ export const DeploymentListRow: React.FunctionComponent<Props> = ({ deployment,
     </>
   );
 };
+
diff --git a/deploy-web/src/components/deploymentDetail/DeploymentDepositModal.tsx b/deploy-web/src/components/deploymentDetail/DeploymentDepositModal.tsx
@@ -7,7 +7,7 @@ import { coinToUDenom, uaktToAKT } from "@src/utils/priceUtils";
 import { Snackbar } from "../shared/Snackbar";
 import { uAktDenom } from "@src/utils/constants";
 import { Alert, Box, Checkbox, FormControl, FormControlLabel, InputAdornment, InputLabel, MenuItem, Select, TextField } from "@mui/material";
-import { useKeplr } from "@src/context/KeplrWalletProvider";
+import { useWallet } from "@src/context/WalletProvider";
 import { LinkTo } from "../shared/LinkTo";
 import { event } from "nextjs-google-analytics";
 import { AnalyticsEvents } from "@src/utils/analytics";
@@ -36,7 +36,7 @@ export const DeploymentDepositModal: React.FunctionComponent<Props> = ({ handleC
   const { enqueueSnackbar } = useSnackbar();
   const [error, setError] = useState("");
   const [isCheckingDepositor, setIsCheckingDepositor] = useState(false);
-  const { walletBalances, address } = useKeplr();
+  const { walletBalances, address } = useWallet();
   const { data: granteeGrants } = useGranteeGrants(address);
   const {
     handleSubmit,
@@ -268,3 +268,4 @@ export const DeploymentDepositModal: React.FunctionComponent<Props> = ({ handleC
     </Popup>
   );
 };
+
diff --git a/deploy-web/src/components/deploymentDetail/DeploymentDetailTopBar.tsx b/deploy-web/src/components/deploymentDetail/DeploymentDetailTopBar.tsx
@@ -13,7 +13,7 @@ import { UrlService } from "@src/utils/urlUtils";
 import { Box, Button, IconButton, Menu, Typography } from "@mui/material";
 import { cx } from "@emotion/css";
 import { CustomMenuItem } from "../shared/CustomMenuItem";
-import { useKeplr } from "@src/context/KeplrWalletProvider";
+import { useWallet } from "@src/context/WalletProvider";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { event } from "nextjs-google-analytics";
 import { AnalyticsEvents } from "@src/utils/analytics";
@@ -54,7 +54,7 @@ export const DeploymentDetailTopBar: React.FunctionComponent<Props> = ({ address
   const [anchorEl, setAnchorEl] = useState(null);
   const { changeDeploymentName, getDeploymentData, getDeploymentName } = useLocalNotes();
   const router = useRouter();
-  const { signAndBroadcastTx } = useKeplr();
+  const { signAndBroadcastTx } = useWallet();
   const [isDepositingDeployment, setIsDepositingDeployment] = useState(false);
   const storageDeploymentData = getDeploymentData(deployment?.dseq);
   const deploymentName = getDeploymentName(deployment?.dseq);
@@ -213,3 +213,4 @@ export const DeploymentDetailTopBar: React.FunctionComponent<Props> = ({ address
     </>
   );
 };
+
diff --git a/deploy-web/src/components/deploymentDetail/ManifestUpdate.tsx b/deploy-web/src/components/deploymentDetail/ManifestUpdate.tsx
@@ -4,7 +4,7 @@ import { useSnackbar } from "notistack";
 import InfoIcon from "@mui/icons-material/Info";
 import WarningIcon from "@mui/icons-material/Warning";
 import { makeStyles } from "tss-react/mui";
-import { useKeplr } from "@src/context/KeplrWalletProvider";
+import { useWallet } from "@src/context/WalletProvider";
 import { useCertificate } from "@src/context/CertificateProvider";
 import { getDeploymentLocalData, saveDeploymentManifest } from "@src/utils/deploymentLocalDataUtils";
 import { deploymentData } from "@src/utils/deploymentData";
@@ -45,7 +45,7 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
   const [showOutsideDeploymentMessage, setShowOutsideDeploymentMessage] = useState(false);
   const { settings } = useSettings();
   const { classes } = useStyles();
-  const { address, signAndBroadcastTx } = useKeplr();
+  const { address, signAndBroadcastTx } = useWallet();
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   const { data: providers } = useProviderList();
   const { localCert, isLocalCertMatching, createCertificate, isCreatingCert } = useCertificate();
@@ -282,3 +282,4 @@ export const ManifestUpdate: React.FunctionComponent<Props> = ({ deployment, lea
     </>
   );
 };
+
diff --git a/deploy-web/src/components/get-started/GetStartedStepper.tsx b/deploy-web/src/components/get-started/GetStartedStepper.tsx
@@ -1,6 +1,6 @@
 import { cx } from "@emotion/css";
 import { Box, Button, Paper, Step, StepContent, StepLabel, Stepper, Typography } from "@mui/material";
-import { useKeplr } from "@src/context/KeplrWalletProvider";
+import { useWallet } from "@src/context/WalletProvider";
 import { UrlService } from "@src/utils/urlUtils";
 import Link from "next/link";
 import { useEffect, useState } from "react";
@@ -37,7 +37,7 @@ type Props = {};
 export const GetStartedStepper: React.FunctionComponent<Props> = () => {
   const { classes } = useStyles();
   const [activeStep, setActiveStep] = useState(0);
-  const { isKeplrInstalled, isKeplrConnected, walletBalances } = useKeplr();
+  const { isKeplrInstalled, isLeapInstalled, isWalletConnected, walletBalances } = useWallet();
   const aktBalance = walletBalances ? uaktToAKT(walletBalances.uakt) : null;
   const usdcBalance = walletBalances ? udenomToDenom(walletBalances.usdc) : null;
 
@@ -79,7 +79,7 @@ export const GetStartedStepper: React.FunctionComponent<Props> = () => {
           onClick={() => (activeStep > 0 ? onStepClick(0) : null)}
           classes={{ label: cx(classes.stepLabel, { [classes.activeLabel]: activeStep > 0 }) }}
         >
-          Keplr wallet
+          Wallet
         </StepLabel>
 
         <StepContent>
@@ -97,30 +97,30 @@ export const GetStartedStepper: React.FunctionComponent<Props> = () => {
             </Box>
           </Box>
 
-          {!isKeplrInstalled && (
+          {!isKeplrInstalled && !isLeapInstalled && (
             <Box sx={{ display: "flex", alignItems: "center", margin: "1rem 0" }}>
               <CancelIcon color="error" sx={{ marginRight: ".5rem" }} />
-              Keplr is not installed
+              Wallet is not installed
             </Box>
           )}
 
-          {isKeplrInstalled && (
+          {(isKeplrInstalled || isLeapInstalled) && (
             <>
               <Box sx={{ display: "flex", alignItems: "center", margin: "1rem 0" }}>
                 <CheckIcon color="success" sx={{ marginRight: ".5rem" }} />
-                Keplr is installed
+                Wallet is installed
               </Box>
 
-              {isKeplrConnected ? (
+              {isWalletConnected ? (
                 <Box sx={{ display: "flex", alignItems: "center", margin: "1rem 0" }}>
                   <CheckIcon color="success" sx={{ marginRight: ".5rem" }} />
-                  Keplr is connected
+                  Wallet is connected
                 </Box>
               ) : (
                 <Box>
                   <Box sx={{ display: "flex", alignItems: "center", margin: "1rem 0" }}>
                     <CancelIcon color="error" sx={{ marginRight: ".5rem" }} />
-                    Keplr is not connected
+                    Wallet is not connected
                   </Box>
 
                   <ConnectWalletButton />
@@ -213,3 +213,4 @@ export const GetStartedStepper: React.FunctionComponent<Props> = () => {
     </Stepper>
   );
 };
+
diff --git a/deploy-web/src/components/home/YourAccount.tsx b/deploy-web/src/components/home/YourAccount.tsx
@@ -14,7 +14,7 @@ import Link from "next/link";
 import { FormattedNumber, FormattedPlural } from "react-intl";
 import { useRouter } from "next/router";
 import RocketLaunchIcon from "@mui/icons-material/RocketLaunch";
-import { useKeplr } from "@src/context/KeplrWalletProvider";
+import { useWallet } from "@src/context/WalletProvider";
 import { ConnectWallet } from "../shared/ConnectWallet";
 import { Balances } from "@src/types";
 import { ApiProviderList } from "@src/types/provider";
@@ -66,7 +66,7 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
   const { classes } = useStyles();
   const theme = useTheme();
   const router = useRouter();
-  const { address } = useKeplr();
+  const { address } = useWallet();
   const usdcIbcDenom = useUsdcDenom();
   const [selectedDataId, setSelectedDataId] = useState<string>(null);
   const [costPerMonth, setCostPerMonth] = useState<number>(null);
@@ -449,3 +449,4 @@ const BalancePie: React.FunctionComponent<BalancePieProps> = ({ label, data, get
     </Box>
   );
 };
+
diff --git a/deploy-web/src/components/layout/Header.tsx b/deploy-web/src/components/layout/Header.tsx
@@ -8,7 +8,7 @@ import { accountBarHeight } from "@src/utils/constants";
 import { Badge, Button, IconButton, styled, useMediaQuery, useTheme } from "@mui/material";
 import { makeStyles } from "tss-react/mui";
 import Image from "next/legacy/image";
-import { KeplrWalletStatus } from "./KeplrWalletStatus";
+import { WalletStatus } from "./WalletStatus";
 import Link from "next/link";
 import { UrlService } from "@src/utils/urlUtils";
 import { useRouter } from "next/router";
@@ -137,7 +137,7 @@ export const Header: React.FunctionComponent<Props> = ({ children, isMobileOpen,
 
             <Box sx={{ display: "flex", alignItems: "center" }}>
               <Box sx={{ marginLeft: "1rem" }}>
-                <KeplrWalletStatus />
+                <WalletStatus />
               </Box>
 
               <AccountMenu />
@@ -148,3 +148,4 @@ export const Header: React.FunctionComponent<Props> = ({ children, isMobileOpen,
     </AppBar>
   );
 };
+
diff --git a/deploy-web/src/components/layout/Layout.tsx b/deploy-web/src/components/layout/Layout.tsx
@@ -12,7 +12,7 @@ import { useSettings } from "@src/context/SettingsProvider";
 import { LinearLoadingSkeleton } from "../shared/LinearLoadingSkeleton";
 import { Header } from "./Header";
 import { NewsletterModal } from "../shared/NewsletterModal";
-import { useKeplr } from "@src/context/KeplrWalletProvider";
+import { useWallet } from "@src/context/WalletProvider";
 
 type Props = {
   isLoading?: boolean;
@@ -64,7 +64,7 @@ const LayoutApp: React.FunctionComponent<Props> = ({ children, isLoading, isUsin
   const [isNavOpen, setIsNavOpen] = useState(true);
   const [isMobileOpen, setIsMobileOpen] = useState(false);
   const { refreshNodeStatuses, isSettingsInit } = useSettings();
-  const { isWalletLoaded } = useKeplr();
+  const { isWalletLoaded } = useWallet();
   const smallScreen = useMediaQuery(theme.breakpoints.down("md"));
 
   useEffect(() => {
@@ -173,3 +173,4 @@ const Loading: React.FunctionComponent<{ text: string }> = ({ text }) => {
 };
 
 export default Layout;
+
diff --git a/deploy-web/src/components/layout/MobileSidebarUser.tsx b/deploy-web/src/components/layout/MobileSidebarUser.tsx
@@ -11,7 +11,7 @@ import Logout from "@mui/icons-material/Logout";
 import MenuBookIcon from "@mui/icons-material/MenuBook";
 import { useCustomUser } from "@src/hooks/useCustomUser";
 import { SidebarRouteButton } from "./SidebarRouteButton";
-import { KeplrWalletStatus } from "./KeplrWalletStatus";
+import { WalletStatus } from "./WalletStatus";
 import Settings from "@mui/icons-material/Settings";
 
 const useStyles = makeStyles()(theme => ({
@@ -41,7 +41,7 @@ export const MobileSidebarUser: React.FunctionComponent<Props> = ({}) => {
       <Divider />
 
       <Box sx={{ display: "flex", alignItems: "center", justifyContent: "center", padding: ".5rem" }}>
-        <KeplrWalletStatus />
+        <WalletStatus />
       </Box>
 
       <Divider />
@@ -114,3 +114,4 @@ export const MobileSidebarUser: React.FunctionComponent<Props> = ({}) => {
     </List>
   );
 };
+
diff --git a/...c/components/layout/KeplrWalletStatus.tsx → ...eb/src/components/layout/WalletStatus.tsx b/...c/components/layout/KeplrWalletStatus.tsx → ...eb/src/components/layout/WalletStatus.tsx
@@ -1,6 +1,6 @@
 import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet";
 import Box from "@mui/material/Box";
-import { useKeplr } from "@src/context/KeplrWalletProvider";
+import { useWallet } from "@src/context/WalletProvider";
 import React, { ReactNode, useState } from "react";
 import { makeStyles } from "tss-react/mui";
 import { udenomToDenom } from "@src/utils/mathHelpers";
@@ -35,10 +35,10 @@ const useStyles = makeStyles()(theme => ({
   }
 }));
 
-export const KeplrWalletStatus: React.FunctionComponent<Props> = ({}) => {
-  const popupState = usePopupState({ variant: "popover", popupId: "keplrMenu" });
+export const WalletStatus: React.FunctionComponent<Props> = ({}) => {
+  const popupState = usePopupState({ variant: "popover", popupId: "walletMenu" });
   const { classes } = useStyles();
-  const { isKeplrConnected, walletName, address, walletBalances, logout, isWalletLoaded } = useKeplr();
+  const { isWalletConnected, walletName, address, walletBalances, logout, isWalletLoaded } = useWallet();
   const [isShowingGrantModal, setIsShowingGrantModal] = useState(false);
   const walletBalance = useTotalWalletBalance();
 
@@ -57,7 +57,7 @@ export const KeplrWalletStatus: React.FunctionComponent<Props> = ({}) => {
   return (
     <>
       {isWalletLoaded ? (
-        isKeplrConnected ? (
+        isWalletConnected ? (
           <>
             <Box sx={{ display: "flex", alignItems: "center", paddingRight: ".5rem" }}>
               <Box sx={{ padding: "0 .5rem" }}>
@@ -132,3 +132,4 @@ export const KeplrWalletStatus: React.FunctionComponent<Props> = ({}) => {
     </>
   );
 };
+
diff --git a/deploy-web/src/components/layout/WelcomeModal.tsx b/deploy-web/src/components/layout/WelcomeModal.tsx
@@ -1,5 +1,4 @@
 import { Button, Dialog, DialogContent, DialogActions, Typography, Box, Paper, useTheme } from "@mui/material";
-import { useKeplr } from "@src/context/KeplrWalletProvider";
 // import { feePercent, maxFee } from "@src/utils/constants";
 import { FormattedNumber } from "react-intl";
 import { makeStyles } from "tss-react/mui";
@@ -56,3 +55,4 @@ export const WelcomeModal = ({ open, onClose }) => {
     </Dialog>
   );
 };
+
diff --git a/deploy-web/src/components/newDeploymentWizard/CreateLease.tsx b/deploy-web/src/components/newDeploymentWizard/CreateLease.tsx
@@ -23,7 +23,7 @@ import InfoIcon from "@mui/icons-material/Info";
 import { useLocalNotes } from "../../context/LocalNoteProvider";
 import { makeStyles } from "tss-react/mui";
 import { useRouter } from "next/router";
-import { useKeplr } from "@src/context/KeplrWalletProvider";
+import { useWallet } from "@src/context/WalletProvider";
 import { useBidList } from "@src/queries/useBidQuery";
 import { useDeploymentDetail } from "@src/queries/useDeploymentQuery";
 import { sendManifestToProvider } from "@src/utils/deploymentUtils";
@@ -82,7 +82,7 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
   const [selectedBids, setSelectedBids] = useState<{ [gseq: string]: BidDto }>({});
   const [filteredBids, setFilteredBids] = useState<Array<string>>([]);
   const [search, setSearch] = useState("");
-  const { address, signAndBroadcastTx } = useKeplr();
+  const { address, signAndBroadcastTx } = useWallet();
   const { localCert } = useCertificate();
   const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   const router = useRouter();
@@ -476,3 +476,4 @@ export const CreateLease: React.FunctionComponent<Props> = ({ dseq }) => {
     </>
   );
 };
+