Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve UI and code #577

Merged
merged 87 commits into from
Dec 1, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
87 commits
Select commit Hold shift + click to select a range
af2a06d
Update rainbowkit viem wagmi and webpack config
JayJay1024 Nov 13, 2023
c3968bf
Home page
JayJay1024 Nov 13, 2023
0b4fc83
User and header navigation
JayJay1024 Nov 13, 2023
a9f8be5
Chain and token select border radius
JayJay1024 Nov 13, 2023
5b018d2
Update footer
JayJay1024 Nov 13, 2023
a35f106
Update max button hover bg
JayJay1024 Nov 13, 2023
10f019d
Update header
JayJay1024 Nov 13, 2023
ee4a5c2
Update records
JayJay1024 Nov 13, 2023
fcf7bb8
Relayer overview
JayJay1024 Nov 13, 2023
4490988
Relayer dashboard
JayJay1024 Nov 13, 2023
98c359d
Update SegmentedTabs
JayJay1024 Nov 13, 2023
409aee0
Beta save
JayJay1024 Nov 14, 2023
8c66be9
Merge branch 'main' into jay/improve-ui
JayJay1024 Nov 14, 2023
d1590ec
Merge branch 'main' into jay/improve-ui
JayJay1024 Nov 17, 2023
cba8e82
Update tailwind.config.ts
JayJay1024 Nov 17, 2023
148fb5f
Update globals.css
JayJay1024 Nov 17, 2023
03ac083
Set appear props for Modal CSSTransition
JayJay1024 Nov 17, 2023
1174940
Update next package
JayJay1024 Nov 17, 2023
7b4646e
Merge branch 'main' into jay/improve-ui
JayJay1024 Nov 20, 2023
8d50d6a
Improve types
JayJay1024 Nov 20, 2023
bea1d38
Improve config
JayJay1024 Nov 20, 2023
257ac2b
New type BridgeConstructorArgs
JayJay1024 Nov 20, 2023
b4445e0
Improve utils
JayJay1024 Nov 20, 2023
7c7920f
Improve order of cross-chain utils
JayJay1024 Nov 20, 2023
b82cb04
Merge branch 'main' into jay/improve-ui-code
JayJay1024 Nov 23, 2023
2be96b6
Update graphql types
JayJay1024 Nov 23, 2023
82ed07d
Improve types
JayJay1024 Nov 23, 2023
cff0a37
Improve configs
JayJay1024 Nov 23, 2023
ca60a8c
Include jsx and tsx files under utils for tailwind
JayJay1024 Nov 23, 2023
e52414d
Improve utils
JayJay1024 Nov 23, 2023
78b8c8d
Location type
JayJay1024 Nov 23, 2023
08818b6
Improve types
JayJay1024 Nov 23, 2023
115fb83
Improve BaseBridge
JayJay1024 Nov 23, 2023
77d8593
Improve bridges
JayJay1024 Nov 24, 2023
bce71b3
Improve useToggle
JayJay1024 Nov 24, 2023
0eed28e
Improve rainbow provider
JayJay1024 Nov 24, 2023
bd47ddc
Fix InputValue type
JayJay1024 Nov 24, 2023
db4dbd3
Improve transfer provider
JayJay1024 Nov 25, 2023
65a440f
Improve relayer provider
JayJay1024 Nov 25, 2023
d593311
Improve ui components
JayJay1024 Nov 25, 2023
1a90628
Configure border radius tailwind.config.ts
JayJay1024 Nov 25, 2023
0ff7c51
Remove unused css globals.css
JayJay1024 Nov 25, 2023
ad3a20c
Update input css globals.css
JayJay1024 Nov 25, 2023
d745c6c
Improve AddressInput
JayJay1024 Nov 25, 2023
af85e8a
Improve BalanceInput
JayJay1024 Nov 25, 2023
aecd8c6
Improve cross-chain utils
JayJay1024 Nov 26, 2023
b4ccc24
Improve components
JayJay1024 Nov 26, 2023
96b7fc7
Export hooks from index file
JayJay1024 Nov 26, 2023
031a123
Improve cross-chain utils
JayJay1024 Nov 26, 2023
0c88750
Improve graphql types
JayJay1024 Nov 26, 2023
29850fa
Update return value of getWithdrawFee
JayJay1024 Nov 26, 2023
7571d8f
Update relayer provider
JayJay1024 Nov 26, 2023
f2c0e55
Improve pages
JayJay1024 Nov 26, 2023
c76c18e
Update site icon
JayJay1024 Nov 26, 2023
1db723a
Fix unit test
JayJay1024 Nov 26, 2023
4c6c248
Update README.md
JayJay1024 Nov 26, 2023
27d7ccb
Revert next package version
JayJay1024 Nov 26, 2023
7815817
Fix build
JayJay1024 Nov 27, 2023
dee7b24
Footer and Header
JayJay1024 Nov 27, 2023
a3ca70f
Transfer
JayJay1024 Nov 27, 2023
980e472
Faucet
JayJay1024 Nov 27, 2023
8887723
Update page component name
JayJay1024 Nov 27, 2023
b84a563
Records page
JayJay1024 Nov 27, 2023
c1e8b74
Fix header bg
JayJay1024 Nov 27, 2023
0d6b91f
Record detail
JayJay1024 Nov 27, 2023
ef0f38d
Relayer overview page
JayJay1024 Nov 27, 2023
ff26532
Update USDT logo
JayJay1024 Nov 28, 2023
2e413d7
Update token logo size of BalanceInput
JayJay1024 Nov 28, 2023
4399d58
Relayer manage
JayJay1024 Nov 28, 2023
4ceda9d
Relayer register
JayJay1024 Nov 28, 2023
9aca9b7
Transfer BalanceInput refresh balance
JayJay1024 Nov 28, 2023
1cb24a6
Balance max
JayJay1024 Nov 28, 2023
34cceee
Improve notification utils
JayJay1024 Nov 28, 2023
b9e48ed
No-cache fetchPolicy for online status query
JayJay1024 Nov 28, 2023
05a8bcb
Improve bridge-select
JayJay1024 Nov 28, 2023
deb7edf
Update disclaimer style
JayJay1024 Nov 29, 2023
b3dc52d
Update the border radius of rainbow connect wallet modal
JayJay1024 Nov 29, 2023
a5a9cb9
Fix balance input dynamic style
JayJay1024 Nov 29, 2023
c6dbc96
Fix balance-input max check
JayJay1024 Nov 29, 2023
3b8b1ca
Update compact chain select gap between chain logo and name
JayJay1024 Nov 29, 2023
77f6155
Improve balance-input compact mode style
JayJay1024 Nov 29, 2023
69fd1b1
Add tips for withdraw-fee
JayJay1024 Nov 29, 2023
64e2617
Fix transfer-action disabled check
JayJay1024 Nov 29, 2023
1468bd3
Improve disabled check for deposit-more and withdraw-margin
JayJay1024 Nov 29, 2023
7928aeb
Update x-padding of table on pc
JayJay1024 Nov 29, 2023
a48fcb8
Update width of relayer-manage-modal on pc
JayJay1024 Nov 29, 2023
017692e
Merge branch 'main' into jay/improve-ui-code
JayJay1024 Dec 1, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Home page
  • Loading branch information
