Merge pull request #67 from chainapsis/osmosis-update

Add experimental features on osmosis tab

Author: piatoss3612

src/components/EvmTab.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import { Dec, DecUtils } from "@keplr-wallet/unit";
 import { isAddress } from "@ethersproject/address";
 import {
@@ -22,9 +22,10 @@ export const EvmTab: React.FC = () => {
   const [keplrEip6963ProviderInfo, setKeplrEip6963ProviderInfo] =
     useState<any>();
 
-  // Check for experimental=true in URL
-  const searchParams = new URLSearchParams(window.location.search);
-  const isExperimental = searchParams.get("experimental") === "true";
+  const isExperimental = useMemo(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+    return searchParams.get("experimental") === "true";
+  }, []);
 
   useEffect(() => {
     const init = async () => {
@@ -56,7 +57,7 @@ export const EvmTab: React.FC = () => {
     return () => {
       window.removeEventListener(
         "eip6963:announceProvider",
-        handleAnnounceProvider
+        handleAnnounceProvider,
       );
     };
   }, []);
@@ -130,7 +131,7 @@ const WalletData: React.FC = () => {
                 {method}
               </button>
             </div>
-          )
+          ),
         )}
         <div>Result: {result}</div>
       </div>
@@ -173,7 +174,7 @@ const RpcData: React.FC = () => {
                 {method}
               </button>
             </div>
-          )
+          ),
         )}
         <div>Result: {result}</div>
       </div>
