Componentize and organize.

packages/webapp/src/delegates/components/index.ts

@@ -1,5 +1,4 @@
 export * from "./arrow-container";
-export * from "./delegate-funds-available";
 export * from "./level-heading";
 export * from "./my-delegation";
 export * from "./statuses";

packages/webapp/src/members/components/funds-available-cta.tsx

@@ -0,0 +1,98 @@
+import React, { useState } from "react";
+import { RiDownloadLine } from "react-icons/ri";
+
+import { tokenConfig } from "config";
+import {
+    Asset,
+    assetToLocaleString,
+    sumAssetStrings,
+    useDistributionsForAccount,
+    useMemberByAccountName,
+    useUALAccount,
+} from "_app";
+import { Button, Container, Heading, Text } from "_app/ui";
+import { useAccountBalance } from "treasury/hooks";
+
+import { NextDisbursementInfo, WithdrawModal } from "./withdraw-funds";
+
+interface Props {
+    account: string;
+}
+
+export const FundsAvailableCTA = ({ account }: Props) => {
+    const [ualAccount] = useUALAccount();
+    const { data: profile } = useMemberByAccountName(account);
+    const {
+        data: accountBalance,
+        isLoading: isLoadingAccountBalance,
+        isError: isErrorAccountBalance,
+    } = useAccountBalance(account);
+    const { data: distributions } = useDistributionsForAccount(account);
+
+    const [isLoading, setIsLoading] = useState(false); // TODO: is this loading state necessary?
+    const [isWithdrawModalOpen, setIsWithdrawModalOpen] = useState(false);
+
+    let availableFunds: Asset | undefined = undefined;
+    if (accountBalance && distributions) {
+        const assetStrings = [
+            ...distributions.map((distribution) => distribution.balance),
+            accountBalance.balanceAsString,
+        ];
+        availableFunds = sumAssetStrings(assetStrings);
+    }
+
+    const isProfileDelegate = Boolean(profile?.election_rank);
+
+    if (!isProfileDelegate && !availableFunds?.quantity) return null;
+
+    const profileBelongsToCurrentUser = Boolean(
+        ualAccount && profile && ualAccount.accountName === profile.account
+    );
+
+    return (
+        <Container className="space-y-2.5">
+            <div className="flex justify-between items-center">
+                <div>
+                    <Heading size={4}>Funds available</Heading>
+                    <Text>
+                        {availableFunds
+                            ? assetToLocaleString(
+                                  availableFunds,
+                                  tokenConfig.precision
+                              )
+                            : "None"}
+                    </Text>
+                </div>
+                <div>
+                    {profileBelongsToCurrentUser && (
+                        <Button
+                            onClick={() => setIsWithdrawModalOpen(true)}
+                            disabled={
+                                isLoading ||
+                                !availableFunds ||
+                                availableFunds.quantity === 0
+                            }
+                            isLoading={isLoading}
+                        >
+                            {!isLoading && (
+                                <RiDownloadLine className="-ml-1 mr-1" />
+                            )}
+                            Withdraw
+                        </Button>
+                    )}
+                </div>
+            </div>
+            {profileBelongsToCurrentUser && isProfileDelegate && (
+                <NextDisbursementInfo />
+            )}
+            <WithdrawModal
+                isOpen={isWithdrawModalOpen}
+                close={() => setIsWithdrawModalOpen(false)}
+                availableFunds={availableFunds}
+                distributions={distributions}
+            />
+        </Container>
+    );
+};
+
+export default FundsAvailableCTA;

packages/webapp/src/members/components/index.ts

@@ -1,3 +1,4 @@
+export * from "./funds-available-cta";
 export * from "./member-card";
 export * from "./member-chip";
 export * from "./member-collections";
@@ -6,3 +7,4 @@ export * from "./member-holo-card";
 export * from "./member-social-links";
 export * from "./members-grid";
 export * from "./token-balance";
+export * from "./withdraw-funds";

packages/webapp/src/members/components/withdraw-funds/index.ts

@@ -0,0 +1,6 @@
+export * from "./next-disbursement-info";
+export * from "./withdraw-modal";
+export * from "./withdraw-modal-step-confirmation";
+export * from "./withdraw-modal-step-failure";
+export * from "./withdraw-modal-step-form";
+export * from "./withdraw-modal-step-success";

