diff --git a/app/history/page.tsx b/app/history/page.tsx index 59c4555..f26fbe1 100644 --- a/app/history/page.tsx +++ b/app/history/page.tsx @@ -7,7 +7,6 @@ import { AccordionItem, AccordionTrigger, } from "@/components/ui/accordion"; -import { Badge } from "@/components/ui/badge"; import { Button } from "@/components/ui/button"; import { Card, @@ -484,7 +483,7 @@ export default function History() { setShowGlobal(p)} @@ -499,7 +498,7 @@ export default function History() {
{ setSelectedItem(v); diff --git a/app/layout.tsx b/app/layout.tsx index df7ed57..f0cefbd 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,18 +1,14 @@ import { Analytics } from "@vercel/analytics/react"; -import { BridgeStatus } from "@/components/BridgeStatus"; import { Footer } from "@/components/Footer"; import { Menu } from "@/components/Menu"; import { TermsOfUse } from "@/components/TermsOfUse"; import { Toaster } from "@/components/ui/sonner"; -import { cn } from "@/lib/utils"; import "@/styles/globals.css"; +import "@/styles/overrides.css"; import { Provider } from "jotai"; -import { Inter } from "next/font/google"; import Image from "next/image"; import { Metadata } from "next"; -const inter = Inter({ subsets: ["latin"] }); - import { metadata as meta } from "@/lib/metadata"; export const metadata: Metadata = { @@ -32,45 +28,45 @@ export default function RootLayout({ }>) { return ( - - -
-
-
-
-
- Smiling bridge -

- Snowbridge -

-
- -
-
-
- -
-
-
-
- {children} -
-
-
+ + + + + Snowbridge + + + +
+
+
+
+
+ Snowbridge +

+ Snowbridge +

- - +
-
- - - +
+
+ {children} +
+
+
+
+ + +
+
+ + + ); } diff --git a/app/txcomplete/page.tsx b/app/txcomplete/page.tsx index 6a104c0..9fd338d 100644 --- a/app/txcomplete/page.tsx +++ b/app/txcomplete/page.tsx @@ -83,7 +83,7 @@ function TxCard(props: TxCardProps) { See in History -
+
- +
diff --git a/components/BalanceDisplay.tsx b/components/BalanceDisplay.tsx index ecd64ba..e2b8f5a 100644 --- a/components/BalanceDisplay.tsx +++ b/components/BalanceDisplay.tsx @@ -5,6 +5,9 @@ import { useAtomValue } from "jotai"; import { polkadotAccountAtom } from "@/store/polkadot"; import { ethereumAccountAtom } from "@/store/ethereum"; import { useTokenBalance } from "@/hooks/useTokenBalance"; +import { + FormLabel, +} from "./ui/form"; interface BalanceDisplayProps { source: environment.TransferLocation; @@ -38,26 +41,26 @@ export const BalanceDisplay: FC = ({ }, [error]); if (error && !balanceInfo) { return ( -
Balances: Error... -
+ ); } if (balanceInfo === undefined || tokenMetadata === null) { return ( -
Balances: Fetching... -
+ ); } @@ -79,13 +82,13 @@ export const BalanceDisplay: FC = ({ })} ${balanceInfo.nativeSymbol}`; return ( -
Balances: {nativeBalance} ; {tokenBalance} {allowance} -
+ ); }; diff --git a/components/ConnectEthereumWalletButton.tsx b/components/ConnectEthereumWalletButton.tsx index 2a4f039..d4ec626 100644 --- a/components/ConnectEthereumWalletButton.tsx +++ b/components/ConnectEthereumWalletButton.tsx @@ -39,7 +39,7 @@ export function ConnectEthereumWalletButton({ - - - - - - -

More

- - diff --git a/components/RefreshButton.tsx b/components/RefreshButton.tsx index 0a60950..9770215 100644 --- a/components/RefreshButton.tsx +++ b/components/RefreshButton.tsx @@ -21,7 +21,6 @@ export function RefreshButton({ return ( +
+ Smiling bridge +
{message}
+ +
); }; diff --git a/components/transfer/TransferError.tsx b/components/transfer/TransferError.tsx index 49c6443..bb4cbe6 100644 --- a/components/transfer/TransferError.tsx +++ b/components/transfer/TransferError.tsx @@ -47,7 +47,7 @@ export const TransferError: FC = ({ ))}
-
diff --git a/components/transfer/TransferForm.tsx b/components/transfer/TransferForm.tsx index 796b342..ad464e6 100644 --- a/components/transfer/TransferForm.tsx +++ b/components/transfer/TransferForm.tsx @@ -43,7 +43,7 @@ import { zodResolver } from "@hookform/resolvers/zod"; import { formatBalance } from "@/utils/formatting"; import { ConnectEthereumWalletButton } from "../ConnectEthereumWalletButton"; import { ConnectPolkadotWalletButton } from "../ConnectPolkadotWalletButton"; -import { Pi } from "lucide-react"; +import { SelectItemWithIcon } from "../SelectItemWithIcon"; function getBeneficiaries( destination: environment.TransferLocation, @@ -153,7 +153,6 @@ export const TransferForm: FC = ({ ? (ethereumAccount ?? undefined) : polkadotAccount?.address; setSourceAccount(newSourceAccount); - form.resetField("sourceAccount", { defaultValue: newSourceAccount }); let newDestinations = destinations; if (source.id !== watchSource) { @@ -294,7 +293,7 @@ export const TransferForm: FC = ({ name="source" render={({ field }) => ( - Source + From @@ -332,9 +334,12 @@ export const TransferForm: FC = ({ {destinations.map((s) => ( - {s.name} + - ))} + ))} @@ -344,37 +349,46 @@ export const TransferForm: FC = ({ )} /> - + {sourceAccount && ( ( - {source.name} Account - - <> - {source.type == "ethereum" ? ( - - ) : ( - - )} - - - - +
+ From account + + +
+ + <> + {source.type == "ethereum" ? ( + + ) : ( + + )} + + + - )} - /> - )} + {beneficiaries && beneficiaries.length > 0 && ( ( - {destination.name} Beneficiary + To account = ({ )} - /> + />)}
= ({ Amount - + @@ -419,7 +433,10 @@ export const TransferForm: FC = ({ {destination.erc20tokensReceivable.map((t) => ( - {t.id} + ))} @@ -432,7 +449,7 @@ export const TransferForm: FC = ({ />
-
+
Transfer Fee:{" "} = ({ validating={validating} context={context} /> +
); @@ -484,38 +502,40 @@ function SubmitButton({ (ethereumAccounts === null || ethereumAccounts.length === 0) && source.type === "ethereum" ) { - return ; + return ; } if ( (polkadotAccounts === null || polkadotAccounts.length === 0) && source.type === "substrate" ) { - return ; + return ; } if ( (beneficiaries === null || beneficiaries.length === 0) && destination.type === "ethereum" ) { - return ; + return ; } if ( (beneficiaries === null || beneficiaries.length === 0) && destination.type === "substrate" ) { - return ; + return ; } } return ( - +
+ +
); } diff --git a/components/transfer/TransferSteps.tsx b/components/transfer/TransferSteps.tsx index f722d5c..9cc9c84 100644 --- a/components/transfer/TransferSteps.tsx +++ b/components/transfer/TransferSteps.tsx @@ -126,8 +126,8 @@ export const TransferSteps: FC = ({ return (
-

Steps

-
+

Steps

+
{plan.steps.map((step, i) => ( = ({ } >
-
+
{ if (onRefreshTransfer) await onRefreshTransfer(data, true); }} /> -
diff --git a/components/transfer/TransferSummary.tsx b/components/transfer/TransferSummary.tsx index 6f4f722..0da330a 100644 --- a/components/transfer/TransferSummary.tsx +++ b/components/transfer/TransferSummary.tsx @@ -4,8 +4,10 @@ import { etherscanAddressLink, subscanAccountLink } from "@/lib/explorerLinks"; import { getEnvironmentName } from "@/lib/snowbridge"; import { FeeDisplay } from "../FeeDisplay"; import { useBridgeStatus } from "@/hooks/useBridgeStatus"; -import { formatTime } from "@/utils/formatting"; import { estimateDelivery } from "@/lib/bridgeStatus"; +import { + Table, TableBody, TableRow, TableCell +} from "../ui/table"; interface TransferSummaryProps { data: ValidationData; @@ -45,57 +47,56 @@ export const TransferSummary: FC = ({ data }) => { return (
-

+

Send {data.formData.amount} {data.tokenMetadata.symbol} from{" "} {data.source.name} to {data.destination.name}

-
-

- Source Account:{" "} - window.open(sourceAccountLink)} - className="inline whitespace-pre font-mono hover:underline cursor-pointer pl-2" - > - {data.formData.sourceAccount} - -

-

- Beneficiary:{" "} - window.open(beneficiaryLink)} - className="inline whitespace-pre font-mono hover:underline cursor-pointer pl-2" - > +

+ + + + From + {data.formData.sourceAccount} + + + To + window.open(beneficiaryLink)} + className="hover:underline cursor-pointer" + > {data.formData.beneficiary} - -

-
- Transfer Fee:{" "} - -
-

- Estimated Delivery:{" "} - + + + + Transfer Fee + + + + Estimated Delivery + {isRefreshing ? "Calculating..." : statusError ? "Could not estimate delivery" : estimateDelivery(data.source.type, status)} - + {" "} - (up to{" "} - {data.source.type === "ethereum" - ? "25 minutes" - : "4 hour 30 minutes"} - ) - -

+ (up to{" "} + {data.source.type === "ethereum" + ? "25 minutes" + : "4 hour 30 minutes"} + ) + + + +
); diff --git a/components/ui/button.tsx b/components/ui/button.tsx index 0ba4277..18df57a 100644 --- a/components/ui/button.tsx +++ b/components/ui/button.tsx @@ -13,11 +13,11 @@ const buttonVariants = cva( destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90", outline: - "border border-input bg-background hover:bg-accent hover:text-accent-foreground", + "outline-button border border-input bg-background hover:bg-accent hover:text-accent-foreground", secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", - link: "text-primary underline-offset-4 hover:underline", + link: "link-button text-primary underline-offset-4 hover:underline", }, size: { default: "h-10 px-4 py-2", diff --git a/components/ui/form.tsx b/components/ui/form.tsx index ce264ae..e63bf23 100644 --- a/components/ui/form.tsx +++ b/components/ui/form.tsx @@ -80,7 +80,7 @@ const FormItem = React.forwardRef< return ( -
+
) }) diff --git a/components/ui/select.tsx b/components/ui/select.tsx index cbe5a36..c09a89b 100644 --- a/components/ui/select.tsx +++ b/components/ui/select.tsx @@ -75,7 +75,7 @@ const SelectContent = React.forwardRef< (({ className, ...props }, ref) => ( )) diff --git a/public/images/assethub.png b/public/images/assethub.png new file mode 100644 index 0000000..180b5ea Binary files /dev/null and b/public/images/assethub.png differ diff --git a/public/images/bifrost.png b/public/images/bifrost.png new file mode 100644 index 0000000..d531135 Binary files /dev/null and b/public/images/bifrost.png differ diff --git a/public/images/dai.png b/public/images/dai.png new file mode 100644 index 0000000..698ffc4 Binary files /dev/null and b/public/images/dai.png differ diff --git a/public/images/ethereum.png b/public/images/ethereum.png new file mode 100644 index 0000000..b49afd2 Binary files /dev/null and b/public/images/ethereum.png differ diff --git a/public/images/hydration.png b/public/images/hydration.png new file mode 100644 index 0000000..cca0a1d Binary files /dev/null and b/public/images/hydration.png differ diff --git a/public/images/kilt.png b/public/images/kilt.png new file mode 100644 index 0000000..94e75e7 Binary files /dev/null and b/public/images/kilt.png differ diff --git a/public/images/logo-blue.png b/public/images/logo-blue.png new file mode 100644 index 0000000..89599e0 Binary files /dev/null and b/public/images/logo-blue.png differ diff --git a/public/images/mythos.png b/public/images/mythos.png new file mode 100644 index 0000000..12883f2 Binary files /dev/null and b/public/images/mythos.png differ diff --git a/public/images/pepe.png b/public/images/pepe.png new file mode 100644 index 0000000..fa830aa Binary files /dev/null and b/public/images/pepe.png differ diff --git a/public/images/pilt.png b/public/images/pilt.png new file mode 100644 index 0000000..94e75e7 Binary files /dev/null and b/public/images/pilt.png differ diff --git a/public/images/polkadot.png b/public/images/polkadot.png new file mode 100644 index 0000000..ca2ed70 Binary files /dev/null and b/public/images/polkadot.png differ diff --git a/public/images/shib.png b/public/images/shib.png new file mode 100644 index 0000000..3666e52 Binary files /dev/null and b/public/images/shib.png differ diff --git a/public/images/snow.png b/public/images/snow.png new file mode 100644 index 0000000..ed8cd92 Binary files /dev/null and b/public/images/snow.png differ diff --git a/public/images/snow2.png b/public/images/snow2.png new file mode 100644 index 0000000..c5b47b1 Binary files /dev/null and b/public/images/snow2.png differ diff --git a/public/images/snow4.jpg b/public/images/snow4.jpg new file mode 100644 index 0000000..e5f5edc Binary files /dev/null and b/public/images/snow4.jpg differ diff --git a/public/images/spiritnet.png b/public/images/spiritnet.png new file mode 100644 index 0000000..94e75e7 Binary files /dev/null and b/public/images/spiritnet.png differ diff --git a/public/images/tbtc.png b/public/images/tbtc.png new file mode 100644 index 0000000..2b1a19d Binary files /dev/null and b/public/images/tbtc.png differ diff --git a/public/images/ton.png b/public/images/ton.png new file mode 100644 index 0000000..2b4f9fa Binary files /dev/null and b/public/images/ton.png differ diff --git a/public/images/usdc.png b/public/images/usdc.png new file mode 100644 index 0000000..fb2bc48 Binary files /dev/null and b/public/images/usdc.png differ diff --git a/public/images/usdt.png b/public/images/usdt.png new file mode 100644 index 0000000..39da847 Binary files /dev/null and b/public/images/usdt.png differ diff --git a/public/images/wbtc.png b/public/images/wbtc.png new file mode 100644 index 0000000..61ebc98 Binary files /dev/null and b/public/images/wbtc.png differ diff --git a/public/images/weth.png b/public/images/weth.png new file mode 100644 index 0000000..51b5f28 Binary files /dev/null and b/public/images/weth.png differ diff --git a/public/images/wsteth.png b/public/images/wsteth.png new file mode 100644 index 0000000..5659607 Binary files /dev/null and b/public/images/wsteth.png differ diff --git a/styles/globals.css b/styles/globals.css index bc724a1..89f9716 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -13,8 +13,8 @@ --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; - --primary: 222.2 47.4% 11.2%; - --primary-foreground: 210 40% 98%; + --primary: 208, 56%, 20%; + --primary-foreground: 0, 0%, 100%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; diff --git a/styles/overrides.css b/styles/overrides.css new file mode 100644 index 0000000..fdc9756 --- /dev/null +++ b/styles/overrides.css @@ -0,0 +1,223 @@ +/* Fonts */ +body { + font-family: 'Funnel Display', sans-serif !important; + font-optical-sizing: auto; + font-weight: 300; + font-style: normal; +} + +.font-semibold { + font-weight: 300; +} + +/* Menubar */ +div[role="menubar"] { + border: none; + padding: 0.50rem; + background-color: #91c0e2; +} + +div[role="menubar"] button { + border-radius: 0; + padding-top: 0.2rem; + padding-bottom: 0.2rem; +} + +div[role="menubar"] button p { + color: #1d2a3b; + font-size: 15px; +} + +div[role="menubar"] button[data-state="open"], div[role="menubar"] button[data-hightlighted], div[role="menubar"] .focus\:bg-accent:focus { + background: none !important; + font-weight: 400; + color: #0d1826; +} + +/* Icons */ +.lucide { + color: #57677e; + width: 20px; + height: 20px; + stroke-width: 1.5; +} + +.text-card-foreground .lucide { + color: #1d2a3b; +} + +div[role="menubar"] button[data-state="open"] .lucide, +div[role="menubar"] button[data-hightlighted] .lucide, +div[role="menubar"] .focus\:bg-accent:focus .lucide +{ + color: #0d1826; + stroke-width: 2; +} + +/* Footer */ +.footer-item { + background-color: rgba(255, 255, 255, 0.75); + border-radius: 30px; + padding: 5px 10px; + margin-left: 5px; + margin-right: 5px; +} + +.selectIcon { + margin: 4px 10px 4px 4px; +} + +button.action-button { + color: #ffffff; + background: linear-gradient(to bottom, #2c5f88, #538399); + box-shadow: #0a3563 0 2px 2px 0; + padding: 22px; + border: 1px solid transparent; /* Keep box shadow from making the form bigger */ +} + +button.action-button:hover, button.action-button:focus { + color: #ffffff; + background: linear-gradient(to bottom, #396f9f, #6496ad); + box-shadow: #0a3563 0 2px 2px 0; + border-width: 1px; + border-color: #71a5c2; +} + +button.action-button:active { + transform: translateY(1px); +} + +.font-highlight { + padding: 10px 30px; + text-align: center; + background: linear-gradient(to bottom, #396f9f, #6496ad); + color: #ffffff; + box-shadow: #0a3563 0 2px 2px 0; +} + +button[role="combobox"], input, .data-radix-popper-content-wrapper button, .select-box[data-state="open"], .select-box[data-state="open"] .select-item, .fake-dropdown { + border-color: #ffffff !important; + background-color: #dde6f5 !important; + color: #1d2a3b; +} + +button[role="combobox"], input, .fake-dropdown { + padding: 20px 10px !important; + border-width: 1px !important; + margin-top: 5px !important; + box-shadow: #86b1de 0 2px 2px 0; + font-size: 15px !important; +} + +body { + background-image: url("/images/snow4.jpg"); + background-size:cover +} + +.text-card-foreground { + background: linear-gradient(to bottom, #7ab5e0, #ccf0ff); + border: none; + padding: 10px; + color: #0d2b48 !important; +} + +label:not(.text-muted-foreground) { + color: #071831; + text-transform: uppercase; +} + +.text-muted-foreground { + color: #2e4575; +} + +label { + margin: 0px; + padding:0; +} + +.focus\:ring-ring:focus { + --tw-ring-color: hsl(0deg 0% 100%); + border-radius: 1px; +} + +.shadow-sm { + box-shadow: 0 1px 1px rgb(28 59 75 / 15%), + 0 2px 2px rgb(96 162 196 / 15%), + 0 4px 4px rgb(59 108 132 / 15%), + 0 8px 8px rgb(56 92 109 / 15%), + 0 16px 16px rgb(56 110 136 / 15%); +} + +.text-light { + color: white; +} + +button.action-button, +button[role="combobox"], +input, +.data-radix-popper-content-wrapper button, +.select-box[data-state="open"], +.select-box[data-state="open"] .select-item, +.text-card-foreground, +div[role="menubar"], +.fake-dropdown, +.font-highlight, +.outline-button[data-state="off"], +.outline-button[data-state="on"]{ + border-radius: 30px !important; +} + +.text-card-foreground h3 { + color: #163653; +} + +.text-zinc-400 { + --tw-text-opacity: 1; + color: rgb(161 161 170 / var(--tw-text-opacity, 1)); +} + +.badge { + background-color: #b2d0e8; + border: none; +} +.badge.bg-destructive { + background-color: #f87e7e !important; +} +.badge.bg-secondary { + background-color: #a9f87e !important; +} + +.text-green-700 { + color: #207d6f !important; +} + +.text-red-700 { + color: #88232f !important; +} + +.walletModal { + background: linear-gradient(to bottom, #7ab5e0, #ccf0ff); + color: #173651; +} + +.outline-button, .outline-button .lucide { + color: #1d2a3b; +} +.link-button .lucide, .link-button p, .outline-button[data-state="off"], +.outline-button[data-state="off"], .outline-button[data-state="off"] .lucide, +.text-card-foreground .accordian .lucide{ + color: #173651; +} + +.main-heading{ + color: #051821; + padding: 10px; +} + +.border-b, .w-full.accordian { + border-color: #d6f2ff; +} + +button.bg-primary:hover { + background-color: hsl(208, 56%, 20%, 0.9) !important; +}