feat: added REPGuild check, dynamic token name, and Numerical input

DXgovernance · Apr 13, 2022 · e2bed43 · e2bed43
1 parent e5d7680
commit e2bed43
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 21 deletions.
diff --git a/src/components/Guilds/ActionsBuilder/SupportedActions/REPMint/REPMintEditor.tsx b/src/components/Guilds/ActionsBuilder/SupportedActions/REPMint/REPMintEditor.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 import styled from 'styled-components';
 import { Input } from 'components/Guilds/common/Form/Input';
 import Avatar from 'components/Guilds/Avatar';
@@ -16,6 +15,7 @@ import { useState } from 'react';
 import { useERC20Info } from 'hooks/Guilds/ether-swr/erc20/useERC20Info';
 import { useGuildConfig } from 'hooks/Guilds/ether-swr/guild/useGuildConfig';
 import { useParams } from 'react-router-dom';
+import NumericalInput from 'components/Guilds/common/Form/NumericalInput';
 
 const Control = styled(Box)`
   display: flex;
@@ -39,7 +39,7 @@ const ControlRow = styled(Box)`
   height: 100%;
 `;
 
-const RepMintInput = styled(Input)`
+const RepMintInput = styled(NumericalInput)`
   ${baseInputStyles}
   display: flex;
   align-items: center;
@@ -57,8 +57,8 @@ interface REPMintState {
 
 const Mint: React.FC<ActionEditorProps> = ({ decodedCall, updateCall }) => {
   // parse transfer state from calls
-  const [repPercent, setRepPercent] = useState(null);
-  const [repAmount, setRepAmount] = useState(null);
+  const [repPercent, setRepPercent] = useState(0);
+  const [repAmount, setRepAmount] = useState(0);
   const { guild_id: guildId } =
     useParams<{ chain_name?: string; guild_id?: string }>();
   const { data } = useGuildConfig(guildId);
@@ -93,9 +93,9 @@ const Mint: React.FC<ActionEditorProps> = ({ decodedCall, updateCall }) => {
     }
   }, [repPercent, repAmount, totalSupply]);
 
-  const handleRepChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.value) {
-      setRepPercent(parseFloat(e.target.value));
+  const handleRepChange = (e: number) => {
+    if (e) {
+      setRepPercent(e);
     }
   };
   return (
@@ -125,7 +125,7 @@ const Mint: React.FC<ActionEditorProps> = ({ decodedCall, updateCall }) => {
             Reputation in % <StyledIcon src={Info} />
           </ControlLabel>
           <ControlRow>
-            <RepMintInput value={repPercent} onChange={handleRepChange} />
+            <RepMintInput value={repPercent} onUserInput={handleRepChange} />
           </ControlRow>
         </Control>
       </ControlRow>
@@ -135,7 +135,11 @@ const Mint: React.FC<ActionEditorProps> = ({ decodedCall, updateCall }) => {
             Reputation Amount <StyledIcon src={Info} />
           </ControlLabel>
           <ControlRow>
-            <RepMintInput value={repAmount} onChange={handleRepChange} />
+            <RepMintInput
+              value={repAmount}
+              onUserInput={handleRepChange}
+              readOnly
+            />
           </ControlRow>
         </Control>
       </ControlRow>

diff --git a/src/components/Guilds/ActionsBuilder/SupportedActions/REPMint/REPMintInfoLine.tsx b/src/components/Guilds/ActionsBuilder/SupportedActions/REPMint/REPMintInfoLine.tsx
@@ -41,7 +41,7 @@ const REPMintInfoLine: React.FC<ActionViewProps> = ({ decodedCall }) => {
   }, [decodedCall]);
   const { ensName, imageUrl } = useENSAvatar(parsedData?.toAddress, MAINNET_ID);
 
-  const roundedRepAmount = useBigNumberToNumber(parsedData?.amount, 16);
+  const roundedRepAmount = useBigNumberToNumber(parsedData?.amount, 16, 3);
   const roundedRepPercent = roundedRepAmount / totalSupply;
 
   return (

diff --git a/src/components/Guilds/ActionsBuilder/SupportedActions/REPMint/REPMintSummary.tsx b/src/components/Guilds/ActionsBuilder/SupportedActions/REPMint/REPMintSummary.tsx
@@ -2,7 +2,10 @@ import Avatar from 'components/Guilds/Avatar';
 import { BigNumber } from 'ethers';
 import useBigNumberToNumber from 'hooks/Guilds/conversions/useBigNumberToNumber';
 import useENSAvatar from 'hooks/Guilds/ether-swr/ens/useENSAvatar';
+import { useERC20Info } from 'hooks/Guilds/ether-swr/erc20/useERC20Info';
+import { useGuildConfig } from 'hooks/Guilds/ether-swr/guild/useGuildConfig';
 import { useMemo } from 'react';
+import { useParams } from 'react-router-dom';
 import { MAINNET_ID, shortenAddress } from 'utils';
 import { ActionViewProps } from '..';
 import { Segment } from '../common/infoLine';
@@ -14,6 +17,12 @@ interface REPMintState {
 }
 
 const REPMintSummary: React.FC<ActionViewProps> = ({ decodedCall }) => {
+  const { guild_id: guildId } =
+    useParams<{ chain_name?: string; guild_id?: string }>();
+  const { data } = useGuildConfig(guildId);
+  const { data: tokenData } = useERC20Info(data?.token);
+  console.log({ tokenData });
+  console.log(tokenData.symbol);
   const parsedData = useMemo<REPMintState>(() => {
     if (!decodedCall) return null;
     return {
@@ -24,7 +33,7 @@ const REPMintSummary: React.FC<ActionViewProps> = ({ decodedCall }) => {
 
   const { ensName, imageUrl } = useENSAvatar(parsedData?.toAddress, MAINNET_ID);
 
-  const roundedRepAmount = useBigNumberToNumber(parsedData?.amount, 18);
+  const roundedRepAmount = useBigNumberToNumber(parsedData?.amount, 18, 3);
 
   return (
     <>
@@ -44,7 +53,9 @@ const REPMintSummary: React.FC<ActionViewProps> = ({ decodedCall }) => {
           </Segment>
           <Segment>{ensName || shortenAddress(parsedData?.toAddress)}</Segment>
         </DetailCell>
-        <DetailCell>{roundedRepAmount} REP</DetailCell>
+        <DetailCell>
+          {roundedRepAmount} {tokenData?.name}
+        </DetailCell>
       </DetailRow>
     </>
   );

diff --git a/src/components/Guilds/ActionsModal/ContractsList.tsx b/src/components/Guilds/ActionsModal/ContractsList.tsx
@@ -16,6 +16,8 @@ import {
   SectionWrapper,
   Wrapper,
 } from './styles';
+import useGuildImplementationTypeConfig from 'hooks/Guilds/guild/useGuildImplementationType';
+import { useParams } from 'react-router-dom';
 
 interface ContractsListProps {
   onSelect: (contract: RegistryContract) => void;
@@ -28,7 +30,9 @@ const ContractsList: React.FC<ContractsListProps> = ({
 }) => {
   const { chainId } = useWeb3React();
   const { contracts } = useContractRegistry(chainId);
-
+  const { guild_id: guildAddress } =
+    useParams<{ chain_name?: string; guild_id?: string }>();
+  const { isRepGuild } = useGuildImplementationTypeConfig(guildAddress);
   return (
     <Wrapper>
       <SectionWrapper>
@@ -43,14 +47,16 @@ const ContractsList: React.FC<ContractsListProps> = ({
             Transfer & Mint
           </ButtonLabel>
         </ActionsButton>
-        <ActionsButton
-          onClick={() => onSupportedActionSelect(SupportedAction.REP_MINT)}
-        >
-          <ButtonLabel>
-            <StyledIcon src={Mint} />
-            Mint REP
-          </ButtonLabel>
-        </ActionsButton>
+        {isRepGuild ? (
+          <ActionsButton
+            onClick={() => onSupportedActionSelect(SupportedAction.REP_MINT)}
+          >
+            <ButtonLabel>
+              <StyledIcon src={Mint} />
+              Mint REP
+            </ButtonLabel>
+          </ActionsButton>
+        ) : null}
       </SectionWrapper>
       <SectionWrapper>
         <SectionTitle>External Contracts</SectionTitle>