[ECO-1710] use query params to predefine inputs (#159)

src/typescript/frontend/src/components/pages/emojicoin/components/trade-emojicoin/SwapComponent.tsx

@@ -11,6 +11,7 @@ import { useScramble } from "use-scramble";
 import { useSimulateSwap } from "lib/hooks/queries/use-simulate-swap";
 import { useEventStore } from "context/websockets-context";
 import { useMatchBreakpoints } from "@hooks/index";
+import { useSearchParams } from "next/navigation";
 
 const SimulateInputsWrapper = ({ children }: PropsWithChildren) => (
   <div className="flex flex-col relative gap-[19px]">{children}</div>
@@ -43,12 +44,22 @@ export default function SwapComponent({
   marketID,
   initNumSwaps,
 }: SwapComponentProps) {
+  const searchParams = useSearchParams();
+
+  const presetInputAmount =
+    searchParams.get("buy") !== null ? searchParams.get("buy") : searchParams.get("sell");
+  const presetInputAmountIsValid =
+    presetInputAmount !== null &&
+    presetInputAmount !== "" &&
+    !Number.isNaN(Number(presetInputAmount));
   const { isDesktop } = useMatchBreakpoints();
-  const [inputAmount, setInputAmount] = useState("1");
+  const [inputAmount, setInputAmount] = useState(
+    presetInputAmountIsValid ? presetInputAmount! : "1"
+  );
   const [outputAmount, setOutputAmount] = useState("0"); // TODO: Use calculation for initial value...?
   const [previous, setPrevious] = useState(inputAmount);
   const [isLoading, setIsLoading] = useState(false);
-  const [isSell, setIsSell] = useState(false);
+  const [isSell, setIsSell] = useState(!(searchParams.get("sell") === null));
   const [submit, setSubmit] = useState<(() => Promise<void>) | null>(null);
 
   const numSwaps = useEventStore(

src/typescript/frontend/src/components/pages/launch-emojicoin/ClientLaunchEmojicoinPage.tsx

@@ -12,13 +12,18 @@ import EmojiPickerWithInput from "components/emoji-picker/EmojiPickerWithInput";
 import { useEffect } from "react";
 import { ColoredBytesIndicator } from "components/emoji-picker/ColoredBytesIndicator";
 import { sumBytes } from "@sdk/utils/sum-emoji-bytes";
+import { useSearchParams } from "next/navigation";
+import { getEmojisInString } from "@sdk/emoji_data";
 
 const labelClassName = "whitespace-nowrap body-sm md:body-lg text-light-gray uppercase font-forma";
 
 const ClientLaunchEmojicoinPage = () => {
+  const searchParams = useSearchParams();
+  const emojiParams = searchParams.get("emojis");
   const { t } = translationFunction();
-  const { emojis, setMode } = useInputStore((state) => ({
+  const { emojis, setEmojis, setMode } = useInputStore((state) => ({
     emojis: state.emojis,
+    setEmojis: state.setEmojis,
     setMode: state.setMode,
   }));
   const registerMarket = useRegisterMarket();
@@ -27,6 +32,9 @@ const ClientLaunchEmojicoinPage = () => {
   const invalid = length === 0 || length > 10;
 
   useEffect(() => {
+    if (emojiParams !== null) {
+      setEmojis(getEmojisInString(emojiParams));
+    }
     setMode("register");
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, []);

src/typescript/frontend/src/components/pages/pools/ClientPoolsPage.tsx

@@ -23,20 +23,27 @@ import { useAptos } from "context/wallet-context/AptosContextProvider";
 import type { FetchSortedMarketDataReturn } from "lib/queries/sorting/market-data";
 import EmojiPickerWithInput from "components/emoji-picker/EmojiPickerWithInput";
 import useInputStore from "@store/input-store";
+import { useSearchParams } from "next/navigation";
+import { getEmojisInString } from "@sdk/emoji_data";
 
 export const ClientPoolsPage = () => {
+  const searchParams = useSearchParams();
+  const poolParam = searchParams.get("pool");
   const [sortBy, setSortBy] = useState<SortByPageQueryParams>("all_time_vol");
   const [orderBy, setOrderBy] = useState<"desc" | "asc">("desc");
-  const [selectedIndex, setSelectedIndex] = useState<number>();
+  const [selectedIndex, setSelectedIndex] = useState<number | undefined>(poolParam ? 0 : undefined);
   const [page, setPage] = useState<number>(1);
   const [markets, setMarkets] = useState<FetchSortedMarketDataReturn["markets"]>([]);
   const [allDataIsLoaded, setAllDataIsLoaded] = useState<boolean>(false);
   const [pools, setPools] = useState<"all" | "mypools">("all");
-  const { emojis, setMode } = useInputStore((state) => ({
+  const [realEmojis, setRealEmojis] = useState(getEmojisInString(poolParam ?? ""));
+  const { emojis, setEmojis, setMode } = useInputStore((state) => ({
     emojis: state.emojis,
     setMode: state.setMode,
+    setEmojis: state.setEmojis,
   }));
   useEffect(() => {
+    setEmojis(realEmojis);
     setMode("pools");
     /* eslint-disable-next-line react-hooks/exhaustive-deps */
   }, []);
@@ -52,13 +59,17 @@ export const ClientPoolsPage = () => {
 
   const { account } = useAptos();
 
+  useEffect(() => {
+    setRealEmojis(emojis);
+  }, [emojis]);
+
   useEffect(() => {
     const root = "/pools/api";
     const sortByQuery = `sortby=${sortBy}`;
     const orderByQuery = `orderby=${orderBy}`;
     const pageQuery = `page=${page}`;
     const accountQuery = pools === "mypools" ? `&account=${account?.address}` : "";
-    const searchBytes = emojis.length > 0 ? `&searchBytes=${encodeEmoji(emojis)}` : "";
+    const searchBytes = realEmojis.length > 0 ? `&searchBytes=${encodeEmoji(realEmojis)}` : "";
     fetch(`${root}?${sortByQuery}&${orderByQuery}&${pageQuery}${accountQuery}${searchBytes}`)
       .then((res) => res.text())
       .then((txt) => parseJSON(txt))
@@ -68,7 +79,7 @@ export const ClientPoolsPage = () => {
         }
         setMarkets((markets) => (page === 1 ? [...data.markets] : [...markets, ...data.markets]));
       });
-  }, [page, orderBy, sortBy, account, pools, emojis]);
+  }, [page, orderBy, sortBy, account, pools, realEmojis]);
 
   const { isMobile } = useMatchBreakpoints();
 
@@ -144,6 +155,7 @@ export const ClientPoolsPage = () => {
       <StyledWrapper>
         <StyledInner width={{ _: "100%", laptopL: "57%" }}>
           <PoolsTable
+            index={selectedIndex}
             data={markets}
             sortBy={(s) => {
               setSortBy(s);

src/typescript/frontend/src/components/pages/pools/components/liquidity/index.tsx

@@ -29,6 +29,7 @@ import { Arrows } from "components/svg";
 import { COIN_FACTORY_MODULE_NAME } from "@sdk/const";
 import type { EntryFunctionTransactionBuilder } from "@sdk/emojicoin_dot_fun/payload-builders";
 import info from "../../../../../../public/images/infoicon.svg";
+import { useSearchParams } from "next/navigation";
 
 type LiquidityProps = {
   market: FetchSortedMarketDataReturn["markets"][0] | undefined;
@@ -81,12 +82,25 @@ const Liquidity: React.FC<LiquidityProps> = ({ market }) => {
   const { t } = translationFunction();
   const { theme } = useThemeContext();
 
-  const [liquidity, setLiquidity] = useState<number | "">("");
-  const [lp, setLP] = useState<number | "">("");
+  const searchParams = useSearchParams();
+  const presetInputAmount =
+    searchParams.get("add") !== null ? searchParams.get("add") : searchParams.get("remove");
+  const presetInputAmountIsValid =
+    presetInputAmount !== null &&
+    presetInputAmount !== "" &&
+    !Number.isNaN(Number(presetInputAmount));
+  const [liquidity, setLiquidity] = useState<number | "">(
+    searchParams.get("add") !== null && presetInputAmountIsValid ? Number(presetInputAmount) : ""
+  );
+  const [lp, setLP] = useState<number | "">(
+    searchParams.get("remove") !== null && presetInputAmountIsValid ? Number(presetInputAmount) : ""
+  );
   const [aptBalance, setAptBalance] = useState<bigint>();
   const [emojiBalance, setEmojiBalance] = useState<bigint>();
   const [emojiLPBalance, setEmojiLPBalance] = useState<bigint>();
-  const [direction, setDirection] = useState<"add" | "remove">("add");
+  const [direction, setDirection] = useState<"add" | "remove">(
+    searchParams.get("remove") !== null ? "remove" : "add"
+  );
   const [showLiquidityPrompt, setShowLiquidityPrompt] = useState<boolean>(false);
 
   const { aptos, account, submit } = useAptos();
@@ -169,11 +183,6 @@ const Liquidity: React.FC<LiquidityProps> = ({ market }) => {
     }
   }, [market, account, aptos]);
 
-  useEffect(() => {
-    setLP("");
-    setLiquidity("");
-  }, [direction]);
-
   const isActionPossible =
     market !== undefined &&
     (direction === "add" ? liquidity !== "" : lp !== "") &&

src/typescript/frontend/src/components/pages/pools/components/pools-table/index.tsx

@@ -18,6 +18,7 @@ import useElementDimensions from "@hooks/use-element-dimensions";
 
 export interface PoolsTableProps {
   data: FetchSortedMarketDataReturn["markets"];
+  index: number | undefined;
   sortBy: (sortBy: SortByPageQueryParams) => void;
   orderBy: (orderBy: OrderByStrings) => void;
   onSelect: (index: number) => void;
@@ -27,7 +28,7 @@ export interface PoolsTableProps {
 const PoolsTable: React.FC<PoolsTableProps> = (props: PoolsTableProps) => {
   const { isMobile } = useMatchBreakpoints();
   const { offsetHeight: poolsTableBodyHeight } = useElementDimensions("poolsTableBody");
-  const [selectedRow, setSelectedRow] = useState<number>();
+  const [selectedRow, setSelectedRow] = useState<number | undefined>(props.index);
   const [selectedSort, setSelectedSort] = useState<{
     col: SortByPageQueryParams;
     direction: OrderByStrings;