Whitelist loader (#374)

* Added pair address to dropdown option * added loading indicator * fixed naming * using existing ellipsify function
confio · Feb 21, 2022 · 724f084 · 724f084
1 parent 04f0e9d
commit 724f084
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/...eateProposalModal/components/ProposalWhitelistPair/components/FormWhitelistPair/index.tsx b/...eateProposalModal/components/ProposalWhitelistPair/components/FormWhitelistPair/index.tsx
@@ -8,6 +8,7 @@ import { Formik } from "formik";
 import { Form } from "formik-antd";
 import { useSdk } from "service";
 import { getFormItemName, isValidAddress } from "utils/forms";
+import { ellipsifyAddress } from "utils/ui";
 import * as Yup from "yup";
 
 import { TokensPerPair } from "../..";
@@ -24,6 +25,7 @@ export interface FormWhiteilstPairValues {
 interface FormWhitelistPairProps extends FormWhiteilstPairValues {
   readonly tokensPerPairs: readonly TokensPerPair[];
   readonly pairAddress: string;
+  readonly isLoadingPairs: boolean;
   readonly setPairAddress: React.Dispatch<React.SetStateAction<string>>;
   readonly goBack: () => void;
   readonly handleSubmit: (values: FormWhiteilstPairValues) => void;
@@ -36,6 +38,7 @@ export default function FormWhitelistPair({
   comment,
   goBack,
   handleSubmit,
+  isLoadingPairs,
 }: FormWhitelistPairProps): JSX.Element {
   const {
     sdkState: { config },
@@ -61,6 +64,7 @@ export default function FormWhitelistPair({
             <Stack gap="s1">
               <StyledSelect
                 suffixIcon={<DownArrow />}
+                loading={isLoadingPairs}
                 size="large"
                 value={
                   isValidAddress(pairAddress, config.addressPrefix) ? pairAddress : "Select pair to whitelist"
@@ -69,7 +73,7 @@ export default function FormWhitelistPair({
               >
                 {tokensPerPairs.map((pair) => (
                   <Option key={pair.pairAddress} value={pair.pairAddress}>
-                    {`${pair.tokenA.name} ⇄ ${pair.tokenB.name}`}
+                    {`${pair.tokenA.name} ⇄ ${pair.tokenB.name} ${ellipsifyAddress(pair.pairAddress)}`}
                   </Option>
                 ))}
               </StyledSelect>

diff --git a/src/App/components/DsoCreateProposalModal/components/ProposalWhitelistPair/index.tsx b/src/App/components/DsoCreateProposalModal/components/ProposalWhitelistPair/index.tsx
@@ -52,6 +52,7 @@ export default function ProposalWhitelistPair({
 
   const [pairAddress, setPairAddress] = useState("");
   const [comment, setComment] = useState("");
+  const [isLoadingPairs, setLoadingPairs] = useState(false);
 
   const [tokensPerPairs, setTokensPerPairs] = useState<readonly TokensPerPair[]>([]);
 
@@ -75,7 +76,7 @@ export default function ProposalWhitelistPair({
   useEffect(() => {
     (async function getPairs() {
       if (!client || !signingClient) return;
-
+      setLoadingPairs(true);
       const pairs = await getPairsEager(client, config.factoryAddress);
 
       const tokensPerPairs: readonly TokensPerPair[] = await Promise.all(
@@ -93,6 +94,7 @@ export default function ProposalWhitelistPair({
       );
 
       setTokensPerPairs(tokensPerPairsWithDso);
+      setLoadingPairs(false);
     })();
   }, [client, config.factoryAddress, dsoAddress, getPairToken, signingClient]);
 
@@ -141,6 +143,7 @@ export default function ProposalWhitelistPair({
           tokensPerPairs={tokensPerPairs}
           pairAddress={pairAddress}
           setPairAddress={setPairAddress}
+          isLoadingPairs={isLoadingPairs}
           comment={comment}
           goBack={() => setProposalStep(undefined)}
           handleSubmit={submitWhitelistPair}