Integrated rpc call to update token in the UI

WavesHQ · Sep 10, 2020 · 9025315 · 9025315
1 parent 2bd4d2e
commit 9025315
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 13 deletions.
diff --git a/webapp/src/constants/rpcMethods.ts b/webapp/src/constants/rpcMethods.ts
@@ -19,6 +19,7 @@ export const FINALIZE_PSBT = 'finalizepsbt';
 export const DECODE_RAW_TRANSACTION = 'decoderawtransaction';
 export const CREATE_MASTER_NODE = 'createmasternode';
 export const CREATE_TOKEN = 'createtoken';
+export const UPDATE_TOKEN = 'updatetoken';
 export const LIST_MASTER_NODE = 'listmasternodes';
 export const LIST_TOKEN = 'listtokens';
 export const DESTROY_TOKEN = 'destroytoken';

diff --git a/webapp/src/containers/TokensPage/components/CreateToken/CreateDCT/index.tsx b/webapp/src/containers/TokensPage/components/CreateToken/CreateDCT/index.tsx
@@ -38,12 +38,15 @@ interface CreateDCTProps {
   isConfirmationModalOpen: string;
   setIsConfirmationModalOpen: any;
   createdTokenData: any;
+  updatedTokenData: any;
   wait: number;
   setWait: any;
-  confirmation: () => void;
+  createConfirmation: () => void;
+  updateConfirmation: () => void;
   handleDropDowns: (data: any, field: any, amount: any) => void;
   cancelConfirmation: () => void;
-  isErrorCreatingToken: any;
+  isErrorCreatingToken: string;
+  isErrorUpdatingToken: string;
   isUpdate: boolean;
 }
 
