Refactor credits.aleo templates to use Credits class with numeric amounts

Author: marshacb

create-leo-app/template-react-credits-aleo-functions-ts/src/App.tsx

@@ -101,7 +101,7 @@ function App() {
 
     // Form inputs for split
     const [splitRecord, setSplitRecord] = useState(SAMPLE_RECORD_1);
-    const [splitAmount, setSplitAmount] = useState("250000u64");
+    const [splitAmount, setSplitAmount] = useState(250000);
 
     const executeFunction = async (
         functionName: string,
@@ -198,9 +198,9 @@ function App() {
                                         type="text"
                                         value={publicAmount}
                                         onChange={(e) =>
-                                            setPublicAmount(e.target.value)
+                                            setPublicAmount(Number(e.target.value) || 0)
                                         }
-                                        placeholder="50000u64"
+                                        placeholder="50000"
                                     />
                                 </div>
                             </div>
@@ -260,9 +260,9 @@ function App() {
                                         type="text"
                                         value={pubToPrivAmount}
                                         onChange={(e) =>
-                                            setPubToPrivAmount(e.target.value)
+                                            setPubToPrivAmount(Number(e.target.value) || 0)
                                         }
-                                        placeholder="50000u64"
+                                        placeholder="50000"
                                     />
                                 </div>
                             </div>
@@ -343,9 +343,9 @@ function App() {
                                         type="text"
                                         value={privateAmount}
                                         onChange={(e) =>
-                                            setPrivateAmount(e.target.value)
+                                            setPrivateAmount(Number(e.target.value) || 0)
                                         }
-                                        placeholder="50000u64"
+                                        placeholder="50000"
                                     />
                                 </div>
                             </div>
@@ -416,9 +416,9 @@ function App() {
                                         type="text"
                                         value={privToPubAmount}
                                         onChange={(e) =>
-                                            setPrivToPubAmount(e.target.value)
+                                            setPrivToPubAmount(Number(e.target.value) || 0)
                                         }
-                                        placeholder="50000u64"
+                                        placeholder="50000"
                                     />
                                 </div>
                             </div>
@@ -547,9 +547,9 @@ function App() {
                                         type="text"
                                         value={splitAmount}
                                         onChange={(e) =>
-                                            setSplitAmount(e.target.value)
+                                            setSplitAmount(Number(e.target.value) || 0)
                                         }
-                                        placeholder="250000u64"
+                                        placeholder="250000"
                                     />
                                 </div>
                             </div>

create-leo-app/template-react-credits-aleo-functions-ts/src/constants/sampleRecords.ts

@@ -22,4 +22,4 @@ export const SAMPLE_RECORD_2 = `{
 export const SAMPLE_RECIPIENT =
     "aleo1vskzxa2qqgnhznxsqh6tgq93c30sfkj6xqwe7sr85lgjkexjlcxs3lxhy3";
 
-export const SAMPLE_AMOUNT = "50000u64";
+export const SAMPLE_AMOUNT = 50000;