Merge branch 'stage' into jon/fe-448-create-ibc-bridge-provider

packages/stores/src/account/base.ts

@@ -78,9 +78,9 @@ import { InsufficientBalanceForFeeError } from "../ui-config";
 import { aminoConverters } from "./amino-converters";
 import {
   AccountStoreWallet,
+  CosmosRegistryWallet,
   DeliverTxResponse,
   OneClickTradingInfo,
-  RegistryWallet,
   SignOptions,
   TxEvent,
   TxEvents,
@@ -360,7 +360,7 @@ export class AccountStore<Injects extends Record<string, any>[] = []> {
         walletWithAccountSet[key] = injectedAccountsForChain[key];
       }
 
-      const walletInfo = wallet.walletInfo as RegistryWallet;
+      const walletInfo = wallet.walletInfo as CosmosRegistryWallet;
 
       walletWithAccountSet.txTypeInProgress = txInProgress ?? "";
       walletWithAccountSet.isReadyToSendTx =
@@ -469,7 +469,7 @@ export class AccountStore<Injects extends Record<string, any>[] = []> {
     // If the wallet isn't found, return the error
     if (!wallet) return new Error(errorMessage);
 
-    const walletInfo = wallet.walletInfo as RegistryWallet;
+    const walletInfo = wallet.walletInfo as CosmosRegistryWallet;
 
     // If the wallet has a custom error matcher, use it
     if (walletInfo?.matchError) {

packages/stores/src/account/types.ts

@@ -35,7 +35,7 @@ export interface DeliverTxResponse {
   readonly gasWanted: string;
 }
 
-export type RegistryWallet = Omit<Wallet, "logo"> & {
+export type CosmosRegistryWallet = Omit<Wallet, "logo"> & {
   logo: string;
   lazyInstall: () => any;
   stakeUrl?: string;
@@ -84,8 +84,8 @@ export type AccountStoreWallet<Injects extends Record<string, any>[] = []> =
     UnionToIntersection<Injects[number]> & {
       txTypeInProgress: string;
       isReadyToSendTx: boolean;
-      supportsChain: Required<RegistryWallet>["supportsChain"];
-      walletInfo: RegistryWallet;
+      supportsChain: Required<CosmosRegistryWallet>["supportsChain"];
+      walletInfo: CosmosRegistryWallet;
     };
 
 export interface TxEvents {

packages/stores/src/tests/test-wallet.ts

@@ -173,13 +173,22 @@ export class MockKeplrClient implements WalletClient {
     signer: string,
     signDoc: DirectSignDoc,
     signOptions?: SignOptions
-  ): ReturnType<MockKeplrWithFee["signDirect"]> {
-    return await this.client.signDirect(
+  ): ReturnType<Required<WalletClient>["signDirect"]> {
+    const response = await this.client.signDirect(
       chainId,
       signer,
       signDoc as any,
       signOptions
     );
+
+    // Convert Long to bigint
+    return {
+      signed: {
+        ...response.signed,
+        accountNumber: BigInt(response.signed.accountNumber.toString()),
+      },
+      signature: response.signature,
+    };
   }
 
   async sendTx(chainId: string, tx: Uint8Array, mode: BroadcastMode) {

packages/web/__tests__/test-utils.tsx

@@ -13,7 +13,7 @@ import { ReactNode } from "react";
 import { TestWallet, testWalletInfo } from "~/__tests__/test-wallet";
 import { MultiLanguageProvider } from "~/hooks/language/context";
 import { AvailableFlags } from "~/hooks/use-feature-flags";
-import { WalletSelectProvider } from "~/hooks/wallet-select";
+import { WalletSelectProvider } from "~/hooks/use-wallet-select";
 import { AppRouter } from "~/server/api/root-router";
 import { storeContext, StoreProvider } from "~/stores";
 import { RootStore } from "~/stores/root";

packages/web/components/alert/info.tsx

@@ -66,7 +66,7 @@ export const Info: FunctionComponent<
               {message}
             </span>
           )}
-          {caption && (
+          {caption && typeof caption === "string" && (
             <span
               className={classNames(
                 "body2 md:caption text-wosmongton-100",

packages/web/components/assets/gradient-view.tsx

@@ -1,17 +1,17 @@
 import classNames from "classnames";
-import { FunctionComponent } from "react";
+import { PropsWithChildren } from "react";
 
 import { CustomClasses } from "~/components/types";
 
 /** Wrap a view in a gradient border. */
-export const GradientView: FunctionComponent<
-  { gradientClassName?: string; bgClassName?: string } & CustomClasses
-> = ({
+export const GradientView = ({
   gradientClassName = "bg-superfluid",
   bgClassName = "bg-osmoverse-900",
   className,
   children,
-}) => (
+}: PropsWithChildren<
+  { gradientClassName?: string; bgClassName?: string } & CustomClasses
+>) => (
   <div className={`rounded-xl p-[2px] ${gradientClassName}`}>
     <div
       className={classNames(

packages/web/components/bridge/immersive/provider.tsx

@@ -1,45 +1,53 @@
 import { Transition } from "@headlessui/react";
-import { FunctionComponent, useState } from "react";
+import { PropsWithChildren, useState } from "react";
 
 import { StepProgress } from "~/components/stepper/progress-bar";
 import { Button } from "~/components/ui/button";
+import { useWalletSelect } from "~/hooks";
+import {
+  useDisconnectEvmWallet,
+  useEvmWalletAccount,
+} from "~/hooks/evm-wallet";
 import { FiatRampKey } from "~/integrations";
 
 import { BridgeFlowProvider } from "../flow";
 
-export const ImmersiveBridgeFlow: FunctionComponent<BridgeFlowProvider> = ({
+export const ImmersiveBridgeFlow = ({
   Provider,
   children,
-}) => {
+}: PropsWithChildren<BridgeFlowProvider>) => {
   // TODO: state will be encapsulated in a state hook
-  const [isShowing, setIsShowing] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
   const [step, setStep] = useState<0 | 1 | 2 | 3 | 4>(0);
+  const { isConnected, address } = useEvmWalletAccount();
+  const { onOpenWalletSelect } = useWalletSelect();
+  const { disconnect } = useDisconnectEvmWallet();
 
   return (
     <Provider
       value={{
         // globally received events
         startBridge: (direction: "deposit" | "withdraw") => {
-          setIsShowing(true);
+          setIsVisible(true);
           console.log("startBridge", direction);
         },
         bridgeAsset: (anyDenom: string, direction: "deposit" | "withdraw") => {
-          setIsShowing(true);
+          setIsVisible(true);
           console.log("bridgeAsset", anyDenom, direction);
         },
         fiatRamp: (fiatRampKey: FiatRampKey, assetKey: string) => {
-          setIsShowing(true);
+          setIsVisible(true);
           console.log("fiatRamp", fiatRampKey, assetKey);
         },
         fiatRampSelection: () => {
-          setIsShowing(true);
+          setIsVisible(true);
           console.log("fiatRampSelection");
         },
       }}
     >
       {children}
       <Transition
-        show={isShowing}
+        show={isVisible}
         className="fixed inset-0 z-[999] flex items-center justify-center bg-osmoverse-900"
         enter="transition-opacity duration-300"
         enterFrom="opacity-0"
@@ -78,7 +86,29 @@ export const ImmersiveBridgeFlow: FunctionComponent<BridgeFlowProvider> = ({
             </Button>
           </div>
           <h6>I will fade in and out</h6>
-          <Button onClick={() => setIsShowing(false)}>Close</Button>
+          <Button onClick={() => setIsVisible(false)}>Close</Button>
+
+          {isConnected ? (
+            <div>
+              <p>Evm Address: {address}</p>
+              <Button onClick={() => disconnect()}>Disconnect</Button>
+            </div>
+          ) : (
+            <Button
+              onClick={() =>
+                onOpenWalletSelect({
+                  walletOptions: [
+                    {
+                      walletType: "evm",
+                    },
+                  ],
+                  layout: "list",
+                })
+              }
+            >
+              Connect EVM Wallet
+            </Button>
+          )}
         </div>
       </Transition>
     </Provider>

packages/web/components/bridge/legacy.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import {
   ComponentProps,
-  FunctionComponent,
+  PropsWithChildren,
   useCallback,
   useEffect,
   useState,
@@ -39,8 +39,8 @@ const TransactionTypeQueryParamKey = "transaction_type";
 const DenomQueryParamKey = "denom";
 
 /** Legacy deposit/withdraw flow to be replaced by immersive flow. */
-export const LegacyBridgeFlow: FunctionComponent<BridgeFlowProvider> = observer(
-  ({ Provider, children }) => {
+export const LegacyBridgeFlow = observer(
+  ({ Provider, children }: PropsWithChildren<BridgeFlowProvider>) => {
     const { assetsStore, userSettings } = useStore();
     const router = useRouter();
     const transferConfig = useTransferConfig();

packages/web/components/cards/bond-card.tsx

@@ -269,15 +269,16 @@ const Drawer: FunctionComponent<{
   );
 };
 
-const SuperfluidBreakdownRow: FunctionComponent<BondDuration["superfluid"]> = ({
+const SuperfluidBreakdownRow = ({
   apr,
   commission,
   delegated,
   undelegating,
   validatorMoniker,
   validatorLogoUrl,
-}) => {
+}: NonNullable<BondDuration["superfluid"]>) => {
   const { t } = useTranslation();
+
   return (
     <div className="flex flex-col gap-2">
       <div className="flex place-content-between items-start text-right">

packages/web/components/cards/my-position/expanded.tsx

@@ -566,7 +566,9 @@ const Chart: FunctionComponent<{
 });
 
 const SuperfluidPositionInfo: FunctionComponent<
-  RouterOutputs["local"]["concentratedLiquidity"]["getPositionDetails"]["superfluidData"]
+  NonNullable<
+    RouterOutputs["local"]["concentratedLiquidity"]["getPositionDetails"]["superfluidData"]
+  >
 > = (props) => {
   const {
     validatorName,

packages/web/components/cards/rewards-card.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import React, { useState } from "react";
+import React, { PropsWithChildren, ReactElement, useState } from "react";
 
 import { DynamicLottieAnimation } from "~/components/animation";
 import { Tooltip } from "~/components/tooltip";
@@ -20,10 +20,10 @@ export const RewardsCard: React.FC<{
   globalLottieFileKey,
   position,
 }) => {
-  const ConditionalTooltip: React.FC = ({ children }) =>
+  const ConditionalTooltip = ({ children }: PropsWithChildren) =>
     disabled ? (
       <Tooltip content={disabledTooltipContent} className="h-full w-full">
-        {children as any}
+        {children as ReactElement}
       </Tooltip>
     ) : (
       <>{children}</>

packages/web/components/cards/stake-learn-more.tsx

@@ -10,7 +10,7 @@ import {
 } from "~/components/stepper";
 import { Button } from "~/components/ui/button";
 import { useTranslation } from "~/hooks";
-import { useWalletSelect } from "~/hooks/wallet-select";
+import { useWalletSelect } from "~/hooks/use-wallet-select";
 import { useStore } from "~/stores";
 
 const BuildStakeSquadButton: React.FC<StakeLearnMoreProps> = ({
@@ -26,7 +26,9 @@ const BuildStakeSquadButton: React.FC<StakeLearnMoreProps> = ({
     if (isWalletConnected) {
       setShowValidatorModal();
     } else {
-      onOpenWalletSelect(osmosisChainId);
+      onOpenWalletSelect({
+        walletOptions: [{ walletType: "cosmos", chainId: osmosisChainId }],
+      });
     }
   }, [
     isWalletConnected,

packages/web/components/client-only.tsx

@@ -1,6 +1,6 @@
-import { FunctionComponent, useEffect, useState } from "react";
+import { PropsWithChildren, useEffect, useState } from "react";
 
-const ClientOnly: FunctionComponent<{ className?: string }> = (props) => {
+const ClientOnly = (props: PropsWithChildren<{ className?: string }>) => {
   const [hasMounted, setHasMounted] = useState(false);
 
   useEffect(() => {

packages/web/components/complex/add-conc-liquidity.tsx

@@ -29,7 +29,7 @@ import { CustomClasses } from "~/components/types";
 import { Button } from "~/components/ui/button";
 import { ChartButton } from "~/components/ui/button";
 import { Checkbox } from "~/components/ui/checkbox";
-import { EventName } from "~/config";
+import { EventName } from "~/config/analytics-events";
 import {
   ObservableAddConcentratedLiquidityConfig,
   useAmplitudeAnalytics,