feat: mint function now reads from the call

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

Hide file tree

Showing 4 changed files with 41 additions and 35 deletions.
diff --git a/src/components/Guilds/ActionsBuilder/SupportedActions/REPMint/REPMintEditor.tsx b/src/components/Guilds/ActionsBuilder/SupportedActions/REPMint/REPMintEditor.tsx
@@ -2,17 +2,20 @@
 import styled from 'styled-components';
 import { Input } from 'components/Guilds/common/Form/Input';
 import Avatar from 'components/Guilds/Avatar';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { ActionEditorProps } from '..';
-import { BigNumber } from 'ethers';
+import { BigNumber, ethers } from 'ethers';
 import useENSAvatar from 'hooks/Guilds/ether-swr/ens/useENSAvatar';
 import { Box } from 'components/Guilds/common/Layout';
 import { shortenAddress, MAINNET_ID } from 'utils';
 import { baseInputStyles } from 'components/Guilds/common/Form/Input';
 import { ReactComponent as Info } from '../../../../../assets/images/info.svg';
 import StyledIcon from 'components/Guilds/common/SVG';
-// import useBigNumberToNumber from 'hooks/Guilds/conversions/useBigNumberToNumber';
+import useBigNumberToNumber from 'hooks/Guilds/conversions/useBigNumberToNumber';
 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';
 
 const Control = styled(Box)`
   display: flex;
@@ -54,9 +57,14 @@ interface REPMintState {
 
 const Mint: React.FC<ActionEditorProps> = ({ decodedCall, updateCall }) => {
   // parse transfer state from calls
-  console.log({ decodedCall });
-  const [repPercent, setRepPercent] = useState(0);
-  const [repAmount, setRepAmount] = useState(0);
+  const [repPercent, setRepPercent] = useState(null);
+  const [repAmount, setRepAmount] = useState(null);
+  const { guild_id: guildId } =
+    useParams<{ chain_name?: string; guild_id?: string }>();
+  const { data } = useGuildConfig(guildId);
+  const { data: tokenData } = useERC20Info(data?.token);
+  const totalSupply = useBigNumberToNumber(tokenData?.totalSupply, 18);
+
   const parsedData = useMemo<REPMintState>(() => {
     if (!decodedCall) return null;
     return {
@@ -65,11 +73,10 @@ const Mint: React.FC<ActionEditorProps> = ({ decodedCall, updateCall }) => {
     };
   }, [decodedCall]);
 
-  console.log({ parsedData });
   const { imageUrl } = useENSAvatar(parsedData?.toAddress, MAINNET_ID);
 
   const setCallDataAmount = (value: string) => {
-    const amount = value ? BigNumber.from(value) : null;
+    const amount = value ? ethers.utils.parseUnits(value) : null;
     updateCall({
       ...decodedCall,
       args: {
@@ -79,30 +86,18 @@ const Mint: React.FC<ActionEditorProps> = ({ decodedCall, updateCall }) => {
     });
   };
 
-  const handleRepPercentChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (e.target.value) {
-      setRepPercent(parseInt(e.target.value));
-      setRepAmount(parseInt(e.target.value) * 100);
-      setCallDataAmount((parseInt(e.target.value) * 100).toString());
-    } else {
-      setRepPercent(0);
-      setRepAmount(0);
-      setCallDataAmount('0');
+  useEffect(() => {
+    setRepAmount((repPercent / 100) * totalSupply);
+    if (repAmount) {
+      setCallDataAmount(repAmount.toString());
     }
-  };
+  }, [repPercent, repAmount, totalSupply]);
 
-  const handleRepAmountChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleRepChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.value) {
-      setRepAmount(parseInt(e.target.value));
-      setRepPercent(parseInt(e.target.value) / 100);
-      setCallDataAmount(e.target.value);
-    } else {
-      setRepPercent(0);
-      setRepAmount(0);
-      setCallDataAmount('0');
+      setRepPercent(parseFloat(e.target.value));
     }
   };
-
   return (
     <div>
       <Control>
@@ -130,10 +125,7 @@ const Mint: React.FC<ActionEditorProps> = ({ decodedCall, updateCall }) => {
             Reputation in % <StyledIcon src={Info} />
           </ControlLabel>
           <ControlRow>
-            <RepMintInput
-              value={repPercent}
-              onChange={handleRepPercentChange}
-            />
+            <RepMintInput value={repPercent} onChange={handleRepChange} />
           </ControlRow>
         </Control>
       </ControlRow>
@@ -143,7 +135,7 @@ const Mint: React.FC<ActionEditorProps> = ({ decodedCall, updateCall }) => {
             Reputation Amount <StyledIcon src={Info} />
           </ControlLabel>
           <ControlRow>
-            <RepMintInput value={repAmount} onChange={handleRepAmountChange} />
+            <RepMintInput value={repAmount} onChange={handleRepChange} />
           </ControlRow>
         </Control>
       </ControlRow>

diff --git a/src/components/Guilds/ActionsBuilder/SupportedActions/REPMint/REPMintInfoLine.tsx b/src/components/Guilds/ActionsBuilder/SupportedActions/REPMint/REPMintInfoLine.tsx
@@ -10,6 +10,9 @@ import StyledIcon from 'components/Guilds/common/SVG';
 import styled from 'styled-components';
 import { BigNumber } from 'ethers';
 import useBigNumberToNumber from 'hooks/Guilds/conversions/useBigNumberToNumber';
+import { useERC20Info } from 'hooks/Guilds/ether-swr/erc20/useERC20Info';
+import { useGuildConfig } from 'hooks/Guilds/ether-swr/guild/useGuildConfig';
+import { useParams } from 'react-router-dom';
 
 const StyledMintIcon = styled(StyledIcon)`
   margin: 0;
