Use variables for common formChange props

delvtech · Nov 2, 2024 · c631359 · c631359
1 parent 925f7e2
commit c631359
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 61 deletions.
diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/CloseLongForm/CloseLongForm.tsx
@@ -150,6 +150,12 @@ export function CloseLongForm({
   const isAmountLargerThanPositionSize = !!(
     bondAmountAsBigInt && bondAmountAsBigInt > long.bondAmount
   );
+
+  // Plausible event props
+  const formName = "Close Long";
+  const chainId = hyperdrive.chainId;
+  const poolAddress = hyperdrive.address;
+
   return (
     <TransactionView
       tokenInput={
@@ -166,11 +172,11 @@ export function CloseLongForm({
               onChange={(newAmount) => {
                 window.plausible("formChange", {
                   props: {
-                    formName: "Close Long",
+                    formName,
                     inputName: "amount",
                     inputValue: newAmount,
-                    chainId: hyperdrive.chainId,
-                    poolAddress: hyperdrive.address,
+                    chainId,
+                    poolAddress,
                   },
                 });
                 setAmount(newAmount);
@@ -195,11 +201,11 @@ export function CloseLongForm({
                   onChange={(tokenAddress) => {
                     window.plausible("formChange", {
                       props: {
-                        formName: "Close Long",
+                        formName,
                         inputName: "token",
                         inputValue: tokenAddress,
-                        chainId: hyperdrive.chainId,
-                        poolAddress: hyperdrive.address,
+                        chainId,
+                        poolAddress,
                       },
                     });
                     setActiveWithdrawToken(tokenAddress);

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx
@@ -242,6 +242,11 @@ export function OpenLongForm({
     );
   }
 
+  // Plausible event props
+  const formName = "Open Long";
+  const chainId = hyperdrive.chainId;
+  const poolAddress = hyperdrive.address;
+
   return (
     <TransactionView
       tokenInput={
@@ -254,11 +259,11 @@ export function OpenLongForm({
                 onSlippageChange={(slippage) => {
                   window.plausible("formChange", {
                     props: {
-                      formName: "Open Long",
+                      formName,
                       inputName: "slippage",
-                      inputValue: slippage,
-                      chainId: hyperdrive.chainId,
-                      poolAddress: hyperdrive.address,
+                      inputValue: slippage.toString(),
+                      chainId,
+                      poolAddress,
                     },
                   });
                   setSlippage(slippage);
@@ -279,11 +284,11 @@ export function OpenLongForm({
                 onChange={(tokenAddress) => {
                   window.plausible("formChange", {
                     props: {
-                      formName: "Open Long",
+                      formName,
                       inputName: "token",
                       inputValue: tokenAddress,
-                      chainId: hyperdrive.chainId,
-                      poolAddress: hyperdrive.address,
+                      chainId,
+                      poolAddress,
                     },
                   });
                   setActiveToken(tokenAddress);
@@ -297,11 +302,11 @@ export function OpenLongForm({
                 onChange={(tokenAddress) => {
                   window.plausible("formChange", {
                     props: {
-                      formName: "Open Long",
+                      formName,
                       inputName: "token",
                       inputValue: tokenAddress,
-                      chainId: hyperdrive.chainId,
-                      poolAddress: hyperdrive.address,
+                      chainId,
+                      poolAddress,
                     },
                   });
                   setActiveToken(tokenAddress);
@@ -349,11 +354,11 @@ export function OpenLongForm({
           onChange={(newAmount) => {
             window.plausible("formChange", {
               props: {
-                formName: "Open Long",
+                formName,
                 inputName: "amount",
                 inputValue: newAmount,
-                chainId: hyperdrive.chainId,
-                poolAddress: hyperdrive.address,
+                chainId,
+                poolAddress,
               },
             });
             setAmount(newAmount);

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx
@@ -248,6 +248,11 @@ export function AddLiquidityForm({
     },
   });
 
+  // Plausible event props
+  const formName = "Add Liquidity";
+  const chainId = hyperdrive.chainId;
+  const poolAddress = hyperdrive.address;
+
   return (
     <TransactionView
       tokenInput={
@@ -280,11 +285,11 @@ export function AddLiquidityForm({
               onChange={(tokenAddress) => {
                 window.plausible("formChange", {
                   props: {
-                    formName: "Add Liquidity",
+                    formName,
                     inputName: "token",
                     inputValue: tokenAddress,
-                    chainId: hyperdrive.chainId,
-                    poolAddress: hyperdrive.address,
+                    chainId,
+                    poolAddress,
                   },
                 });
                 setActiveToken(tokenAddress);
@@ -297,11 +302,11 @@ export function AddLiquidityForm({
               onSlippageChange={(slippage) => {
                 window.plausible("formChange", {
                   props: {
-                    formName: "Add Liquidity",
+                    formName,
                     inputName: "slippage",
                     inputValue: slippage,
-                    chainId: hyperdrive.chainId,
-                    poolAddress: hyperdrive.address,
+                    chainId,
+                    poolAddress,
                   },
                 });
                 setSlippage(slippage);
@@ -328,11 +333,11 @@ export function AddLiquidityForm({
           onChange={(newAmount) => {
             window.plausible("formChange", {
               props: {
-                formName: "Add Liquidity",
+                formName,
                 inputName: "amount",
                 inputValue: newAmount,
-                chainId: hyperdrive.chainId,
-                poolAddress: hyperdrive.address,
+                chainId,
+                poolAddress,
               },
             });
             setAmount(newAmount);

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm2.tsx
@@ -236,6 +236,11 @@ export function AddLiquidityForm2({
     },
   });
 
+  // Plausible event props
+  const formName = "Add Liquidity";
+  const chainId = hyperdrive.chainId;
+  const poolAddress = hyperdrive.address;
+
   return (
     <TransactionView
       tokenInput={
@@ -269,11 +274,11 @@ export function AddLiquidityForm2({
               onChange={(tokenAddress) => {
                 window.plausible("formChange", {
                   props: {
-                    formName: "Add Liquidity",
+                    formName,
                     inputName: "token",
                     inputValue: tokenAddress,
-                    chainId: hyperdrive.chainId,
-                    poolAddress: hyperdrive.address,
+                    chainId,
+                    poolAddress,
                   },
                 });
                 setActiveToken(tokenAddress);
@@ -288,11 +293,11 @@ export function AddLiquidityForm2({
                 onSlippageChange={(slippage) => {
                   window.plausible("formChange", {
                     props: {
-                      formName: "Add Liquidity",
+                      formName,
                       inputName: "slippage",
                       inputValue: slippage,
-                      chainId: hyperdrive.chainId,
-                      poolAddress: hyperdrive.address,
+                      chainId,
+                      poolAddress,
                     },
                   });
                   setSlippage(slippage);
@@ -320,11 +325,11 @@ export function AddLiquidityForm2({
           onChange={(newAmount) => {
             window.plausible("formChange", {
               props: {
-                formName: "Add Liquidity",
+                formName,
                 inputName: "amount",
                 inputValue: newAmount,
-                chainId: hyperdrive.chainId,
-                poolAddress: hyperdrive.address,
+                chainId,
+                poolAddress,
               },
             });
             setAmount(newAmount);

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/lp/RemoveLiquidityForm/RemoveLiquidityForm.tsx
@@ -228,6 +228,11 @@ export function RemoveLiquidityForm({
         })()
       : 0n;
 
+  // Plausible event props
+  const formName = "Remove Liquidity";
+  const chainId = hyperdrive.chainId;
+  const poolAddress = hyperdrive.address;
+
   return (
     <TransactionView
       tokenInput={
@@ -240,11 +245,11 @@ export function RemoveLiquidityForm({
                 onSlippageChange={(slippage) => {
                   window.plausible("formChange", {
                     props: {
-                      formName: "Remove Liquidity",
+                      formName,
                       inputName: "slippage",
                       inputValue: slippage,
-                      chainId: hyperdrive.chainId,
-                      poolAddress: hyperdrive.address,
+                      chainId,
+                      poolAddress,
                     },
                   });
                   setSlippage(slippage);
@@ -269,11 +274,11 @@ export function RemoveLiquidityForm({
             onChange={(newAmount) => {
               window.plausible("formChange", {
                 props: {
-                  formName: "Remove Liquidity",
+                  formName,
                   inputName: "amount",
                   inputValue: newAmount,
-                  chainId: hyperdrive.chainId,
-                  poolAddress: hyperdrive.address,
+                  chainId,
+                  poolAddress,
                 },
               });
               setAmount(newAmount);
@@ -289,11 +294,11 @@ export function RemoveLiquidityForm({
                 onChange={(tokenAddress) => {
                   window.plausible("formChange", {
                     props: {
-                      formName: "Remove Liquidity",
+                      formName,
                       inputName: "token",
                       inputValue: tokenAddress,
-                      chainId: hyperdrive.chainId,
-                      poolAddress: hyperdrive.address,
+                      chainId,
+                      poolAddress,
                     },
                   });
                   setActiveWithdrawToken(tokenAddress);

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/CloseShortForm/CloseShortForm.tsx
@@ -142,6 +142,11 @@ export function CloseShortForm({
     });
   }
 
+  // Plausible event props
+  const formName = "Close Short";
+  const chainId = hyperdrive.chainId;
+  const poolAddress = hyperdrive.address;
+
   return (
     <TransactionView
       tokenInput={
@@ -157,11 +162,11 @@ export function CloseShortForm({
             onChange={(newAmount) => {
               window.plausible("formChange", {
                 props: {
-                  formName: "Close Short",
+                  formName,
                   inputName: "amount",
                   inputValue: newAmount,
-                  chainId: hyperdrive.chainId,
-                  poolAddress: hyperdrive.address,
+                  chainId,
+                  poolAddress,
                 },
               });
               setAmount(newAmount);
@@ -188,11 +193,11 @@ export function CloseShortForm({
                 onChange={(tokenAddress) => {
                   window.plausible("formChange", {
                     props: {
-                      formName: "Close Short",
+                      formName,
                       inputName: "token",
                       inputValue: tokenAddress,
-                      chainId: hyperdrive.chainId,
-                      poolAddress: hyperdrive.address,
+                      chainId,
+                      poolAddress,
                     },
                   });
                   setActiveWithdrawToken(tokenAddress);

diff --git a/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx b/apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx
@@ -305,6 +305,11 @@ export function OpenShortForm({
     Date.now() + Number(hyperdrive.poolConfig.positionDuration * 1000n),
   );
 
+  // Plausible event props
+  const formName = "Open Short";
+  const chainId = hyperdrive.chainId;
+  const poolAddress = hyperdrive.address;
+
   return (
     <TransactionView
       tokenInput={
@@ -325,11 +330,11 @@ export function OpenShortForm({
                 onChange={(tokenAddress) => {
                   window.plausible("formChange", {
                     props: {
-                      formName: "Open Short",
+                      formName,
                       inputName: "token",
                       inputValue: tokenAddress,
-                      chainId: hyperdrive.chainId,
-                      poolAddress: hyperdrive.address,
+                      chainId,
+                      poolAddress,
                     },
                   });
                   setActiveToken(tokenAddress);
@@ -353,11 +358,11 @@ export function OpenShortForm({
                   onSlippageChange={(slippage) => {
                     window.plausible("formChange", {
                       props: {
-                        formName: "Open Short",
+                        formName,
                         inputName: "slippage",
                         inputValue: slippage,
-                        chainId: hyperdrive.chainId,
-                        poolAddress: hyperdrive.address,
+                        chainId,
+                        poolAddress,
                       },
                     });
                     setSlippage(slippage);
@@ -372,11 +377,11 @@ export function OpenShortForm({
             onChange={(newAmount) => {
               window.plausible("formChange", {
                 props: {
-                  formName: "Open Short",
+                  formName,
                   inputName: "size",
                   inputValue: newAmount,
-                  chainId: hyperdrive.chainId,
-                  poolAddress: hyperdrive.address,
+                  chainId,
+                  poolAddress,
                 },
               });
               setShortAmount(newAmount);