(Deposit/Withdraw) Mobile UI (#3457)

* mobile UI * translate * more improvements * fiat input improvements * fix balance selection * fix skeleton loader on mobile * more fixes
osmosis-labs · Jul 8, 2024 · e55f946 · e55f946
1 parent b28f8b8
commit e55f946
Show file tree

Hide file tree

Showing 26 changed files with 397 additions and 308 deletions.
diff --git a/packages/web/components/assets/chain-logo.tsx b/packages/web/components/assets/chain-logo.tsx
@@ -1,16 +1,16 @@
 import classNames from "classnames";
 import { rgba } from "polished";
-import React from "react";
+import { FunctionComponent } from "react";
 
 interface ChainLogoProps {
   color: string | undefined;
   logoUri: string | undefined;
   prettyName?: string;
-  size?: "sm" | "lg";
+  size?: "xs" | "sm" | "lg";
   className?: string;
 }
 
-export const ChainLogo: React.FC<ChainLogoProps> = ({
+export const ChainLogo: FunctionComponent<ChainLogoProps> = ({
   color,
   logoUri,
   prettyName,
@@ -22,7 +22,11 @@ export const ChainLogo: React.FC<ChainLogoProps> = ({
       className={classNames(
         "flex items-center justify-center",
         !color && "bg-wosmongton-200/30",
-        size === "sm" ? "h-6 w-6 rounded-md" : "h-12 w-12 rounded-xl",
+        {
+          xs: "h-4 w-4 rounded-sm",
+          sm: "h-6 w-6 rounded-md",
+          lg: "h-12 w-12 rounded-xl",
+        }[size],
         className
       )}
       style={{
@@ -33,7 +37,7 @@ export const ChainLogo: React.FC<ChainLogoProps> = ({
         <img
           className={classNames(
             "object-contain",
-            size === "sm" ? "h-4 w-4" : "h-8 w-8"
+            size === "xs" ? "h-3 w-3" : size === "sm" ? "h-4 w-4" : "h-8 w-8"
           )}
           src={logoUri}
           alt={`${prettyName} logo`}

diff --git a/...ge/immersive/amount-and-review-screen.tsx → ...nents/bridge/amount-and-review-screen.tsx b/...ge/immersive/amount-and-review-screen.tsx → ...nents/bridge/amount-and-review-screen.tsx
@@ -4,17 +4,17 @@ import { observer } from "mobx-react-lite";
 import { useState } from "react";
 import { getAddress } from "viem";
 
-import { AmountScreen } from "~/components/bridge/immersive/amount-screen";
-import { ImmersiveBridgeScreens } from "~/components/bridge/immersive/immersive-bridge";
-import { useBridgeQuotes } from "~/components/bridge/immersive/use-bridge-quotes";
-import { SupportedAsset } from "~/components/bridge/immersive/use-bridges-supported-assets";
 import { Screen } from "~/components/screen-manager";
 import { useEvmWalletAccount } from "~/hooks/evm-wallet";
 import { BridgeChainWithDisplayInfo } from "~/server/api/routers/bridge-transfer";
 import { refetchUserQueries, useStore } from "~/stores";
 import { api } from "~/utils/trpc";
 
+import { AmountScreen } from "./amount-screen";
+import { ImmersiveBridgeScreen } from "./immersive-bridge";
 import { ReviewScreen } from "./review-screen";
+import { useBridgeQuotes } from "./use-bridge-quotes";
+import { SupportedAsset } from "./use-bridges-supported-assets";
 
 export type SupportedAssetWithAmount = SupportedAsset & { amount: CoinPretty };
 
@@ -125,7 +125,7 @@ export const AmountAndReviewScreen = observer(
 
     return (
       <>
-        <Screen screenName={ImmersiveBridgeScreens.Amount}>
+        <Screen screenName={ImmersiveBridgeScreen.Amount}>
           {({ setCurrentScreen }) => (
             <AmountScreen
               direction={direction}
@@ -145,11 +145,11 @@ export const AmountAndReviewScreen = observer(
               fiatAmount={fiatAmount}
               setFiatAmount={setFiatAmount}
               quote={quote}
-              onConfirm={() => setCurrentScreen(ImmersiveBridgeScreens.Review)}
+              onConfirm={() => setCurrentScreen(ImmersiveBridgeScreen.Review)}
             />
           )}
         </Screen>
-        <Screen screenName={ImmersiveBridgeScreens.Review}>
+        <Screen screenName={ImmersiveBridgeScreen.Review}>
           {({ goBack }) => (
             <>
               {fromChain &&