Skip to content

Commit

Permalink
feat(billing): adjust some UI features for managed wallet users
Browse files Browse the repository at this point in the history 
refs #247
  • Loading branch information
@ygrishajev
ygrishajev committed Aug 16, 2024
1 parent 49c1db9 commit 2eab2e1
Show file tree
Hide file tree
Showing 6 changed files with 168 additions and 134 deletions.
2 changes: 1 addition & 1 deletion apps/deploy-web/src/components/deployments/DeploymentDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export function DeploymentDetail({ dseq }: React.PropsWithChildren<{ dseq: strin
refetch: getDeploymentDetail,
error: deploymentError
} = useDeploymentDetail(address, dseq, {
enabled: false,
enabled: !deploymentManifest,
onSuccess: _deploymentDetail => {
if (_deploymentDetail) {
getLeases();
Expand Down
73 changes: 51 additions & 22 deletions apps/deploy-web/src/components/get-started/GetStartedStepper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import { Check, Rocket, WarningCircle, XmarkCircleSolid } from "iconoir-react";
import dynamic from "next/dynamic";
import Link from "next/link";

import { ConnectManagedWalletButton } from "@src/components/wallet/ConnectManagedWalletButton";
import { envConfig } from "@src/config/env.config";
import { useChainParam } from "@src/context/ChainParamProvider";
import { useWallet } from "@src/context/WalletProvider";
import { RouteStepKeys } from "@src/utils/constants";
Expand Down Expand Up @@ -45,7 +47,7 @@ const LiquidityModal = dynamic(

export const GetStartedStepper: React.FunctionComponent = () => {
const [activeStep, setActiveStep] = useState(0);
const { isWalletConnected, walletBalances, address, refreshBalances } = useWallet();
const { isWalletConnected, walletBalances, address, refreshBalances, isManaged: isManagedWallet, isTrialing } = useWallet();
const { minDeposit } = useChainParam();
const aktBalance = walletBalances ? uaktToAKT(walletBalances.uakt) : 0;
const usdcBalance = walletBalances ? udenomToDenom(walletBalances.usdc) : 0;
Expand Down Expand Up @@ -88,41 +90,57 @@ export const GetStartedStepper: React.FunctionComponent = () => {
onClick={() => (activeStep > 0 ? onStepClick(0) : null)}
classes={{ label: cn("text-xl tracking-tight", { ["cursor-pointer hover:text-primary"]: activeStep > 0, ["!font-bold"]: activeStep === 0 }) }}
>
Wallet
Billing
</StepLabel>

<StepContent>
<p className="text-muted-foreground">
You need at least {minDeposit.akt} AKT or {minDeposit.usdc} USDC in your wallet to deploy on Akash. If you don't have {minDeposit.akt} AKT or{" "}
{minDeposit.usdc} USDC, you can switch to the sandbox or ask help in our <ExternalLink href="https://discord.gg/akash" text="Discord" />.
</p>
{!isWalletConnected && (
<p className="text-muted-foreground">
In case you'd like to use a credit card for you billing, you may choose to start off with a trial and add you billing information later.
</p>
)}

{!isManagedWallet && (
<p className="text-muted-foreground">
{isWalletConnected ? "You need " : "Otherwise you need to connect your wallet and have "} at least {minDeposit.akt} AKT or {minDeposit.usdc} USDC
in {isWalletConnected ? "your wallet" : "it"} to deploy on Akash. If you don't have {minDeposit.akt} AKT or {minDeposit.usdc} USDC, you can switch
to the sandbox or ask help in our <ExternalLink href="https://discord.gg/akash" text="Discord" />.
</p>
)}

<div className="my-4 flex items-center space-x-4">
<Button variant="default" onClick={handleNext}>
Next
</Button>
<Link className={cn(buttonVariants({ variant: "text" }))} href={UrlService.getStartedWallet()}>
Learn how
</Link>
{!isManagedWallet && (
<Link className={cn(buttonVariants({ variant: "text" }))} href={UrlService.getStartedWallet()}>
Learn how
</Link>
)}
</div>

<div className="my-4 flex items-center space-x-2">
<Check className="text-green-600" />
<span>Wallet is installed</span>
</div>
{isWalletConnected && isTrialing && (
<div className="my-4 flex items-center space-x-2">
<Check className="text-green-600" />
<span>Trialing</span>
</div>
)}

{isWalletConnected ? (
{isWalletConnected && !isTrialing && (
<div className="my-4 flex items-center space-x-2">
<Check className="text-green-600" />
<span>Wallet is connected</span>
<span>Billing is set up</span>
</div>
) : (
)}

{!isWalletConnected && (
<div>
<div className="my-4 flex items-center space-x-2">
<XmarkCircleSolid className="text-destructive" />
<span>Wallet is not connected</span>
<span>Billing is not set up</span>
</div>

{envConfig.NEXT_PUBLIC_BILLING_ENABLED && <ConnectManagedWalletButton className="mr-2 w-full md:w-auto" />}
<ConnectWalletButton />
</div>
)}
Expand All @@ -143,10 +161,16 @@ export const GetStartedStepper: React.FunctionComponent = () => {
<WarningCircle className="text-warning" />
</CustomTooltip>
)}
<span>
You have <strong>{aktBalance}</strong> AKT and <strong>{usdcBalance}</strong> USDC
</span>
<LiquidityModal address={address} aktBalance={aktBalance} refreshBalances={refreshBalances} />
{isManagedWallet ? (
<span>
You have <strong>${usdcBalance}</strong>
</span>
) : (
<span>
You have <strong>{aktBalance}</strong> AKT and <strong>{usdcBalance}</strong> USDC
</span>
)}
{!isManagedWallet && <LiquidityModal address={address} aktBalance={aktBalance} refreshBalances={refreshBalances} />}
</div>
)}
</StepContent>
Expand All @@ -156,7 +180,12 @@ export const GetStartedStepper: React.FunctionComponent = () => {
<StepLabel
StepIconComponent={QontoStepIcon}
onClick={() => onStepClick(1)}
classes={{ label: cn("text-xl tracking-tight", { ["cursor-pointer hover:text-primary"]: activeStep > 1, ["!font-bold"]: activeStep === 1 }) }}
classes={{
label: cn("text-xl tracking-tight", {
["cursor-pointer hover:text-primary"]: activeStep > 1,
["!font-bold"]: activeStep === 1
})
}}
>
Docker container
</StepLabel>
Expand Down
35 changes: 21 additions & 14 deletions apps/deploy-web/src/components/home/YourAccount.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { useAtom } from "jotai";
import Link from "next/link";
import { useTheme } from "next-themes";

import { envConfig } from "@src/config/env.config";
import { usePricing } from "@src/context/PricingProvider";
import { useWallet } from "@src/context/WalletProvider";
import { useUsdcDenom } from "@src/hooks/useDenom";
Expand Down Expand Up @@ -53,7 +54,7 @@ type Props = {
export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadingBalances, activeDeployments, leases, providers }) => {
const { resolvedTheme } = useTheme();
const tw = useTailwind();
const { address } = useWallet();
const { address, isManaged: isManagedWallet } = useWallet();
const usdcIbcDenom = useUsdcDenom();
const [selectedDataId, setSelectedDataId] = useState<string | null>(null);
const [costPerMonth, setCostPerMonth] = useState<number | null>(null);
Expand Down Expand Up @@ -125,8 +126,8 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
}
];
};
const aktData = balances ? getAktData(balances, escrowUAktSum) : [];
const usdcData = balances ? getUsdcData(balances, escrowUsdcSum) : [];
const aktData = balances && (!isManagedWallet || envConfig.NEXT_PUBLIC_MANAGED_WALLET_DENOM === "uakt") ? getAktData(balances, escrowUAktSum) : [];
const usdcData = balances && (!isManagedWallet || envConfig.NEXT_PUBLIC_MANAGED_WALLET_DENOM === usdcIbcDenom) ? getUsdcData(balances, escrowUsdcSum) : [];
const filteredAktData = aktData.filter(x => x.value);
const filteredUsdcData = usdcData.filter(x => x.value);
const allData = [...aktData, ...usdcData];
Expand Down Expand Up @@ -256,7 +257,7 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
{hasBalance && (
<div>
{filteredAktData.length > 0 && <BalancePie data={filteredAktData} getColor={_getColor} label="AKT" />}
{filteredUsdcData.length > 0 && <BalancePie data={filteredUsdcData} getColor={_getColor} label="USDC" />}
{filteredUsdcData.length > 0 && <BalancePie data={filteredUsdcData} getColor={_getColor} label={isManagedWallet ? "$" : "USDC"} />}
</div>
)}

Expand All @@ -271,9 +272,11 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
>
<div className="h-4 w-4 rounded-lg" style={{ backgroundColor: balance.color }} />
<div className="ml-4 w-[90px] font-bold">{balance.label}</div>
<div className="ml-4 w-[100px]">
{udenomToDenom(balance.value, 2)} {balance.denomLabel}
</div>
{!isManagedWallet && (
<div className="ml-4 w-[100px]">
{udenomToDenom(balance.value, 2)} {balance.denomLabel}
</div>
)}

<div>
<PriceValue denom={balance.denom} value={udenomToDenom(balance.value, 6)} />
Expand All @@ -284,9 +287,11 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
<div className="mb-2 flex items-center text-sm leading-5 transition-opacity duration-200 ease-in-out">
<div className="h-4 w-4 rounded-lg" />
<div className="ml-4 w-[90px] font-bold">Total</div>
<div className="ml-4 w-[100px]">
<strong>{uaktToAKT(totalUAkt, 2)} AKT</strong>
</div>
{!isManagedWallet && (
<div className="ml-4 w-[100px]">
<strong>{uaktToAKT(totalUAkt, 2)} AKT</strong>
</div>
)}

<div>
<strong>
Expand All @@ -297,9 +302,11 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
<div className="mb-2 flex items-center text-sm leading-5 transition-opacity duration-200 ease-in-out">
<div className="h-4 w-4 rounded-lg" />
<div className="ml-4 w-[90px] font-bold"></div>
<div className="ml-4 w-[100px]">
<strong>{udenomToDenom(totalUsdc, 2)} USDC</strong>
</div>
{!isManagedWallet && (
<div className="ml-4 w-[100px]">
<strong>{udenomToDenom(totalUsdc, 2)} USDC</strong>
</div>
)}

<div>
<strong>
Expand All @@ -311,7 +318,7 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
<div className="mb-2 mt-2 flex items-center border-t border-muted-foreground pt-2 text-sm leading-5 transition-opacity duration-200 ease-in-out">
<div className="h-4 w-4 rounded-lg" />
<div className="ml-4 w-[90px] font-bold"></div>
<div className="ml-4 w-[100px]"></div>
{!isManagedWallet && <div className="ml-4 w-[100px]"></div>}

<div>
<strong>
Expand Down
6 changes: 3 additions & 3 deletions apps/deploy-web/src/components/user/UserProfileLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@ import { UrlService } from "@src/utils/urlUtils";

type UserProfileTab = "templates" | "favorites" | "address-book" | "settings";
type Props = {
username: string;
bio: string;
username?: string;
bio?: string;
children?: ReactNode;
page: UserProfileTab;
};

export const UserProfileLayout: React.FunctionComponent<Props> = ({ page, children, username, bio }) => {
export const UserProfileLayout: React.FunctionComponent<Props> = ({ page, children, username = "", bio }) => {
const router = useRouter();
const { user } = useCustomUser();

Expand Down
Loading

0 comments on commit 2eab2e1

Please sign in to comment.