From 7b492ec765b9e4b4636cddcf85774dab4481949b Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 5 Jun 2023 08:21:24 +0200
Subject: [PATCH 01/15] Add TxMsgTransfer type

---
 types/txMsg.ts | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/types/txMsg.ts b/types/txMsg.ts
index a58614f..cd8cdb7 100644
--- a/types/txMsg.ts
+++ b/types/txMsg.ts
@@ -7,7 +7,8 @@ export type MsgType =
   | "redelegate"
   | "claimRewards"
   | "setWithdrawAddress"
-  | "createVestingAccount";
+  | "createVestingAccount"
+  | "msgTransfer";
 
 export type TxMsg =
   | TxMsgSend
@@ -16,7 +17,8 @@ export type TxMsg =
   | TxMsgRedelegate
   | TxMsgClaimRewards
   | TxMsgSetWithdrawAddress
-  | TxMsgCreateVestingAccount;
+  | TxMsgCreateVestingAccount
+  | TxMsgTransfer;
 
 export interface TxMsgSend {
   readonly typeUrl: "/cosmos.bank.v1beta1.MsgSend";
@@ -81,3 +83,16 @@ export interface TxMsgCreateVestingAccount {
     readonly delayed: boolean;
   };
 }
+
+export interface TxMsgTransfer {
+  readonly typeUrl: "/ibc.applications.transfer.v1.MsgTransfer";
+  readonly value: {
+    readonly sourcePort: string;
+    readonly sourceChannel: string;
+    readonly token: Coin;
+    readonly sender: string;
+    readonly receiver: string;
+    readonly timeoutTimestamp: number;
+    readonly memo: string;
+  };
+}

From bcf7f45b44bd0b8d40be00afdc62740a794f92a2 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 5 Jun 2023 08:21:31 +0200
Subject: [PATCH 02/15] Add TxMsgTransfer helpers

---
 lib/txMsgHelpers.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/lib/txMsgHelpers.ts b/lib/txMsgHelpers.ts
index c9da8ec..e4e3bbc 100644
--- a/lib/txMsgHelpers.ts
+++ b/lib/txMsgHelpers.ts
@@ -10,6 +10,7 @@ import {
   TxMsgRedelegate,
   TxMsgSend,
   TxMsgSetWithdrawAddress,
+  TxMsgTransfer,
   TxMsgUndelegate,
 } from "../types/txMsg";
 
@@ -85,6 +86,18 @@ const isTxMsgCreateVestingAccount = (msg: TxMsg | EncodeObject): msg is TxMsgCre
   !!msg.value.endTime &&
   typeof msg.value.delayed === "boolean";
 