@@ -60,10 +63,13 @@ const CreateDCT: React.FunctionComponent<CreateDCTProps> = (
     isConfirmationModalOpen,
     setIsConfirmationModalOpen,
     cancelConfirmation,
-    confirmation,
+    createConfirmation,
+    updateConfirmation,
     wait,
     createdTokenData,
     isErrorCreatingToken,
+    updatedTokenData,
+    isErrorUpdatingToken,
   } = props;
 
   return (
@@ -429,7 +435,9 @@ const CreateDCT: React.FunctionComponent<CreateDCTProps> = (
               </Button>
               <Button
                 color='primary'
-                onClick={() => confirmation()}
+                onClick={() => {
+                  isUpdate ? updateConfirmation() : createConfirmation();
+                }}
                 disabled={wait > 0 ? true : false}
               >
                 {I18n.t(
@@ -456,7 +464,7 @@ const CreateDCT: React.FunctionComponent<CreateDCTProps> = (
               <MdCheckCircle className='footer-sheet-icon' />
               <p>
                 {`${I18n.t('containers.tokens.createToken.tokenHash')}: ${
-                  isUpdate ? createdTokenData.hash : createdTokenData.hash
+                  isUpdate ? updatedTokenData.hash : createdTokenData.hash
                 }`}
               </p>
             </div>
@@ -482,7 +490,7 @@ const CreateDCT: React.FunctionComponent<CreateDCTProps> = (
                   [styles[`error-dailog`]]: true,
                 })}
               />
-              <p>{isErrorCreatingToken}</p>
+              <p>{isUpdate ? isErrorUpdatingToken : isErrorCreatingToken}</p>
             </div>
           </div>
           <div className='d-flex align-items-center justify-content-center'>

diff --git a/webapp/src/containers/TokensPage/components/CreateToken/index.tsx b/webapp/src/containers/TokensPage/components/CreateToken/index.tsx
@@ -6,7 +6,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import DCTDistribution from './DCTDistribution';
 import CreateDCT from './CreateDCT';
-import { createToken, fetchTokenInfo } from '../../reducer';
+import { createToken, fetchTokenInfo, updateToken } from '../../reducer';
 import { getReceivingAddressAndAmountList } from '../../service';
 import {
   CREATE_DCT,
@@ -22,16 +22,19 @@ interface CreateTokenProps extends RouteComponentProps<RouteParams> {
   tokenInfo: any;
   fetchToken: (id: string | undefined) => void;
   createToken: (tokenData) => void;
+  updateToken: (tokenData) => void;
   createdTokenData: any;
+  updatedTokenData: any;
+  isTokenUpdating: boolean;
+  isErrorUpdatingToken: string;
   isTokenCreating: boolean;
-  isErrorCreatingToken: boolean;
+  isErrorCreatingToken: string;
 }
 
 const CreateToken: React.FunctionComponent<CreateTokenProps> = (
   props: CreateTokenProps
 ) => {
   const { id } = props.match.params;
-
   const [collateralAddresses, setCollateralAddresses] = useState<any>([]);
   const [activeTab, setActiveTab] = useState<string>(CREATE_DCT);
   const [IsCollateralAddressValid, setIsCollateralAddressValid] = useState<
@@ -65,7 +68,7 @@ const CreateToken: React.FunctionComponent<CreateTokenProps> = (
   }, []);
 
   useEffect(() => {
-    if (!isEmpty(tokenInfo)) {
+    if (!isEmpty(tokenInfo) && id) {
       const data = {
         name: tokenInfo.name,
         symbol: tokenInfo.symbol,
@@ -81,9 +84,13 @@ const CreateToken: React.FunctionComponent<CreateTokenProps> = (
 
   const {
     createToken,
+    updateToken,
+    updatedTokenData,
     createdTokenData,
     isTokenCreating,
     isErrorCreatingToken,
+    isTokenUpdating,
+    isErrorUpdatingToken,
   } = props;
 
   useEffect(() => {
@@ -105,6 +112,17 @@ const CreateToken: React.FunctionComponent<CreateTokenProps> = (
     }
   }, [createdTokenData, isTokenCreating, isErrorCreatingToken, allowCalls]);
 
+  useEffect(() => {
+    if (allowCalls && !isTokenUpdating) {
+      if (!isErrorUpdatingToken && !isEmpty(updatedTokenData)) {
+        setIsConfirmationModalOpen('success');
+      }
+      if (isErrorUpdatingToken && isEmpty(updatedTokenData)) {
+        setIsConfirmationModalOpen('failure');
+      }
+    }
+  }, [updatedTokenData, isTokenUpdating, isErrorUpdatingToken, allowCalls]);
+
   useEffect(() => {
     let waitToSendInterval;
     if (isConfirmationModalOpen === 'confirm') {
@@ -150,12 +168,18 @@ const CreateToken: React.FunctionComponent<CreateTokenProps> = (
     setIsConfirmationModalOpen('default');
   };
 
-  const confirmation = () => {
+  const createConfirmation = () => {
     setAllowCalls(true);
     const tokenData = { ...formState };
     createToken(tokenData);
   };
 
+  const updateConfirmation = () => {
+    setAllowCalls(true);
+    const tokenData = { ...formState };
+    updateToken(tokenData);
+  };
+
   const handleSubmit = async () => {
     const tokenData = { ...formState };
     createToken(tokenData);
@@ -166,15 +190,18 @@ const CreateToken: React.FunctionComponent<CreateTokenProps> = (
       <TabPane tabId={CREATE_DCT}>
         <div className='main-wrapper position-relative'>
           <CreateDCT
-            isUpdate={!isEmpty(tokenInfo)}
+            isUpdate={!isEmpty(tokenInfo) && !!id}
             handleChange={handleChange}
             formState={formState}
             collateralAddresses={collateralAddresses}
             isErrorCreatingToken={isErrorCreatingToken}
             createdTokenData={createdTokenData}
+            updatedTokenData={updatedTokenData}
+            isErrorUpdatingToken={isErrorUpdatingToken}
             wait={wait}
             setWait={setWait}
-            confirmation={confirmation}
+            createConfirmation={createConfirmation}
+            updateConfirmation={updateConfirmation}
             cancelConfirmation={cancelConfirmation}
             IsCollateralAddressValid={IsCollateralAddressValid}
             isConfirmationModalOpen={isConfirmationModalOpen}
@@ -208,12 +235,16 @@ const mapStateToProps = (state) => {
     isTokenCreating: tokens.isTokenCreating,
     createdTokenData: tokens.createdTokenData,
     isErrorCreatingToken: tokens.isErrorCreatingToken,
+    isTokenUpdating: tokens.isTokenUpdating,
+    updatedTokenData: tokens.updatedTokenData,
+    isErrorUpdatingToken: tokens.isErrorUpdatingToken,
   };
 };
 
 const mapDispatchToProps = {
   fetchToken: (id) => fetchTokenInfo({ id }),
   createToken: (tokenData) => createToken({ tokenData }),
+  updateToken: (tokenData) => updateToken({ tokenData }),
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(CreateToken);