From a1b562d696345a20067fd8e96f01a405c188c931 Mon Sep 17 00:00:00 2001
From: Andrew Richardson <andrew.richardson@kaleido.io>
Date: Wed, 20 Apr 2022 08:31:08 -0400
Subject: [PATCH] Pass all token numbers as strings

These numbers may be well beyond JavaScript's number max.

Signed-off-by: Andrew Richardson <andrew.richardson@kaleido.io>
---
 server/src/interfaces.ts                 |  2 +-
 ui/src/components/Forms/BurnForm.tsx     | 10 ++++------
 ui/src/components/Forms/MintForm.tsx     | 10 ++++------
 ui/src/components/Forms/TransferForm.tsx | 14 ++++++--------
 4 files changed, 15 insertions(+), 21 deletions(-)

diff --git a/server/src/interfaces.ts b/server/src/interfaces.ts
index b9afcbf..f5d0bf5 100644
--- a/server/src/interfaces.ts
+++ b/server/src/interfaces.ts
@@ -123,7 +123,7 @@ export class TokenMint {
   @IsString()
   pool: string;
 
-  @IsString()
+  @IsNumberString()
   amount: string;
 }
 
diff --git a/ui/src/components/Forms/BurnForm.tsx b/ui/src/components/Forms/BurnForm.tsx
index 8d23505..5352db4 100644
--- a/ui/src/components/Forms/BurnForm.tsx
+++ b/ui/src/components/Forms/BurnForm.tsx
@@ -27,10 +27,10 @@ export const BurnForm: React.FC = () => {
 
   const [tokenPools, setTokenPools] = useState<ITokenPool[]>([]);
   const [pool, setPool] = useState<ITokenPool>();
-  const [amount, setAmount] = useState<number>(0);
+  const [amount, setAmount] = useState<string>('0');
   const [tokenIndex, setTokenIndex] = useState<string | null>('');
   const [refresh, setRefresh] = useState<number>(0);
-  const [tokenBalance, setTokenBalance] = useState<number>(0);
+  const [tokenBalance, setTokenBalance] = useState<string>('0');
 
   useEffect(() => {
     if (activeForm !== TUTORIALS.BURN) return;
@@ -80,7 +80,7 @@ export const BurnForm: React.FC = () => {
 
   useEffect(() => {
     if (!isFungible()) {
-      setAmount(1);
+      setAmount('1');
     }
   }, [pool, amount]);
 
@@ -96,9 +96,7 @@ export const BurnForm: React.FC = () => {
   };
 
   const handleAmountChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (parseInt(event.target.value)) {
-      setAmount(parseInt(event.target.value));
-    }
+    setAmount(event.target.value);
   };
 
   return (
diff --git a/ui/src/components/Forms/MintForm.tsx b/ui/src/components/Forms/MintForm.tsx
index ee93bbd..8d7b49f 100644
--- a/ui/src/components/Forms/MintForm.tsx
+++ b/ui/src/components/Forms/MintForm.tsx
@@ -27,19 +27,19 @@ export const MintForm: React.FC = () => {
   const { t } = useTranslation();
 
   const [tokenPools, setTokenPools] = useState<ITokenPool[]>([]);
-  const [tokenBalance, setTokenBalance] = useState<number>(0);
+  const [tokenBalance, setTokenBalance] = useState<string>('0');
 
   const [message] = useState<string | object | undefined>(
     DEFAULT_MESSAGE_STRING
   );
 
   const [pool, setPool] = useState<ITokenPool>();
-  const [amount, setAmount] = useState<number>(1);
+  const [amount, setAmount] = useState<string>('1');
   const [refresh, setRefresh] = useState<number>(0);
 
   useEffect(() => {
     if (activeForm !== TUTORIALS.MINT) {
-      setAmount(1);
+      setAmount('1');
       return;
     }
     setPayloadMissingFields(!amount || !pool);
@@ -101,9 +101,7 @@ export const MintForm: React.FC = () => {
   }, [pool, refresh]);
 
   const handleAmountChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (parseInt(event.target.value)) {
-      setAmount(parseInt(event.target.value));
-    }
+    setAmount(event.target.value);
   };
 
   return (
diff --git a/ui/src/components/Forms/TransferForm.tsx b/ui/src/components/Forms/TransferForm.tsx
index a683670..b562bd2 100644
--- a/ui/src/components/Forms/TransferForm.tsx
+++ b/ui/src/components/Forms/TransferForm.tsx
@@ -28,16 +28,16 @@ export const TransferForm: React.FC = () => {
 
   const [tokenPools, setTokenPools] = useState<ITokenPool[]>([]);
   const [pool, setPool] = useState<ITokenPool>();
-  const [amount, setAmount] = useState<number>(1);
+  const [amount, setAmount] = useState<string>('1');
   const [tokenVerifiers, setTokenVerifiers] = useState<IVerifiers[]>([]);
   const [recipient, setRecipient] = useState<string>('');
   const [tokenIndex, setTokenIndex] = useState<string | null>('');
-  const [tokenBalance, setTokenBalance] = useState<number>(0);
-  const [refresh, setRefresh] = useState<number>(0);
+  const [tokenBalance, setTokenBalance] = useState<string>('0');
+  const [refresh, setRefresh] = useState<string>('0');
 
   useEffect(() => {
     if (activeForm !== TUTORIALS.TRANSFER) {
-      setAmount(1);
+      setAmount('1');
       return;
     }
     setPayloadMissingFields(
@@ -80,7 +80,7 @@ export const TransferForm: React.FC = () => {
 
   useEffect(() => {
     if (!isFungible()) {
-      setAmount(1);
+      setAmount('1');
     }
   }, [pool, amount]);
 
@@ -112,9 +112,7 @@ export const TransferForm: React.FC = () => {
   };
 
   const handleAmountChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    if (parseInt(event.target.value)) {
-      setAmount(parseInt(event.target.value));
-    }
+    setAmount(event.target.value);
   };
 
   const handleTokenIndexChange = (