From 9cc8f7512a6468b49f01b6a7052849bc425e8edc Mon Sep 17 00:00:00 2001 From: singh-pk Date: Thu, 19 Sep 2024 14:25:46 +0530 Subject: [PATCH 1/3] chore: Added useTokens hook in package/core/react --- .../components/organization/tokens/index.tsx | 23 ++-------- .../js/packages/core/react/hooks/useTokens.ts | 35 +++++++++++++++ sdks/js/packages/core/react/index.ts | 1 + .../billingaccounts/details.tsx | 7 +-- .../billingaccounts/tokens/index.tsx | 11 ++--- .../billingaccounts/tokens/useTokens.tsx | 44 ------------------- 6 files changed, 45 insertions(+), 76 deletions(-) create mode 100644 sdks/js/packages/core/react/hooks/useTokens.ts delete mode 100644 ui/src/containers/organisations.list/billingaccounts/tokens/useTokens.tsx diff --git a/sdks/js/packages/core/react/components/organization/tokens/index.tsx b/sdks/js/packages/core/react/components/organization/tokens/index.tsx index a156eec73..71b04384e 100644 --- a/sdks/js/packages/core/react/components/organization/tokens/index.tsx +++ b/sdks/js/packages/core/react/components/organization/tokens/index.tsx @@ -3,7 +3,7 @@ import { styles } from '../styles'; import Skeleton from 'react-loading-skeleton'; import tokenStyles from './token.module.css'; import { useFrontier } from '~/react/contexts/FrontierContext'; -import { useEffect, useMemo, useState } from 'react'; +import { useEffect, useState } from 'react'; import coin from '~/react/assets/coin.svg'; import { AuthTooltipMessage, getFormattedNumberString } from '~/react/utils'; import { toast } from 'sonner'; @@ -13,6 +13,7 @@ import { PlusIcon } from '@radix-ui/react-icons'; import qs from 'query-string'; import { DEFAULT_TOKEN_PRODUCT_NAME } from '~/react/utils/constants'; import { useBillingPermission } from '~/react/hooks/useBillingPermission'; +import { useTokens } from '~/react/hooks/useTokens'; interface TokenHeaderProps { billingSupportEmail?: string; @@ -114,8 +115,6 @@ export default function Tokens() { isActiveOrganizationLoading, isBillingAccountLoading } = useFrontier(); - const [tokenBalance, setTokenBalance] = useState(0); - const [isTokensLoading, setIsTokensLoading] = useState(false); const [transactionsList, setTransactionsList] = useState< V1Beta1BillingTransaction[] >([]); @@ -124,24 +123,9 @@ export default function Tokens() { const [isCheckoutLoading, setIsCheckoutLoading] = useState(false); const { isAllowed, isFetching: isPermissionsFetching } = useBillingPermission(); + const { tokenBalance, isTokensLoading } = useTokens(); useEffect(() => { - async function getBalance(orgId: string, billingAccountId: string) { - try { - setIsTokensLoading(true); - const resp = await client?.frontierServiceGetBillingBalance( - orgId, - billingAccountId - ); - const tokens = resp?.data?.balance?.amount || '0'; - setTokenBalance(Number(tokens)); - } catch (err: any) { - console.error(err); - toast.error('Unable to fetch balance'); - } finally { - setIsTokensLoading(false); - } - } async function getTransactions(orgId: string, billingAccountId: string) { try { setIsTransactionsListLoading(true); @@ -163,7 +147,6 @@ export default function Tokens() { } if (activeOrganization?.id && billingAccount?.id) { - getBalance(activeOrganization?.id, billingAccount?.id); getTransactions(activeOrganization?.id, billingAccount?.id); } }, [activeOrganization?.id, billingAccount?.id, client]); diff --git a/sdks/js/packages/core/react/hooks/useTokens.ts b/sdks/js/packages/core/react/hooks/useTokens.ts new file mode 100644 index 000000000..bb785a592 --- /dev/null +++ b/sdks/js/packages/core/react/hooks/useTokens.ts @@ -0,0 +1,35 @@ +import { useEffect, useState } from 'react'; +import { useFrontier } from '../contexts/FrontierContext'; +import { toast } from 'sonner'; + +export const useTokens = () => { + const { client, activeOrganization, billingAccount } = useFrontier(); + + const [tokenBalance, setTokenBalance] = useState(0); + const [isTokensLoading, setIsTokensLoading] = useState(true); + + useEffect(() => { + async function getBalance(orgId: string, billingAccountId: string) { + try { + setIsTokensLoading(true); + const resp = await client?.frontierServiceGetBillingBalance( + orgId, + billingAccountId + ); + const tokens = resp?.data?.balance?.amount || '0'; + setTokenBalance(Number(tokens)); + } catch (err: any) { + console.error(err); + toast.error('Unable to fetch balance'); + } finally { + setIsTokensLoading(false); + } + } + + if (client && activeOrganization?.id && billingAccount?.id) { + getBalance(activeOrganization.id, billingAccount.id); + } + }, [billingAccount?.id, client, activeOrganization?.id]); + + return { tokenBalance, isTokensLoading }; +}; diff --git a/sdks/js/packages/core/react/index.ts b/sdks/js/packages/core/react/index.ts index c1d766ffa..2e374ae71 100644 --- a/sdks/js/packages/core/react/index.ts +++ b/sdks/js/packages/core/react/index.ts @@ -15,3 +15,4 @@ export { Window } from './components/window'; export { useFrontier } from './contexts/FrontierContext'; export { FrontierProvider } from './contexts/FrontierProvider'; export { Amount }; +export { useTokens } from './hooks/useTokens'; diff --git a/ui/src/containers/organisations.list/billingaccounts/details.tsx b/ui/src/containers/organisations.list/billingaccounts/details.tsx index d69bcbb42..64f0add1c 100644 --- a/ui/src/containers/organisations.list/billingaccounts/details.tsx +++ b/ui/src/containers/organisations.list/billingaccounts/details.tsx @@ -2,8 +2,8 @@ import { Flex, Grid, Text } from "@raystack/apsara"; import { NavLink, useParams } from "react-router-dom"; import { useBillingAccount } from "."; import { BillingAccountAddress } from "@raystack/frontier"; +import { useTokens } from "@raystack/frontier/react"; import Skeleton from "react-loading-skeleton"; -import { useTokens } from "./tokens/useTokens"; export const converBillingAddressToString = ( address?: BillingAccountAddress @@ -19,10 +19,7 @@ export default function BillingAccountDetails() { const { billingaccount } = useBillingAccount(); let { organisationId, billingaccountId } = useParams(); - const { tokenBalance, isTokensLoading } = useTokens({ - organisationId, - billingaccountId, - }); + const { tokenBalance, isTokensLoading } = useTokens(); return ( { - async function getBalance(orgId: string, billingAccountId: string) { - try { - setIsTokensLoading(true); - const resp = await client?.frontierServiceGetBillingBalance( - orgId, - billingAccountId - ); - const tokens = resp?.data?.balance?.amount || "0"; - setTokenBalance(Number(tokens)); - } catch (err: any) { - console.error(err); - toast.error("Unable to fetch balance"); - } finally { - setIsTokensLoading(false); - } - } - - if (organisationId && billingaccountId) { - getBalance(organisationId, billingaccountId); - } - }, [billingaccountId, client, organisationId]); - return { - tokenBalance, - isTokensLoading, - }; -}; From 774e4c852ee6693049498f7751b69654058d84fc Mon Sep 17 00:00:00 2001 From: singh-pk Date: Fri, 20 Sep 2024 11:09:47 +0530 Subject: [PATCH 2/3] Reverted useTokens in ui/ --- .../billingaccounts/details.tsx | 8 ++-- .../billingaccounts/tokens/useTokens.tsx | 44 +++++++++++++++++++ 2 files changed, 49 insertions(+), 3 deletions(-) create mode 100644 ui/src/containers/organisations.list/billingaccounts/tokens/useTokens.tsx diff --git a/ui/src/containers/organisations.list/billingaccounts/details.tsx b/ui/src/containers/organisations.list/billingaccounts/details.tsx index 2ccc7968b..5648008ce 100644 --- a/ui/src/containers/organisations.list/billingaccounts/details.tsx +++ b/ui/src/containers/organisations.list/billingaccounts/details.tsx @@ -2,8 +2,8 @@ import { Flex, Grid, Text } from "@raystack/apsara"; import { NavLink, useParams } from "react-router-dom"; import { useBillingAccount } from "."; import { BillingAccountAddress } from "@raystack/frontier"; -import { useTokens } from "@raystack/frontier/react"; import Skeleton from "react-loading-skeleton"; +import { useTokens } from "./tokens/useTokens"; export const converBillingAddressToString = ( address?: BillingAccountAddress @@ -19,7 +19,10 @@ export default function BillingAccountDetails() { const { billingaccount } = useBillingAccount(); let { organisationId, billingaccountId } = useParams(); - const { tokenBalance, isTokensLoading } = useTokens(); + const { tokenBalance, isTokensLoading } = useTokens({ + organisationId, + billingaccountId, + }); return ( ); } - diff --git a/ui/src/containers/organisations.list/billingaccounts/tokens/useTokens.tsx b/ui/src/containers/organisations.list/billingaccounts/tokens/useTokens.tsx new file mode 100644 index 000000000..8fb826290 --- /dev/null +++ b/ui/src/containers/organisations.list/billingaccounts/tokens/useTokens.tsx @@ -0,0 +1,44 @@ +import { useEffect, useState } from "react"; +import { useFrontier } from "@raystack/frontier/react"; +import { toast } from "sonner"; + +interface useTokensProps { + organisationId?: string; + billingaccountId?: string; +} + +export const useTokens = function ({ + organisationId, + billingaccountId, +}: useTokensProps) { + const { client } = useFrontier(); + const [tokenBalance, setTokenBalance] = useState(0); + const [isTokensLoading, setIsTokensLoading] = useState(false); + + useEffect(() => { + async function getBalance(orgId: string, billingAccountId: string) { + try { + setIsTokensLoading(true); + const resp = await client?.frontierServiceGetBillingBalance( + orgId, + billingAccountId + ); + const tokens = resp?.data?.balance?.amount || "0"; + setTokenBalance(Number(tokens)); + } catch (err: any) { + console.error(err); + toast.error("Unable to fetch balance"); + } finally { + setIsTokensLoading(false); + } + } + + if (organisationId && billingaccountId) { + getBalance(organisationId, billingaccountId); + } + }, [billingaccountId, client, organisationId]); + return { + tokenBalance, + isTokensLoading, + }; +}; From f9c1a9d67bb93237790534696058cdfd04cbf5ea Mon Sep 17 00:00:00 2001 From: singh-pk Date: Fri, 20 Sep 2024 11:11:14 +0530 Subject: [PATCH 3/3] Reverted useTokens in ui/ --- .../billingaccounts/tokens/index.tsx | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/ui/src/containers/organisations.list/billingaccounts/tokens/index.tsx b/ui/src/containers/organisations.list/billingaccounts/tokens/index.tsx index 9f20899a0..98a814fe7 100644 --- a/ui/src/containers/organisations.list/billingaccounts/tokens/index.tsx +++ b/ui/src/containers/organisations.list/billingaccounts/tokens/index.tsx @@ -2,14 +2,15 @@ import { DataTable, EmptyState, Flex, Text } from "@raystack/apsara"; import { V1Beta1BillingAccount, V1Beta1BillingTransaction, - V1Beta1Organization + V1Beta1Organization, } from "@raystack/frontier"; -import { useFrontier, useTokens } from "@raystack/frontier/react"; +import { useFrontier } from "@raystack/frontier/react"; import { useEffect, useState } from "react"; import { Outlet, useOutletContext, useParams } from "react-router-dom"; import { OrganizationsTokenHeader } from "./header"; import { toast } from "sonner"; import { getColumns } from "./columns"; +import { useTokens } from "./useTokens"; import Skeleton from "react-loading-skeleton"; type ContextType = { billingaccount: V1Beta1BillingAccount | null }; @@ -23,8 +24,10 @@ export default function OrganisationTokens() { const [isTransactionsListLoading, setIsTransactionsListLoading] = useState(false); - const { tokenBalance, isTokensLoading } = useTokens(); - + const { tokenBalance, isTokensLoading } = useTokens({ + organisationId, + billingaccountId, + }); const pageHeader = { title: "Organizations", breadcrumb: [