packages/webapp/src/members/components/withdraw-funds/next-disbursement-info.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import dayjs from "dayjs";
+
+import { Text, useDistributionState } from "_app";
+
+export const NextDisbursementInfo = () => {
+    const { data: distributionState } = useDistributionState();
+
+    if (!distributionState) return null;
+
+    switch (distributionState.state) {
+        case "next_distribution":
+            const nextDisbursementTime = dayjs(
+                distributionState.data.distribution_time + "Z"
+            );
+            return (
+                <Text>
+                    Delegate funds are disbursed monthly. Check back on{" "}
+                    {nextDisbursementTime.format("LL")} after{" "}
+                    {nextDisbursementTime.format("LT z")} for your next
+                    disbursement.
+                </Text>
+            );
+        case "election_distribution":
+            return (
+                <Text>
+                    An election is currently underway. Disbursements to
+                    newly-elected delegates will be processed as soon as the
+                    election ends.
+                </Text>
+            );
+        case "current_distribution":
+            return (
+                <Text>
+                    A disbursement is being processed now. Check back in the
+                    next few hours.
+                </Text>
+            );
+        default:
+            return null;
+    }
+};
+
+export default NextDisbursementInfo;

packages/webapp/src/members/components/withdraw-funds/withdraw-modal-step-confirmation.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+
+import { assetFromNumber, assetToLocaleString, useUALAccount } from "_app";
+import { Button, Heading, Text } from "_app/ui";
+
+import { WithdrawFundsFormFields } from "./withdraw-modal";
+
+interface Props {
+    formValues: WithdrawFundsFormFields;
+    goBack: () => void;
+    onConfirm: () => void;
+    isLoading: boolean;
+}
+
+export const WithdrawModalStepConfirmation = ({
+    formValues,
+    goBack,
+    onConfirm,
+    isLoading,
+}: Props) => {
+    const [ualAccount] = useUALAccount();
+    if (!ualAccount?.accountName) return null; // TODO: dismiss modal
+
+    const amountAsAsset = assetFromNumber(formValues.amount);
+    const isThirdPartyWithdrawal = ualAccount.accountName !== formValues.to;
+
+    return (
+        <div className="space-y-4">
+            <Heading>
+                Confirm withdrawal{isThirdPartyWithdrawal && " and transfer"}
+            </Heading>
+            <Text>Please confirm the following details:</Text>
+            <ul className="list-inside list-disc">
+                <li>
+                    <Text className="inline">To: </Text>
+                    <Text className="inline" type="info">
+                        {formValues.to}
+                    </Text>
+                    {isThirdPartyWithdrawal && (
+                        <Text className="inline italic" type="note">
+                            {" "}
+                            via {ualAccount.accountName}
+                        </Text>
+                    )}
+                </li>
+                <li>
+                    <Text className="inline">Amount: </Text>
+                    <Text className="inline" type="info">
+                        {assetToLocaleString(
+                            amountAsAsset,
+                            amountAsAsset.precision
+                        )}
+                    </Text>
+                </li>
+                {isThirdPartyWithdrawal && formValues.memo ? (
+                    <li>
+                        <Text className="inline">Memo: </Text>
+                        <Text className="inline" type="info">
+                            {formValues.memo}
+                        </Text>
+                    </li>
+                ) : null}
+            </ul>
+            {isThirdPartyWithdrawal && (
+                <Text>
+                    These funds will first be withdrawn to your Eden EOS account
+                    of record (
+                    <span className="font-medium">
+                        {ualAccount.accountName}
+                    </span>
+                    ) and then transferred from your EOS account to{" "}
+                    <span className="font-medium">{formValues.to}</span>. This
+                    will happen within a single transaction.
+                </Text>
+            )}
+            <div className="flex space-x-3">
+                <Button type="neutral" onClick={goBack}>
+                    Make Changes
+                </Button>
+                <Button
+                    onClick={onConfirm}
+                    isLoading={isLoading}
+                    disabled={isLoading}
+                >
+                    Withdraw
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default WithdrawModalStepConfirmation;

packages/webapp/src/members/components/withdraw-funds/withdraw-modal-step-failure.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Button, Heading, Text } from "_app/ui";
+
+interface Props {
+    dismiss: () => void;
+    tryAgain: () => void;
+    errorMessage: string;
+}
+
+export const WithdrawModalStepFailure = ({
+    dismiss,
+    tryAgain,
+    errorMessage,
+}: Props) => {
+    return (
+        <div className="space-y-4">
+            <Heading>Error</Heading>
+            <Text>There was a problem processing your transaction</Text>
+            {errorMessage ? <Text type="note">{errorMessage}</Text> : null}
+            <div className="flex space-x-3">
+                <Button onClick={dismiss} type="neutral">
+                    Dismiss
+                </Button>
+                <Button onClick={tryAgain}>Try again</Button>
+            </div>
+        </div>
+    );
+};
+
+export default WithdrawModalStepFailure;