diff --git a/packages/stores/src/account/base.ts b/packages/stores/src/account/base.ts index 1f1c193969..7068755bf0 100644 --- a/packages/stores/src/account/base.ts +++ b/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[] = []> { 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[] = []> { // 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) { diff --git a/packages/stores/src/account/types.ts b/packages/stores/src/account/types.ts index ae1dd64f0d..c442b0e51b 100644 --- a/packages/stores/src/account/types.ts +++ b/packages/stores/src/account/types.ts @@ -35,7 +35,7 @@ export interface DeliverTxResponse { readonly gasWanted: string; } -export type RegistryWallet = Omit & { +export type CosmosRegistryWallet = Omit & { logo: string; lazyInstall: () => any; stakeUrl?: string; @@ -84,8 +84,8 @@ export type AccountStoreWallet[] = []> = UnionToIntersection & { txTypeInProgress: string; isReadyToSendTx: boolean; - supportsChain: Required["supportsChain"]; - walletInfo: RegistryWallet; + supportsChain: Required["supportsChain"]; + walletInfo: CosmosRegistryWallet; }; export interface TxEvents { diff --git a/packages/stores/src/tests/test-wallet.ts b/packages/stores/src/tests/test-wallet.ts index c68bfc87cd..0ba037a730 100644 --- a/packages/stores/src/tests/test-wallet.ts +++ b/packages/stores/src/tests/test-wallet.ts @@ -173,13 +173,22 @@ export class MockKeplrClient implements WalletClient { signer: string, signDoc: DirectSignDoc, signOptions?: SignOptions - ): ReturnType { - return await this.client.signDirect( + ): ReturnType["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) { diff --git a/packages/web/__tests__/test-utils.tsx b/packages/web/__tests__/test-utils.tsx index a660275bf7..68bc2bf54a 100644 --- a/packages/web/__tests__/test-utils.tsx +++ b/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"; diff --git a/packages/web/components/alert/info.tsx b/packages/web/components/alert/info.tsx index ca6c871054..70ac342607 100644 --- a/packages/web/components/alert/info.tsx +++ b/packages/web/components/alert/info.tsx @@ -66,7 +66,7 @@ export const Info: FunctionComponent< {message} )} - {caption && ( + {caption && typeof caption === "string" && ( = ({ +export const GradientView = ({ gradientClassName = "bg-superfluid", bgClassName = "bg-osmoverse-900", className, children, -}) => ( +}: PropsWithChildren< + { gradientClassName?: string; bgClassName?: string } & CustomClasses +>) => (
= ({ +export const ImmersiveBridgeFlow = ({ Provider, children, -}) => { +}: PropsWithChildren) => { // 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 ( { - 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} = ({
I will fade in and out
- + + + {isConnected ? ( +
+

Evm Address: {address}

+ +
+ ) : ( + + )}
diff --git a/packages/web/components/bridge/legacy.tsx b/packages/web/components/bridge/legacy.tsx index 588e2a5056..5b9ea2539d 100644 --- a/packages/web/components/bridge/legacy.tsx +++ b/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 = observer( - ({ Provider, children }) => { +export const LegacyBridgeFlow = observer( + ({ Provider, children }: PropsWithChildren) => { const { assetsStore, userSettings } = useStore(); const router = useRouter(); const transferConfig = useTransferConfig(); diff --git a/packages/web/components/cards/bond-card.tsx b/packages/web/components/cards/bond-card.tsx index 0386b8014c..f37ad69201 100644 --- a/packages/web/components/cards/bond-card.tsx +++ b/packages/web/components/cards/bond-card.tsx @@ -269,15 +269,16 @@ const Drawer: FunctionComponent<{ ); }; -const SuperfluidBreakdownRow: FunctionComponent = ({ +const SuperfluidBreakdownRow = ({ apr, commission, delegated, undelegating, validatorMoniker, validatorLogoUrl, -}) => { +}: NonNullable) => { const { t } = useTranslation(); + return (
diff --git a/packages/web/components/cards/my-position/expanded.tsx b/packages/web/components/cards/my-position/expanded.tsx index 3a5b2ad38f..2ea673fda8 100644 --- a/packages/web/components/cards/my-position/expanded.tsx +++ b/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, diff --git a/packages/web/components/cards/rewards-card.tsx b/packages/web/components/cards/rewards-card.tsx index 8c277bdf2c..6f8dcb7e31 100644 --- a/packages/web/components/cards/rewards-card.tsx +++ b/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 ? ( - {children as any} + {children as ReactElement} ) : ( <>{children} diff --git a/packages/web/components/cards/stake-learn-more.tsx b/packages/web/components/cards/stake-learn-more.tsx index 9dbe6abfae..37ebf4f30b 100644 --- a/packages/web/components/cards/stake-learn-more.tsx +++ b/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 = ({ @@ -26,7 +26,9 @@ const BuildStakeSquadButton: React.FC = ({ if (isWalletConnected) { setShowValidatorModal(); } else { - onOpenWalletSelect(osmosisChainId); + onOpenWalletSelect({ + walletOptions: [{ walletType: "cosmos", chainId: osmosisChainId }], + }); } }, [ isWalletConnected, diff --git a/packages/web/components/client-only.tsx b/packages/web/components/client-only.tsx index b1a1ede20f..90827a0cda 100644 --- a/packages/web/components/client-only.tsx +++ b/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(() => { diff --git a/packages/web/components/complex/add-conc-liquidity.tsx b/packages/web/components/complex/add-conc-liquidity.tsx index e324a5b585..768f394ecb 100644 --- a/packages/web/components/complex/add-conc-liquidity.tsx +++ b/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, diff --git a/packages/web/components/complex/pool/create/step-base.tsx b/packages/web/components/complex/pool/create/step-base.tsx index 141744e714..cef8e5613a 100644 --- a/packages/web/components/complex/pool/create/step-base.tsx +++ b/packages/web/components/complex/pool/create/step-base.tsx @@ -1,5 +1,5 @@ import { observer } from "mobx-react-lite"; -import { FunctionComponent } from "react"; +import { PropsWithChildren } from "react"; import { Info } from "~/components/alert"; import { POOL_CREATION_FEE } from "~/components/complex/pool/create"; @@ -9,94 +9,93 @@ import { Button } from "~/components/ui/button"; import { useTranslation } from "~/hooks"; import { useWindowSize } from "~/hooks"; -export const StepBase: FunctionComponent<{ step: 1 | 2 | 3 } & StepProps> = - observer( - ({ - step, - createPoolConfig: config, - isSendingMsg, - advanceStep, - children, - }) => { - const { isMobile } = useWindowSize(); - const { t } = useTranslation(); +export const StepBase = observer( + ({ + step, + createPoolConfig: config, + isSendingMsg, + advanceStep, + children, + }: PropsWithChildren<{ step: 1 | 2 | 3 } & StepProps>) => { + const { isMobile } = useWindowSize(); + const { t } = useTranslation(); - const canAdvance = - (step === 1 && - !config.percentageError && - !config.positiveBalanceError && - !config.assetCountError && - !config.scalingFactorError && - !(config.assets.length <= 1)) || - (step === 2 && !config.amountError) || - (step === 3 && - config.acknowledgeFee && - !config.swapFeeError && - !config.scalingFactorControllerError); + const canAdvance = + (step === 1 && + !config.percentageError && + !config.positiveBalanceError && + !config.assetCountError && + !config.scalingFactorError && + !(config.assets.length <= 1)) || + (step === 2 && !config.amountError) || + (step === 3 && + config.acknowledgeFee && + !config.swapFeeError && + !config.scalingFactorControllerError); - const currentError = - step === 1 - ? config.percentageError || - config.positiveBalanceError || - config.assetCountError || - config.scalingFactorError - : step === 2 - ? config.amountError - : config.swapFeeError || config.scalingFactorControllerError; + const currentError = + step === 1 + ? config.percentageError || + config.positiveBalanceError || + config.assetCountError || + config.scalingFactorError + : step === 2 + ? config.amountError + : config.swapFeeError || config.scalingFactorControllerError; - const urgentErrorMessage = - step === 1 - ? config.scalingFactorError - : config.swapFeeError || config.scalingFactorControllerError; + const urgentErrorMessage = + step === 1 + ? config.scalingFactorError + : config.swapFeeError || config.scalingFactorControllerError; - return ( -
- - {step === 1 - ? config.poolType === "weighted" - ? t("pools.createPool.step.one.weighted", { - step: step.toString(), - nbStep: "3", - }) - : t("pools.createPool.step.one.stable", { - step: step.toString(), - nbStep: "3", - }) - : step === 2 - ? t("pools.createPool.step.two", { + return ( +
+ + {step === 1 + ? config.poolType === "weighted" + ? t("pools.createPool.step.one.weighted", { step: step.toString(), nbStep: "3", }) - : step === 3 - ? t("pools.createPool.step.three", { + : t("pools.createPool.step.one.stable", { step: step.toString(), nbStep: "3", }) - : null}{" "} - -
{children}
- {step === 1 && ( - - )} - -
- ); - } - ); + : step === 2 + ? t("pools.createPool.step.two", { + step: step.toString(), + nbStep: "3", + }) + : step === 3 + ? t("pools.createPool.step.three", { + step: step.toString(), + nbStep: "3", + }) + : null}{" "} + +
{children}
+ {step === 1 && ( + + )} + +
+ ); + } +); diff --git a/packages/web/components/complex/portfolio-page.tsx b/packages/web/components/complex/portfolio-page.tsx index f6ab105c00..2f0440a8bb 100644 --- a/packages/web/components/complex/portfolio-page.tsx +++ b/packages/web/components/complex/portfolio-page.tsx @@ -58,13 +58,13 @@ export const PortfolioPage: FunctionComponent = () => { const [tabsRef, { height: tabsHeight }] = useDimension(); const onDeposit = useCallback( - (coinMinimalDenom) => { + (coinMinimalDenom: string) => { bridgeAsset(coinMinimalDenom, "deposit"); }, [bridgeAsset] ); const onWithdraw = useCallback( - (coinMinimalDenom) => { + (coinMinimalDenom: string) => { bridgeAsset(coinMinimalDenom, "withdraw"); }, [bridgeAsset] @@ -329,7 +329,11 @@ const GetStartedWithOsmosis: FunctionComponent = () => { -
+
= observer( [swapState, closeTokenSelectDropdowns] )} setDropdownState={useCallback( - (isOpen) => { + (isOpen: boolean) => { if (isOpen) { setOneTokenSelectOpen("to"); } else { diff --git a/packages/web/components/swap-tool/promo-drawer.tsx b/packages/web/components/swap-tool/promo-drawer.tsx index 71cf4829fe..d615df1275 100644 --- a/packages/web/components/swap-tool/promo-drawer.tsx +++ b/packages/web/components/swap-tool/promo-drawer.tsx @@ -1,13 +1,17 @@ import { Transition } from "@headlessui/react"; -import { FunctionComponent, useEffect, useState } from "react"; +import { PropsWithChildren, useEffect, useState } from "react"; /** Promo drawer for conditionally displaying promotional content above the swap tool. * If there's at least one child that is not null, it will appear. Otherwise, it will not. * Counting on swap tool having >-10 z index. */ -export const PromoDrawer: FunctionComponent<{ +export const PromoDrawer = ({ + show: initialShow, + children, + beforeEnter, +}: PropsWithChildren<{ show: boolean; beforeEnter?: () => void; -}> = ({ show: initialShow, children, beforeEnter }) => { +}>) => { // re-open the drawer on next mount, instead of keeping it open // prevents animation from compounding const [show, setShow] = useState(false); diff --git a/packages/web/components/table/cells/pool-quick-actions.tsx b/packages/web/components/table/cells/pool-quick-actions.tsx index f364d56ae2..b9302b4094 100644 --- a/packages/web/components/table/cells/pool-quick-actions.tsx +++ b/packages/web/components/table/cells/pool-quick-actions.tsx @@ -65,7 +65,7 @@ export const PoolQuickActionCell: FunctionComponent< }, [onAddLiquidity, onRemoveLiquidity, onLockTokens, t]); const doAction = useCallback( - (optionId) => { + (optionId: string) => { setDropdownOpen(false); switch (optionId) { diff --git a/packages/web/components/table/cells/validator-info.tsx b/packages/web/components/table/cells/validator-info.tsx index 64f185dc15..7572beedee 100644 --- a/packages/web/components/table/cells/validator-info.tsx +++ b/packages/web/components/table/cells/validator-info.tsx @@ -11,7 +11,6 @@ export const ValidatorInfoCell: FunctionComponent = ({
diff --git a/packages/web/components/table/headers/sort.tsx b/packages/web/components/table/headers/sort.tsx index 074d64ee61..8b39dc4562 100644 --- a/packages/web/components/table/headers/sort.tsx +++ b/packages/web/components/table/headers/sort.tsx @@ -1,6 +1,6 @@ import type { SortDirection } from "@osmosis-labs/utils"; import classNames from "classnames"; -import { PropsWithChildren } from "react"; +import type { PropsWithChildren } from "react"; import { Icon } from "~/components/assets"; import { CustomClasses, Disableable } from "~/components/types"; diff --git a/packages/web/components/table/index.tsx b/packages/web/components/table/index.tsx index 25d5d79c5d..e7d378f320 100644 --- a/packages/web/components/table/index.tsx +++ b/packages/web/components/table/index.tsx @@ -2,7 +2,7 @@ import classNames from "classnames"; import Link from "next/link"; import { useRouter } from "next/router"; import React, { - FunctionComponent, + PropsWithChildren, PropsWithoutRef, useCallback, useState, @@ -211,9 +211,10 @@ export const Table = ({ }; /** Wrap non-link non-visual content in a button for accessibility users. */ -const ClickableContent: FunctionComponent<{ isButton?: boolean }> = ({ +const ClickableContent = ({ isButton = false, children, -}) => (isButton ? : <>{children}); +}: PropsWithChildren<{ isButton?: boolean }>) => + isButton ? : <>{children}; export * from "./types"; diff --git a/packages/web/components/tooltip/tooltip.tsx b/packages/web/components/tooltip/tooltip.tsx index 14322a3822..e5dbbbd20f 100644 --- a/packages/web/components/tooltip/tooltip.tsx +++ b/packages/web/components/tooltip/tooltip.tsx @@ -1,18 +1,11 @@ import Tippy, { TippyProps } from "@tippyjs/react"; import classNames from "classnames"; -import { FunctionComponent } from "react"; +import { PropsWithChildren } from "react"; import { TooltipProps } from "~/components/tooltip/types"; import { CustomClasses } from "~/components/types"; -export const Tooltip: FunctionComponent< - TooltipProps & - CustomClasses & - Omit & { - rootClassNames?: string; - enablePropagation?: boolean; - } -> = ({ +export const Tooltip = ({ content, trigger, children, @@ -20,7 +13,14 @@ export const Tooltip: FunctionComponent< rootClassNames, enablePropagation, ...props -}) => ( +}: PropsWithChildren< + TooltipProps & + CustomClasses & + Omit & { + rootClassNames?: string; + enablePropagation?: boolean; + } +>) => ( {variant === "connect" && (
-
diff --git a/packages/web/components/ui/button.tsx b/packages/web/components/ui/button.tsx index 59fcf46ed1..b7332cf81b 100644 --- a/packages/web/components/ui/button.tsx +++ b/packages/web/components/ui/button.tsx @@ -2,6 +2,7 @@ import { Slot } from "@radix-ui/react-slot"; import { cva, type VariantProps } from "class-variance-authority"; import classNames from "classnames"; import * as React from "react"; +import { PropsWithChildren } from "react"; import { AnchorHTMLAttributes, ButtonHTMLAttributes, @@ -102,11 +103,11 @@ const Button = React.forwardRef( Button.displayName = "Button"; // TODO - ideally remove this button, rarely used, will need design review -const ShowMoreButton: FunctionComponent = ({ +const ShowMoreButton = ({ isOn, onToggle, className, -}) => { +}: PropsWithChildren) => { const { t } = useTranslation(); return (