@@ -333,7 +334,7 @@ const SendNativeToken: React.FC = () => {
 
     const currentChainId = window.keplr?.ethereum?._currentChainId;
     const currentChainInfo = await window.keplr?.getChainInfoWithoutEndpoints(
-      currentChainId
+      currentChainId,
     );
 
     if (currentChainInfo === undefined) {
@@ -345,7 +346,7 @@ const SendNativeToken: React.FC = () => {
     const amountValue = `0x${parseInt(
       new Dec(parsedAmount)
         .mulTruncate(DecUtils.getTenExponentN(mainCurrency.coinDecimals))
-        .toString()
+        .toString(),
     ).toString(16)}`;
 
     const tx = {
@@ -683,7 +684,7 @@ const EIP5792: React.FC = () => {
   const renderResult = (
     result: any,
     resultKey: string,
-    allowTruncate: boolean = true
+    allowTruncate: boolean = true,
   ) => {
     const showFull = showFullResults[resultKey] || false;
 
@@ -750,7 +751,7 @@ const EIP5792: React.FC = () => {
                   }
                   return value;
                 },
-                2
+                2,
               )}
             </pre>
           </div>
@@ -774,10 +775,10 @@ const EIP5792: React.FC = () => {
   const updateCall = (
     idx: number,
     field: "address" | "amount",
-    value: string
+    value: string,
   ) => {
     setCalls(
-      calls.map((call, i) => (i === idx ? { ...call, [field]: value } : call))
+      calls.map((call, i) => (i === idx ? { ...call, [field]: value } : call)),
     );
   };
 

src/components/OsmosisTab.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { Dec, DecUtils } from "@keplr-wallet/unit";
-import { OsmosisChainInfo } from "../constants";
+import { OsmosisChainInfo, OsmosisTestnetChainInfo } from "../constants";
 import { Balances } from "../types/balance";
 import { api } from "../util/api";
 import { sendMsgs } from "../util/sendMsgs";
@@ -12,39 +12,71 @@ export const OsmosisTab: React.FC = () => {
   const [balance, setBalance] = useState<string>("");
   const [recipient, setRecipient] = useState<string>("");
   const [amount, setAmount] = useState<string>("");
+  const [skipSimulation, setSkipSimulation] = useState<boolean>(false);
+  const [targetChainId, setTargetChainId] = useState<string>(
+    OsmosisTestnetChainInfo.chainId,
+  );
+
+  const isExperimental = useMemo(() => {
+    const searchParams = new URLSearchParams(window.location.search);
+    return searchParams.get("experimental") === "true";
+  }, []);
+
+  const chains = useMemo(
+    () => [
+      {
+        id: OsmosisTestnetChainInfo.chainId,
+        label: "Osmosis Testnet",
+        info: OsmosisTestnetChainInfo,
+      },
+      {
+        id: OsmosisChainInfo.chainId,
+        label: "Osmosis",
+        info: OsmosisChainInfo,
+      },
+    ],
+    [],
+  );
 
-  const init = async () => {
+  const selectedChain = useMemo(
+    () => chains.find((c) => c.id === targetChainId) ?? chains[0],
+    [chains, targetChainId],
+  );
+
+  const init = useCallback(async () => {
     const keplr = window.keplr;
     if (keplr) {
       try {
-        await keplr.experimentalSuggestChain(OsmosisChainInfo);
+        // Ensure the selected chain is available in Keplr and enabled
+        await keplr.experimentalSuggestChain(selectedChain.info as any);
+        await keplr.enable(selectedChain.id);
       } catch (e) {
         if (e instanceof Error) {
           console.log(e.message);
         }
       }
     }
-  };
+  }, [selectedChain]);
 
   const getKeyFromKeplr = async () => {
-    const key = await window.keplr?.getKey(OsmosisChainInfo.chainId);
+    const key = await window.keplr?.getKey(selectedChain.id);
     if (key) {
       setAddress(key.bech32Address);
     }
   };
 
   const getBalance = async () => {
-    const key = await window.keplr?.getKey(OsmosisChainInfo.chainId);
+    const key = await window.keplr?.getKey(selectedChain.id);
 
     if (key) {
-      const uri = `${OsmosisChainInfo.rest}/cosmos/bank/v1beta1/balances/${key.bech32Address}?pagination.limit=1000`;
+      const uri = `${selectedChain.info.rest}/cosmos/bank/v1beta1/balances/${key.bech32Address}?pagination.limit=1000`;
 
       const data = await api<Balances>(uri);
       const balance = data.balances.find(
-        (balance) => balance.denom === "uosmo"
+        (balance) => balance.denom === "uosmo",
       );
-      const osmoDecimal = OsmosisChainInfo.currencies.find(
-        (currency) => currency.coinMinimalDenom === "uosmo"
+      const osmoDecimal = selectedChain.info.currencies.find(
+        (currency) => currency.coinMinimalDenom === "uosmo",
       )?.coinDecimals;
 
       if (balance) {
@@ -58,7 +90,7 @@ export const OsmosisTab: React.FC = () => {
 
   const sendBalance = async () => {
     if (window.keplr) {
-      const key = await window.keplr?.getKey(OsmosisChainInfo.chainId);
+      const key = await window.keplr?.getKey(selectedChain.id);
       const protoMsgs = {
         typeUrl: "/cosmos.bank.v1beta1.MsgSend",
         value: MsgSend.encode({
@@ -77,24 +109,39 @@ export const OsmosisTab: React.FC = () => {
       };
 
       try {
-        const gasUsed = await simulateMsgs(
-          OsmosisChainInfo,
-          key.bech32Address,
-          [protoMsgs],
-          [{ denom: "uosmo", amount: "236" }]
-        );
-
-        if (gasUsed) {
+        if (isExperimental && skipSimulation) {
+          // Use a safe default gas when skipping simulation
+          const defaultGas = "200000";
           await sendMsgs(
             window.keplr,
-            OsmosisChainInfo,
+            selectedChain.info as any,
             key.bech32Address,
             [protoMsgs],
             {
               amount: [{ denom: "uosmo", amount: "236" }],
-              gas: Math.floor(gasUsed * 1.5).toString(),
-            }
+              gas: defaultGas,
+            },
           );
+        } else {
+          const gasUsed = await simulateMsgs(
+            selectedChain.info as any,
+            key.bech32Address,
+            [protoMsgs],
+            [{ denom: "uosmo", amount: "236" }],
+          );
+
+          if (gasUsed) {
+            await sendMsgs(
+              window.keplr,
+              selectedChain.info as any,
+              key.bech32Address,
+              [protoMsgs],
+              {
+                amount: [{ denom: "uosmo", amount: "236" }],
+                gas: Math.floor(gasUsed * 1.5).toString(),
+              },
+            );
+          }
         }
       } catch (e) {
         if (e instanceof Error) {
@@ -105,16 +152,43 @@ export const OsmosisTab: React.FC = () => {
   };
 
   useEffect(() => {
-    init();
-  }, []);
+    void init();
+    // Reset displayed data on chain change
+    setAddress("");
+    setBalance("");
+  }, [init]);
 
   return (
     <>
       <h2 style={{ marginTop: "30px" }}>
-        Request to Osmosis Testnet via Keplr Provider
+        Request to {selectedChain.label} via Keplr Provider
       </h2>
 
       <div className="item-container">
+        {isExperimental && (
+          <div className="item">
+            <div className="item-title">Switch Cosmos Chain</div>
+            <div className="item-content">
+              <div style={{ display: "flex", flexDirection: "column" }}>
+                Chain:
+                <select
+                  value={targetChainId}
+                  onChange={(e) => setTargetChainId(e.target.value)}
+                >
+                  {chains.map((c) => (
+                    <option key={c.id} value={c.id}>
+                      {c.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div style={{ marginTop: "10px" }}>
+                Current Chain ID: {selectedChain.id}
+              </div>
+            </div>
+          </div>
+        )}
+
         <div className="item">
           <div className="item-title">Get OSMO Address</div>
 
@@ -172,6 +246,55 @@ export const OsmosisTab: React.FC = () => {
               />
             </div>
 
+            {isExperimental && (
+              <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                <div style={{ fontSize: 14, opacity: 0.9 }}>
+                  Skip gas simulation
+                </div>
+                <div
+                  role="switch"
+                  aria-checked={skipSimulation}
+                  onClick={() => setSkipSimulation((v) => !v)}
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 8,
+                    cursor: "pointer",
+                    userSelect: "none",
+                  }}
+                >
+                  <div
+                    style={{
+                      position: "relative",
+                      width: 44,
+                      height: 24,
+                      borderRadius: 9999,
+                      background: skipSimulation ? "#4ade80" : "#cbd5e1",
+                      transition: "background-color 150ms ease",
+                      boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.05)",
+                    }}
+                  >
+                    <span
+                      style={{
+                        position: "absolute",
+                        top: 2,
+                        left: skipSimulation ? 22 : 2,
+                        width: 20,
+                        height: 20,
+                        borderRadius: 9999,
+                        background: "#fff",
+                        boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
+                        transition: "left 150ms ease",
+                      }}
+                    />
+                  </div>
+                  <span style={{ fontSize: 12, color: "#334155" }}>
+                    {skipSimulation ? "On" : "Off"}
+                  </span>
+                </div>
+              </div>
+            )}
+
             <button className="keplr-button" onClick={sendBalance}>
               Send
             </button>