From 48bb14fd4e29a890130a42e45f5f76d389f8a3b0 Mon Sep 17 00:00:00 2001
From: Viande <33333630+indaviande@users.noreply.github.com>
Date: Fri, 6 Dec 2024 15:13:00 +0100
Subject: [PATCH] Tabs sync (#5)
* tabs, capitalize, socials
* fix lint
* change links to terms & priuvacy
* lint
* move edit address to breadcrumbs
* user edit in component
* footer issue ok
* show bg-main color instead of banner outside of home and opportunities
* add link to protocol header
* implement zkSync colors/fonts as default
* commit hash
* lint
* remove comments
* lint
---
merkl.config.ts | 29 ++---
packages/dappkit | 2 +-
src/components/composite/Hero.tsx | 99 ++++++++----------
src/components/element/AddressEdit.tsx | 22 ++++
src/components/element/Socials.tsx | 5 +
src/components/element/Tag.tsx | 2 +-
src/components/element/chain/ChainTable.tsx | 2 +-
.../element/opportunity/OpportunityTable.tsx | 2 +-
.../opportunity/OpportunityTableRow.tsx | 3 +-
.../element/protocol/ProtocolTable.tsx | 2 +-
.../rewards/ClaimRewardsChainTable.tsx | 6 +-
.../rewards/ClaimRewardsChainTableRow.tsx | 2 +-
.../rewards/ClaimRewardsTokenTable.tsx | 8 +-
.../rewards/ClaimRewardsTokenTablePrice.tsx | 10 +-
src/components/element/token/TokenTable.tsx | 4 +-
src/components/layout/Footer.tsx | 6 +-
src/components/layout/Header.tsx | 2 +-
src/components/layout/LayerMenu.tsx | 25 ++---
src/customer/assets/fonts/Obviously_Bold.otf | Bin 0 -> 96156 bytes
src/customer/assets/fonts/Obviously_Bold.woff | Bin 0 -> 48552 bytes
.../assets/fonts/Obviously_Bold.woff2 | Bin 0 -> 41156 bytes
.../assets/fonts/Obviously_Bold_Italic.otf | Bin 0 -> 99680 bytes
.../assets/fonts/Obviously_Bold_Italic.woff | Bin 0 -> 52132 bytes
.../assets/fonts/Obviously_Bold_Italic.woff2 | Bin 0 -> 43644 bytes
src/customer/assets/fonts/Obviously_Semi.otf | Bin 0 -> 94384 bytes
src/customer/assets/fonts/Obviously_Semi.woff | Bin 0 -> 47788 bytes
.../assets/fonts/Obviously_Semi.woff2 | Bin 0 -> 40512 bytes
.../assets/fonts/Obviously_Semi_Italic.otf | Bin 0 -> 96744 bytes
.../assets/fonts/Obviously_Semi_Italic.woff | Bin 0 -> 51340 bytes
.../assets/fonts/Obviously_Semi_Italic.woff2 | Bin 0 -> 42952 bytes
src/customer/assets/style/fonts.css | 43 +++++++-
src/hooks/resources/useOpportunity.tsx | 2 +-
src/routes/_merkl.(home).tsx | 2 +-
src/routes/_merkl.actions.$action.tsx | 1 +
src/routes/_merkl.chains.$id.tsx | 8 +-
.../_merkl.opportunities.$chain.$type.$id.tsx | 8 +-
src/routes/_merkl.protocols.$id.tsx | 12 ++-
src/routes/_merkl.status.$status.tsx | 1 +
src/routes/_merkl.tokens.$symbol.tsx | 1 +
src/routes/_merkl.tokens.(all).tsx | 6 +-
src/routes/_merkl.tsx | 16 ++-
src/routes/_merkl.users.$address.tsx | 64 ++++++-----
src/routes/_merkl.users.(none).tsx | 3 +
43 files changed, 239 insertions(+), 159 deletions(-)
create mode 100644 src/components/element/AddressEdit.tsx
create mode 100644 src/customer/assets/fonts/Obviously_Bold.otf
create mode 100644 src/customer/assets/fonts/Obviously_Bold.woff
create mode 100644 src/customer/assets/fonts/Obviously_Bold.woff2
create mode 100644 src/customer/assets/fonts/Obviously_Bold_Italic.otf
create mode 100644 src/customer/assets/fonts/Obviously_Bold_Italic.woff
create mode 100644 src/customer/assets/fonts/Obviously_Bold_Italic.woff2
create mode 100644 src/customer/assets/fonts/Obviously_Semi.otf
create mode 100644 src/customer/assets/fonts/Obviously_Semi.woff
create mode 100644 src/customer/assets/fonts/Obviously_Semi.woff2
create mode 100644 src/customer/assets/fonts/Obviously_Semi_Italic.otf
create mode 100644 src/customer/assets/fonts/Obviously_Semi_Italic.woff
create mode 100644 src/customer/assets/fonts/Obviously_Semi_Italic.woff2
diff --git a/merkl.config.ts b/merkl.config.ts
index 98b4e999..51265f18 100644
--- a/merkl.config.ts
+++ b/merkl.config.ts
@@ -52,7 +52,7 @@ export default createConfig({
harm: createColoring(["#d22e14", "#d22e14", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
},
merkl: {
- base: createColoring(["#1F2333", "#B8AAFD", "#131620"], ["#FCF8F5", "#B8AAFD", "white"]),
+ base: createColoring(["#1755F4", "#FF7900", "#0D1530"], ["#1755F4", "#FF7900", "#FFFFFF"]),
info: createColoring(["#2ABDFF", "#2ABDFF", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
good: createColoring(["#40B66B", "#40B66B", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
warn: createColoring(["#ff9600", "#ff9600", "#131620"], ["#FFFFFF", "#40B66B", "white"]),
@@ -97,16 +97,16 @@ export default createConfig({
// route: "/protocols",
// key: crypto.randomUUID(),
// },
- terms: {
- icon: "RiCompassesLine",
- route: "/terms",
- key: crypto.randomUUID(),
- },
- privacy: {
- icon: "RiInformationFill",
- route: "/privacy",
- key: crypto.randomUUID(),
- },
+ // terms: {
+ // icon: "RiCompassesLine",
+ // route: "/terms",
+ // key: crypto.randomUUID(),
+ // },
+ // privacy: {
+ // icon: "RiInformationFill",
+ // route: "/privacy",
+ // key: crypto.randomUUID(),
+ // },
},
socials: {
discord: "",
@@ -116,6 +116,8 @@ export default createConfig({
},
links: {
merkl: "https://merkl.xyz/",
+ merklTermsConditions: "https://app.merkl.xyz/merklTerms.pdf",
+ merklPrivacy: "https://privacy.angle.money",
},
wagmi: {
chains: [
@@ -154,7 +156,10 @@ export default createConfig({
],
client({ chain }) {
if (chain.id === zksync.id)
- return createClient({ chain, transport: custom(window.ethereum!) }).extend(eip712WalletActions());
+ return createClient({
+ chain,
+ transport: custom(window.ethereum!),
+ }).extend(eip712WalletActions());
return createClient({ chain, transport: http() });
},
ssr: true,
diff --git a/packages/dappkit b/packages/dappkit
index c22e874c..d47127df 160000
--- a/packages/dappkit
+++ b/packages/dappkit
@@ -1 +1 @@
-Subproject commit c22e874cf4876b51e8ee58121bb8ab6469c48de6
+Subproject commit d47127df98b14864b56bb6ebde63156a6dd6e40d
diff --git a/src/components/composite/Hero.tsx b/src/components/composite/Hero.tsx
index c634c208..ba2d45c1 100644
--- a/src/components/composite/Hero.tsx
+++ b/src/components/composite/Hero.tsx
@@ -1,5 +1,5 @@
import { useLocation } from "@remix-run/react";
-import { Box, Container, Divider, Group, Icon, type IconProps, Icons, Text, Title } from "dappkit";
+import { Container, Divider, Group, Icon, type IconProps, Icons, Tabs, Text, Title } from "dappkit";
import { Button } from "dappkit";
import config from "merkl.config";
import type { PropsWithChildren, ReactNode } from "react";
@@ -8,28 +8,46 @@ import type { Opportunity } from "src/api/services/opportunity/opportunity.model
export type HeroProps = PropsWithChildren<{
icons?: IconProps[];
title: ReactNode;
- breadcrumbs?: { name: string; link: string; component?: ReactNode }[];
+ breadcrumbs?: { name?: string; link: string; component?: ReactNode }[];
navigation?: { label: ReactNode; link: string };
description: ReactNode;
tags?: ReactNode[];
- tabs?: { label: ReactNode; link: string }[];
+ sideDatas?: { data: ReactNode; label: string; key: string }[];
+ tabs?: { label: ReactNode; link: string; key: string }[];
opportunity?: Opportunity;
}>;
-export default function Hero({ navigation, breadcrumbs, icons, title, description, tags, tabs, children }: HeroProps) {
+export default function Hero({
+ navigation,
+ breadcrumbs,
+ icons,
+ title,
+ description,
+ tags,
+ sideDatas,
+ tabs,
+ children,
+}: HeroProps) {
const location = useLocation();
-
return (
<>
+ {/* TODO: Align lines & descriptions on all pages */}
+ {/* TODO: On sub-pages (all pages except Opportunities): Replace the banner by a color */}
+ className={`${
+ location?.pathname === "/" || location?.pathname.includes("opportunities") ? "bg-cover" : "bg-main-6"
+ } flex-row justify-between bg-no-repeat xl:aspect-auto xl:min-h-[350px] aspect-[1440/350]`}
+ style={{
+ backgroundImage:
+ location?.pathname === "/" || location?.pathname.includes("opportunities")
+ ? `url('${config.images.hero}')`
+ : "none",
+ }}>
-
+
{/* TODO: Build dynamic breadcrumbs */}
- {/** Disabled and set invisible when undefined to preserve layout height */}
-
- {tags && (
-
- {description}
-
- )}
- {tags && {tags}}
- {!tags && (
+ {!!description && (
{description}
)}
+ {!!tags && {tags}}
- {/* TODO: Move this outside the Hero component */}
- {/* {!location?.pathname.includes("user") && (
+ {!!sideDatas && (
-
-
-
- {totalRewards}
-
-
+ {sideDatas.map(data => (
+
+ {data.data}
-
- Daily rewards
-
-
-
-
-
- {(opportunity?.apr ?? 0) / 100}
-
-
-
- APR
-
-
-
- {filteredCampaigns?.length}
-
- Active campaigns
-
-
+
+ {data.label}
+
+
+ ))}
- )} */}
+ )}
{!!tabs && (
-
- {tabs?.map(tab => (
-
- ))}
-
+
+
+
)}
{children}
diff --git a/src/components/element/AddressEdit.tsx b/src/components/element/AddressEdit.tsx
new file mode 100644
index 00000000..90af014e
--- /dev/null
+++ b/src/components/element/AddressEdit.tsx
@@ -0,0 +1,22 @@
+import { useNavigate } from "@remix-run/react";
+import { Button, Group, Icon, Input } from "packages/dappkit/src";
+import { useState } from "react";
+
+export default function AddressEdit() {
+ const navigate = useNavigate();
+ const [inputAddress, setInputAddress] = useState();
+ const [_isEditingAddress, setIsEditingAddress] = useState(false);
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/components/element/Socials.tsx b/src/components/element/Socials.tsx
index 2ea6204c..b045d7d5 100644
--- a/src/components/element/Socials.tsx
+++ b/src/components/element/Socials.tsx
@@ -24,6 +24,11 @@ export default function Socials() {
)}
+ {!!config.socials.medium && (
+
+ )}
);
}
diff --git a/src/components/element/Tag.tsx b/src/components/element/Tag.tsx
index 6b28c973..e8db5510 100644
--- a/src/components/element/Tag.tsx
+++ b/src/components/element/Tag.tsx
@@ -270,7 +270,7 @@ export default function Tag({ type, value, ...props }:
}>
-
+
{value?.name}
diff --git a/src/components/element/chain/ChainTable.tsx b/src/components/element/chain/ChainTable.tsx
index 854384b0..6511a27b 100644
--- a/src/components/element/chain/ChainTable.tsx
+++ b/src/components/element/chain/ChainTable.tsx
@@ -2,7 +2,7 @@ import { createTable } from "dappkit";
export const [ChainTable, ChainRow, chainColumns] = createTable({
chain: {
- name: "CHAIN",
+ name: "Chain",
size: "minmax(350px,1fr)",
compact: "1fr",
className: "justify-start",
diff --git a/src/components/element/opportunity/OpportunityTable.tsx b/src/components/element/opportunity/OpportunityTable.tsx
index 704d99c3..0ad21996 100644
--- a/src/components/element/opportunity/OpportunityTable.tsx
+++ b/src/components/element/opportunity/OpportunityTable.tsx
@@ -15,7 +15,7 @@ export const [OpportunityTable, OpportunityRow, opportunityColumns] = createTabl
className: "justify-center",
},
apy: {
- name: "APR",
+ name: "APY",
size: "minmax(min-content,150px)",
compactSize: "minmax(min-content,1fr)",
className: "justify-center",
diff --git a/src/components/element/opportunity/OpportunityTableRow.tsx b/src/components/element/opportunity/OpportunityTableRow.tsx
index 1f57d5a7..f5bd0888 100644
--- a/src/components/element/opportunity/OpportunityTableRow.tsx
+++ b/src/components/element/opportunity/OpportunityTableRow.tsx
@@ -37,7 +37,8 @@ export default function OpportunityTableRow({ hideTags, opportunity, className,
}
apyColumn={
-
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index e8f854ad..e6ba0dd3 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -86,7 +86,7 @@ export default function Header() {
{Object.entries(routes)
- .filter(([key]) => !["homepage", "privacy", "terms"].includes(key))
+ .filter(([key]) => !["homepage"].includes(key))
.map(([key, { route }]) => {
return (