@@ -22,6 +25,12 @@ interface REPMintState {
 }
 
 const REPMintInfoLine: 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);
+  const totalSupply = useBigNumberToNumber(tokenData?.totalSupply, 18);
+
   const parsedData = useMemo<REPMintState>(() => {
     if (!decodedCall) return null;
     return {
@@ -32,14 +41,15 @@ const REPMintInfoLine: React.FC<ActionViewProps> = ({ decodedCall }) => {
   }, [decodedCall]);
   const { ensName, imageUrl } = useENSAvatar(parsedData?.toAddress, MAINNET_ID);
 
-  const roundedRepAmount = useBigNumberToNumber(parsedData?.amount, 1, 2) * 10;
+  const roundedRepAmount = useBigNumberToNumber(parsedData?.amount, 16);
+  const roundedRepPercent = roundedRepAmount / totalSupply;
 
   return (
     <>
       <Segment>
         <StyledMintIcon src={Mint} />
       </Segment>
-      <Segment>Mint {roundedRepAmount} %</Segment>
+      <Segment>Mint {roundedRepPercent} %</Segment>
       <Segment>
         <FiArrowRight />
       </Segment>

diff --git a/src/components/Guilds/ActionsBuilder/SupportedActions/REPMint/REPMintSummary.tsx b/src/components/Guilds/ActionsBuilder/SupportedActions/REPMint/REPMintSummary.tsx
@@ -24,7 +24,7 @@ const REPMintSummary: React.FC<ActionViewProps> = ({ decodedCall }) => {
 
   const { ensName, imageUrl } = useENSAvatar(parsedData?.toAddress, MAINNET_ID);
 
-  const roundedRepAmount = useBigNumberToNumber(parsedData?.amount, 1, 3) * 10;
+  const roundedRepAmount = useBigNumberToNumber(parsedData?.amount, 18);
 
   return (
     <>

diff --git a/src/hooks/Guilds/ether-swr/erc20/useERC20Info.ts b/src/hooks/Guilds/ether-swr/erc20/useERC20Info.ts
@@ -1,11 +1,13 @@
 import useEtherSWR from '../useEtherSWR';
 import ERC20ABI from '../../../../abis/ERC20.json';
 import { useMemo } from 'react';
+import { BigNumber } from 'ethers';
 
 export type ERC20Info = {
   name: string;
   symbol: string;
   decimals: number;
+  totalSupply: BigNumber;
 };
 
 export const useERC20Info = (contractAddress: string) => {
@@ -15,6 +17,7 @@ export const useERC20Info = (contractAddress: string) => {
           [contractAddress, 'name'],
           [contractAddress, 'symbol'],
           [contractAddress, 'decimals'],
+          [contractAddress, 'totalSupply'],
         ]
       : [],
     {
@@ -29,6 +32,7 @@ export const useERC20Info = (contractAddress: string) => {
       name: data[0],
       symbol: data[1],
       decimals: data[2],
+      totalSupply: data[3],
     };
   }, [data]);