feat(wallet): improve fiat payments ux

(#411)

.commitlintrc.json

@@ -18,7 +18,8 @@
         "config",
         "stats",
         "release",
-        "repo"
+        "repo",
+        "styling"
       ]
     ]
   }

apps/api/package.json

@@ -15,6 +15,7 @@
     "build:console": "webpack --config webpack.prod.js --entry ./src/console.ts --output-filename console.js",
     "console": "npm run build:console && node dist/console.js",
     "dev": "npm run start",
+    "dev-nodc": "npm run start",
     "format": "prettier --write ./*.{js,json} **/*.{ts,js,json}",
     "lint": "eslint .",
     "migrate": "node-pg-migrate",

apps/deploy-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akashnetwork/console-web",
-  "version": "2.17.0",
+  "version": "2.18.0",
   "private": true,
   "description": "Web UI to deploy on the Akash Network and view statistic about network usage.",
   "license": "Apache-2.0",
@@ -9,6 +9,7 @@
     "build": "npm run build-env-schemas && next build",
     "build-env-schemas": "tsc src/config/env-config.schema.ts --outDir . --skipLibCheck",
     "dev": "next",
+    "dev-nodc": "next",
     "format": "prettier --write ./*.{ts,js,json} **/*.{ts,tsx,js,json}",
     "lint": "eslint .",
     "start": "next start",

apps/deploy-web/src/components/deployments/DeploymentDetail.tsx

@@ -2,6 +2,7 @@
 
 import { createRef, useEffect, useState } from "react";
 import { Alert, Button, buttonVariants, Spinner, Tabs, TabsList, TabsTrigger } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
 import { ArrowLeft } from "iconoir-react";
 import Link from "next/link";
 import { useRouter, useSearchParams } from "next/navigation";
@@ -17,7 +18,6 @@ import { useProviderList } from "@src/queries/useProvidersQuery";
 import { RouteStep } from "@src/types/route-steps.type";
 import { AnalyticsEvents } from "@src/utils/analytics";
 import { getDeploymentLocalData } from "@src/utils/deploymentLocalDataUtils";
-import { cn } from "@src/utils/styleUtils";
 import { UrlService } from "@src/utils/urlUtils";
 import Layout from "../layout/Layout";
 import { Title } from "../shared/Title";

apps/deploy-web/src/components/deployments/DeploymentLeaseShell.tsx

@@ -1,7 +1,8 @@
 "use client";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { Alert, Button, Spinner } from "@akashnetwork/ui/components";
-import { OpenInWindow, OpenNewWindow } from "iconoir-react";
+import { cn } from "@akashnetwork/ui/utils";
+import { OpenInWindow } from "iconoir-react";
 import Link from "next/link";
 
 import ViewPanel from "@src/components/shared/ViewPanel";
@@ -14,7 +15,6 @@ import { useLeaseStatus } from "@src/queries/useLeaseQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
 import { LeaseDto } from "@src/types/deployment";
 import { LeaseShellCode } from "@src/types/shell";
-import { cn } from "@src/utils/styleUtils";
 import { UrlService } from "@src/utils/urlUtils";
 import { LeaseSelect } from "./LeaseSelect";
 import { ServiceSelect } from "./ServiceSelect";

apps/deploy-web/src/components/deployments/DeploymentList.tsx

