diff --git a/src/components/NewDisbursementButton.tsx b/src/components/NewDisbursementButton.tsx index 75db20d..1880c73 100644 --- a/src/components/NewDisbursementButton.tsx +++ b/src/components/NewDisbursementButton.tsx @@ -2,22 +2,35 @@ import { Button, Icon } from "@stellar/design-system"; import { useNavigate } from "react-router-dom"; import { ShowForRoles } from "components/ShowForRoles"; import { Routes } from "constants/settings"; +import { useCircleAccount } from "hooks/useCircleAccount"; -export const NewDisbursementButton = () => { +export const NewDisbursementButton = ({ + size = "sm", +}: { + size?: "sm" | "md" | "xs"; +}) => { const navigate = useNavigate(); + const { isCircleAccount, isCircleAccountPending } = useCircleAccount(); const goToNewDisbursement = () => { navigate(Routes.DISBURSEMENT_NEW); }; + const inactiveCircleAccount = isCircleAccount && isCircleAccountPending; + const disableMessage = inactiveCircleAccount + ? "Circle Account is not active" + : ""; + return ( diff --git a/src/helpers/formatPaymentDetails.ts b/src/helpers/formatPaymentDetails.ts index 652230d..8c2a66e 100644 --- a/src/helpers/formatPaymentDetails.ts +++ b/src/helpers/formatPaymentDetails.ts @@ -13,6 +13,7 @@ export const formatPaymentDetails = (payment: ApiPayment): PaymentDetails => { totalAmount: payment.amount, assetCode: payment.asset.code, externalPaymentId: payment?.external_payment_id, + circleTransferRequestId: payment?.circle_transfer_request_id, status: payment.status, statusHistory: payment?.status_history .sort( diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 5c98847..42eea5b 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -1,7 +1,7 @@ import { useEffect } from "react"; import { useDispatch } from "react-redux"; import { useNavigate } from "react-router-dom"; -import { Button, Heading, Icon } from "@stellar/design-system"; +import { Button, Heading } from "@stellar/design-system"; import { AppDispatch } from "store"; import { getDisbursementsAction } from "store/ducks/disbursements"; @@ -15,6 +15,7 @@ import { ShowForRoles } from "components/ShowForRoles"; import { DisbursementsTable } from "components/DisbursementsTable"; import { DashboardAnalytics } from "components/DashboardAnalytics"; import { useIsUserRoleAccepted } from "hooks/useIsUserRoleAccepted"; +import { NewDisbursementButton } from "components/NewDisbursementButton"; export const Home = () => { const { disbursements, userAccount } = useRedux( @@ -59,13 +60,6 @@ export const Home = () => { navigate(Routes.DISBURSEMENTS); }; - const goToNewDisbursement = ( - event: React.MouseEvent, - ) => { - event.preventDefault(); - navigate(Routes.DISBURSEMENT_NEW); - }; - return ( <> @@ -102,14 +96,7 @@ export const Home = () => { View all - + diff --git a/src/pages/PaymentDetails.tsx b/src/pages/PaymentDetails.tsx index 24659fb..0e896b2 100644 --- a/src/pages/PaymentDetails.tsx +++ b/src/pages/PaymentDetails.tsx @@ -268,6 +268,13 @@ export const PaymentDetails = () => { : "-"} + + {formattedPayment.circleTransferRequestId ? ( +
+ +
{formattedPayment.circleTransferRequestId}
+
+ ) : null} diff --git a/src/types/index.ts b/src/types/index.ts index c58b0dd..95e6fb8 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -334,6 +334,7 @@ export type PaymentDetails = { status: PaymentStatus; statusHistory: PaymentDetailsStatusHistoryItem[]; externalPaymentId?: string; + circleTransferRequestId?: string; }; // ============================================================================= @@ -628,6 +629,7 @@ export type ApiPayment = { created_at: string; updated_at: string; external_payment_id?: string; + circle_transfer_request_id?: string; }; export type ApiPayments = {