Skip to content

Commit 7512152

Browse files
el-llel-ll
committed
[squash]: mobile fixes
1 parent af683ac commit 7512152

6 files changed

Lines changed: 36 additions & 20 deletions

File tree

‎turnkey/src/features/balances/balances-ui.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ export const Balances = ({ rootOrgId }: { rootOrgId: string }) => {
2222
<h1 className="text-5xl">Welcome</h1>
2323

2424
<Tabs.Root defaultValue="evm" className="max-w-2xl mx-auto mt-8">
25-
<Tabs.List className="flex">
25+
<Tabs.List className="flex flex-col sm:flex-row px-2">
2626
<TabTrigger
2727
value="evm"
2828
title="EVM Balance"
2929
address={account?.predictedAddress}
3030
fiatBalance={balancesQuery.data?.balances.totalBalance.fiatValue}
3131
isLoading={balancesQuery.status === "pending"}
32-
className="rounded-l-xl"
32+
className="sm:rounded-l-xl rounded-t-xl sm:rounded-tr-none"
3333
/>
3434

3535
{btcWallet._tag === "NoWallet" ? (
@@ -82,7 +82,7 @@ export const Balances = ({ rootOrgId }: { rootOrgId: string }) => {
8282
title="BTC Balance"
8383
address={btcAddress?.address}
8484
fiatBalance={balancesQuery.data?.btcBalance?.fiatValue}
85-
className="rounded-r-xl"
85+
className="sm:rounded-r-xl rounded-b-xl sm:rounded-bl-none"
8686
isLoading={balancesQuery.status === "pending"}
8787
disabled
8888
/>
@@ -92,7 +92,7 @@ export const Balances = ({ rootOrgId }: { rootOrgId: string }) => {
9292
title="BTC Balance"
9393
address={undefined}
9494
fiatBalance={undefined}
95-
className="rounded-r-xl"
95+
className="sm:rounded-r-xl rounded-b-xl sm:rounded-bl-none"
9696
isLoading={balancesQuery.status === "pending"}
9797
disabled
9898
/>
@@ -168,7 +168,7 @@ const TabTrigger = (
168168
return (
169169
<Tabs.Trigger
170170
{...rest}
171-
className={`flex aria-selected:bg-surface-level-2 p-5 text-left w-1/2 border border-surface-level-2 ${
171+
className={`flex aria-selected:bg-surface-level-2 p-5 text-left w-full sm:w-1/2 border border-surface-level-2 ${
172172
props.className ?? ""
173173
}`}
174174
asChild

‎turnkey/src/features/input/input.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const TokenInput = ({
3535
return (
3636
<div>
3737
<div
38-
className={`flex relative gap-1 lg:gap-3 h-10 lg:h-20 bg-surface-level-2 items-center rounded-xl py-4 px-6 border ${
38+
className={`flex relative gap-1 lg:gap-3 h-20 bg-surface-level-2 items-center rounded-xl py-4 px-6 border ${
3939
errorMessage ? "border-destructive" : "border-surface-level-4"
4040
}`}
4141
>
@@ -66,7 +66,7 @@ export const TokenInput = ({
6666
</div>
6767
) : null}
6868

69-
<div className="absolute lg:relative top-16 right-0 lg:right-auto lg:top-0 flex items-center gap-4">
69+
<div className="relative flex items-center gap-4">
7070
<select
7171
value={asset.aggregatedAssetId}
7272
onChange={(event) => setAssetId(event.target.value as AssetId)}

‎turnkey/src/features/swap/swap-ui.tsx‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,16 @@ export const Swap = () => {
1212
const balancesQuery = useBalances();
1313

1414
return (
15-
<div className="pb-10">
15+
<div className="pb-10 px-2">
1616
<h1 className="text-5xl flex flex-col">
1717
<span>Just swap it,</span>
1818
<span className="text-gray">forget the chains</span>
1919
</h1>
2020

2121
{balancesQuery.status === "pending" ? (
22-
<p className="animate-pulse text-white/50">Loading your account...</p>
22+
<p className="animate-pulse text-white/50 mt-14">
23+
Loading your account...
24+
</p>
2325
) : null}
2426
{balancesQuery.status === "success" ? (
2527
<SwapForm balances={balancesQuery.data} />
@@ -268,10 +270,18 @@ const SwapForm = ({
268270
}}
269271
/>
270272

271-
<div>
273+
<div className="mt-20">
274+
<p className="text-sm text-gray text-center mb-4">
275+
{fromAsset?.aggregatedAssetId === "BTC"
276+
? "This is a BTC swap, make sure to use your [BTC] Passkey when signing"
277+
: "This is an EVM network swap, make sure to use your [MAIN] Passkey when signing"}
278+
</p>
279+
<p className="text-sm text-gray text-center mb-4">
280+
This is a demo app. Transactions are capped at $500
281+
</p>
272282
<button
273283
type="submit"
274-
className="h-20 rounded-[100px] py-[30px] px-10 text-base bg-brand-orange text-brand-orange-foreground hover:bg-brand-orange-lighten-20 mt-20 w-full disabled:opacity-50 disabled:cursor-not-allowed justify-center flex"
284+
className="h-20 rounded-[100px] py-[30px] px-10 text-base bg-brand-orange text-brand-orange-foreground hover:bg-brand-orange-lighten-20 w-full disabled:opacity-50 disabled:cursor-not-allowed justify-center flex"
275285
disabled={
276286
swapQuoteQuery.isFetching ||
277287
!!balanceError ||

‎turnkey/src/features/transfer/transfer-ui.tsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -38,15 +38,17 @@ export const Transfer = () => {
3838
const chainsQuery = useSupportedChains();
3939

4040
return (
41-
<div>
41+
<div className="px-2 pb-10">
4242
<h2 className="text-5xl flex flex-col">
4343
<span>Simple transfer,</span>
4444
<span className="text-gray">as it should be</span>
4545
</h2>
4646

4747
{balancesQuery.status === "pending" ||
4848
chainsQuery.status === "pending" ? (
49-
<p className="animate-pulse text-white/50">Loading your account...</p>
49+
<p className="animate-pulse text-white/50 mt-14">
50+
Loading your account...
51+
</p>
5052
) : null}
5153
{balancesQuery.status === "success" &&
5254
chainsQuery.status === "success" ? (
@@ -211,10 +213,14 @@ const TransferForm = ({
211213
})}
212214
</select>
213215

214-
<div>
216+
<div className="mt-20">
217+
<p className="text-sm text-gray text-center mb-4">
218+
This is a demo app. Transactions are capped at $500
219+
</p>
220+
215221
<button
216222
type="submit"
217-
className="h-20 rounded-[100px] py-[30px] px-10 text-base bg-brand-orange text-brand-orange-foreground hover:bg-brand-orange-lighten-20 mt-20 w-full disabled:opacity-50 disabled:cursor-not-allowed justify-center flex"
223+
className="h-20 rounded-[100px] py-[30px] px-10 text-base bg-brand-orange text-brand-orange-foreground hover:bg-brand-orange-lighten-20 w-full disabled:opacity-50 disabled:cursor-not-allowed justify-center flex"
218224
disabled={
219225
mutation.status === "pending" ||
220226
!!balanceError ||

‎turnkey/src/features/ui/header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const Header = ({ className }: { className?: string }) => {
1313
return (
1414
<header
1515
className={cn(
16-
"p-4 max-w-screen-xl mx-auto flex w-full items-center gap-4",
16+
"p-4 max-w-screen-xl mx-auto flex w-full items-center gap-4 flex-col sm:flex-row",
1717
className
1818
)}
1919
>

‎turnkey/src/features/ui/login.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -94,7 +94,7 @@ export const Login = () => {
9494
Welcome to OneBalance Bitcoin demo app
9595
</h1>
9696

97-
<div className="flex gap-4 justify-center">
97+
<div className="flex gap-4 justify-center flex-col sm:flex-row">
9898
<TooltipProvider delayDuration={200}>
9999
<Tooltip>
100100
<TooltipTrigger asChild>
@@ -127,9 +127,9 @@ export const Login = () => {
127127
</div>
128128

129129
<div>
130-
<p className="mt-4 text-gray text-sm text-center items-center flex gap-2 justify-center">
131-
This is a demo app - please use with care.{" "}
132-
<span className="underline">Interactions are capped at $500.</span>
130+
<p className="mt-4 text-gray text-sm text-center flex-col items-center flex gap-2 justify-center">
131+
<span>This is a demo app - please use with care.</span>
132+
<span className="underline">Transactions are capped at $500.</span>
133133
</p>
134134
</div>
135135
</div>

0 commit comments

Comments
 (0)