@@ -3,6 +3,8 @@ import { useEffect, useState } from "react";
 import {
   Button,
   buttonVariants,
+  Card,
+  CardContent,
   CheckboxWithLabel,
   CustomPagination,
   Input,
@@ -13,6 +15,7 @@ import {
   TableHeader,
   TableRow
 } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
 import { Refresh, Rocket, Xmark } from "iconoir-react";
 import { useAtom } from "jotai";
 import Link from "next/link";
@@ -22,20 +25,22 @@ import { LinkTo } from "@src/components/shared/LinkTo";
 import { useLocalNotes } from "@src/context/LocalNoteProvider";
 import { useSettings } from "@src/context/SettingsProvider";
 import { useWallet } from "@src/context/WalletProvider";
+import { useCustomUser } from "@src/hooks/useCustomUser";
 import { useManagedDeploymentConfirm } from "@src/hooks/useManagedDeploymentConfirm";
 import { useDeploymentList } from "@src/queries/useDeploymentQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
 import sdlStore from "@src/store/sdlStore";
+import walletStore from "@src/store/walletStore";
 import { DeploymentDto, NamedDeploymentDto } from "@src/types/deployment";
-import { cn } from "@src/utils/styleUtils";
 import { TransactionMessageData } from "@src/utils/TransactionMessageData";
 import { UrlService } from "@src/utils/urlUtils";
 import Layout from "../layout/Layout";
 import { Title } from "../shared/Title";
+import { ConnectWalletButton } from "../wallet/ConnectWalletButton";
 import { DeploymentListRow } from "./DeploymentListRow";
 
 export const DeploymentList: React.FunctionComponent = () => {
-  const { address, signAndBroadcastTx, isWalletLoaded } = useWallet();
+  const { address, signAndBroadcastTx, isWalletLoaded, isWalletConnected } = useWallet();
   const { data: providers, isFetching: isLoadingProviders } = useProviderList();
   const { data: deployments, isFetching: isLoadingDeployments, refetch: getDeployments } = useDeploymentList(address, { enabled: false });
   const [pageIndex, setPageIndex] = useState(0);
@@ -56,6 +61,8 @@ export const DeploymentList: React.FunctionComponent = () => {
   const pageCount = Math.ceil(orderedDeployments.length / pageSize);
   const [, setDeploySdl] = useAtom(sdlStore.deploySdl);
   const { closeDeploymentConfirm } = useManagedDeploymentConfirm();
+  const [isSignedInWithTrial] = useAtom(walletStore.isSignedInWithTrial);
+  const { user } = useCustomUser();
 
   useEffect(() => {
     if (isWalletLoaded && isSettingsInit) {
@@ -144,14 +151,13 @@ export const DeploymentList: React.FunctionComponent = () => {
   return (
     <Layout isLoading={isLoadingDeployments || isLoadingProviders} isUsingSettings isUsingWallet>
       <NextSeo title="Deployments" />
-
-      <div className="flex flex-wrap items-center pb-2">
-        <Title className="font-bold" subTitle>
-          Deployments
-        </Title>
-
-        {deployments && (
+      {deployments && deployments.length > 0 && isWalletConnected && (
+        <div className="flex flex-wrap items-center pb-2">
           <>
+            <Title className="font-bold" subTitle>
+              Deployments
+            </Title>
+
             <div className="ml-4">
               <Button aria-label="back" onClick={() => getDeployments()} size="icon" variant="ghost">
                 <Refresh />
@@ -185,8 +191,8 @@ export const DeploymentList: React.FunctionComponent = () => {
               </Link>
             )}
           </>
-        )}
-      </div>
+        </div>
+      )}
 
       {((filteredDeployments?.length || 0) > 0 || !!search) && (
         <div className="flex items-center pb-4 pt-2">
@@ -210,14 +216,29 @@ export const DeploymentList: React.FunctionComponent = () => {
       )}
 
       {filteredDeployments?.length === 0 && !isLoadingDeployments && !search && (
-        <div className="p-16 text-center">
-          <h5 className="font-normal">{isFilteringActive ? "No active deployments" : "No deployments"}</h5>
-
-          <Link href={UrlService.newDeployment()} className={cn(buttonVariants({ variant: "default", size: "lg" }), "mt-4")} onClick={onDeployClick}>
-            Deploy
-            <Rocket className="ml-4 rotate-45 text-sm" />
-          </Link>
-        </div>
+        <Card>
+          <CardContent>
+            <div className="p-16 text-center">
+              <h3 className="mb-2 text-xl font-bold">{deployments && deployments?.length > 0 ? "No active deployments." : "No deployments yet."}</h3>
+
+              {isSignedInWithTrial && !user && <p className="text-sm">If you are expecting to see some, you may need to sign-in or connect a wallet</p>}
+
+              {isWalletConnected ? (
+                <Link href={UrlService.newDeployment()} className={cn(buttonVariants({ variant: "default", size: "lg" }), "mt-4")} onClick={onDeployClick}>
+                  Deploy
+                  <Rocket className="ml-4 rotate-45 text-sm" />
+                </Link>
+              ) : (
+                <div className="mt-8 flex items-center justify-center space-x-2">
+                  <ConnectWalletButton />
+                  <Link className={cn(buttonVariants({ variant: "outline" }))} href={UrlService.login()}>
+                    Sign in
+                  </Link>
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
       )}
 
       {(!filteredDeployments || filteredDeployments?.length === 0) && isLoadingDeployments && !search && (

apps/deploy-web/src/components/deployments/DeploymentLogs.tsx

@@ -2,6 +2,7 @@
 import { useEffect, useRef, useState } from "react";
 import useWebSocket from "react-use-websocket";
 import { Alert, Button, Checkbox, CheckboxWithLabel, DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, Spinner } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
 import { Monaco } from "@monaco-editor/react";
 import { useTheme as useMuiTheme } from "@mui/material/styles";
 import useMediaQuery from "@mui/material/useMediaQuery";
@@ -22,7 +23,6 @@ import { useLeaseStatus } from "@src/queries/useLeaseQuery";
 import { useProviderList } from "@src/queries/useProvidersQuery";
 import { LeaseDto } from "@src/types/deployment";
 import { AnalyticsEvents } from "@src/utils/analytics";
-import { cn } from "@src/utils/styleUtils";
 import { LeaseSelect } from "./LeaseSelect";
 
 export type LOGS_MODE = "logs" | "events";

apps/deploy-web/src/components/deployments/LeaseRow.tsx

@@ -1,6 +1,7 @@
 "use client";
 import React, { SetStateAction, useCallback, useEffect, useMemo, useState } from "react";
 import { Alert, Badge, Button, Card, CardContent, CardHeader, CustomTooltip, Snackbar, Spinner } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
 import { Check, Copy, InfoCircle, OpenInWindow } from "iconoir-react";
 import yaml from "js-yaml";
 import get from "lodash/get";
@@ -30,7 +31,6 @@ import { deploymentData } from "@src/utils/deploymentData";
 import { getGpusFromAttributes, sendManifestToProvider } from "@src/utils/deploymentUtils";
 import { udenomToDenom } from "@src/utils/mathHelpers";
 import { sshVmImages } from "@src/utils/sdl/data";
-import { cn } from "@src/utils/styleUtils";
 import { UrlService } from "@src/utils/urlUtils";
 import { ManifestErrorSnackbar } from "../shared/ManifestErrorSnackbar";
 

apps/deploy-web/src/components/get-started/GetStartedStepper.tsx

@@ -2,23 +2,26 @@
 import React, { useEffect, useState } from "react";
 import { MdRestartAlt } from "react-icons/md";
 import { Button, buttonVariants, CustomTooltip } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
 import Step from "@mui/material/Step";
 import StepContent from "@mui/material/StepContent";
 import StepLabel from "@mui/material/StepLabel";
 import Stepper from "@mui/material/Stepper";
 import { Check, HandCard, Rocket, WarningCircle, XmarkCircleSolid } from "iconoir-react";
+import { useAtom } from "jotai";
 import Link from "next/link";
 
 import { LoginRequiredLink } from "@src/components/user/LoginRequiredLink";
 import { ConnectManagedWalletButton } from "@src/components/wallet/ConnectManagedWalletButton";
 import { browserEnvConfig } from "@src/config/browser-env.config";
 import { useChainParam } from "@src/context/ChainParamProvider";
 import { useWallet } from "@src/context/WalletProvider";
+import { useCustomUser } from "@src/hooks/useCustomUser";
 import { useWalletBalance } from "@src/hooks/useWalletBalance";
+import walletStore from "@src/store/walletStore";
 import { RouteStep } from "@src/types/route-steps.type";
 import { udenomToDenom } from "@src/utils/mathHelpers";
 import { uaktToAKT } from "@src/utils/priceUtils";
-import { cn } from "@src/utils/styleUtils";
 import { UrlService } from "@src/utils/urlUtils";
 import LiquidityModal from "../liquidity-modal";
 import { ExternalLink } from "../shared/ExternalLink";
@@ -32,6 +35,8 @@ export const GetStartedStepper: React.FunctionComponent = () => {
   const { minDeposit } = useChainParam();
   const aktBalance = walletBalance ? uaktToAKT(walletBalance.balanceUAKT) : 0;
   const usdcBalance = walletBalance ? udenomToDenom(walletBalance.balanceUUSDC) : 0;
+  const [isSignedInWithTrial] = useAtom(walletStore.isSignedInWithTrial);
+  const { user } = useCustomUser();
 
   useEffect(() => {
     const getStartedStep = localStorage.getItem("getStartedStep");
@@ -101,10 +106,10 @@ export const GetStartedStepper: React.FunctionComponent = () => {
               <LoginRequiredLink
                 className={cn("hover:no-underline", buttonVariants({ variant: "outline", className: "mr-2 border-primary" }))}
                 href="/api/proxy/v1/checkout"
-                message="Sign In or Sign Up to top up your balance"
+                message="Sign In or Sign Up to add funds to your balance"
               >
                 <HandCard className="text-xs text-accent-foreground" />
-                <span className="m-2 whitespace-nowrap text-accent-foreground">Top Up Balance</span>
+                <span className="m-2 whitespace-nowrap text-accent-foreground">Add Funds</span>
               </LoginRequiredLink>
             )}
             <Button variant="default" onClick={handleNext}>
@@ -138,8 +143,16 @@ export const GetStartedStepper: React.FunctionComponent = () => {
                 <span>Billing is not set up</span>
               </div>
 
-              {browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED && <ConnectManagedWalletButton className="mr-2 w-full md:w-auto" />}
-              <ConnectWalletButton />
+              <div className="flex items-center gap-2">
+                {browserEnvConfig.NEXT_PUBLIC_BILLING_ENABLED && !isSignedInWithTrial && <ConnectManagedWalletButton className="mr-2 w-full md:w-auto" />}
+                <ConnectWalletButton />
+
+                {isSignedInWithTrial && !user && (
+                  <Link className={cn(buttonVariants({ variant: "outline" }))} href={UrlService.login()}>
+                    Sign in
+                  </Link>
+                )}
+              </div>
             </div>
           )}
 

apps/deploy-web/src/components/get-started/NoKeplrSection.tsx

@@ -1,10 +1,10 @@
 "use client";
 import React, { useState } from "react";
 import { Alert, buttonVariants, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
 import { NavArrowLeft } from "iconoir-react";
 import Link from "next/link";
 
-import { cn } from "@src/utils/styleUtils";
 import { UrlService } from "@src/utils/urlUtils";
 import { ExternalLink } from "../shared/ExternalLink";
 import { LinkTo } from "../shared/LinkTo";

apps/deploy-web/src/components/get-started/NoWalletSection.tsx

@@ -1,10 +1,10 @@
 "use client";
 import React, { useState } from "react";
 import { Alert, buttonVariants, Collapsible, CollapsibleContent, CollapsibleTrigger } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
 import { NavArrowLeft } from "iconoir-react";
 import Link from "next/link";
 
-import { cn } from "@src/utils/styleUtils";
 import { UrlService } from "@src/utils/urlUtils";
 import { ExternalLink } from "../shared/ExternalLink";
 import { LinkTo } from "../shared/LinkTo";

apps/deploy-web/src/components/get-started/WithKeplrSection.tsx

@@ -1,10 +1,10 @@
 "use client";
 import React from "react";
 import { buttonVariants } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
 import { NavArrowLeft } from "iconoir-react";
 import Link from "next/link";
 
-import { cn } from "@src/utils/styleUtils";
 import { UrlService } from "@src/utils/urlUtils";
 import { ExternalLink } from "../shared/ExternalLink";
 

apps/deploy-web/src/components/home/HomeContainer.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { useEffect, useState } from "react";
 import React from "react";
-import { Spinner } from "@akashnetwork/ui/components";
 import dynamic from "next/dynamic";
 
 import { Footer } from "@src/components/layout/Footer";
@@ -72,18 +71,14 @@ export function HomeContainer() {
         <div className="mb-4">
           <WelcomePanel />
         </div>
-        {isSettingsInit && isWalletLoaded ? (
+        {isSettingsInit && !!address && (
           <YourAccount
             isLoadingBalances={isLoadingBalances}
             walletBalance={walletBalance}
             activeDeployments={activeDeployments}
             leases={leases}
             providers={providers}
           />
-        ) : (
-          <div className="flex justify-center p-8">
-            <Spinner size="large" />
-          </div>
         )}
       </div>
 

apps/deploy-web/src/components/home/WelcomePanel.tsx

@@ -12,10 +12,10 @@ import {
   CollapsibleContent,
   CollapsibleTrigger
 } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
 import { Learning, NavArrowDown, Rocket, SearchEngine } from "iconoir-react";
 import Link from "next/link";
 
-import { cn } from "@src/utils/styleUtils";
 import { UrlService } from "@src/utils/urlUtils";
 
 export const WelcomePanel: React.FC = () => {

apps/deploy-web/src/components/home/YourAccount.tsx

@@ -2,6 +2,7 @@
 import React, { useEffect, useState } from "react";
 import { FormattedNumber, FormattedPlural } from "react-intl";
 import { Badge, buttonVariants, Card, CardContent, CardHeader, CardTitle, Spinner } from "@akashnetwork/ui/components";
+import { cn } from "@akashnetwork/ui/utils";
 import { ResponsivePie } from "@nivo/pie";
 import { HandCard, Rocket } from "iconoir-react";
 import { useAtom } from "jotai";
@@ -22,7 +23,6 @@ import { ApiProviderList } from "@src/types/provider";
 import { customColors } from "@src/utils/colors";
 import { roundDecimal, udenomToDenom } from "@src/utils/mathHelpers";
 import { getAvgCostPerMonth, uaktToAKT } from "@src/utils/priceUtils";
-import { cn } from "@src/utils/styleUtils";
 import { bytesToShrink } from "@src/utils/unitUtils";
 import { UrlService } from "@src/utils/urlUtils";
 import { ConnectWallet } from "../shared/ConnectWallet";
@@ -232,9 +232,9 @@ export const YourAccount: React.FunctionComponent<Props> = ({ isLoadingBalances,
                 <LoginRequiredLink
                   className={cn("mt-4", buttonVariants({ variant: "default" }))}
                   href="/api/proxy/v1/checkout"
-                  message="Sign In or Sign Up to top up your balance"
+                  message="Sign In or Sign Up to add funds to your balance"
                 >
-                  Top up balance
+                  Add Funds
                   <HandCard className="ml-4 rotate-45 text-sm" />
                 </LoginRequiredLink>
               )}