Add funds feature added

components/Accounts.tsx

@@ -29,6 +29,7 @@ const labelStyle = css({
 });
 import transactionsData from "../content/transactions.json";
 import { SetHookDialog } from "./SetHookDialog";
+import { addFunds } from "../state/actions/addFaucetAccount";
 
 export const AccountDialog = ({
   activeAccountAddress,
@@ -166,6 +167,8 @@ export const AccountDialog = ({
                 <Text
                   css={{
                     fontFamily: "$monospace",
+                    display: "flex",
+                    alignItems: "center",
                   }}
                 >
                   {Dinero({
@@ -178,6 +181,21 @@ export const AccountDialog = ({
                       currency: "XRP",
                       currencyDisplay: "name",
                     })}
+                  <Button
+                    css={{
+                      fontFamily: "$monospace",
+                      lineHeight: 2,
+                      mt: "2px",
+                      ml: "$3",
+                    }}
+                    ghost
+                    size="xs"
+                    onClick={() => {
+                      addFunds(activeAccount?.address || "");
+                    }}
+                  >
+                    Add Funds
+                  </Button>
                 </Text>
               </Flex>
               <Flex css={{ marginLeft: "auto" }}>

pages/api/faucet.ts

@@ -21,8 +21,16 @@ export default async function handler(
   if (req.method !== 'POST') {
     return res.status(405).json({ error: 'Method not allowed!' })
   }
+  const { account } = req.query;
+  console.log(req.query)
+  const ip = Array.isArray(req?.headers?.["x-real-ip"]) ? req?.headers?.["x-real-ip"][0] : req?.headers?.["x-real-ip"];
   try {
-    const response = await fetch(`https://${process.env.NEXT_PUBLIC_TESTNET_URL}/newcreds`, { method: 'POST' });
+    const response = await fetch(`https://${process.env.NEXT_PUBLIC_TESTNET_URL}/newcreds?account=${account ? account : ''}`, {
+      method: 'POST',
+      headers: {
+        'x-forwarded-for': ip || '',
+      },
+    });
     const json: Faucet | ErrorResponse = await response.json();
     if ("error" in json) {
       return res.status(429).json(json)

state/actions/addFaucetAccount.ts

@@ -29,8 +29,8 @@ export const names = [
  */
 export const addFaucetAccount = async (showToast: boolean = false) => {
   // Lets limit the number of faucet accounts to 5 for now
-  if (state.accounts.length > 4) {
+  if (state.accounts.length > 5) {
-    return toast.error("You can only have maximum 5 accounts");
+    return toast.error("You can only have maximum 6 accounts");
   }
   if (typeof window !== 'undefined') {
 
@@ -73,4 +73,25 @@ export const addFaucetAccount = async (showToast: boolean = false) => {
       }, 10000);
     }
   }
-})();
+})();
+
+export const addFunds = async (address: string) => {
+  const toastId = toast.loading("Creating account");
+  const res = await fetch(`${window.location.origin}/api/faucet?account=${address}`, {
+    method: "POST",
+  });
+  const json: FaucetAccountRes | { error: string } = await res.json();
+  console.log(json)
+  if ("error" in json) {
+    return toast.error(json.error, { id: toastId });
+  } else {
+    console.log(json)
+    toast.success("Funds added", { id: toastId });
+    const currAccount = state.accounts.find(acc => acc.address === address);
+    console.log(currAccount)
+    if (currAccount) {
+      currAccount.xrp = (Number(currAccount.xrp) + (json.xrp * 1000000)).toString();
+    }
+  }
+
+}