Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(console): balance authz deployments #359

Merged
merged 13 commits into from
Sep 10, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { NextSeo } from "next-seo";

import { Fieldset } from "@src/components/shared/Fieldset";
import { useWallet } from "@src/context/WalletProvider";
import { useAllowance } from "@src/hooks/useAllowance";
import { useAllowancesIssued, useGranteeGrants, useGranterGrants } from "@src/queries/useGrantsQuery";
import { AllowanceType, GrantType } from "@src/types/grant";
import { averageBlockTime } from "@src/utils/priceUtils";
Expand All @@ -20,7 +21,6 @@ import { DeploymentGrantTable } from "./DeploymentGrantTable";
import { FeeGrantTable } from "./FeeGrantTable";
import { GranteeRow } from "./GranteeRow";
import { GrantModal } from "./GrantModal";
import { useAllowance } from "@src/hooks/useAllowance";

type RefreshingType = "granterGrants" | "granteeGrants" | "allowancesIssued" | "allowancesGranted" | null;
const defaultRefetchInterval = 30 * 1000;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import { UAKT_DENOM } from "@src/config/denom.config";
import { useSettings } from "@src/context/SettingsProvider";
import { useWallet } from "@src/context/WalletProvider";
import { useUsdcDenom } from "@src/hooks/useDenom";
import { useDenomData } from "@src/hooks/useWalletBalance";
import { useDenomData, useWalletBalance } from "@src/hooks/useWalletBalance";
import { useGranteeGrants } from "@src/queries/useGrantsQuery";
import { AnalyticsEvents } from "@src/utils/analytics";
import { denomToUdenom, udenomToDenom } from "@src/utils/mathHelpers";
Expand Down Expand Up @@ -73,7 +73,8 @@ export const DeploymentDepositModal: React.FunctionComponent<Props> = ({ handleC
const { enqueueSnackbar } = useSnackbar();
const [error, setError] = useState("");
const [isCheckingDepositor, setIsCheckingDepositor] = useState(false);
const { walletBalances, address } = useWallet();
const { address } = useWallet();
const { balance: walletBalance } = useWalletBalance();
const { data: granteeGrants } = useGranteeGrants(address);
const depositData = useDenomData(denom);
const form = useForm<z.infer<typeof formSchema>>({
Expand Down Expand Up @@ -167,8 +168,8 @@ export const DeploymentDepositModal: React.FunctionComponent<Props> = ({ handleC
setError("");
clearErrors();
const deposit = denomToUdenom(amount);
const uaktBalance = walletBalances?.uakt || 0;
const usdcBalance = walletBalances?.usdc || 0;
const uaktBalance = walletBalance?.balanceUAKT || 0;
baktun14 marked this conversation as resolved.
Show resolved Hide resolved
const usdcBalance = walletBalance?.balanceUUSDC || 0;

if (!disableMin && amount < (depositData?.min || 0)) {
setError(`Deposit amount must be greater or equal than ${depositData?.min}.`);
Expand Down Expand Up @@ -214,7 +215,7 @@ export const DeploymentDepositModal: React.FunctionComponent<Props> = ({ handleC
color: "secondary",
variant: "default",
side: "right",
disabled: !amount || isCheckingDepositor || (useDepositor && validGrants.length === 0),
disabled: !amount || isCheckingDepositor || (useDepositor && validGrants.length === 0) || !walletBalance,
isLoading: isCheckingDepositor,
onClick: onDepositClick
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import { ConnectManagedWalletButton } from "@src/components/wallet/ConnectManage
import { browserEnvConfig } from "@src/config/browser-env.config";
import { useChainParam } from "@src/context/ChainParamProvider";
import { useWallet } from "@src/context/WalletProvider";
import { useWalletBalance } from "@src/hooks/useWalletBalance";
import { RouteStep } from "@src/types/route-steps.type";
import { udenomToDenom } from "@src/utils/mathHelpers";
import { uaktToAKT } from "@src/utils/priceUtils";
Expand Down Expand Up @@ -48,10 +49,11 @@ const LiquidityModal = dynamic(

export const GetStartedStepper: React.FunctionComponent = () => {
const [activeStep, setActiveStep] = useState(0);
const { isWalletConnected, walletBalances, address, refreshBalances, isManaged: isManagedWallet, isTrialing } = useWallet();
const { isWalletConnected, address, isManaged: isManagedWallet, isTrialing } = useWallet();
const { refetch: refetchBalances, balance: walletBalance } = useWalletBalance();
const { minDeposit } = useChainParam();
const aktBalance = walletBalances ? uaktToAKT(walletBalances.uakt) : 0;
const usdcBalance = walletBalances ? udenomToDenom(walletBalances.usdc) : 0;
const aktBalance = walletBalance ? uaktToAKT(walletBalance.balanceUAKT) : 0;
const usdcBalance = walletBalance ? udenomToDenom(walletBalance.balanceUUSDC) : 0;

useEffect(() => {
const getStartedStep = localStorage.getItem("getStartedStep");
Expand Down Expand Up @@ -163,7 +165,7 @@ export const GetStartedStepper: React.FunctionComponent = () => {
</div>
)}

{walletBalances && (
{walletBalance && (
<div className="my-4 flex items-center space-x-2">
{aktBalance >= minDeposit.akt || usdcBalance >= minDeposit.usdc ? (
<Check className="text-green-600" />
Expand All @@ -188,7 +190,7 @@ export const GetStartedStepper: React.FunctionComponent = () => {
You have <strong>{aktBalance}</strong> AKT and <strong>{usdcBalance}</strong> USDC
</span>
)}
{!isManagedWallet && <LiquidityModal address={address} aktBalance={aktBalance} refreshBalances={refreshBalances} />}
{!isManagedWallet && <LiquidityModal address={address} aktBalance={aktBalance} refreshBalances={refetchBalances} />}
</div>
)}
</StepContent>
Expand Down
13 changes: 9 additions & 4 deletions apps/deploy-web/src/components/home/HomeContainer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { Footer } from "@src/components/layout/Footer";
import { useLocalNotes } from "@src/context/LocalNoteProvider";
import { useSettings } from "@src/context/SettingsProvider";
import { useWallet } from "@src/context/WalletProvider";
import { useBalances } from "@src/queries/useBalancesQuery";
import { useWalletBalance } from "@src/hooks/useWalletBalance";
import { useDeploymentList } from "@src/queries/useDeploymentQuery";
import { useAllLeases } from "@src/queries/useLeaseQuery";
import { useProviderList } from "@src/queries/useProvidersQuery";
Expand Down Expand Up @@ -45,13 +45,12 @@ export function HomeContainer() {
});
const { settings, isSettingsInit } = useSettings();
const { apiEndpoint } = settings;
const { data: balances, isFetching: isLoadingBalances, refetch: getBalances } = useBalances(address, { enabled: false });
const { balance: walletBalance, isLoading: isLoadingBalances } = useWalletBalance();
const { data: providers, isFetching: isLoadingProviders } = useProviderList();
const { data: leases, isFetching: isLoadingLeases, refetch: getLeases } = useAllLeases(address, { enabled: false });

useEffect(() => {
if (address && isSettingsInit) {
getBalances();
getLeases();
}

Expand All @@ -74,7 +73,13 @@ export function HomeContainer() {
<WelcomePanel />
</div>
{isSettingsInit && isWalletLoaded ? (
<YourAccount isLoadingBalances={isLoadingBalances} balances={balances} activeDeployments={activeDeployments} leases={leases} providers={providers} />
<YourAccount
isLoadingBalances={isLoadingBalances}
walletBalance={walletBalance}
activeDeployments={activeDeployments}
leases={leases}
providers={providers}
/>
) : (
<div className="flex justify-center p-8">
<Spinner size="large" />
Expand Down
124 changes: 46 additions & 78 deletions apps/deploy-web/src/components/home/YourAccount.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ import { usePricing } from "@src/context/PricingProvider";
import { useWallet } from "@src/context/WalletProvider";
import { useUsdcDenom } from "@src/hooks/useDenom";
import useTailwind from "@src/hooks/useTailwind";
import { WalletBalance, useWalletBalance } from "@src/hooks/useWalletBalance";
import sdlStore from "@src/store/sdlStore";
import { Balances } from "@src/types";
import { DeploymentDto, LeaseDto } from "@src/types/deployment";
import { ApiProviderList } from "@src/types/provider";
import { customColors } from "@src/utils/colors";
Expand All @@ -30,47 +30,23 @@ import { LeaseSpecDetail } from "../shared/LeaseSpecDetail";
import { PriceValue } from "../shared/PriceValue";
import { StatusPill } from "../shared/StatusPill";

// const LiquidityModal = dynamic(() => import("../liquidity-modal"), {
// ssr: false,
// loading: props => {
// if (props.isLoading) {
// return (
// <Button variant="default" disabled size="sm">
// <span>Get More</span>
// <Spinner size="small" className="ml-2" />
// </Button>
// );
// } else return null;
// }
// });

type Props = {
balances: Balances | undefined;
isLoadingBalances: boolean;
activeDeployments: Array<DeploymentDto>;
leases: Array<LeaseDto> | null | undefined;
providers: Array<ApiProviderList> | undefined;
walletBalance: WalletBalance | null;
};

export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadingBalances, activeDeployments, leases, providers }) => {
export const YourAccount: React.FunctionComponent<Props> = ({ isLoadingBalances, walletBalance, activeDeployments, leases, providers }) => {
const { resolvedTheme } = useTheme();
const tw = useTailwind();
const { address, isManaged: isManagedWallet, creditAmount: managedWalletCreditAmount = 0 } = useWallet();
const { address, isManaged: isManagedWallet } = useWallet();
const usdcIbcDenom = useUsdcDenom();
const [selectedDataId, setSelectedDataId] = useState<string | null>(null);
const [costPerMonth, setCostPerMonth] = useState<number | null>(null);
const [userProviders, setUserProviders] = useState<{ owner: string; name: string }[] | null>(null);
const escrowUAktSum = activeDeployments
.filter(x => x.escrowAccount.balance.denom === UAKT_DENOM)
.map(x => x.escrowBalance)
.reduce((a, b) => a + b, 0);
const escrowUsdcSum = activeDeployments
.filter(x => x.escrowAccount.balance.denom === usdcIbcDenom)
.map(x => x.escrowBalance)
.reduce((a, b) => a + b, 0);
const totalUAkt = balances ? balances.balance + escrowUAktSum : 0;
const totalUsdc = balances ? balances.balanceUsdc + escrowUsdcSum : 0;
const hasBalance = balances && totalUAkt !== 0;
const hasBalance = !!walletBalance && walletBalance.totalUsd > 0;
const totalCpu = activeDeployments.map(d => d.cpuAmount).reduce((a, b) => a + b, 0);
const totalGpu = activeDeployments.map(d => d.gpuAmount).reduce((a = 0, b = 0) => a + b, 0);
const totalMemory = activeDeployments.map(d => d.memoryAmount).reduce((a, b) => a + b, 0);
Expand All @@ -87,52 +63,48 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
deployment_usdc: tw.theme.colors.green[600]
};

const getAktData = (balances: Balances, escrowUAktSum: number) => {
const getAktData = (balances: WalletBalance) => {
return [
{
id: "balance_akt",
label: "Balance",
denom: UAKT_DENOM,
denomLabel: "AKT",
value:
isManagedWallet && browserEnvConfig.NEXT_PUBLIC_MANAGED_WALLET_DENOM === "uakt" ? balances.balance + managedWalletCreditAmount : balances.balance,
value: balances.balanceUAKT,
color: colors.balance_akt
},
{
id: "deployment_akt",
label: "Deployment",
label: "Deployments",
denom: UAKT_DENOM,
denomLabel: "AKT",
value: escrowUAktSum,
value: balances.totalDeploymentEscrowUAKT,
color: colors.deployment_akt
}
];
};
const getUsdcData = (balances: Balances, escrowUsdcSum: number) => {
const getUsdcData = (balances: WalletBalance) => {
return [
{
id: "balance_usdc",
label: "Balance",
denom: usdcIbcDenom,
denomLabel: "USDC",
value:
isManagedWallet && browserEnvConfig.NEXT_PUBLIC_MANAGED_WALLET_DENOM === "usdc"
? balances.balanceUsdc + managedWalletCreditAmount
: balances.balanceUsdc,
value: balances.balanceUUSDC,
color: colors.balance_usdc
},
{
id: "deployment_usdc",
label: "Deployment",
label: "Deployments",
denom: usdcIbcDenom,
denomLabel: "USDC",
value: escrowUsdcSum,
value: balances.totalDeploymentEscrowUUSDC,
color: colors.deployment_usdc
}
];
};
const aktData = balances && (!isManagedWallet || browserEnvConfig.NEXT_PUBLIC_MANAGED_WALLET_DENOM === "uakt") ? getAktData(balances, escrowUAktSum) : [];
const usdcData = balances && (!isManagedWallet || browserEnvConfig.NEXT_PUBLIC_MANAGED_WALLET_DENOM === "usdc") ? getUsdcData(balances, escrowUsdcSum) : [];
const aktData = walletBalance && (!isManagedWallet || browserEnvConfig.NEXT_PUBLIC_MANAGED_WALLET_DENOM === "uakt") ? getAktData(walletBalance) : [];
const usdcData = walletBalance && (!isManagedWallet || browserEnvConfig.NEXT_PUBLIC_MANAGED_WALLET_DENOM === "usdc") ? getUsdcData(walletBalance) : [];
const filteredAktData = aktData.filter(x => x.value);
const filteredUsdcData = usdcData.filter(x => x.value);
const allData = [...aktData, ...usdcData];
Expand Down Expand Up @@ -189,7 +161,7 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
<CardContent>
{address && (
<div className="flex flex-col justify-between lg:flex-row">
{isLoadingBalances && !balances && (
{isLoadingBalances && !walletBalance && (
<div className="flex h-[200px] basis-[220px] items-center justify-center">
<Spinner size="large" />
</div>
Expand Down Expand Up @@ -269,14 +241,14 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
</div>

<div className="mt-4 flex basis-3/5 flex-col items-center md:mt-0 md:flex-row">
{hasBalance && (
{!!hasBalance && (
<div>
{filteredAktData.length > 0 && <BalancePie data={filteredAktData} getColor={_getColor} label="AKT" />}
{filteredUsdcData.length > 0 && <BalancePie data={filteredUsdcData} getColor={_getColor} label={isManagedWallet ? "$" : "USDC"} />}
</div>
)}

{balances && (
{walletBalance && (
<div className={cn({ ["p-4"]: !hasBalance })} onMouseLeave={() => setSelectedDataId(null)}>
{allData.map((balance, i) => (
<div
Expand All @@ -299,36 +271,36 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
</div>
))}

<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>
{!isManagedWallet && (
<div className="ml-4 w-[100px]">
<strong>{uaktToAKT(totalUAkt, 2)} AKT</strong>
</div>
)}
{!isManagedWallet && (
<>
<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(walletBalance.totalUAKT, 2)} AKT</strong>
</div>

<div>
<strong>
<PriceValue denom={UAKT_DENOM} value={uaktToAKT(totalUAkt, 6)} />
</strong>
</div>
</div>
<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>
{!isManagedWallet && (
<div className="ml-4 w-[100px]">
<strong>{udenomToDenom(totalUsdc, 2)} USDC</strong>
<div>
<strong>
<PriceValue denom={UAKT_DENOM} value={uaktToAKT(walletBalance.totalUAKT) + uaktToAKT(walletBalance.totalDeploymentGrantsUAKT)} />
</strong>
</div>
</div>
)}
<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>{walletBalance.totalUUSDC} USDC</strong>
</div>

<div>
<strong>
<PriceValue denom={usdcIbcDenom} value={udenomToDenom(totalUsdc, 6)} />
</strong>
</div>
</div>
<div>
<strong>
<PriceValue denom={usdcIbcDenom} value={walletBalance.totalUUSDC + udenomToDenom(walletBalance.totalDeploymentGrantsUUSDC)} />
</strong>
</div>
</div>
</>
)}

<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" />
Expand All @@ -338,18 +310,14 @@ export const YourAccount: React.FunctionComponent<Props> = ({ balances, isLoadin
<div>
<strong>
<FormattedNumber
value={udenomToDenom(totalUsdc, 6) + udenomToDenom(totalUAkt, 6) * (price || 0)}
value={walletBalance.totalUsd}
// eslint-disable-next-line react/style-prop-object
style="currency"
currency="USD"
/>
</strong>
</div>
</div>

{/* <div className="flex items-center justify-end">
<LiquidityModal address={address} aktBalance={aktBalance} refreshBalances={refreshBalances} />
</div> */}
</div>
)}
</div>
Expand Down
Loading
Loading