Skip to content

Commit

Permalink
feat: match ui with designs
Browse files Browse the repository at this point in the history
  • Loading branch information
@JoseRFelix
JoseRFelix committed Jun 12, 2024
1 parent 2ae586e commit f5794de
Show file tree
Hide file tree
Showing 3 changed files with 136 additions and 90 deletions.
157 changes: 100 additions & 57 deletions packages/web/components/bridge/deposit-screen.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,85 +1,128 @@
import classNames from "classnames";

import { Icon } from "~/components/assets";
import { Spinner } from "~/components/loaders";
import { Button } from "~/components/ui/button";
import { useStore } from "~/stores";
import { api } from "~/utils/trpc";

export const DepositScreen = () => {
const {
accountStore,
chainStore: {
osmosis: { chainId },
},
} = useStore();
const wallet = accountStore.getWallet(chainId);

const { data: asset, isLoading } = api.edge.assets.getUserAsset.useQuery({
findMinDenomOrSymbol: "USDC",
});

if (isLoading || !asset) {
return null;
}

return (
<div className="flex flex-col items-center justify-center p-4 text-white-full">
<div className="w-full max-w-md rounded-2xl p-6">
<h1 className="mb-6 text-center text-2xl font-h1">
Deposit <span className="text-superfluid">USDC</span>
</h1>
<div className="mx-auto flex w-full max-w-[30rem] flex-col items-center justify-center p-4 text-white-full">
<h5 className="mb-6 flex items-center justify-center gap-3">
<span>Deposit</span>{" "}
<img className="h-8 w-8" src={asset.coinImageUrl} alt="token image" />{" "}
<span>{asset.coinDenom}</span>
</h5>

<div className="flex items-center justify-between">
<div className="flex items-center">
<span className="text-sm">From network</span>
<div className="ml-2 flex items-center rounded-lg bg-osmoverse-700 p-2">
<img
src="/path/to/noble-icon.png"
alt="Noble"
className="mr-2 h-6 w-6"
/>
<span>Noble</span>
</div>
<div className="mb-6 flex w-full flex-col gap-2">
<div className="flex w-full gap-2">
<span className="body1 flex-1 text-osmoverse-300">From network</span>
{/* Render to match the height of the right arrow for the network selectors */}
<Icon id="arrow-right" className="invisible" />
<span className="body1 flex-1 text-osmoverse-300">To network</span>
</div>

<div className="flex items-center gap-2">
<div className="subtitle1 flex-1 rounded-[48px] bg-osmoverse-825 py-2 px-4">
Noble
</div>
<div className="flex items-center">
<span className="text-sm">To network</span>
<div className="ml-2 flex items-center rounded-lg bg-osmoverse-700 p-2">
<img
src="/path/to/osmosis-icon.png"
alt="Osmosis"
className="mr-2 h-6 w-6"
/>
<span>Osmosis</span>
</div>

<Icon id="arrow-right" className="text-osmoverse-300" />

<div className="subtitle1 flex-1 rounded-[48px] border border-osmoverse-700 py-2 px-4 text-osmoverse-200">
Osmosis
</div>
</div>
</div>

<div className="text-center text-4xl font-bold">$0</div>
<div className="flex w-full flex-col gap-6">
<div className="relative flex items-center justify-center">
<div className="justify-self-center">
<div className="text-center text-4xl font-bold">$0</div>
<div className="text-center text-sm">0 {asset.coinDenom}</div>
</div>

<div className="flex justify-center">
<div className="text-center text-sm">0 USDC</div>
<button className="rounded-lg bg-osmoverse-700 py-2 px-4 text-white-full">
<button className="body2 absolute right-0 rounded-5xl border border-osmoverse-700 py-2 px-3 text-wosmongton-200">
Max
</button>
</div>

<div className="flex items-center justify-between">
<div className="flex items-center rounded-lg bg-osmoverse-700 p-2">
<span className="mr-2">USDC.e</span>
<span className="text-sm text-osmoverse-300">$80.00 available</span>
</div>
<div className="flex items-center rounded-lg bg-osmoverse-700 p-2">
<span className="mr-2">USDC</span>
<span className="text-sm text-osmoverse-300">$30.00</span>
</div>
<div className="flex items-center rounded-lg bg-osmoverse-700 p-2">
<span className="mr-2">USDC.axl</span>
<span className="text-sm text-osmoverse-300">$10.00</span>
</div>
<div className="flex items-center justify-between rounded-2xl bg-osmoverse-1000">
{[
{
label: "USDC.e",
amount: "$80.00 available",
active: true,
},
{ label: "USDC", amount: "$30.00", active: false },
{ label: "USDC.axl", amount: "$10.00", active: false },
].map(({ label, amount, active }, index) => (
<button
key={index}
className={classNames(
"subtitle1 flex w-full flex-col items-center rounded-lg p-2",
{
"bg-osmoverse-825 text-wosmongton-100": active,
"text-osmoverse-100": !active,
}
)}
>
<span>{label}</span>
<span className="body2 text-osmoverse-300">{amount}</span>
</button>
))}
</div>

<div className="flex items-center justify-between">
<span className="text-sm">Transfer with</span>
<div className="flex items-center rounded-lg bg-osmoverse-700 p-2">
<span className="body1 text-osmoverse-300">Transfer with</span>
<div className="flex items-center gap-2 rounded-lg">
<img
src="/path/to/keplr-icon.png"
alt="Keplr"
className="mr-2 h-6 w-6"
src={wallet?.walletInfo.logo}
alt={wallet?.walletInfo.prettyName}
className="h-6 w-6"
/>
<span>{wallet?.walletInfo.prettyName}</span>
<Icon
id="chevron-down"
width={12}
height={12}
className="text-osmoverse-300"
/>
<span>Keplr</span>
</div>
</div>

<div className="flex items-center justify-between">
<span className="text-sm">Estimating time</span>
<span className="text-sm">Calculating fees</span>
<div className="flex items-center gap-2">
<Spinner className="text-wosmongton-500" />
<span className="body1 text-osmoverse-300">Estimating time</span>
</div>

<span className="body1 text-osmoverse-300">Calculating fees</span>
</div>

<button className="w-full rounded-lg bg-superfluid py-2 px-4 text-white-full">
Review deposit
</button>
<div className="flex flex-col items-center gap-2">
<Button className="w-full">Review deposit</Button>

<div className="mt-4 text-center">
<a href="#" className="text-sm text-superfluid">
<button className="text-lg font-h6 text-wosmongton-200">
More deposit options
</a>
</button>
</div>
</div>
</div>
Expand Down
60 changes: 31 additions & 29 deletions packages/web/components/bridge/immersive/provider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export const ImmersiveBridgeFlow = ({
<ScreenManager
currentScreen={String(step)}
onChangeScreen={(screen) => {
return setStep(Number(screen) as 0 | 1 | 2 | 3 | 4);
return setStep(Number(screen) as 0 | 1 | 2);
}}
>
<Transition
Expand All @@ -60,7 +60,7 @@ export const ImmersiveBridgeFlow = ({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="flex w-full max-w-container flex-col gap-10">
<div className="flex h-full w-full max-w-container flex-col gap-10 py-12">
<StepProgress
className="w-full"
steps={[
Expand All @@ -71,34 +71,36 @@ export const ImmersiveBridgeFlow = ({
currentStep={step}
/>

<Screen screenName="0">
{({ setCurrentScreen }) => (
<div>
<h6>Step 1: Asset</h6>
<Button onClick={() => setIsVisible(false)}>Close</Button>
<Button onClick={() => setCurrentScreen("1")}>Next</Button>
</div>
)}
</Screen>
<Screen screenName="1">
{({ setCurrentScreen, goBack }) => (
<div>
<Button onClick={goBack}>Back</Button>
<Button onClick={() => setCurrentScreen("2")}>Next</Button>
<div className="flex-1 overflow-auto">
<Screen screenName="0">
{({ setCurrentScreen }) => (
<div>
<h6>Step 1: Asset</h6>
<Button onClick={() => setIsVisible(false)}>Close</Button>
<Button onClick={() => setCurrentScreen("1")}>Next</Button>
</div>
)}
</Screen>
<Screen screenName="1">
{({ setCurrentScreen, goBack }) => (
<div>
<Button onClick={goBack}>Back</Button>
<Button onClick={() => setCurrentScreen("2")}>Next</Button>

<DepositScreen />
</div>
)}
</Screen>
<Screen screenName="2">
{({ goBack }) => (
<div>
<h6>Step 4: Review</h6>
<Button onClick={goBack}>Back</Button>
<Button onClick={() => setIsVisible(false)}>Close</Button>
</div>
)}
</Screen>
<DepositScreen />
</div>
)}
</Screen>
<Screen screenName="2">
{({ goBack }) => (
<div>
<h6>Step 3: Review</h6>
<Button onClick={goBack}>Back</Button>
<Button onClick={() => setIsVisible(false)}>Close</Button>
</div>
)}
</Screen>
</div>
{/* {isConnected ? (
<div>
<p>Evm Address: {address}</p>
Expand Down
9 changes: 5 additions & 4 deletions packages/web/components/stepper/progress-bar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { FunctionComponent } from "react";

import { CustomClasses } from "../types";

export type Step = { displayLabel?: string };
export type Step = { displayLabel?: string; onClick?: () => void };

export const StepProgress: FunctionComponent<
{
Expand All @@ -30,12 +30,12 @@ export const StepProgress: FunctionComponent<
<div className="absolute inset-y-0 -right-1 m-auto h-2 w-2 rounded-full bg-ammelia-300" />
</div>
{showLabels &&
steps.map(({ displayLabel }, index) => {
steps.map(({ displayLabel, onClick }, index) => {
const stepPercentage = (index / (steps.length - 1)) * 100;
const selected = index === currentStep;

return (
<div
<button
key={displayLabel}
className={classNames(
"body2 transition-color absolute top-2 -translate-x-1/2 duration-150",
Expand All @@ -47,9 +47,10 @@ export const StepProgress: FunctionComponent<
style={{
left: stepPercentage + "%",
}}
onClick={onClick}
>
{displayLabel}
</div>
</button>
);
})}
</div>
Expand Down

0 comments on commit f5794de

Please sign in to comment.