#21 Create form for sending raw input to application (#36)

apps/web/package.json

@@ -16,11 +16,11 @@
     "dependencies": {
         "@cartesi/rollups-explorer-ui": "*",
         "@cartesi/rollups-wagmi": "*",
-        "@mantine/core": "^7.2.2",
-        "@mantine/form": "^7.2.2",
-        "@mantine/hooks": "^7.2.2",
-        "@mantine/notifications": "^7.2.2",
-        "@rainbow-me/rainbowkit": "1.3.1",
+        "@mantine/core": "^7.3.0",
+        "@mantine/form": "^7.3.0",
+        "@mantine/hooks": "^7.3.0",
+        "@mantine/notifications": "^7.3.0",
+        "@rainbow-me/rainbowkit": "1.2.0",
         "@react-spring/web": "^9.7.3",
         "abitype": "^0.9",
         "encoding": "^0.1",

apps/web/src/components/sendTransaction.tsx

@@ -0,0 +1,105 @@
+"use client";
+import {
+    ERC20DepositForm,
+    EtherDepositForm,
+    RawInputForm,
+} from "@cartesi/rollups-explorer-ui";
+import { FC, useMemo, useState } from "react";
+import { Select } from "@mantine/core";
+import { useApplicationsQuery, useTokensQuery } from "../graphql";
+import { useDebouncedValue } from "@mantine/hooks";
+
+export type DepositType =
+    | "ether"
+    | "erc20"
+    | "erc721"
+    | "erc1155"
+    | "relay"
+    | "input";
+
+interface DepositProps {
+    initialDepositType?: DepositType;
+}
+
+const SendTransaction: FC<DepositProps> = ({
+    initialDepositType = "ether",
+}) => {
+    const [depositType, setDepositType] =
+        useState<DepositType>(initialDepositType);
+    const [applicationId, setApplicationId] = useState("");
+    const [debouncedApplicationId] = useDebouncedValue(applicationId, 400);
+    const [{ data: applicationData, fetching }] = useApplicationsQuery({
+        variables: {
+            limit: 10,
+            where: {
+                id_containsInsensitive: debouncedApplicationId ?? "",
+            },
+        },
+    });
+    const applications = useMemo(
+        () => (applicationData?.applications ?? []).map((a) => a.id),
+        [applicationData],
+    );
+    const [{ data: tokenData }] = useTokensQuery({
+        variables: {
+            limit: 100,
+        },
+    });
+    const tokens = useMemo(
+        () =>
+            (tokenData?.tokens ?? []).map(
+                (a) => `${a.symbol} - ${a.name} - ${a.id}`,
+            ),
+        [tokenData],
+    );
+
+    return (
+        <>
+            <Select
+                label="Type"
+                placeholder="Select deposit type"
+                mb={16}
+                data={[
+                    {
+                        group: "Deposit",
+                        items: [
+                            { value: "ether", label: "Ether Deposit" },
+                            { value: "erc20", label: "ERC-20 Deposit" },
+                        ],
+                    },
+                    {
+                        group: "Other",
+                        items: [{ value: "input", label: "Raw Input" }],
+                    },
+                ]}
+                value={depositType}
+                onChange={(nextValue) => {
+                    setDepositType(nextValue as DepositType);
+                    setApplicationId("");
+                }}
+            />
+
+            {depositType === "erc20" ? (
+                <ERC20DepositForm
+                    tokens={tokens}
+                    applications={applications}
+                    isLoadingApplications={fetching}
+                    onSearchApplications={setApplicationId}
+                />
+            ) : depositType === "ether" ? (
+                <EtherDepositForm
+                    applications={applications}
+                    isLoadingApplications={fetching}
+                    onSearchApplications={setApplicationId}
+                />
+            ) : depositType === "input" ? (
+                <RawInputForm
+                    applications={applications}
+                    isLoadingApplications={fetching}
+                    onSearchApplications={setApplicationId}
+                />
+            ) : null}
+        </>
+    );
+};
+export default SendTransaction;

apps/web/src/components/shell.tsx

@@ -1,8 +1,4 @@
 "use client";
-import {
-    ERC20DepositForm,
-    EtherDepositForm,
-} from "@cartesi/rollups-explorer-ui";
 import {
     AppShell,
     Burger,
@@ -21,48 +17,34 @@ import Link from "next/link";
 import { FC, ReactNode } from "react";
 import {
     TbApps,
+    TbArrowsDownUp,
     TbDotsVertical,
     TbHome,
     TbInbox,
-    TbMoneybag,
     TbMoonStars,
-    TbPigMoney,
     TbSun,
 } from "react-icons/tb";
-import { useAccount, useNetwork } from "wagmi";
-import CartesiLogo from "./cartesiLogo";
-import ConnectionView from "./connectionView";
-import { useApplicationsQuery, useTokensQuery } from "../graphql";
-import Footer from "./footer";
+import { useAccount } from "wagmi";
+import CartesiLogo from "../components/cartesiLogo";
+import ConnectionView from "../components/connectionView";
+import Footer from "../components/footer";
+import SendTransaction from "../components/sendTransaction";
 
 const Shell: FC<{ children: ReactNode }> = ({ children }) => {
     const [opened, { toggle }] = useDisclosure();
     const [menuOpened, { toggle: toggleMenu }] = useDisclosure(false);
-    const [deposit, { open: openDeposit, close: closeDeposit }] =
-        useDisclosure(false);
-    const [navDepositOpened, { toggle: toggleNavDeposit }] =
-        useDisclosure(false);
-    const [etherDeposit, { open: openEtherDeposit, close: closeEtherDeposit }] =
-        useDisclosure(false);
+    const [
+        transaction,
+        {
+            open: openTransaction,
+            close: closeTransaction,
+            toggle: toggleTransaction,
+        },
+    ] = useDisclosure(false);
     const theme = useMantineTheme();
     const isSmallDevice = useMediaQuery(`(max-width:${theme.breakpoints.sm})`);
     const { isConnected } = useAccount();
-    const { chain } = useNetwork();
     const { colorScheme, toggleColorScheme } = useMantineColorScheme();
-    const [{ data: applicationData }] = useApplicationsQuery({
-        variables: {
-            limit: 1000,
-        },
-    });
-    const applications = (applicationData?.applications ?? []).map((a) => a.id);
-    const [{ data: tokenData }] = useTokensQuery({
-        variables: {
-            limit: 1000,
-        },
-    });
-    const tokens = (tokenData?.tokens ?? []).map(
-        (a) => `${a.symbol} - ${a.name} - ${a.id}`,
-    );
 
     const themeDefaultProps = theme.components?.AppShell?.defaultProps ?? {};
 
@@ -85,15 +67,12 @@ const Shell: FC<{ children: ReactNode }> = ({ children }) => {
             }}
             padding="md"
         >
-            <Modal opened={deposit} onClose={closeDeposit} title="Deposit">
-                <ERC20DepositForm applications={applications} tokens={tokens} />
-            </Modal>
             <Modal
-                opened={etherDeposit}
-                onClose={closeEtherDeposit}
-                title="Deposit Ether"
+                opened={transaction}
+                onClose={closeTransaction}
+                title="Send Transaction"
             >
-                <EtherDepositForm applications={applications} />
+                <SendTransaction />
             </Modal>
             <AppShell.Header data-testid="header">
                 <Group h="100%" px="md">
@@ -110,23 +89,13 @@ const Shell: FC<{ children: ReactNode }> = ({ children }) => {
                         <Group ml="xl" gap="md">
                             <Button
                                 variant="subtle"
-                                leftSection={<TbPigMoney />}
-                                onClick={openDeposit}
+                                leftSection={<TbArrowsDownUp />}
+                                onClick={openTransaction}
                                 disabled={!isConnected}
                                 visibleFrom="sm"
-                                data-testid="deposit-button"
+                                data-testid="transaction-button"
                             >
-                                Deposit
-                            </Button>
-                            <Button
-                                variant="subtle"
-                                leftSection={<TbPigMoney />}
-                                onClick={openEtherDeposit}
-                                disabled={!isConnected}
-                                visibleFrom="sm"
-                                data-testid="deposit-ether-button"
-                            >
-                                Deposit Ether
+                                Send Transaction
                             </Button>
                             {!isSmallDevice && <ConnectButton />}
                             <Switch
@@ -180,32 +149,13 @@ const Shell: FC<{ children: ReactNode }> = ({ children }) => {
                     />
 
                     <NavLink
-                        label="Deposit"
-                        leftSection={<TbMoneybag />}
+                        label="Send Transaction"
+                        leftSection={<TbArrowsDownUp />}
                         disabled={!isConnected}
-                        opened={isConnected && navDepositOpened}
-                        onClick={toggleNavDeposit}
+                        opened={isConnected && transaction}
+                        onClick={toggleTransaction}
                         hiddenFrom="sm"
-                    >
-                        <NavLink
-                            active={isConnected}
-                            label="ERC-20"
-                            variant="subtle"
-                            component="button"
-                            onClick={openDeposit}
-                            leftSection={<TbPigMoney />}
-                            hiddenFrom="sm"
-                        />
-                        <NavLink
-                            active={isConnected}
-                            variant="subtle"
-                            component="button"
-                            label={chain?.nativeCurrency.name ?? "Ether"}
-                            onClick={openEtherDeposit}
-                            leftSection={<TbPigMoney />}
-                            hiddenFrom="sm"
-                        />
-                    </NavLink>
+                    />
 
                     {isSmallDevice && <ConnectButton showBalance />}
                 </Stack>

apps/web/src/providers/connectionConfig/reducer.ts

@@ -1,5 +1,5 @@
 "use client";
-import { descend, prop, propEq, reject, sort } from "ramda";
+import { descend, propEq, propOr, reject, sort } from "ramda";
 import { Connection, Reducer, State } from "./types";
 
 export const initialState = {
@@ -9,7 +9,7 @@ export const initialState = {
 } satisfies State;
 
 const sortByTimestampDesc = sort<Connection>(
-    descend(prop<number>("timestamp")),
+    descend<Connection>(propOr<number>(0, "timestamp")),
 );
 
 export const connectionConfigReducer: Reducer = (state, action): State => {