Final tweaks and mods.

packages/webapp/src/_app/hooks/queries.ts

@@ -200,11 +200,6 @@ export const queryMasterPool = () => ({
     queryFn: getMasterPool,
 });
 
-export const queryDistributionsForAccount = (account: string) => ({
-    queryKey: ["query_distributions_for_account", account],
-    queryFn: () => getDistributionsForAccount(account),
-});
-
 export const queryTokenBalanceForAccount = (account: string) => ({
     queryKey: ["query_token_balance_for_account", account],
     queryFn: () => getTokenBalanceForAccount(account),
@@ -248,12 +243,6 @@ export const useMemberByAccountName = (accountName?: string) =>
         enabled: Boolean(accountName),
     });
 
-export const useDistributionsForAccount = (account: string) =>
-    useQuery({
-        ...queryDistributionsForAccount(account),
-        enabled: Boolean(account),
-    });
-
 export const useDistributionState = () =>
     useQuery({
         ...queryDistributionState(),

packages/webapp/src/_app/ui/form.tsx

@@ -3,7 +3,7 @@ import React, { HTMLProps } from "react";
 export const Label: React.FC<{
     htmlFor: string;
 }> = (props) => (
-    <label className="block text-sm font-medium text-gray-700" {...props}>
+    <label className="block text-sm font-normal text-gray-600" {...props}>
         {props.children}
     </label>
 );

packages/webapp/src/delegates/api/eden-contract.ts

@@ -2,33 +2,23 @@ import { devUseFixtureData } from "config";
 import { EdenMember } from "members";
 import { queryClient } from "pages/_app";
 import {
-    CONTRACT_DISTRIBUTION_ACCOUNTS_TABLE,
     CONTRACT_DISTRIBUTION_TABLE,
     CONTRACT_POOLS_TABLE,
     getRow,
     getTableRawRows,
-    getTableRows,
-    i128BoundsForAccount,
-    INDEX_BY_OWNER,
     isValidDelegate,
     queryElectionState,
     queryMemberByAccountName,
     queryVoteDataRow,
-    TABLE_INDEXES,
 } from "_app";
 
 import {
-    DistributionAccount,
     DistributionState,
     DistributionStateData,
     Distribution,
     Pool,
 } from "../interfaces";
-import {
-    fixtureDistributionAccounts,
-    fixtureNextDistribution,
-    fixturePool,
-} from "./fixtures";
+import { fixtureNextDistribution, fixturePool } from "./fixtures";
 
 const queryElectionStateHelper = async () =>
     await queryClient.fetchQuery(
@@ -46,10 +36,6 @@ export const getChiefDelegates = async (): Promise<string[] | undefined> => {
     return electionState?.board;
 };
 
-const getMemberBudgetBalance = () => {
-    return {}; // TODO
-};
-
 const getMemberWrapper = async (account: string) => {
     const { queryKey, queryFn } = queryMemberByAccountName(account);
     return await queryClient.fetchQuery(queryKey, queryFn);
@@ -95,30 +81,6 @@ export const getMyDelegation = async (
     return myDelegates;
 };
 
-export const getDistributionsForAccount = async (
-    account: string
-): Promise<DistributionAccount[]> => {
-    if (devUseFixtureData) {
-        return fixtureDistributionAccounts;
-    }
-
-    const { lower, upper } = i128BoundsForAccount(account);
-
-    const distributionRows = await getTableRows(
-        CONTRACT_DISTRIBUTION_ACCOUNTS_TABLE,
-        {
-            ...TABLE_INDEXES[CONTRACT_DISTRIBUTION_ACCOUNTS_TABLE][
-                INDEX_BY_OWNER
-            ],
-            lowerBound: lower,
-            upperBound: upper,
-            limit: 9999,
-        }
-    );
-
-    return distributionRows as DistributionAccount[];
-};
-
 export const getDistributionState = async (): Promise<
     DistributionStateData | undefined
 > => {

packages/webapp/src/delegates/api/fixtures.ts

@@ -1,30 +1,4 @@
-import {
-    DistributionAccount,
-    DistributionStateData,
-    NextDistribution,
-    Pool,
-} from "../interfaces";
-
-export const fixtureDistributionAccounts: DistributionAccount[] = [
-    {
-        owner: "pip.edev",
-        balance: "10.0000 EOS",
-        rank: 1,
-        distribution_time: "2022-01-16T16:00:00.000",
-    },
-    {
-        owner: "pip.edev",
-        balance: "100.0000 EOS",
-        rank: 2,
-        distribution_time: "2022-01-16T16:00:00.000",
-    },
-    {
-        owner: "pip.edev",
-        balance: "1000.0000 EOS",
-        rank: 3,
-        distribution_time: "2022-01-16T16:00:00.000",
-    },
-];
+import { DistributionStateData, NextDistribution, Pool } from "../interfaces";
 
 export const fixtureNextDistribution: DistributionStateData = {
     state: "next_distribution",

packages/webapp/src/delegates/interfaces.ts

@@ -1,6 +1,5 @@
 export interface DistributionAccount {
-    owner: string;
-    distribution_time: string;
+    distributionTime: string;
     rank: number;
     balance: string;
 }

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

@@ -48,7 +48,12 @@ export const FundsAvailableCTA = ({ account }: Props) => {
         <Container className="space-y-2.5">
             <div className="flex justify-between items-center">
                 <div>
-                    <Heading size={4}>Funds available</Heading>
+                    <Heading size={4} className="hidden xs:block">
+                        Eden funds available
+                    </Heading>
+                    <Heading size={4} className="block xs:hidden">
+                        Funds available
+                    </Heading>
                     <Text>
                         {availableFunds
                             ? assetToLocaleString(

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

@@ -1,5 +1,6 @@
 import React from "react";
 
+import { tokenConfig } from "config";
 import { assetFromNumber, assetToLocaleString, useUALAccount } from "_app";
 import { Button, Heading, Text } from "_app/ui";
 
@@ -19,7 +20,7 @@ export const WithdrawModalStepConfirmation = ({
     isLoading,
 }: Props) => {
     const [ualAccount] = useUALAccount();
-    if (!ualAccount?.accountName) return null; // TODO: dismiss modal
+    if (!ualAccount?.accountName) return null;
 
     const amountAsAsset = assetFromNumber(formValues.amount);
     const isThirdPartyWithdrawal = ualAccount.accountName !== formValues.to;
@@ -29,60 +30,67 @@ export const WithdrawModalStepConfirmation = ({
             <Heading>
                 Confirm withdrawal{isThirdPartyWithdrawal && " and transfer"}
             </Heading>
-            <Text>Please confirm the following details:</Text>
-            <ul className="list-inside list-disc">
+            <Text>
+                Your funds will be withdrawn from the Eden contract and sent to
+                the {tokenConfig.symbol} account below. Please confirm the
+                following details:
+            </Text>
+            <ul className="space-y-1">
                 <li>
-                    <Text className="inline">To: </Text>
-                    <Text className="inline" type="info">
-                        {formValues.to}
+                    <Text>
+                        Destination:{" "}
+                        <span className="font-medium">{formValues.to}</span>{" "}
+                        {isThirdPartyWithdrawal && (
+                            <span className="italic">
+                                via {ualAccount.accountName}
+                            </span>
+                        )}
                     </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>
+                        Amount:{" "}
+                        <span className="font-medium">
+                            {assetToLocaleString(
+                                amountAsAsset,
+                                amountAsAsset.precision
+                            )}
+                        </span>
                     </Text>
                 </li>
                 {isThirdPartyWithdrawal && formValues.memo ? (
                     <li>
-                        <Text className="inline">Memo: </Text>
-                        <Text className="inline" type="info">
-                            {formValues.memo}
+                        <Text>
+                            Memo:{" "}
+                            <span className="font-medium">
+                                {formValues.memo}
+                            </span>
                         </Text>
                     </li>
                 ) : null}
             </ul>
             {isThirdPartyWithdrawal && (
                 <Text>
-                    These funds will first be withdrawn to your Eden EOS account
-                    of record (
+                    Funds will be withdrawn to your Eden {tokenConfig.symbol}{" "}
+                    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.
+                    ) and transferred from your {tokenConfig.symbol} account to{" "}
+                    <span className="font-medium">{formValues.to}</span> within
+                    a single transaction.
                 </Text>
             )}
             <div className="flex space-x-3">
                 <Button type="neutral" onClick={goBack}>
-                    Make Changes
+                    Edit
                 </Button>
                 <Button
                     onClick={onConfirm}
                     isLoading={isLoading}
                     disabled={isLoading}
                 >
-                    Withdraw
+                    Withdraw now
                 </Button>
             </div>
         </div>

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

@@ -1,12 +1,8 @@
 import React from "react";
 
-import {
-    Asset,
-    assetToLocaleString,
-    assetToString,
-    SetValuesEvent,
-    useUALAccount,
-} from "_app";
+import { tokenConfig } from "config";
+import { SetValuesEvent, useUALAccount } from "_app";
+import { Asset, assetToLocaleString, assetToString } from "_app/utils";
 import { Button, Form, Heading, Text } from "_app/ui";
 
 import { WithdrawFundsFormFields } from "./withdraw-modal";
@@ -40,6 +36,15 @@ export const WithdrawModalStepForm = ({
         }
     };
 
+    const validateAmountField = (e: React.FormEvent<HTMLInputElement>) => {
+        const target = e.target as HTMLInputElement;
+        if (target.validity.rangeOverflow) {
+            target.setCustomValidity("Insufficient funds available");
+        } else {
+            target.setCustomValidity("Enter a valid withdrawal amount");
+        }
+    };
+
     const clearErrorMessages = (e: React.FormEvent<HTMLInputElement>) => {
         (e.target as HTMLInputElement).setCustomValidity("");
     };
@@ -63,7 +68,8 @@ export const WithdrawModalStepForm = ({
         <div className="space-y-4">
             <Heading>Withdraw funds</Heading>
             <Text>
-                Withdraw funds from my Eden account to a public EOS account.
+                Withdraw my funds from the Eden contract to a public{" "}
+                {tokenConfig.symbol} account.
             </Text>
             <Text>
                 Available:{" "}
@@ -76,7 +82,7 @@ export const WithdrawModalStepForm = ({
             </Text>
             <form onSubmit={onPreview} className="space-y-3">
                 <Form.LabeledSet
-                    label="EOS account (12 characters)"
+                    label={`${tokenConfig.symbol} account name (12 characters)`}
                     htmlFor="to"
                 >
                     <Form.Input
@@ -98,14 +104,16 @@ export const WithdrawModalStepForm = ({
                                 id="amount"
                                 type="number"
                                 inputMode="decimal"
-                                min={0}
+                                min={1 / Math.pow(10, tokenConfig.precision)}
                                 max={maxWithdrawal}
                                 step="any"
                                 required
                                 value={fields.amount}
                                 onChange={onChangeFields}
                                 maxLength={12}
                                 onWheel={amountInputPreventChangeOnScroll}
+                                onInvalid={validateAmountField}
+                                onInput={clearErrorMessages}
                             />
                             <div className="absolute top-3 right-2">
                                 <p className="text-sm text-gray-400">

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

@@ -1,17 +1,10 @@
 import React, { useState } from "react";
 import { useQueryClient } from "react-query";
 
-import {
-    Asset,
-    assetFromNumber,
-    Modal,
-    onError,
-    queryDistributionsForAccount,
-    queryTokenBalanceForAccount,
-    useFormFields,
-    useUALAccount,
-} from "_app";
-
+import { useFormFields, useUALAccount } from "_app";
+import { Asset, assetFromNumber, onError } from "_app/utils";
+import { queryTokenBalanceForAccount } from "_app/hooks/queries";
+import { LoadingContainer, Modal } from "_app/ui";
 import { DistributionAccount } from "delegates/interfaces";
 
 import {
@@ -88,7 +81,7 @@ export const WithdrawModal = ({
                 assetFromNumber(amount),
                 to,
                 memo,
-                distributions!
+                distributions
             );
             console.info("signing trx", trx);
 
@@ -100,10 +93,7 @@ export const WithdrawModal = ({
             // allow time for chain tables to update
             await new Promise((resolve) => setTimeout(resolve, 3000));
 
-            // invalidate current member query to update participating status
-            queryClient.invalidateQueries(
-                queryDistributionsForAccount(ualAccount.accountName).queryKey
-            );
+            // invalidate member's queried blockchain account balance to reflect new balance
             queryClient.invalidateQueries(
                 queryTokenBalanceForAccount(ualAccount.accountName).queryKey
             );
@@ -128,7 +118,9 @@ export const WithdrawModal = ({
             shouldCloseOnOverlayClick={false}
             shouldCloseOnEsc={false}
         >
-            {step === WithdrawStep.Form ? (
+            {!ualAccount?.accountName ? (
+                <LoadingContainer />
+            ) : step === WithdrawStep.Form ? (
                 <WithdrawModalStepForm
                     availableFunds={availableFunds}
                     onPreview={onPreview}