+const isTxMsgTransfer = (msg: TxMsg | EncodeObject): msg is TxMsgTransfer =>
+  msg.typeUrl === "/ibc.applications.transfer.v1.MsgTransfer" &&
+  "value" in msg &&
+  "sourcePort" in msg.value &&
+  "sourceChannel" in msg.value &&
+  "sender" in msg.value &&
+  "receiver" in msg.value &&
+  !!msg.value.sourcePort &&
+  !!msg.value.sourceChannel &&
+  !!msg.value.sender &&
+  !!msg.value.receiver;
+
 const gasOfMsg = (msgType: MsgType): number => {
   switch (msgType) {
     case "send":
@@ -101,6 +114,8 @@ const gasOfMsg = (msgType: MsgType): number => {
       return 100_000;
     case "createVestingAccount":
       return 100_000;
+    case "msgTransfer":
+      return 100_000;
     default:
       throw new Error("Unknown msg type");
   }
@@ -148,6 +163,7 @@ export {
   isTxMsgClaimRewards,
   isTxMsgSetWithdrawAddress,
   isTxMsgCreateVestingAccount,
+  isTxMsgTransfer,
   gasOfMsg,
   gasOfTx,
   dbTxFromJson,

From 61009ebec02ce94d85e8074d0e23c0716695d186 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 5 Jun 2023 08:21:49 +0200
Subject: [PATCH 03/15] Add TxMsgTransferDetails

---
 .../TransactionInfo/TxMsgTransferDetails.tsx  | 79 +++++++++++++++++++
 .../dataViews/TransactionInfo/index.tsx       | 11 ++-
 2 files changed, 84 insertions(+), 6 deletions(-)
 create mode 100644 components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx

diff --git a/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx b/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
new file mode 100644
index 0000000..66f8e82
--- /dev/null
+++ b/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
@@ -0,0 +1,79 @@
+import { useAppContext } from "../../../context/AppContext";
+import { printableCoin } from "../../../lib/displayHelpers";
+import { TxMsgTransfer } from "../../../types/txMsg";
+import HashView from "../HashView";
+
+interface TxMsgTransferDetailsProps {
+  readonly msg: TxMsgTransfer;
+}
+
+const TxMsgTransferDetails = ({ msg }: TxMsgTransferDetailsProps) => {
+  const { state } = useAppContext();
+
+  const timeoutDateObj = new Date(msg.value.timeoutTimestamp / 1000000);
+  const timeoutDate = timeoutDateObj.toLocaleDateString();
+  const timeoutTime = timeoutDateObj.toLocaleTimeString();
+
+  return (
+    <>
+      <li>
+        <h3>MsgTransfer</h3>
+      </li>
+      <li>
+        <label>Source Port:</label>
+        <div>{msg.value.sourcePort}</div>
+      </li>
+      <li>
+        <label>Source Channel:</label>
+        <div>{msg.value.sourceChannel}</div>
+      </li>
+      <li>
+        <label>Token:</label>
+        <div>{printableCoin(msg.value.token, state.chain)}</div>
+      </li>
+      <li>
+        <label>To:</label>
+        <div title={msg.value.receiver}>
+          <HashView hash={msg.value.receiver} />
+        </div>
+      </li>
+      <li>
+        <label>Timeout:</label>
+        <div>
+          {timeoutDate} {timeoutTime}
+        </div>
+      </li>
+      <li>
+        <label>Memo:</label>
+        <div>{msg.value.memo}</div>
+      </li>
+      <style jsx>{`
+        li:not(:has(h3)) {
+          background: rgba(255, 255, 255, 0.03);
+          padding: 6px 10px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+        }
+        li + li:nth-child(2) {
+          margin-top: 25px;
+        }
+        li + li {
+          margin-top: 10px;
+        }
+        li div {
+          padding: 3px 6px;
+        }
+        label {
+          font-size: 12px;
+          background: rgba(255, 255, 255, 0.1);
+          padding: 3px 6px;
+          border-radius: 5px;
+          display: block;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default TxMsgTransferDetails;
diff --git a/components/dataViews/TransactionInfo/index.tsx b/components/dataViews/TransactionInfo/index.tsx
index 1da85d5..616884f 100644
--- a/components/dataViews/TransactionInfo/index.tsx
+++ b/components/dataViews/TransactionInfo/index.tsx
@@ -7,6 +7,7 @@ import {
   isTxMsgRedelegate,
   isTxMsgSend,
   isTxMsgSetWithdrawAddress,
+  isTxMsgTransfer,
   isTxMsgUndelegate,
 } from "../../../lib/txMsgHelpers";
 import { DbTransaction } from "../../../types";
@@ -17,6 +18,7 @@ import TxMsgDelegateDetails from "./TxMsgDelegateDetails";
 import TxMsgRedelegateDetails from "./TxMsgRedelegateDetails";
 import TxMsgSendDetails from "./TxMsgSendDetails";
 import TxMsgSetWithdrawAddressDetails from "./TxMsgSetWithdrawAddressDetails";
+import TxMsgTransferDetails from "./TxMsgTransferDetails";
 import TxMsgUndelegateDetails from "./TxMsgUndelegateDetails";
 
 interface Props {
@@ -58,12 +60,9 @@ const TransactionInfo = ({ tx }: Props) => {
                 {isTxMsgUndelegate(msg) ? <TxMsgUndelegateDetails msg={msg} /> : null}
                 {isTxMsgRedelegate(msg) ? <TxMsgRedelegateDetails msg={msg} /> : null}
                 {isTxMsgClaimRewards(msg) ? <TxMsgClaimRewardsDetails msg={msg} /> : null}
-                {isTxMsgSetWithdrawAddress(msg) ? (
-                  <TxMsgSetWithdrawAddressDetails msg={msg} />
-                ) : null}
-                {isTxMsgCreateVestingAccount(msg) ? (
-                  <TxMsgCreateVestingAccountDetails msg={msg} />
-                ) : null}
+                {isTxMsgSetWithdrawAddress(msg) ? (<TxMsgSetWithdrawAddressDetails msg={msg} />) : null}
+                {isTxMsgCreateVestingAccount(msg) ? (<TxMsgCreateVestingAccountDetails msg={msg} />) : null}
+                {isTxMsgTransfer(msg) ? <TxMsgTransferDetails msg={msg} /> : null}
               </StackableContainer>
             ))}
           </StackableContainer>

From dc56ace5456f443b33f4128f77df20c4f93a3f19 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 5 Jun 2023 08:22:43 +0200
Subject: [PATCH 04/15] Add MsgTransferForm

---
 .../CreateTxForm/MsgForm/MsgTransferForm.tsx  | 248 ++++++++++++++++++
 .../forms/CreateTxForm/MsgForm/index.tsx      |   3 +
 2 files changed, 251 insertions(+)
 create mode 100644 components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx

diff --git a/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx b/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
new file mode 100644
index 0000000..605c513
--- /dev/null
+++ b/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
@@ -0,0 +1,248 @@
+import { assert } from "@cosmjs/utils";
+import { useEffect, useState } from "react";
+import { MsgGetter } from "..";
+import { useAppContext } from "../../../../context/AppContext";
+import { checkAddress, exampleAddress } from "../../../../lib/displayHelpers";
+import { isTxMsgTransfer } from "../../../../lib/txMsgHelpers";
+import { TxMsg, TxMsgTransfer } from "../../../../types/txMsg";
+import Input from "../../../inputs/Input";
+import Select from "../../../inputs/Select";
+import StackableContainer from "../../../layout/StackableContainer";
+
+const humanTimestampOptions = [
+  { label: "12 hours from now", value: 12 * 60 * 60 * 1000 },
+  { label: "1 day from now", value: 24 * 60 * 60 * 1000 },
+  { label: "2 days from now", value: 2 * 24 * 60 * 60 * 1000 },
+  { label: "3 days from now", value: 3 * 24 * 60 * 60 * 1000 },
+  { label: "7 days from now", value: 7 * 24 * 60 * 60 * 1000 },
+  { label: "10 days from now", value: 10 * 24 * 60 * 60 * 1000 },
+  { label: "2 weeks from now", value: 2 * 7 * 24 * 60 * 60 * 1000 },
+  { label: "3 weeks from now", value: 3 * 7 * 24 * 60 * 60 * 1000 },
+  { label: "1 month from now", value: 4 * 7 * 24 * 60 * 60 * 1000 },
+  { label: "custom", value: 0 },
+];
+
+type HumanTimestampOption = (typeof humanTimestampOptions)[number];
+
+interface MsgTransferFormProps {
+  readonly fromAddress: string;
+  readonly setMsgGetter: (msgGetter: MsgGetter) => void;
+  readonly deleteMsg: () => void;
+}
+
+const MsgTransferForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgTransferFormProps) => {
+  const { state } = useAppContext();
+  assert(state.chain.addressPrefix, "addressPrefix missing");
+
+  const [sourcePort, setSourcePort] = useState("transfer");
+  const [sourceChannel, setSourceChannel] = useState("");
+  const [denom, setDenom] = useState("");
+  const [amount, setAmount] = useState("0");
+  const [toAddress, setToAddress] = useState("");
+  const [selectedTimestamp, setSelectedTimestamp] = useState<HumanTimestampOption>(
+    humanTimestampOptions[0],
+  );
+  const [customTimestamp, setCustomTimestamp] = useState("");
+  const [memo, setMemo] = useState("");
+
+  const [sourcePortError, setSourcePortError] = useState("");
+  const [sourceChannelError, setSourceChannelError] = useState("");
+  const [denomError, setDenomError] = useState("");
+  const [amountError, setAmountError] = useState("");
+  const [toAddressError, setToAddressError] = useState("");
+  const [customTimestampError, setCustomTimestampError] = useState("");
+
+  useEffect(() => {
+    setSourcePortError("");
+    setSourceChannelError("");
+    setDenomError("");
+    setAmountError("");
+    setToAddressError("");
+    setCustomTimestampError("");
+
+    const isMsgValid = (msg: TxMsg): msg is TxMsgTransfer => {
+      assert(state.chain.addressPrefix, "addressPrefix missing");
+
+      if (!sourcePort) {
+        setSourcePortError("Source port is required");
+        return false;
+      }
+
+      if (!sourceChannel) {
+        setSourceChannelError("Source channel is required");
+        return false;
+      }
+
+      if (!denom) {
+        setDenomError("Denom is required");
+        return false;
+      }
+
+      if (!amount || Number(amount) <= 0) {
+        setAmountError("Amount must be greater than 0");
+        return false;
+      }
+
+      const addressErrorMsg = checkAddress(toAddress, state.chain.addressPrefix);
+      if (addressErrorMsg) {
+        setToAddressError(`Invalid address for network ${state.chain.chainId}: ${addressErrorMsg}`);
+        return false;
+      }
+
+      if (selectedTimestamp.label === "custom") {
+        if (!customTimestamp || isNaN(Number(customTimestamp))) {
+          setCustomTimestampError("A timestamp is required");
+          return false;
+        }
+
+        if (Number(customTimestamp) <= Date.now()) {
+          setCustomTimestampError("Timestamp needs to be in the future");
+          return false;
+        }
+      }
+
+      return isTxMsgTransfer(msg);
+    };
+
+    const timeoutTimestamp =
+      selectedTimestamp.label === "custom"
+        ? Number(customTimestamp)
+        : (Date.now() + selectedTimestamp.value) * 1000000; // In nanoseconds
+
+    const msg: TxMsgTransfer = {
+      typeUrl: "/ibc.applications.transfer.v1.MsgTransfer",
+      value: {
+        sender: fromAddress,
+        receiver: toAddress,
+        token: { denom, amount },
+        sourcePort,
+        sourceChannel,
+        timeoutTimestamp,
+        memo,
+      },
+    };
+
+    setMsgGetter({ isMsgValid, msg });
+  }, [
+    amount,
+    customTimestamp,
+    denom,
+    fromAddress,
+    memo,
+    selectedTimestamp.label,
+    selectedTimestamp.value,
+    setMsgGetter,
+    sourceChannel,
+    sourcePort,
+    state.chain.addressPrefix,
+    state.chain.chainId,
+    toAddress,
+  ]);
+
+  return (
+    <StackableContainer lessPadding lessMargin>
+      <button className="remove" onClick={() => deleteMsg()}>
+        ✕
+      </button>
+      <h2>MsgTransfer</h2>
+      <div className="form-item">
+        <Input
+          label="Recipient Address"
+          name="recipient-address"
+          value={toAddress}
+          onChange={({ target }) => setToAddress(target.value)}
+          error={toAddressError}
+          placeholder={`E.g. ${exampleAddress(0, state.chain.addressPrefix)}`}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          label="Denom"
+          name="denom"
+          value={denom}
+          onChange={({ target }) => setDenom(target.value)}
+          error={denomError}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          type="number"
+          label="Amount"
+          name="amount"
+          value={amount}
+          onChange={({ target }) => setAmount(target.value)}
+          error={amountError}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          label="Source Port"
+          name="source-port"
+          value={sourcePort}
+          onChange={({ target }) => setSourcePort(target.value)}
+          error={sourcePortError}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          label="Source Channel"
+          name="source-channel"
+          value={sourceChannel}
+          onChange={({ target }) => setSourceChannel(target.value)}
+          error={sourceChannelError}
+        />
+      </div>
+      <div className="form-item">
+        <Select
+          options={humanTimestampOptions}
+          onChange={(option: HumanTimestampOption) => {
+            setSelectedTimestamp(option);
+
+            if (option.label !== "custom") {
+              setCustomTimestamp("");
+            }
+          }}
+          value={selectedTimestamp}
+          name="chain-select"
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          type="number"
+          label="Custom Timestamp"
+          name="custom-timestamp"
+          disabled={selectedTimestamp.label !== "custom"}
+          value={customTimestamp}
+          onChange={({ target }) => setCustomTimestamp(target.value)}
+          error={customTimestampError}
+        />
+      </div>
+      <div className="form-item">
+        <Input
+          label="Memo"
+          name="memo"
+          value={memo}
+          onChange={({ target }) => setMemo(target.value)}
+        />
+      </div>
+      <style jsx>{`
+        .form-item {
+          margin-top: 1.5em;
+        }
+        button.remove {
+          background: rgba(255, 255, 255, 0.2);
+          width: 30px;
+          height: 30px;
+          border-radius: 50%;
+          border: none;
+          color: white;
+          position: absolute;
+          right: 10px;
+          top: 10px;
+        }
+      `}</style>
+    </StackableContainer>
+  );
+};
+
+export default MsgTransferForm;
diff --git a/components/forms/CreateTxForm/MsgForm/index.tsx b/components/forms/CreateTxForm/MsgForm/index.tsx
index 3760210..1489fa9 100644
--- a/components/forms/CreateTxForm/MsgForm/index.tsx
+++ b/components/forms/CreateTxForm/MsgForm/index.tsx
@@ -6,6 +6,7 @@ import MsgDelegateForm from "./MsgDelegateForm";
 import MsgRedelegateForm from "./MsgRedelegateForm";
 import MsgSendForm from "./MsgSendForm";
 import MsgSetWithdrawAddressForm from "./MsgSetWithdrawAddressForm";
+import MsgTransferForm from "./MsgTransferForm";
 import MsgUndelegateForm from "./MsgUndelegateForm";
 
 interface MsgFormProps {
@@ -31,6 +32,8 @@ const MsgForm = ({ msgType, senderAddress, ...restProps }: MsgFormProps) => {
       return <MsgSetWithdrawAddressForm delegatorAddress={senderAddress} {...restProps} />;
     case "createVestingAccount":
       return <MsgCreateVestingAccountForm fromAddress={senderAddress} {...restProps} />;
+    case "msgTransfer":
+      return <MsgTransferForm fromAddress={senderAddress} {...restProps} />;
     default:
       return null;
   }

From e9a34cf432d33dd8a6c892d1c8189733c4eccb53 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 5 Jun 2023 08:23:15 +0200
Subject: [PATCH 05/15] Add MsgTransfer button

---
 components/forms/CreateTxForm/index.tsx | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/components/forms/CreateTxForm/index.tsx b/components/forms/CreateTxForm/index.tsx
index 9d53e80..f29b0a1 100644
--- a/components/forms/CreateTxForm/index.tsx
+++ b/components/forms/CreateTxForm/index.tsx
@@ -144,14 +144,9 @@ const CreateTxForm = ({ router, senderAddress, accountOnChain }: CreateTxFormPro
         <Button label="Add MsgUndelegate" onClick={() => addMsgType("undelegate")} />
         <Button label="Add MsgBeginRedelegate" onClick={() => addMsgType("redelegate")} />
         <Button label="Add MsgWithdrawDelegatorReward" onClick={() => addMsgType("claimRewards")} />
-        <Button
-          label="Add MsgSetWithdrawAddress"
-          onClick={() => addMsgType("setWithdrawAddress")}
-        />
-        <Button
-          label="Add MsgCreateVestingAccount"
-          onClick={() => addMsgType("createVestingAccount")}
-        />
+        <Button label="Add MsgSetWithdrawAddress" onClick={() => addMsgType("setWithdrawAddress")} />
+        <Button label="Add MsgCreateVestingAccount" onClick={() => addMsgType("createVestingAccount")} />
+        <Button label="Add MsgTransfer" onClick={() => addMsgType("msgTransfer")} />
       </StackableContainer>
       <Button
         label="Create Transaction"

From d3a41069d93447331fff09706a362df504bbaaf5 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 5 Jun 2023 13:17:25 +0200
Subject: [PATCH 06/15] Use MsgTransferEncodeObject with Long

---
 .../TransactionInfo/TxMsgTransferDetails.tsx  |  2 +-
 .../CreateTxForm/MsgForm/MsgTransferForm.tsx  |  5 +++--
 types/txMsg.ts                                | 22 +++++++++----------
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx b/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
index 66f8e82..2e33484 100644
--- a/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
@@ -10,7 +10,7 @@ interface TxMsgTransferDetailsProps {
 const TxMsgTransferDetails = ({ msg }: TxMsgTransferDetailsProps) => {
   const { state } = useAppContext();
 
-  const timeoutDateObj = new Date(msg.value.timeoutTimestamp / 1000000);
+  const timeoutDateObj = new Date(msg.value.timeoutTimestamp.divide(1_000_000).toNumber());
   const timeoutDate = timeoutDateObj.toLocaleDateString();
   const timeoutTime = timeoutDateObj.toLocaleTimeString();
 
diff --git a/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx b/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
index 605c513..ddf54fe 100644
--- a/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
+++ b/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
@@ -1,4 +1,5 @@
 import { assert } from "@cosmjs/utils";
+import Long from "long";
 import { useEffect, useState } from "react";
 import { MsgGetter } from "..";
 import { useAppContext } from "../../../../context/AppContext";
@@ -106,8 +107,8 @@ const MsgTransferForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgTransferFo
 
     const timeoutTimestamp =
       selectedTimestamp.label === "custom"
-        ? Number(customTimestamp)
-        : (Date.now() + selectedTimestamp.value) * 1000000; // In nanoseconds
+        ? Long.fromString(customTimestamp)
+        : Long.fromNumber(Date.now() + selectedTimestamp.value, true).multiply(1_000_000); // In nanoseconds
 
     const msg: TxMsgTransfer = {
       typeUrl: "/ibc.applications.transfer.v1.MsgTransfer",
diff --git a/types/txMsg.ts b/types/txMsg.ts
index cd8cdb7..2b31853 100644
--- a/types/txMsg.ts
+++ b/types/txMsg.ts
@@ -1,4 +1,5 @@
-import { Coin } from "@cosmjs/amino";
+import { Coin, MsgTransferEncodeObject } from "@cosmjs/stargate";
+import { MsgTransfer } from "cosmjs-types/ibc/applications/transfer/v1/tx";
 
 export type MsgType =
   | "send"
@@ -84,15 +85,12 @@ export interface TxMsgCreateVestingAccount {
   };
 }
 
-export interface TxMsgTransfer {
-  readonly typeUrl: "/ibc.applications.transfer.v1.MsgTransfer";
-  readonly value: {
-    readonly sourcePort: string;
-    readonly sourceChannel: string;
-    readonly token: Coin;
-    readonly sender: string;
-    readonly receiver: string;
-    readonly timeoutTimestamp: number;
-    readonly memo: string;
-  };
+type OmmitedMsgTransfer = Omit<MsgTransfer, "timeoutHeight" | "memo">;
+type MsgTransferRequiredToken = OmmitedMsgTransfer & Required<Pick<OmmitedMsgTransfer, "token">>;
+interface MsgTransferOptionalMemo extends MsgTransferRequiredToken {
+  readonly memo?: string;
 }
+
+export interface TxMsgTransfer extends MsgTransferEncodeObject {
+  readonly value: Readonly<MsgTransferOptionalMemo>;
+}
\ No newline at end of file

From 6a49011206124dca37f48941e718c87ff277db46 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 12 Jun 2023 11:06:25 +0200
Subject: [PATCH 07/15] Add .vscode to .gitignore

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index c7fbfeb..87469a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,6 @@ yarn-error.log*
 
 # IDE folder
 .idea
+
+# Visual Studio Code
+.vscode

From 1e3a51404c66348c95484402ec49e3b76d4f072e Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 12 Jun 2023 11:06:58 +0200
Subject: [PATCH 08/15] Remove printableCoin(). Show timeout in seconds

---
 .../TransactionInfo/TxMsgTransferDetails.tsx  | 129 ++++++++----------
 1 file changed, 59 insertions(+), 70 deletions(-)

diff --git a/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx b/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
index 2e33484..75e8d1d 100644
--- a/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
@@ -1,5 +1,4 @@
-import { useAppContext } from "../../../context/AppContext";
-import { printableCoin } from "../../../lib/displayHelpers";
+import { thinSpace } from "../../../lib/displayHelpers";
 import { TxMsgTransfer } from "../../../types/txMsg";
 import HashView from "../HashView";
 
@@ -7,73 +6,63 @@ interface TxMsgTransferDetailsProps {
   readonly msg: TxMsgTransfer;
 }
 
-const TxMsgTransferDetails = ({ msg }: TxMsgTransferDetailsProps) => {
-  const { state } = useAppContext();
-
-  const timeoutDateObj = new Date(msg.value.timeoutTimestamp.divide(1_000_000).toNumber());
-  const timeoutDate = timeoutDateObj.toLocaleDateString();
-  const timeoutTime = timeoutDateObj.toLocaleTimeString();
-
-  return (
-    <>
-      <li>
-        <h3>MsgTransfer</h3>
-      </li>
-      <li>
-        <label>Source Port:</label>
-        <div>{msg.value.sourcePort}</div>
-      </li>
-      <li>
-        <label>Source Channel:</label>
-        <div>{msg.value.sourceChannel}</div>
-      </li>
-      <li>
-        <label>Token:</label>
-        <div>{printableCoin(msg.value.token, state.chain)}</div>
-      </li>
-      <li>
-        <label>To:</label>
-        <div title={msg.value.receiver}>
-          <HashView hash={msg.value.receiver} />
-        </div>
-      </li>
-      <li>
-        <label>Timeout:</label>
-        <div>
-          {timeoutDate} {timeoutTime}
-        </div>
-      </li>
-      <li>
-        <label>Memo:</label>
-        <div>{msg.value.memo}</div>
-      </li>
-      <style jsx>{`
-        li:not(:has(h3)) {
-          background: rgba(255, 255, 255, 0.03);
-          padding: 6px 10px;
-          border-radius: 8px;
-          display: flex;
-          align-items: center;
-        }
-        li + li:nth-child(2) {
-          margin-top: 25px;
-        }
-        li + li {
-          margin-top: 10px;
-        }
-        li div {
-          padding: 3px 6px;
-        }
-        label {
-          font-size: 12px;
-          background: rgba(255, 255, 255, 0.1);
-          padding: 3px 6px;
-          border-radius: 5px;
-          display: block;
-        }
-      `}</style>
-    </>
-  );
-};
+const TxMsgTransferDetails = ({ msg }: TxMsgTransferDetailsProps) => (
+  <>
+    <li>
+      <h3>MsgTransfer</h3>
+    </li>
+    <li>
+      <label>Source Port:</label>
+      <div>{msg.value.sourcePort}</div>
+    </li>
+    <li>
+      <label>Source Channel:</label>
+      <div>{msg.value.sourceChannel}</div>
+    </li>
+    <li>
+      <label>Token:</label>
+      <div>{msg.value.token.amount + thinSpace + msg.value.token.denom}</div>
+    </li>
+    <li>
+      <label>To:</label>
+      <div title={msg.value.receiver}>
+        <HashView hash={msg.value.receiver} />
+      </div>
+    </li>
+    <li>
+      <label>Timeout:</label>
+      <div>{msg.value.timeoutTimestamp.divide(1_000_000).toString()} seconds</div>
+    </li>
+    <li>
+      <label>Memo:</label>
+      <div>{msg.value.memo}</div>
+    </li>
+    <style jsx>{`
+      li:not(:has(h3)) {
+        background: rgba(255, 255, 255, 0.03);
+        padding: 6px 10px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+      }
+      li + li:nth-child(2) {
+        margin-top: 25px;
+      }
+      li + li {
+        margin-top: 10px;
+      }
+      li div {
+        padding: 3px 6px;
+      }
+      label {
+        font-size: 12px;
+        background: rgba(255, 255, 255, 0.1);
+        padding: 3px 6px;
+        border-radius: 5px;
+        display: block;
+      }
+    `}</style>
+  </>
+);
 
 export default TxMsgTransferDetails;

From 58590f8920680fbf080917efeb4069435804141e Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 12 Jun 2023 11:07:17 +0200
Subject: [PATCH 09/15] Import MsgTransfer from Json

---
 lib/txMsgHelpers.ts | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/lib/txMsgHelpers.ts b/lib/txMsgHelpers.ts
index e4e3bbc..bbbcb92 100644
--- a/lib/txMsgHelpers.ts
+++ b/lib/txMsgHelpers.ts
@@ -127,16 +127,22 @@ const gasOfTx = (msgTypes: readonly MsgType[]): number => {
   return totalTxGas;
 };
 
-const importMsgCreateVestingAccount = (msg: EncodeObject): EncodeObject => {
+const importMsgType = (msg: EncodeObject): EncodeObject => {
   if (isTxMsgCreateVestingAccount(msg)) {
     return { ...msg, value: { ...msg.value, endTime: Long.fromValue(msg.value.endTime) } };
   }
 
+  if (isTxMsgTransfer(msg)) {
+    return {
+      ...msg,
+      value: { ...msg.value, timeoutTimestamp: Long.fromValue(msg.value.timeoutTimestamp) },
+    };
+  }
+
   return msg;
 };
 
-const importMsgTypes = (msgs: readonly EncodeObject[]): EncodeObject[] =>
-  msgs.map(importMsgCreateVestingAccount);
+const importMsgTypes = (msgs: readonly EncodeObject[]): EncodeObject[] => msgs.map(importMsgType);
 
 const dbTxFromJson = (txJson: string): DbTransaction | null => {
   try {

From e1899eb5cc6afbf8298e655b043f64e8e506387b Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 12 Jun 2023 11:07:50 +0200
Subject: [PATCH 10/15] Use better html for timeout with input list

---
 .../CreateTxForm/MsgForm/MsgTransferForm.tsx  | 83 ++++++++-----------
 components/inputs/Input.tsx                   |  2 +
 2 files changed, 37 insertions(+), 48 deletions(-)

diff --git a/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx b/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
index ddf54fe..aff6a1d 100644
--- a/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
+++ b/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
@@ -7,7 +7,6 @@ import { checkAddress, exampleAddress } from "../../../../lib/displayHelpers";
 import { isTxMsgTransfer } from "../../../../lib/txMsgHelpers";
 import { TxMsg, TxMsgTransfer } from "../../../../types/txMsg";
 import Input from "../../../inputs/Input";
-import Select from "../../../inputs/Select";
 import StackableContainer from "../../../layout/StackableContainer";
 
 const humanTimestampOptions = [
@@ -20,11 +19,8 @@ const humanTimestampOptions = [
   { label: "2 weeks from now", value: 2 * 7 * 24 * 60 * 60 * 1000 },
   { label: "3 weeks from now", value: 3 * 7 * 24 * 60 * 60 * 1000 },
   { label: "1 month from now", value: 4 * 7 * 24 * 60 * 60 * 1000 },
-  { label: "custom", value: 0 },
 ];
 
-type HumanTimestampOption = (typeof humanTimestampOptions)[number];
-
 interface MsgTransferFormProps {
   readonly fromAddress: string;
   readonly setMsgGetter: (msgGetter: MsgGetter) => void;
@@ -40,10 +36,7 @@ const MsgTransferForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgTransferFo
   const [denom, setDenom] = useState("");
   const [amount, setAmount] = useState("0");
   const [toAddress, setToAddress] = useState("");
-  const [selectedTimestamp, setSelectedTimestamp] = useState<HumanTimestampOption>(
-    humanTimestampOptions[0],
-  );
-  const [customTimestamp, setCustomTimestamp] = useState("");
+  const [timeout, setTimeout] = useState("");
   const [memo, setMemo] = useState("");
 
   const [sourcePortError, setSourcePortError] = useState("");
@@ -51,7 +44,7 @@ const MsgTransferForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgTransferFo
   const [denomError, setDenomError] = useState("");
   const [amountError, setAmountError] = useState("");
   const [toAddressError, setToAddressError] = useState("");
-  const [customTimestampError, setCustomTimestampError] = useState("");
+  const [timeoutError, setTimeoutError] = useState("");
 
   useEffect(() => {
     setSourcePortError("");
@@ -59,7 +52,7 @@ const MsgTransferForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgTransferFo
     setDenomError("");
     setAmountError("");
     setToAddressError("");
-    setCustomTimestampError("");
+    setTimeoutError("");
 
     const isMsgValid = (msg: TxMsg): msg is TxMsgTransfer => {
       assert(state.chain.addressPrefix, "addressPrefix missing");
@@ -84,31 +77,35 @@ const MsgTransferForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgTransferFo
         return false;
       }
 
-      const addressErrorMsg = checkAddress(toAddress, state.chain.addressPrefix);
+      const addressErrorMsg = checkAddress(toAddress, "");
       if (addressErrorMsg) {
         setToAddressError(`Invalid address for network ${state.chain.chainId}: ${addressErrorMsg}`);
         return false;
       }
 
-      if (selectedTimestamp.label === "custom") {
-        if (!customTimestamp || isNaN(Number(customTimestamp))) {
-          setCustomTimestampError("A timestamp is required");
-          return false;
-        }
+      const foundTimeout = humanTimestampOptions.find(({ label }) => label === timeout);
+      const isTimeoutNumber = !isNaN(Number(timeout));
+      const isTimeoutInFuture = Number(timeout) > Date.now();
 
-        if (Number(customTimestamp) <= Date.now()) {
-          setCustomTimestampError("Timestamp needs to be in the future");
-          return false;
-        }
+      if (!foundTimeout || !isTimeoutNumber || !isTimeoutInFuture) {
+        setTimeoutError("Timeout must be a valid timestamp in the future");
       }
 
       return isTxMsgTransfer(msg);
     };
 
-    const timeoutTimestamp =
-      selectedTimestamp.label === "custom"
-        ? Long.fromString(customTimestamp)
-        : Long.fromNumber(Date.now() + selectedTimestamp.value, true).multiply(1_000_000); // In nanoseconds
+    const timeoutTimestamp = (() => {
+      const foundTimeout = humanTimestampOptions.find(({ label }) => label === timeout)?.value;
+      if (foundTimeout) {
+        return Long.fromNumber(Date.now() + foundTimeout).multiply(1_000_000); // In nanoseconds
+      }
+
+      try {
+        return Long.fromString(timeout);
+      } catch {
+        return Long.fromNumber(0);
+      }
+    })();
 
     const msg: TxMsgTransfer = {
       typeUrl: "/ibc.applications.transfer.v1.MsgTransfer",
@@ -126,17 +123,15 @@ const MsgTransferForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgTransferFo
     setMsgGetter({ isMsgValid, msg });
   }, [
     amount,
-    customTimestamp,
     denom,
     fromAddress,
     memo,
-    selectedTimestamp.label,
-    selectedTimestamp.value,
     setMsgGetter,
     sourceChannel,
     sourcePort,
     state.chain.addressPrefix,
     state.chain.chainId,
+    timeout,
     toAddress,
   ]);
 
@@ -193,30 +188,22 @@ const MsgTransferForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgTransferFo
           error={sourceChannelError}
         />
       </div>
-      <div className="form-item">
-        <Select
-          options={humanTimestampOptions}
-          onChange={(option: HumanTimestampOption) => {
-            setSelectedTimestamp(option);
-
-            if (option.label !== "custom") {
-              setCustomTimestamp("");
-            }
-          }}
-          value={selectedTimestamp}
-          name="chain-select"
-        />
-      </div>
       <div className="form-item">
         <Input
-          type="number"
-          label="Custom Timestamp"
-          name="custom-timestamp"
-          disabled={selectedTimestamp.label !== "custom"}
-          value={customTimestamp}
-          onChange={({ target }) => setCustomTimestamp(target.value)}
-          error={customTimestampError}
+          type="text"
+          list="timestamp-options"
+          label="Timeout"
+          name="timeout"
+          placeholder="Enter timestamp in nanoseconds or select from list"
+          value={timeout}
+          onChange={({ target }) => setTimeout(target.value)}
+          error={timeoutError}
         />
+        <datalist id="timestamp-options">
+          {humanTimestampOptions.map(({ label }) => (
+            <option key={label}>{label}</option>
+          ))}
+        </datalist>
       </div>
       <div className="form-item">
         <Input
diff --git a/components/inputs/Input.tsx b/components/inputs/Input.tsx
index 94a6c62..b60e750 100644
--- a/components/inputs/Input.tsx
+++ b/components/inputs/Input.tsx
@@ -1,6 +1,7 @@
 interface Props {
   label?: string;
   type?: string;
+  list?: string;
   name?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   value: number | string | undefined;
@@ -18,6 +19,7 @@ const Input = (props: Props) => (
     <label>{props.label || ""}</label>
     <input
       type={props.type || "text"}
+      list={props.list}
       name={props.name || "text-input"}
       onChange={props.onChange}
       value={props.value}

From c3cd54a8fb16ab5b44f2bc1922dda056759d02df Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Mon, 12 Jun 2023 11:11:46 +0200
Subject: [PATCH 11/15] Remove assert. Comment empty prefix

---
 components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx b/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
index aff6a1d..f470776 100644
--- a/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
+++ b/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
@@ -55,8 +55,6 @@ const MsgTransferForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgTransferFo
     setTimeoutError("");
 
     const isMsgValid = (msg: TxMsg): msg is TxMsgTransfer => {
-      assert(state.chain.addressPrefix, "addressPrefix missing");
-
       if (!sourcePort) {
         setSourcePortError("Source port is required");
         return false;
@@ -77,7 +75,7 @@ const MsgTransferForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgTransferFo
         return false;
       }
 
-      const addressErrorMsg = checkAddress(toAddress, "");
+      const addressErrorMsg = checkAddress(toAddress, ""); // Allow address from any chain
       if (addressErrorMsg) {
         setToAddressError(`Invalid address for network ${state.chain.chainId}: ${addressErrorMsg}`);
         return false;
@@ -129,7 +127,6 @@ const MsgTransferForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgTransferFo
     setMsgGetter,
     sourceChannel,
     sourcePort,
-    state.chain.addressPrefix,
     state.chain.chainId,
     timeout,
     toAddress,

From 38f5653fb8dc8c62cc4f2c5555911ac7cd4ffdeb Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Tue, 13 Jun 2023 12:59:41 +0200
Subject: [PATCH 12/15] Remove memo type modification

---
 types/txMsg.ts | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/types/txMsg.ts b/types/txMsg.ts
index 2b31853..11fe8b9 100644
--- a/types/txMsg.ts
+++ b/types/txMsg.ts
@@ -85,12 +85,9 @@ export interface TxMsgCreateVestingAccount {
   };
 }
 
-type OmmitedMsgTransfer = Omit<MsgTransfer, "timeoutHeight" | "memo">;
+type OmmitedMsgTransfer = Omit<MsgTransfer, "timeoutHeight">;
 type MsgTransferRequiredToken = OmmitedMsgTransfer & Required<Pick<OmmitedMsgTransfer, "token">>;
-interface MsgTransferOptionalMemo extends MsgTransferRequiredToken {
-  readonly memo?: string;
-}
 
 export interface TxMsgTransfer extends MsgTransferEncodeObject {
-  readonly value: Readonly<MsgTransferOptionalMemo>;
-}
\ No newline at end of file
+  readonly value: Readonly<MsgTransferRequiredToken>;
+}

From 246575d39c783df1987276ac42e08726c31d79bc Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Tue, 13 Jun 2023 13:07:57 +0200
Subject: [PATCH 13/15] Show timeoutTimestamp as date and time

---
 .../TransactionInfo/TxMsgTransferDetails.tsx  | 124 ++++++++++--------
 1 file changed, 66 insertions(+), 58 deletions(-)

diff --git a/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx b/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
index 75e8d1d..e79577e 100644
--- a/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
+++ b/components/dataViews/TransactionInfo/TxMsgTransferDetails.tsx
@@ -6,63 +6,71 @@ interface TxMsgTransferDetailsProps {
   readonly msg: TxMsgTransfer;
 }
 
-const TxMsgTransferDetails = ({ msg }: TxMsgTransferDetailsProps) => (
-  <>
-    <li>
-      <h3>MsgTransfer</h3>
-    </li>
-    <li>
-      <label>Source Port:</label>
-      <div>{msg.value.sourcePort}</div>
-    </li>
-    <li>
-      <label>Source Channel:</label>
-      <div>{msg.value.sourceChannel}</div>
-    </li>
-    <li>
-      <label>Token:</label>
-      <div>{msg.value.token.amount + thinSpace + msg.value.token.denom}</div>
-    </li>
-    <li>
-      <label>To:</label>
-      <div title={msg.value.receiver}>
-        <HashView hash={msg.value.receiver} />
-      </div>
-    </li>
-    <li>
-      <label>Timeout:</label>
-      <div>{msg.value.timeoutTimestamp.divide(1_000_000).toString()} seconds</div>
-    </li>
-    <li>
-      <label>Memo:</label>
-      <div>{msg.value.memo}</div>
-    </li>
-    <style jsx>{`
-      li:not(:has(h3)) {
-        background: rgba(255, 255, 255, 0.03);
-        padding: 6px 10px;
-        border-radius: 8px;
-        display: flex;
-        align-items: center;
-      }
-      li + li:nth-child(2) {
-        margin-top: 25px;
-      }
-      li + li {
-        margin-top: 10px;
-      }
-      li div {
-        padding: 3px 6px;
-      }
-      label {
-        font-size: 12px;
-        background: rgba(255, 255, 255, 0.1);
-        padding: 3px 6px;
-        border-radius: 5px;
-        display: block;
-      }
-    `}</style>
-  </>
-);
+const TxMsgTransferDetails = ({ msg }: TxMsgTransferDetailsProps) => {
+  const timeoutDateObj = new Date(msg.value.timeoutTimestamp.divide(1_000_000).toNumber());
+  const timeoutDate = timeoutDateObj.toLocaleDateString();
+  const timeoutTime = timeoutDateObj.toLocaleTimeString();
+
+  return (
+    <>
+      <li>
+        <h3>MsgTransfer</h3>
+      </li>
+      <li>
+        <label>Source Port:</label>
+        <div>{msg.value.sourcePort}</div>
+      </li>
+      <li>
+        <label>Source Channel:</label>
+        <div>{msg.value.sourceChannel}</div>
+      </li>
+      <li>
+        <label>Token:</label>
+        <div>{msg.value.token.amount + thinSpace + msg.value.token.denom}</div>
+      </li>
+      <li>
+        <label>To:</label>
+        <div title={msg.value.receiver}>
+          <HashView hash={msg.value.receiver} />
+        </div>
+      </li>
+      <li>
+        <label>Timeout:</label>
+        <div>
+          {timeoutDate} {timeoutTime}
+        </div>
+      </li>
+      <li>
+        <label>Memo:</label>
+        <div>{msg.value.memo}</div>
+      </li>
+      <style jsx>{`
+        li:not(:has(h3)) {
+          background: rgba(255, 255, 255, 0.03);
+          padding: 6px 10px;
+          border-radius: 8px;
+          display: flex;
+          align-items: center;
+        }
+        li + li:nth-child(2) {
+          margin-top: 25px;
+        }
+        li + li {
+          margin-top: 10px;
+        }
+        li div {
+          padding: 3px 6px;
+        }
+        label {
+          font-size: 12px;
+          background: rgba(255, 255, 255, 0.1);
+          padding: 3px 6px;
+          border-radius: 5px;
+          display: block;
+        }
+      `}</style>
+    </>
+  );
+};
 
 export default TxMsgTransferDetails;

From bb6ac4e4a4f15cc6722d139ee7946e1bba96a808 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Tue, 13 Jun 2023 15:31:27 +0200
Subject: [PATCH 14/15] Base Input off html's input props

---
 components/inputs/Input.tsx | 19 ++++++-------------
 1 file changed, 6 insertions(+), 13 deletions(-)

diff --git a/components/inputs/Input.tsx b/components/inputs/Input.tsx
index b60e750..34c5140 100644
--- a/components/inputs/Input.tsx
+++ b/components/inputs/Input.tsx
@@ -1,20 +1,12 @@
-interface Props {
+import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+
+interface InputProps
+  extends DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
   label?: string;
-  type?: string;
-  list?: string;
-  name?: string;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  value: number | string | undefined;
-  min?: string | number | undefined;
-  checked?: boolean;
-  onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  disabled?: boolean;
   error?: string;
-  placeholder?: string;
-  width?: string;
 }
 
-const Input = (props: Props) => (
+const Input = (props: InputProps) => (
   <div className="text-input">
     <label>{props.label || ""}</label>
     <input
@@ -22,6 +14,7 @@ const Input = (props: Props) => (
       list={props.list}
       name={props.name || "text-input"}
       onChange={props.onChange}
+      onFocus={props.onFocus}
       value={props.value}
       checked={props.checked}
       min={props.type === "datetime-local" ? props.min : undefined}

From ec71bf374dcb2d64d511be6b685cbe737c1fce05 Mon Sep 17 00:00:00 2001
From: abefernan <44572727+abefernan@users.noreply.github.com>
Date: Tue, 13 Jun 2023 15:31:51 +0200
Subject: [PATCH 15/15] Clear timeout on focus to open list

---
 components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx b/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
index f470776..6ee2a0d 100644
--- a/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
+++ b/components/forms/CreateTxForm/MsgForm/MsgTransferForm.tsx
@@ -194,6 +194,7 @@ const MsgTransferForm = ({ fromAddress, setMsgGetter, deleteMsg }: MsgTransferFo
           placeholder="Enter timestamp in nanoseconds or select from list"
           value={timeout}
           onChange={({ target }) => setTimeout(target.value)}
+          onFocus={() => setTimeout("")}
           error={timeoutError}
         />
         <datalist id="timestamp-options">