JayJay1024 committed Nov 13, 2023
commit c3968bfcf5d019bfbb0499c8990035cc992a2236
30 changes: 12 additions & 18 deletions packages/apps/src/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,6 @@ body {
} */

@layer components {
.token-select-dropdown {
width: calc(100vw - 3rem);
@apply lg:w-[36rem];
}

.app-header {
@apply h-[64px];
}
Expand All @@ -45,6 +40,15 @@ body {
@apply mt-[64px] py-5;
}

.border-radius {
@apply rounded-xl;
}

.token-select-dropdown {
width: calc(100vw - 3rem);
@apply lg:w-[36rem];
}

.user-connect-wallet {
@apply bg-primary gap-middle px-large flex h-9 shrink-0 items-center rounded transition hover:opacity-80 lg:h-8 lg:hover:opacity-80 lg:active:translate-y-1;
}
Expand All @@ -53,16 +57,12 @@ body {
@apply gap-middle px-large py-small inline-flex items-center text-start transition hover:bg-white/10 lg:active:translate-y-1;
}

.tooltip-text {
@apply text-xs font-normal text-white;
}

.button {
@apply flex h-8 items-center justify-center text-sm lg:h-9;
@apply flex h-8 items-center justify-center lg:h-9;
}

.normal-input-wrap {
@apply rounded border transition-colors duration-300;
@apply border-radius border transition-colors duration-300;
}

.valid-input-wrap {
Expand All @@ -74,13 +74,7 @@ body {
}

.select {
@apply hover:border-primary focus-within:border-primary rounded border transition duration-300 disabled:cursor-not-allowed disabled:opacity-60 lg:active:translate-y-1 lg:disabled:translate-y-0;
}
}

@layer utilities {
.page-bg {
background: linear-gradient(180deg, #02061f 0%, #1c1837 100%);
@apply hover:border-primary focus-within:border-primary border-radius border transition duration-300 disabled:cursor-not-allowed disabled:opacity-60 lg:active:translate-y-1 lg:disabled:translate-y-0;
}
}

Expand Down
4 changes: 2 additions & 2 deletions packages/apps/src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ export const metadata: Metadata = {

export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en" style={{ backgroundColor: "#000421" }}>
<body className={`${ibm_plex_sans.className} page-bg text-white`}>
<html lang="en">
<body className={`${ibm_plex_sans.className} bg-app-bg text-base font-normal text-white`}>
<GraphqlProvider>
<RainbowProvider>
<AppProvider>
Expand Down
23 changes: 8 additions & 15 deletions packages/apps/src/components/balance-input.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { Token } from "@/types/token";
import Input from "@/ui/input";
import { InputAlert } from "@/ui/input-alert";
import { formatBalance } from "@/utils/balance";
import { useEffect, useMemo, useRef, useState } from "react";
import { formatUnits, parseUnits } from "viem";
Expand Down Expand Up @@ -38,7 +39,7 @@ export function BalanceInput({
const spanRef = useRef<HTMLSpanElement | null>(null);
const inputRef = useRef<HTMLInputElement | null>(null);
const [enablingMax, setEnablingMax] = useState(false);
const [dynamicStyle, setDynamicStyle] = useState("text-sm font-normal");
const [dynamicStyle, setDynamicStyle] = useState("text-sm font-medium");

const insufficient = balance !== undefined && balance < (value?.formatted || 0n) ? true : false;
const exceeded = max !== undefined && max < (value?.formatted || 0n) ? true : false;
Expand Down Expand Up @@ -90,7 +91,7 @@ export function BalanceInput({

return (
<div
className={`lg:px-middle px-small py-small gap-small bg-app-bg normal-input-wrap relative flex items-center justify-between ${
className={`lg:px-middle px-small py-small gap-small bg-app-bg normal-input-wrap border-radius relative flex items-center justify-between ${
insufficient || exceeded
? "invalid-input-wrap"
: disabled
Expand All @@ -101,7 +102,7 @@ export function BalanceInput({
<Input
placeholder={_placeholder}
className={`h-12 w-full rounded bg-transparent text-white transition-[font-size,font-weight,line-height] duration-300 ${
dynamic && value?.value ? `leading-none ${dynamicStyle}` : "text-sm font-normal"
dynamic && value?.value ? `leading-none ${dynamicStyle}` : "text-sm font-medium"
}`}
onChange={(e) => {
setEnablingMax(false);
Expand All @@ -121,7 +122,7 @@ export function BalanceInput({
{!!(token && suffix === "symbol") && <span className="text-sm">{token.symbol}</span>}
{suffix === "max" && (
<button
className="inline-flex items-center rounded bg-transparent px-1 transition-[transform,color] hover:scale-105 hover:bg-white/10 active:scale-95 disabled:scale-100 disabled:cursor-not-allowed"
className="border-radius inline-flex items-center bg-transparent px-2 py-1 transition-[transform,color] hover:scale-105 hover:bg-white/20 active:scale-95 disabled:scale-100 disabled:cursor-not-allowed"
onClick={(e) => {
e.stopPropagation();
const decimals = token?.decimals ?? 0;
Expand All @@ -130,14 +131,14 @@ export function BalanceInput({
}}
disabled={max === undefined || token?.decimals === undefined}
>
<span className="text-sm">Max</span>
<span className="text-sm font-medium">Max</span>
</button>
)}

{exceeded ? (
<Message text={`* ${availableTips}: ${formatBalance(max || 0n, token?.decimals || 0, { precision: 6 })}`} />
<InputAlert text={`* ${availableTips}: ${formatBalance(max || 0n, token?.decimals || 0, { precision: 6 })}`} />
) : insufficient ? (
<Message text="* insufficient" />
<InputAlert text="* Insufficient" />
) : null}

<span className="invisible fixed left-0 top-0 -z-50" ref={spanRef}>
Expand All @@ -147,14 +148,6 @@ export function BalanceInput({
);
}

function Message({ text }: { text: string }) {
return (
<div className="absolute -bottom-5 left-0 inline-flex w-full">
<span className="text-app-red text-xs font-light lowercase">{text}</span>
</div>
);
}

function parseValue(source: string, decimals: number) {
let value = "";
let formatted = 0n;
Expand Down
12 changes: 6 additions & 6 deletions packages/apps/src/components/chain-token-select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function ChainTokenSelect({ options, value, width, placement, onC
return (
<ISelect
labelClassName="p-middle bg-app-bg flex shrink-0 items-center justify-between border-transparent"
childClassName="bg-app-bg rounded border border-primary/50 shadow-2xl"
childClassName="bg-component border-radius border border-primary"
label={
value ? (
<div className="gap-middle lg:gap-large flex items-center">
Expand All @@ -43,7 +43,7 @@ export default function ChainTokenSelect({ options, value, width, placement, onC

<div className="gap-small flex flex-col items-start truncate">
<span className="text-sm font-medium text-white">{value.token.symbol}</span>
<span className="text-xs font-light text-white/60">{value.chain.name}</span>
<span className="text-xs font-medium text-white/60">{value.chain.name}</span>
</div>
</div>
) : undefined
Expand Down Expand Up @@ -99,9 +99,9 @@ function Cascader({
src={getChainLogoSrc(chain.logo)}
className="rounded-full"
/>
<span className="text-sm font-light">{chain.name}</span>
<span className="text-sm">{chain.name}</span>
</div>
<span className="text-sm font-light text-white/50">{`>`}</span>
<span className="text-sm text-white/50">{`>`}</span>
</div>
);
})}
Expand All @@ -126,9 +126,9 @@ function Cascader({
src={getTokenLogoSrc(token.logo)}
className="rounded-full"
/>
<span className="text-sm font-light">{token.symbol}</span>
<span className="text-sm">{token.symbol}</span>
</div>
<PrettyAddress address={token.address} copyable forceShort className="text-xs font-light text-white/50" />
<PrettyAddress address={token.address} copyable forceShort className="text-xs text-white/50" />
</button>
);
})}
Expand Down
80 changes: 40 additions & 40 deletions packages/apps/src/components/cross-chain-info.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import CountLoading from "@/ui/count-loading";
import Tooltip from "@/ui/tooltip";
import { formatBalance } from "@/utils/balance";
import Image from "next/image";
import { PropsWithChildren, useEffect, useState } from "react";
import { ReactElement, useEffect, useState } from "react";
import { Subscription, from } from "rxjs";

interface Props {
Expand Down Expand Up @@ -49,49 +49,49 @@ export default function CrossChainInfo({ fee, bridge, maxMargin, isLoadingMaxMar
}, [bridge]);

return (
<div className="bg-app-bg p-middle gap-small flex flex-col rounded border border-transparent">
<Item>
<span>Estimated Arrival Time</span>
<span>{bridge?.formatEstimateTime()}</span>
</Item>
<Item>
<span>Transaction Fee</span>
{fee?.loading ? (
<CountLoading color="white" />
) : fee?.token && fee.value ? (
<span>
{formatBalance(fee.value, fee.token.decimals, { precision: 6 })} {fee.token.symbol}
</span>
) : (
<Tooltip content="No relayer available, please check the transfer amount">
<Image width={16} height={16} alt="Fee" src="/images/warning.svg" />
</Tooltip>
)}
</Item>
{!!transferLimit && (
<Item>
<span>Transfer Limit</span>
<span>
{formatBalance(transferLimit.value, transferLimit.token.decimals)} {transferLimit.token.symbol}
</span>
</Item>
)}
{!!dailyLimit && (
<Item>
<span>Daily Limit</span>
{dailyLimit.loading ? (
<div className="bg-app-bg p-middle gap-small border-radius flex flex-col border border-transparent">
<Item label="Estimated arrival time" value={bridge?.formatEstimateTime()} />
<Item
label="Transaction fee"
value={
fee?.loading ? (
<CountLoading color="white" />
) : fee?.token && fee.value ? (
`${formatBalance(fee.value, fee.token.decimals, { precision: 6 })} ${fee.token.symbol}`
) : (
<span>
{formatBalance(dailyLimit.limit, dailyLimit.token.decimals)} {dailyLimit.token.symbol}
</span>
)}
</Item>
)}
<Tooltip content="No relayer available, please check the transfer amount">
<Image width={16} height={16} alt="Fee" src="/images/warning.svg" />
</Tooltip>
)
}
/>
{transferLimit ? (
<Item
label="Transfer limit"
value={`${formatBalance(transferLimit.value, transferLimit.token.decimals)} ${transferLimit.token.symbol}`}
/>
) : null}
{dailyLimit ? (
<Item
label="Daily limit"
value={
dailyLimit.loading ? (
<CountLoading color="white" />
) : (
`${formatBalance(dailyLimit.limit, dailyLimit.token.decimals)} ${dailyLimit.token.symbol}`
)
}
/>
) : null}
</div>
);
}

function Item({ children }: PropsWithChildren<unknown>) {
return <div className="flex items-center justify-between text-sm font-normal text-white">{children}</div>;
function Item({ label, value }: { label: string; value: ReactElement | string | undefined }) {
return (
<div className="flex items-center justify-between">
<span className="text-sm font-medium">{label}</span>
{typeof value === "string" ? <span className="text-sm font-medium">{value}</span> : value}
</div>
);
}
8 changes: 4 additions & 4 deletions packages/apps/src/components/faucet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export default function Faucet() {
className="text-primary transition-[color,transform] hover:text-white lg:active:translate-y-1"
onClick={() => setIsOpen(true)}
>
<span className="text-sm font-normal">Faucet</span>
<span>Faucet</span>
</button>

<Modal
Expand Down Expand Up @@ -139,9 +139,9 @@ export default function Faucet() {

function Item({ value, token }: { value: bigint; token?: Token }) {
return (
<div className="px-middle bg-app-bg py-middle flex items-center justify-between rounded">
<span className="text-sm">{token && formatBalance(value, token.decimals)}</span>
<span className="text-sm">{token?.symbol}</span>
<div className="px-middle bg-app-bg py-middle border-radius flex items-center justify-between">
<span className="text-sm font-medium">{token && formatBalance(value, token.decimals)}</span>
<span className="text-sm font-medium">{token?.symbol}</span>
</div>
);
}
4 changes: 2 additions & 2 deletions packages/apps/src/components/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ export default function Footer() {
}, []);

return (
<div className="app-footer bg-app-bg w-full">
<div className="app-footer w-full">
<div className="px-middle container mx-auto flex h-full shrink-0 items-center justify-center lg:justify-between">
{/* copyright */}
<span className="text-sm font-light text-white/50">{`© ${new Date().getFullYear()} Helix Bridge`}</span>
<span className="text-sm text-white/50">{`© ${new Date().getFullYear()} Helix Bridge`}</span>

{/* social links */}
<div className="gap-middle flex shrink-0 items-center lg:gap-5">
Expand Down
2 changes: 1 addition & 1 deletion packages/apps/src/components/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function Header() {

return (
<>
<div className="app-header bg-app-bg border-b-line fixed left-0 top-0 z-10 w-full border-b lg:border-b-transparent">
<div className="app-header border-b-line fixed left-0 top-0 z-10 w-full border-b lg:border-b-transparent">
<div className="px-middle container mx-auto flex h-full items-center justify-between">
{/* left */}
<div className="flex items-center gap-5">
Expand Down
Loading