Skip to content

Commit

Permalink
Merge pull request #268 from berachain/fix/honey/input-position-user-…
Browse files Browse the repository at this point in the history 
…friendly

style(honey): input & output clarify
  • Loading branch information
@SnowBera
SnowBera authored Dec 18, 2024
2 parents 0af0d60 + c8521c9 commit cd77091
Showing 1 changed file with 158 additions and 144 deletions.
302 changes: 158 additions & 144 deletions apps/honey/src/components/swap-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import { Tabs, TabsList, TabsTrigger } from "@bera/ui/tabs";
import { Address, parseUnits } from "viem";

import { usePsm } from "~/hooks/usePsm";
import { cn } from "@bera/ui";

export function SwapCard() {
const [tabValue, setTabValue] = useState<"mint" | "burn">("mint");
Expand Down Expand Up @@ -109,153 +110,166 @@ export function SwapCard() {
</TabsList>
</Tabs>

<div className="border-1 flex flex-col gap-6 border-border">
<ul className="relative rounded-2xl border">
<TokenInput
amount={fromAmount[selectedFrom?.[0]?.address!]}
balance={fromBalance?.[0]}
selected={selectedFrom?.[0]}
selectable={selectedFrom?.[0]?.address !== honey?.address}
selectedTokens={
isBasketModeEnabled ? selectedFrom : [selectedFrom?.[0]]
}
customTokenList={collateralList}
showExceeding
setIsTyping={setIsTyping}
setAmount={(amount) => {
setChangedAsset(selectedFrom?.[0]?.address);
setGivenIn(true);
setFromAmount((prevAmount) => ({
...prevAmount,
[selectedFrom?.[0]?.address!]: amount,
}));
}}
onTokenSelection={(token) => {
resetAmounts();
setSelectedFrom((prevToken) =>
token && prevToken
? [
token,
...prevToken.filter(
(t) => t.address !== token.address,
),
]
: [],
);
}}
/>
<hr />
{!!isBasketModeEnabled && tabValue === "mint" && (
<>
<TokenInput
amount={fromAmount[selectedFrom?.[1]?.address!]}
balance={fromBalance?.[1]}
selected={selectedFrom?.[1]}
selectable={selectedFrom?.[1]?.address !== honey?.address}
selectedTokens={selectedFrom}
customTokenList={collateralList}
showExceeding
setIsTyping={setIsTyping}
setAmount={(amount) => {
setChangedAsset(selectedFrom?.[1]?.address);
setGivenIn(true);
setFromAmount((prevAmount) => ({
...prevAmount,
[selectedFrom?.[1]?.address!]: amount,
}));
}}
onTokenSelection={(token) => {
resetAmounts();
setSelectedFrom((prevToken) =>
token && prevToken
? [
token,
...prevToken.filter(
(t) => t.address !== token.address,
),
]
: [],
);
}}
/>
<hr />
</>
)}
<div className="flex flex-col gap-6">
<ul className="relative">
<div
className={cn(
"border rounded-md",
isBasketModeEnabled ? "mb-4" : "rounded-b-none border-b-0",
)}
>
<TokenInput
amount={fromAmount[selectedFrom?.[0]?.address!]}
balance={fromBalance?.[0]}
selected={selectedFrom?.[0]}
selectable={selectedFrom?.[0]?.address !== honey?.address}
selectedTokens={
isBasketModeEnabled ? selectedFrom : [selectedFrom?.[0]]
}
customTokenList={collateralList}
showExceeding
setIsTyping={setIsTyping}
setAmount={(amount) => {
setChangedAsset(selectedFrom?.[0]?.address);
setGivenIn(true);
setFromAmount((prevAmount) => ({
...prevAmount,
[selectedFrom?.[0]?.address!]: amount,
}));
}}
onTokenSelection={(token) => {
resetAmounts();
setSelectedFrom((prevToken) =>
token && prevToken
? [
token,
...prevToken.filter(
(t) => t.address !== token.address,
),
]
: [],
);
}}
/>
{!!isBasketModeEnabled && tabValue === "mint" && (
<>
<hr />
<TokenInput
amount={fromAmount[selectedFrom?.[1]?.address!]}
balance={fromBalance?.[1]}
selected={selectedFrom?.[1]}
selectable={selectedFrom?.[1]?.address !== honey?.address}
selectedTokens={selectedFrom}
customTokenList={collateralList}
showExceeding
setIsTyping={setIsTyping}
setAmount={(amount) => {
setChangedAsset(selectedFrom?.[1]?.address);
setGivenIn(true);
setFromAmount((prevAmount) => ({
...prevAmount,
[selectedFrom?.[1]?.address!]: amount,
}));
}}
onTokenSelection={(token) => {
resetAmounts();
setSelectedFrom((prevToken) =>
token && prevToken
? [
token,
...prevToken.filter(
(t) => t.address !== token.address,
),
]
: [],
);
}}
/>
</>
)}
</div>
{(isLoading || isTyping) && (
<SSRSpinner className="absolute left-[50%] top-[50%] -translate-x-[50%] -translate-y-[50%] rounded-md border border-border bg-background p-2" />
)}
<TokenInput
amount={toAmount[selectedTo?.[0]?.address!]}
balance={toBalance?.[0]}
selected={selectedTo?.[0]}
selectable={selectedTo?.[0]?.address !== honey?.address}
selectedTokens={
isBasketModeEnabled ? selectedTo : [selectedTo?.[0]]
}
customTokenList={collateralList}
showExceeding={false}
hideMax={true}
hideBalance
setIsTyping={setIsTyping}
setAmount={(amount) => {
setChangedAsset(selectedTo?.[0]?.address);
setGivenIn(false);
setToAmount((prevAmount) => ({
...prevAmount,
[selectedTo?.[0]?.address!]: amount,
}));
}}
onTokenSelection={(token) => {
resetAmounts();
setSelectedTo((prevToken) =>
token && prevToken
? [
token,
...prevToken.filter(
(t) => t.address !== token.address,
),
]
: [],
);
}}
/>
{!!isBasketModeEnabled && tabValue === "burn" && (
<>
<hr />
<TokenInput
amount={toAmount[selectedTo?.[1]?.address!]}
balance={toBalance?.[1]}
selected={selectedTo?.[1]}
selectable={selectedTo?.[1]?.address !== honey?.address}
selectedTokens={selectedTo}
customTokenList={collateralList}
hideBalance
showExceeding
setIsTyping={setIsTyping}
setAmount={(amount) => {
setChangedAsset(selectedTo?.[1]?.address);
setGivenIn(false);
setToAmount((prevAmount) => ({
...prevAmount,
[selectedTo?.[1]?.address!]: amount,
}));
}}
onTokenSelection={(token) => {
resetAmounts();
setSelectedTo((prevToken) =>
token && prevToken
? [
token,
...prevToken.filter(
(t) => t.address !== token.address,
),
]
: [],
);
}}
/>
</>
)}
<div
className={cn(
"border rounded-md",
!isBasketModeEnabled && "rounded-t-none",
)}
>
<TokenInput
amount={toAmount[selectedTo?.[0]?.address!]}
balance={toBalance?.[0]}
selected={selectedTo?.[0]}
selectable={selectedTo?.[0]?.address !== honey?.address}
selectedTokens={
isBasketModeEnabled ? selectedTo : [selectedTo?.[0]]
}
customTokenList={collateralList}
showExceeding={false}
hideMax={true}
hideBalance
setIsTyping={setIsTyping}
setAmount={(amount) => {
setChangedAsset(selectedTo?.[0]?.address);
setGivenIn(false);
setToAmount((prevAmount) => ({
...prevAmount,
[selectedTo?.[0]?.address!]: amount,
}));
}}
onTokenSelection={(token) => {
resetAmounts();
setSelectedTo((prevToken) =>
token && prevToken
? [
token,
...prevToken.filter(
(t) => t.address !== token.address,
),
]
: [],
);
}}
/>
{!!isBasketModeEnabled && tabValue === "burn" && (
<>
<hr />
<TokenInput
amount={toAmount[selectedTo?.[1]?.address!]}
balance={toBalance?.[1]}
selected={selectedTo?.[1]}
selectable={selectedTo?.[1]?.address !== honey?.address}
selectedTokens={selectedTo}
customTokenList={collateralList}
hideBalance
showExceeding
setIsTyping={setIsTyping}
setAmount={(amount) => {
setChangedAsset(selectedTo?.[1]?.address);
setGivenIn(false);
setToAmount((prevAmount) => ({
...prevAmount,
[selectedTo?.[1]?.address!]: amount,
}));
}}
onTokenSelection={(token) => {
resetAmounts();
setSelectedTo((prevToken) =>
token && prevToken
? [
token,
...prevToken.filter(
(t) => t.address !== token.address,
),
]
: [],
);
}}
/>
</>
)}
</div>
</ul>
{isBadCollateral && !isBasketModeEnabled ? (
<Alert variant="default" className="flex gap-2">
Expand Down

0 comments on commit cd77091

Please sign in to comment.