Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/main' into feat/opportunity-page
Browse files Browse the repository at this point in the history
  • Loading branch information
@hugolxt
hugolxt committed Dec 3, 2024
2 parents cfa2115 + c319815 commit 47733d0
Show file tree
Hide file tree
Showing 14 changed files with 242 additions and 139 deletions.
8 changes: 4 additions & 4 deletions src/components/composite/Hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ export default function Hero({ navigation, icons, title, description, tags, chil
return (
<>
<Group
className="flex-row justify-between aspect-[1440/440] bg-cover bg-no-repeat xl:aspect-auto xl:min-h-[400px]"
className="flex-row justify-between aspect-[1440/400] bg-cover bg-no-repeat xl:aspect-auto xl:min-h-[400px]"
style={{ backgroundImage: `url('${config.images.hero}')` }}>
<Container>
<Group className="flex-col h-full py-xl gap-xl lg:gap-xs">
Expand Down Expand Up @@ -106,15 +106,15 @@ export default function Hero({ navigation, icons, title, description, tags, chil
</Title>
</Group>
{tags && (
<Text size="xl" className="!font-bold">
<Text size="xl" bold>
{description}
</Text>
)}
</Group>
<Divider className="border-main-11" horizontal />
<Divider look="base" />
{tags && <Group className="mb-lg">{tags}</Group>}
{!tags && (
<Text size="xl" className="!font-bold">
<Text size="xl" bold>
{description}
</Text>
)}
Expand Down
15 changes: 15 additions & 0 deletions src/components/element/SwitchMode.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import config from "merkl.config";
import { Button, Icon, useTheme } from "packages/dappkit/src";
import { useMemo } from "react";

export default function SwitchMode() {
const { mode, toggleMode } = useTheme();
const canSwitchModes = useMemo(() => !(!config.modes || config.modes?.length === 1), []);
return (
canSwitchModes && (
<Button look="base" onClick={toggleMode}>
<Icon remix={mode === "dark" ? "RiMoonClearLine" : "RiSunLine"} />
</Button>
)
);
}
172 changes: 97 additions & 75 deletions src/components/element/Tag.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import type { Chain, Opportunity, Token } from "@angleprotocol/merkl-api";
import { Button, Divider, Dropdown, Group, Hash, Icon, PrimitiveTag, Text, Title } from "dappkit";
import type { Opportunity, Token } from "@angleprotocol/merkl-api";
import { Button, Divider, Dropdown, Group, Hash, Icon, PrimitiveTag, Text } from "dappkit";
import type { ButtonProps } from "dappkit";
import { type Action, actions } from "src/config/actions";
import type { Protocol } from "src/config/protocols";
Expand Down Expand Up @@ -29,23 +29,27 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
const status = statuses[value as TagTypes["status"]] ?? statuses.LIVE;
return (
<Dropdown
size="lg"
padding="xs"
content={
<>
<Group className="flex-col">
<Group size="xs" className="flex-col">
<Group className="justify-between">
<Text size="xs">Status</Text>
</Group>
<Group size="sm">
<Icon size={props?.size} {...status.icon} />
<Title h={4}>{status?.label}</Title>
<Icon {...status.icon} />
<Text size="sm" className="text-main-12" bold>
{status?.label}
</Text>
</Group>
</Group>
<Divider className="border-main-6" horizontal />
<Text size="xs">{status?.description}</Text>
<Button to={`/status/${status?.label}`} size="xs" look="soft">
Open
</Button>
</>
<Divider look="soft" horizontal />
<Group className="flex-col">
<Text size="xs">{status?.description}</Text>
<Button to={`/status/${status?.label}`} size="xs" look="soft">
<Icon remix="RiArrowRightLine" />
Open
</Button>
</Group>
</Group>
}>
<PrimitiveTag look="soft" key={value} {...props}>
<Icon size={props?.size} {...status.icon} />
Expand All @@ -58,23 +62,27 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
const chain = value as TagTypes["chain"];
return (
<Dropdown
size="lg"
padding="xs"
content={
<>
<Group size="xs" className="flex-col">
<Group className="justify-between">
<Text size="xs">Chain</Text>
<Text size="xs">id: {chain?.id}</Text>
</Group>
<Group className="flex-col">
<Group className="w-full justify-between items-center" size="xl">
<Group size="sm">
<Icon size={props?.size} src={chain?.icon} />
<Title h={4}>{chain?.name}</Title>
<Icon src={chain?.icon} />
<Text size="sm" className="text-main-12" bold>
{chain?.name}
</Text>
</Group>
<Text size="xs">id: {chain?.id}</Text>
</Group>
<Divider className="border-main-6" horizontal />
<Button to={`/chain/${chain?.name}`} size="sm" look="bold">
Open
</Button>
</>

<Divider look="soft" horizontal />
<Group className="flex-col">
<Button to={`/chain/${chain?.name}`} size="xs" look="soft">
<Icon remix="RiArrowRightLine" /> Open
</Button>
</Group>
</Group>
}>
<PrimitiveTag look="base" key={value} {...props}>
<Icon size={props?.size} src={chain?.icon} />
Expand All @@ -88,23 +96,25 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
if (!action) return <Button {...props}>{value}</Button>;
return (
<Dropdown
size="lg"
padding="xs"
content={
<>
<Group className="flex-col">
<Group size="xs" className="flex-col">
<Group className="justify-between">
<Text size="xs">Action</Text>
</Group>
<Group size="sm">
<Icon size={props?.size} {...action.icon} />
<Title h={4}>{action?.label}</Title>
<Icon {...action.icon} />
<Text size="sm" className="text-main-12" bold>
{action?.label}
</Text>
</Group>
</Group>
<Divider className="border-main-6" horizontal />
<Divider look="soft" horizontal />
<Text size="xs">{action?.description}</Text>
<Button to={`/action/${action?.label}`} size="sm" look="bold">
<Button to={`/action/${action?.label}`} size="xs" look="soft">
<Icon remix="RiArrowRightLine" />
Open
</Button>
</>
</Group>
}>
<PrimitiveTag look="bold" key={value} {...props}>
<Icon size={props?.size} {...action.icon} />
Expand All @@ -118,31 +128,36 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
if (!token) return <Button {...props}>{value}</Button>;
return (
<Dropdown
size="lg"
padding="xs"
content={
<>
<Group size="xs" className="flex-col">
<Group className="justify-between">
<Text size="xs">Token</Text>
<Hash format="short" size="xs">
{token.address}
</Hash>
</Group>
<Group className="flex-col">
<Group className="w-full justify-between items-center" size="xl">
<Group size="sm">
<Icon size={props?.size} src={token.icon} />
<Title h={4}>{token?.name}</Title>
<Text size="sm" className="text-main-12" bold>
{token?.name}
</Text>
</Group>
<Text size="xs">
<Hash copy format="short" size="xs">
{token.address}
</Hash>
</Text>
</Group>
<Divider className="border-main-6" horizontal />
{/* <Text size="xs">{token?.description}</Text> */}
<Group className="flex-col" size="sm">
<Button to={`/token/${token?.symbol}`} size="sm" look="bold">
<Divider look="soft" horizontal />
<Group className="flex-col" size="md">
{/* <Text size="xs">{token?.description}</Text> */}
<Button to={`/token/${token?.symbol}`} size="xs" look="soft">
<Icon remix="RiArrowRightLine" />
{token?.symbol} on Merkl
</Button>
<Button size="sm" look="bold">
<Button size="xs" look="soft">
<Icon remix="RiArrowRightLine" />
{token?.symbol} on Etherscan
</Button>
</Group>
</>
</Group>
}>
<PrimitiveTag look="base" key={value} {...props}>
<Icon size={props?.size} src={token.icon} />
Expand All @@ -156,35 +171,41 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
if (!token) return <Button {...props}>{value}</Button>;
return (
<Dropdown
size="lg"
padding="xs"
content={
<>
<Group className="flex-col">
<Group size="xs" className="flex-col">
<Group className="justify-between">
<Group className="justify-between" size="xl">
<Text size="xs">Token</Text>
<Hash format="short" size="xs">
{token.address}
</Hash>
</Group>
<Group size="sm">
<Icon size={props?.size} src={token.logoURI} />
<Title h={4}>{token?.name}</Title>
<Text size="sm" className="text-main-12" bold>
{token?.name}
</Text>
</Group>
</Group>
<Divider className="border-main-6" horizontal />
{/* <Text size="xs">{token?.description}</Text> */}
<Group className="flex-col" size="sm">
<Divider look="soft" horizontal />
<Group className="flex-col" size="md">
{/* <Text size="xs">{token?.description}</Text> */}
<Button to={`/chain/${token.chain?.name}`} size="sm" look="bold">
<Icon size="sm" src={token.chain?.icon} />
{token.chain?.name}
</Button>
<Button to={`/token/${token?.symbol}`} size="sm" look="bold">
<Button to={`/token/${token?.symbol}`} size="xs" look="soft">
<Icon remix="RiArrowRightLine" />
{token?.symbol} on Merkl
</Button>
<Button size="sm" look="bold">
<Button size="xs" look="soft">
<Icon remix="RiArrowRightLine" />
{token?.symbol} on Etherscan
</Button>
</Group>
</>
</Group>
}>
<PrimitiveTag look="base" key={value} {...props}>
<Icon size={props?.size} src={token.chain.icon} />
Expand All @@ -198,28 +219,29 @@ export default function Tag<T extends keyof TagTypes>({ type, value, ...props }:
if (!protocol) return <Button {...props}>{value}</Button>;
return (
<Dropdown
size="lg"
padding="xs"
content={
<>
<Group size="xs" className="flex-col">
<Group className="justify-between">
<Text size="xs">Protocol</Text>
</Group>
<Group size="sm">
<Icon size={props?.size} src={protocol?.icon} />
<Title h={4}>{value?.name}</Title>
</Group>
<Group className="flex-col">
<Group size="sm">
<Icon size={props?.size} src={protocol?.icon} />
<Text size="sm" className="text-main-12" bold>
{value?.name}
</Text>
</Group>
<Divider className="border-main-6" horizontal />
{/* <Text size="xs">{token?.description}</Text> */}
<Group className="flex-col" size="sm">
<Button to={`/protocol/${protocol?.name}`} size="sm" look="bold">
<Divider look="soft" horizontal />
<Group className="flex-col" size="md">
{/* <Text size="xs">{token?.description}</Text> */}
<Button to={`/protocol/${protocol?.name}`} size="xs" look="soft">
<Icon remix="RiArrowRightLine" />
{protocol?.name} on Merkl
</Button>
<Button size="sm" look="bold">
<Button size="xs" look="soft">
<Icon remix="RiArrowRightLine" />
{protocol?.name}
</Button>
</Group>
</>
</Group>
}>
<PrimitiveTag look="tint" key={value} {...props}>
<Icon src={protocol?.icon} />
Expand Down
26 changes: 18 additions & 8 deletions src/components/element/functions/SearchBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,11 @@ function OpportunityResult({ opportunity }: { opportunity: Opportunity }) {
);
}

export default function SearchBar() {
interface SearchBarProps {
icon?: boolean;
}

export default function SearchBar({ icon = false }: SearchBarProps) {
useShortcut("ctrlKey", "k", () => {
setOpened(true);
});
Expand Down Expand Up @@ -98,13 +102,19 @@ export default function SearchBar() {
</>
}>
<Form>
<Input
name="search"
value={searchInput}
state={[searchInput, setSearchInput]}
placeholder="Search"
suffix={<Icon size="sm" className="text-main-12" remix="RiSearchLine" />}
/>
{icon ? (
<Button look="base">
<Icon className="text-main-12" remix="RiSearchLine" />
</Button>
) : (
<Input
name="search"
value={searchInput}
state={[searchInput, setSearchInput]}
placeholder="Search"
suffix={<Icon className="text-main-12" remix="RiSearchLine" />}
/>
)}
</Form>
</Modal>
);
Expand Down
4 changes: 3 additions & 1 deletion src/components/element/opportunity/OpportunityLibrary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ export type OpportunityLibrary = {
export default function OpportunityLibrary({ opportunities, count, only, exclude, chains }: OpportunityLibrary) {
const rows = useMemo(
() =>
opportunities?.map(o => <OpportunityTableRow key={`${o.chainId}_${o.type}_${o.identifier}`} opportunity={o} />),
opportunities?.map(o => (
<OpportunityTableRow key={`${o.chainId}_${o.type}_${o.identifier}`} hideTags={["action"]} opportunity={o} />
)),
[opportunities],
);

Expand Down
8 changes: 4 additions & 4 deletions src/components/element/opportunity/OpportunityPagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,26 +30,26 @@ export default function OpportunityPagination({ count }: OpportunityPaginationPr
<Group className="justify-between">
<List flex="row">
<Button disabled={(pageFilter ?? 0) <= 1} onClick={() => setPageFilter(Math.max(1, (pageFilter ?? 0) - 1))}>
<Icon size="sm" remix="RiArrowLeftLine" />
<Icon remix="RiArrowLeftLine" />
</Button>
<Select state={[pageFilter, setPageFilter]} look="bold" options={pageOptions} />
<Button
disabled={(pageFilter ?? 0) >= pages}
onClick={() => setPageFilter(Math.min(pages, (pageFilter ?? 0) + 1))}>
<Icon size="sm" remix="RiArrowRightLine" />
<Icon remix="RiArrowRightLine" />
</Button>
</List>
<List flex="row">
<Button onClick={() => setItemsFilter(Math.min(50, (itemsFilter ?? 0) + 10))}>
More <Icon size="sm" remix="RiArrowDownLine" />
More <Icon remix="RiArrowDownLine" />
</Button>
<Select
state={[itemsFilter, setItemsFilter]}
look="bold"
options={{ 10: "10", 20: "20", 30: "30", 40: "40", 50: "50" }}
/>
<Button onClick={() => setItemsFilter(Math.max(10, (itemsFilter ?? 0) - 10))}>
Less <Icon size="sm" remix="RiArrowUpLine" />
Less <Icon remix="RiArrowUpLine" />
</Button>
</List>
</Group>
Expand Down
Loading

0 comments on commit 47733d0

Please sign in to comment.