Link to docs on modal (#360)

* adds link to docs on long

* adds new copy to modal

* adds learn more

* update to new icon

apps/hyperdrive-trading/src/ui/hyperdrive/longs/OpenLongForm/OpenLongForm.tsx

@@ -1,7 +1,9 @@
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { adjustAmountByPercentage } from "@hyperdrive/core";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { ethers } from "ethers";
 import { ReactElement } from "react";
+import { Link } from "react-router-dom";
 import { Hyperdrive } from "src/appconfig/types";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { useMaxLong } from "src/ui/hyperdrive/longs/hooks/useMaxLong";
@@ -82,17 +84,27 @@ export function OpenLongForm({ market }: OpenLongFormProps): ReactElement {
 
   return (
     <div className="flex flex-col gap-10">
-      {/* You Pay Section */}
-      <div className="space-y-4 text-base-content">
-        <h5>You pay</h5>
-        <TokenInput
-          token={market.baseToken}
-          value={amount ?? ""}
-          maxValue={maxAmount}
-          onChange={(newAmount) => setAmount(newAmount)}
-        />
+      <div className="text-base-content">
+        <h5>Open a long</h5>
+        <div className="flex flex-col items-start">
+          <p>Secure a fixed rate by purchasing bonds.</p>
+          <Link
+            className="flex cursor-pointer flex-row items-center text-sm"
+            to={
+              "https://www.notion.so/delv-tech/Long-Scenarios-5396e8a14a794aaf821c3f8ed6dbcef9?pvs=4"
+            }
+          >
+            Learn More
+            <ArrowTopRightOnSquareIcon className="ml-1" width={12} />
+          </Link>
+        </div>
       </div>
-
+      <TokenInput
+        token={market.baseToken}
+        value={amount ?? ""}
+        maxValue={maxAmount}
+        onChange={(newAmount) => setAmount(newAmount)}
+      />
       {/* New Position Section */}
       <div className="space-y-4 text-base-content">
         <h5 className="text-center font-thin ">Preview transaction</h5>

apps/hyperdrive-trading/src/ui/hyperdrive/lp/AddLiquidityForm/AddLiquidityForm.tsx

@@ -1,6 +1,8 @@
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { ethers } from "ethers";
 import { ReactElement } from "react";
+import { Link } from "react-router-dom";
 import { Hyperdrive } from "src/appconfig/types";
 import { parseUnits } from "src/base/parseUnits";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
@@ -69,17 +71,28 @@ export function AddLiquidityForm({
 
   return (
     <div className="flex flex-col gap-10">
-      {/* Amount Section */}
-      <div className="space-y-4 text-base-content">
-        <h5>Amount to add</h5>
-        <TokenInput
-          token={market.baseToken}
-          value={amount ?? ""}
-          maxValue={baseTokenBalance?.formatted}
-          maxLabel="Balance"
-          onChange={(newAmount) => setAmount(newAmount)}
-        />
+      <div className="text-base-content">
+        <h5>Add liquidity</h5>
+        <div className="flex flex-col items-start">
+          <p>Earn trading fees when users open long or shorts</p>
+          <Link
+            className="flex cursor-pointer flex-row items-center text-sm"
+            to={
+              "https://www.notion.so/delv-tech/LP-Profitability-0acf6928b88c4a33875221aa15ca62d2?pvs=4"
+            }
+          >
+            Learn More
+            <ArrowTopRightOnSquareIcon className="ml-1" width={12} />
+          </Link>
+        </div>
       </div>
+      <TokenInput
+        token={market.baseToken}
+        value={amount ?? ""}
+        maxValue={baseTokenBalance?.formatted}
+        maxLabel="Balance"
+        onChange={(newAmount) => setAmount(newAmount)}
+      />
 
       {/* New Position Section */}
       <div className="space-y-4 text-base-content">

apps/hyperdrive-trading/src/ui/hyperdrive/shorts/OpenShortForm/OpenShortForm.tsx

@@ -1,6 +1,8 @@
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { constants, ethers } from "ethers";
 import { ReactElement } from "react";
+import { Link } from "react-router-dom";
 import { Hyperdrive, Token } from "src/appconfig/types";
 import { useNumericInput } from "src/ui/base/hooks/useNumericInput";
 import { useMaxShort } from "src/ui/hyperdrive/shorts/hooks/useMaxShort";
@@ -82,16 +84,27 @@ export function OpenShortForm({
 
   return (
     <div className="flex flex-col gap-10">
-      {/* You Pay Section */}
-      <div className="space-y-4 text-base-content">
-        <h5>Amount to short</h5>
-        <TokenInput
-          token={bondToken}
-          value={amount ?? ""}
-          maxValue={maxShort?.formatted}
-          onChange={(newAmount) => setAmount(newAmount)}
-        />
+      <div className="text-base-content">
+        <h5>Open a short</h5>
+        <div className="flex flex-col items-start">
+          <p>Earn yield by shorting the current bond price</p>
+          <Link
+            className="flex cursor-pointer flex-row items-center text-sm"
+            to={
+              "https://www.notion.so/delv-tech/Short-Scenarios-ddff34fa457545cdbc7556e57e43b282?pvs=4"
+            }
+          >
+            Learn More
+            <ArrowTopRightOnSquareIcon className="ml-1" width={12} />
+          </Link>
+        </div>
       </div>
+      <TokenInput
+        token={bondToken}
+        value={amount ?? ""}
+        maxValue={maxShort?.formatted}
+        onChange={(newAmount) => setAmount(newAmount)}
+      />
 
       {/* New Position Section */}
       <div className="space-y-4 text-base-content">