Skip to content

Commit fee7484

Browse files
author
James Bartnik
committed
Merge branch 'fb-display-balance'
2 parents d64aee3 + b55defa commit fee7484

File tree

3 files changed

+92
-27
lines changed

3 files changed

+92
-27
lines changed

‎apps/sentry-client-desktop/src/features/keys/HasKeys.tsx

Lines changed: 65 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -21,12 +21,14 @@ import {useOperatorRuntime} from "@/hooks/useOperatorRuntime";
2121
import {accruingStateAtom} from "@/hooks/useAccruingInfo";
2222
import {ethers} from "ethers";
2323
import {BiLoaderAlt} from "react-icons/bi";
24+
import {EarnedEsxaiBalance, useGetWalletBalance} from "@/hooks/useGetWalletBalance";
2425

2526
interface HasKeysProps {
2627
combinedOwners: string[],
2728
combinedLicensesMap: LicenseMap,
2829
statusMap: StatusMap,
2930
isWalletAssignedMap: WalletAssignedMap,
31+
earnedEsxaiBalance: EarnedEsxaiBalance,
3032
}
3133

3234
export function HasKeys({combinedOwners, combinedLicensesMap, statusMap, isWalletAssignedMap}: HasKeysProps) {
@@ -41,6 +43,7 @@ export function HasKeys({combinedOwners, combinedLicensesMap, statusMap, isWalle
4143
const [isRemoveWalletOpen, setIsRemoveWalletOpen] = useState<boolean>(false);
4244
const {isLoading: isOperatorLoading, publicKey: operatorAddress} = useOperator();
4345
const {startRuntime, sentryRunning} = useOperatorRuntime();
46+
const {data: earnedEsxaiBalance} = useGetWalletBalance(combinedOwners);
4447

4548
function startAssignment() {
4649
if (!isOperatorLoading) {
@@ -291,39 +294,74 @@ export function HasKeys({combinedOwners, combinedLicensesMap, statusMap, isWalle
291294
</div>
292295
</div>
293296

294-
<div className="flex flex-col pl-10">
295-
<div className="flex items-center gap-1 text-[15px] text-[#525252]">
296-
<p>Accrued network esXAI</p>
297-
<Tooltip
298-
header={"Each key will accrue esXAI"}
299-
body={"This value is the sum of all esXAI accrued for the selected wallet. If esXAI has already been claimed, it will not be reflected in this value."}
300-
>
301-
<AiOutlineInfoCircle size={16} color={"#A3A3A3"}/>
302-
</Tooltip>
303-
</div>
304-
<div className="flex items-center gap-2 font-semibold">
305-
<XaiLogo/>
306-
<div>
307-
{balances
308-
?
309-
<div className={`flex gap-1 items-end`}>
310-
<p className="text-3xl">
311-
{ethers.formatEther(Object.values(balances).reduce((acc, value) => acc + value.totalAccruedEsXai, BigInt(0)))}
312-
</p>
297+
<div>
298+
<div className="flex">
313299

314-
<p className="flex items-center text-[#A3A3A3] text-[12px] ml-1 mb-1">
315-
Last
316-
updated: {!isBalancesLoading && balancesFetchedLast ? balancesFetchedLast.toLocaleString() :
317-
<BiLoaderAlt className="animate-spin w-[18px]" color={"#A3A3A3"}/>}
318-
</p>
300+
<div className="flex flex-col px-10">
301+
<div className="flex items-center gap-1 text-[15px] text-[#525252]">
302+
<p>esXAI balance</p>
303+
<Tooltip
304+
header={"Claimed esXAI will appear in your wallet balance.\n"}
305+
body={"Once you pass KYC for a wallet, any accrued esXAI for that wallet will be claimed and reflected in your esXAI balance."}
306+
>
307+
<AiOutlineInfoCircle size={16} color={"#A3A3A3"}/>
308+
</Tooltip>
309+
</div>
310+
<div className="flex items-center gap-2 font-semibold">
311+
<XaiLogo/>
312+
<div>
313+
{earnedEsxaiBalance ? (
314+
<div className={`flex gap-1 items-end`}>
315+
<p className="text-3xl">
316+
{ethers.formatEther(
317+
earnedEsxaiBalance.reduce((acc, item) => acc + item.esXaiBalance, BigInt(0))
318+
)}
319+
</p>
320+
</div>
321+
) : (
322+
<p className="text-3xl">
323+
Loading...
324+
</p>
325+
)}
319326
</div>
320-
: "Loading..."
321-
}
327+
328+
</div>
329+
</div>
330+
331+
<div className="flex flex-col pl-10">
332+
<div className="flex items-center gap-1 text-[15px] text-[#525252]">
333+
<p>Accrued esXAI (unclaimed)</p>
334+
<Tooltip
335+
header={"Each key will accrue esXAI. Pass KYC to claim."}
336+
body={"This value is the sum of all esXAI accrued for the selected wallet. If esXAI has already been claimed, it will appear in esXAI balance."}
337+
>
338+
<AiOutlineInfoCircle size={16} color={"#A3A3A3"}/>
339+
</Tooltip>
340+
</div>
341+
<div className="flex items-center gap-2 font-semibold">
342+
<XaiLogo/>
343+
<div>
344+
{balances
345+
?
346+
<div className={`flex gap-1 items-end`}>
347+
<p className="text-3xl">
348+
{ethers.formatEther(Object.values(balances).reduce((acc, value) => acc + value.totalAccruedEsXai, BigInt(0)))}
349+
</p>
350+
</div>
351+
: "Loading..."
352+
}
353+
</div>
354+
</div>
355+
356+
<p className="flex items-center text-[#A3A3A3] text-[12px]">
357+
Last
358+
updated: {!isBalancesLoading && balancesFetchedLast ? balancesFetchedLast.toLocaleString() :
359+
<BiLoaderAlt className="animate-spin w-[18px]" color={"#A3A3A3"}/>}
360+
</p>
322361
</div>
323362
</div>
324363
</div>
325364

326-
327365
<div className="flex flex-col max-h-[70vh]">
328366
<div className="w-full overflow-y-auto">
329367
<table className="w-full bg-white">

‎apps/sentry-client-desktop/src/features/keys/Keys.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export function Keys() {
2222
licensesLoading,
2323
combinedLicensesMap,
2424
combinedLicensesList,
25+
earnedEsxaiBalance
2526
} = useAtomValue(chainStateAtom);
2627
const [drawerState, setDrawerState] = useAtom(drawerStateAtom);
2728
const {combinedOwners, walletAssignedMap} = useCombinedOwners(owners);
@@ -91,6 +92,7 @@ export function Keys() {
9192
combinedLicensesMap={combinedLicensesMap}
9293
statusMap={ownersKycMap}
9394
isWalletAssignedMap={walletAssignedMap}
95+
earnedEsxaiBalance={earnedEsxaiBalance}
9496
/>
9597
)}
9698
</>

‎apps/sentry-client-desktop/src/hooks/useGetWalletBalance.ts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import {useQuery} from "react-query";
2+
import {getBalances} from "@sentry/core";
3+
4+
export interface EarnedEsxaiBalance {
5+
address: string;
6+
xaiBalance: bigint;
7+
esXaiBalance: bigint;
8+
}
9+
10+
export function useGetWalletBalance(addressesArray: string[]) {
11+
return useQuery({
12+
queryKey: ["get-balances", addressesArray],
13+
queryFn: async () => {
14+
return await getBalances(addressesArray, (address, xaiBalance, esXaiBalance) => {
15+
return {
16+
address,
17+
xaiBalance,
18+
esXaiBalance,
19+
};
20+
});
21+
},
22+
staleTime: Infinity,
23+
cacheTime: Infinity,
24+
});
25+
}

0 commit comments

Comments
 (0)