diff --git a/CHANGELOG.md b/CHANGELOG.md index b011b580d..7ba6d24b3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -86,6 +86,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Improvements +- [#1078](https://github.com/alleslabs/celatone-frontend/pull/1078) Add banner modal and adjust color - [#1040](https://github.com/alleslabs/celatone-frontend/pull/1040) Refactor networks selector - [#1039](https://github.com/alleslabs/celatone-frontend/pull/1039) Make NFT Txs to load more style - [#1036](https://github.com/alleslabs/celatone-frontend/pull/1036) Refactor home and change some component names to match the current convention diff --git a/public/allesinitialogo.svg b/public/allesinitialogo.svg new file mode 100644 index 000000000..f3f127b2f --- /dev/null +++ b/public/allesinitialogo.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/celaton-ogimg.jpg b/public/celaton-ogimg.jpg new file mode 100644 index 000000000..82e96cfca Binary files /dev/null and b/public/celaton-ogimg.jpg differ diff --git a/public/celatone.svg b/public/celatone.svg new file mode 100644 index 000000000..fb9ae541b --- /dev/null +++ b/public/celatone.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/public/scan-ogimage.jpg b/public/scan-ogimage.jpg new file mode 100644 index 000000000..219ec9a05 Binary files /dev/null and b/public/scan-ogimage.jpg differ diff --git a/src/config/theme/default.ts b/src/config/theme/default.ts index 74604f4db..0dcc6ae11 100644 --- a/src/config/theme/default.ts +++ b/src/config/theme/default.ts @@ -4,13 +4,13 @@ import { generateTheme } from "./utils"; const DEFAULT_BASE_THEME: ThemeConfig = { branding: { - logo: "https://assets.alleslabs.dev/celatone-brand/logo/full-white.svg", + logo: "/celatone.svg", favicon: "https://assets.alleslabs.dev/celatone-brand/favicon.ico", seo: { appName: "Celatone", - title: "Celatone Explorer for Cosmos chain", - description: "A smart contract powered explorer for the Cosmos.", - image: "https://assets.alleslabs.dev/celatone-brand/socials/ogimage.jpg", + title: "Celatone Explorer", + description: "All in one place.", + image: "/celatone-ogimg.jpg", twitter: { handle: "@celatone_", cardType: "summary_large_image", @@ -19,45 +19,45 @@ const DEFAULT_BASE_THEME: ThemeConfig = { }, colors: { primary: { - lighter: "#E0F1FB", - light: "#C2EAFF", - main: "#89D1F6", - dark: "#5ABAEC", - darker: "#2B8BBD", - background: "#244865", + lighter: "#9AF3FF", + light: "#71EEFF", + main: "#4CE2F7", + dark: "#00B5CE", + darker: "#007080", + background: "#0E3139", }, secondary: { - light: "#C2EAFF", - main: "#89D1F6", - dark: "#5ABAEC", - darker: "#2B8BBD", - background: "#244865", + light: "#9AF3FF", + main: "#4CE2F7", + dark: "#00B5CE", + darker: "#007080", + background: "#0E3139", }, accent: { - lighter: "#FDFAEC", - light: "#F9F0C8", - main: "#F5E6A3", - dark: "#EDD25A", - darker: "#7B703A", - background: "#3B3928", + lighter: "#9AF3FF", + light: "#71EEFF", + main: "#4CE2F7", + dark: "#00B5CE", + darker: "#007080", + background: "#0E3139", }, gray: { - 100: "#F8FAFC", - 400: "#B7C1CD", - 500: "#8A99AE", - 600: "#707E94", - 700: "#334155", - 800: "#1E2535", - 900: "#151B27", + 100: "#F5F5F5", + 400: "#D1D9E0", + 500: "#A1A6AA", + 600: "#757C82", + 700: "#303437", + 800: "#222426", + 900: "#161717", }, text: { - main: "#F8FAFC", - dark: "#CBD5E1", - disabled: "#94A3B8", + main: "#F5F5F5", + dark: "#D1D9E0", + disabled: "#A1A6AA", }, background: { - main: "#0E131C", - overlay: "rgba(2, 6, 23, 0.7)", + main: "#070708", + overlay: "rgba(7, 7, 8, 0.7)", }, success: { main: "#42BEA6", @@ -66,49 +66,48 @@ const DEFAULT_BASE_THEME: ThemeConfig = { background: "#102E28", }, error: { - light: "#FF8086", - main: "#FF666E", - dark: "#B43E44", - background: "#4C1A1D", + light: "#FF8383", + main: "#FF5656", + dark: "#C71919", + background: "#510B0B", }, warning: { - light: "#FFCC66", - main: "#FFBB33", - dark: "#CC8800", - background: "#523600", + light: "#FFD08B", + main: "#FFBE5D", + dark: "#D78812", + background: "#553505", }, }, - jsonTheme: "pastel_on_dark", + jsonTheme: "monokai", illustration: { "404": - "https://assets.alleslabs.dev/celatone-brand/illustration/states/404.svg", + "https://assets.alleslabs.dev/integrations/initia/illustration/404.svg", error: - "https://assets.alleslabs.dev/celatone-brand/illustration/states/error.svg", + "https://assets.alleslabs.dev/integrations/initia/illustration/error.svg", searchNotFound: - "https://assets.alleslabs.dev/celatone-brand/illustration/states/search-not-found.svg", + "https://assets.alleslabs.dev/integrations/initia/illustration/search-not-found.svg", searchEmpty: - "https://assets.alleslabs.dev/celatone-brand/illustration/states/search-empty.svg", + "https://assets.alleslabs.dev/integrations/initia/illustration/search-empty.svg", disconnected: - "https://assets.alleslabs.dev/celatone-brand/illustration/states/disconnected.svg", + "https://assets.alleslabs.dev/integrations/initia/illustration/disconnected.svg", }, socialMedia: { - website: "https://celat.one/", - github: "https://github.com/alleslabs", - twitter: "https://twitter.com/celatone_", - medium: "https://blog.alleslabs.com/", - telegram: "https://t.me/celatone_announcements", + website: "https://initia.xyz", + github: "https://github.com/initia-labs", + twitter: "https://x.com/initiaFDN", + medium: "https://medium.com/@initiafdn", }, }; const DEFAULT_COMPONENT_CONFIG: ComponentConfig = { button: { primary: { - background: "primary.main", - color: "gray.800", - disabledBackground: "primary.background", - disabledColor: "gray.800", - hoverBackground: "primary.dark", - activeBackground: "primary.darker", + background: "gray.100", + color: "gray.900", + disabledBackground: "gray.500", + disabledColor: "gray.900", + hoverBackground: "gray.400", + activeBackground: "gray.400", }, outlinePrimary: { borderColor: "primary.main", @@ -121,10 +120,10 @@ const DEFAULT_COMPONENT_CONFIG: ComponentConfig = { }, proposalChip: { depositPeriod: { - bg: "primary.background", + bg: "primary.darker", }, votingPeriod: { - bg: "primary.darker", + bg: "primary.dark", }, failed: { bg: "error.dark", diff --git a/src/config/theme/initia.ts b/src/config/theme/initia.ts index 610d13d42..f47982b3a 100644 --- a/src/config/theme/initia.ts +++ b/src/config/theme/initia.ts @@ -8,17 +8,48 @@ const INITIA_BASE_THEME: ThemeConfig = { favicon: "https://assets.alleslabs.dev/integrations/initia/favicon.svg", seo: { appName: "Initia", - title: "Initia Scan powered by Celatone", - description: - "Explore Initia's layered ecosystem effortlessly, bridging Web2 to Web3, while delving into sovereign applications.", - image: "https://assets.alleslabs.dev/integrations/initia/cover.jpg", + title: "Initia Scan", + description: "Initia, a network for interwoven rollups", + image: "/scan-ogimage.jpg", twitter: { - handle: "@initiafnd", + handle: "@initiafdn", cardType: "summary_large_image", }, }, }, colors: { + primary: { + lighter: "#9AF3FF", + light: "#71EEFF", + main: "#4CE2F7", + dark: "#00B5CE", + darker: "#007080", + background: "#0E3139", + }, + secondary: { + light: "#9AF3FF", + main: "#4CE2F7", + dark: "#00B5CE", + darker: "#007080", + background: "#0E3139", + }, + accent: { + lighter: "#9AF3FF", + light: "#71EEFF", + main: "#4CE2F7", + dark: "#00B5CE", + darker: "#007080", + background: "#0E3139", + }, + gray: { + 100: "#F5F5F5", + 400: "#D1D9E0", + 500: "#A1A6AA", + 600: "#757C82", + 700: "#303437", + 800: "#222426", + 900: "#161717", + }, error: { main: "#FF666E", light: "#FF8086", @@ -46,38 +77,6 @@ const INITIA_BASE_THEME: ThemeConfig = { dark: "#B7B7B7", disabled: "#A1A6AA", }, - primary: { - main: "#2AB9FC", - light: "#5FC1EE", - lighter: "#79D5FF", - dark: "#15AFF8", - darker: "#008FD7", - background: "#005881", - }, - secondary: { - main: "#2AB9FC", - light: "#5FC1EE", - dark: "#15AFF8", - darker: "#008FD7", - background: "#005881", - }, - accent: { - main: "#D8BEFC", - light: "#D2A3F9", - lighter: "#79D5FF", - dark: "#A28FBD", - darker: "#6C5F7E", - background: "#36303F", - }, - gray: { - 100: "#F5F5F5", - 400: "#D1D9E0", - 500: "#A1A6AA", - 600: "#757C82", - 700: "#303437", - 800: "#222426", - 900: "#161717", - }, }, jsonTheme: "monokai", illustration: { @@ -93,9 +92,10 @@ const INITIA_BASE_THEME: ThemeConfig = { "https://assets.alleslabs.dev/integrations/initia/illustration/disconnected.svg", }, socialMedia: { - website: "https://initia.tech/", + website: "https://initia.xyz", github: "https://github.com/initia-labs", - twitter: "https://twitter.com/initiaFND", + twitter: "https://x.com/initiaFDN", + medium: "https://medium.com/@initiafdn", }, }; diff --git a/src/config/theme/jennie.ts b/src/config/theme/jennie.ts index d992f7bcd..dfef6bde8 100644 --- a/src/config/theme/jennie.ts +++ b/src/config/theme/jennie.ts @@ -8,12 +8,11 @@ const JENNIE_BASE_THEME: ThemeConfig = { favicon: "https://assets.alleslabs.dev/integrations/initia/favicon.svg", seo: { appName: "Initia", - title: "Initia Scan powered by Celatone", - description: - "Explore Initia's layered ecosystem effortlessly, bridging Web2 to Web3, while delving into sovereign applications.", - image: "https://assets.alleslabs.dev/integrations/initia/cover.jpg", + title: "Initia Scan", + description: "Initia, a network for interwoven rollups", + image: "/scan-ogimage.jpg", twitter: { - handle: "@initiafnd", + handle: "@initiafdn", cardType: "summary_large_image", }, }, @@ -93,9 +92,10 @@ const JENNIE_BASE_THEME: ThemeConfig = { "https://assets.alleslabs.dev/integrations/initia/jennie/illustration/disconnected.png", }, socialMedia: { - website: "https://initia.tech/", + website: "https://initia.xyz", github: "https://github.com/initia-labs", - twitter: "https://twitter.com/initiaFND", + twitter: "https://x.com/initiaFDN", + medium: "https://medium.com/@initiafdn", }, }; diff --git a/src/config/theme/sei.ts b/src/config/theme/sei.ts index 1d06579a2..e8d79bd90 100644 --- a/src/config/theme/sei.ts +++ b/src/config/theme/sei.ts @@ -9,7 +9,7 @@ const SEI_BASE_THEME: ThemeConfig = { favicon: "https://assets.alleslabs.dev/integrations/sei/favicon.ico", seo: { appName: "SeiScan", - title: "SeiScan powered by Celatone", + title: "SeiScan", description: "Explore, deploy, execute, and query smart contracts on Sei from a user-friendly web UI", image: "https://assets.alleslabs.dev/integrations/sei/cover.jpg", diff --git a/src/lib/components/chart/LineChart.tsx b/src/lib/components/chart/LineChart.tsx index 805ac9519..e1e8d8f06 100644 --- a/src/lib/components/chart/LineChart.tsx +++ b/src/lib/components/chart/LineChart.tsx @@ -48,7 +48,8 @@ const renderChartTooltip = ( if (!tooltipEl) { tooltipEl = document.createElement("div"); - tooltipEl.style.background = "rgba(41, 38, 118, 0.9)"; + tooltipEl.style.background = "rgba(122, 132, 134, 0.4)"; + tooltipEl.style.backdropFilter = "blur(2px)"; tooltipEl.style.boxShadow = "0px 4px 4px 0px rgba(0, 0, 0, 0.25)"; tooltipEl.style.borderRadius = "8px"; tooltipEl.style.opacity = "1"; @@ -134,7 +135,7 @@ export const LineChart = ({ }, crosshair: { line: { - color: "#D8BEFC", + color: "#00B5CE", width: 1, dashPattern: [5, 5], }, @@ -170,7 +171,7 @@ export const LineChart = ({ return "transparent"; } - return "#343445"; + return "#222424"; }, }, ticks: { @@ -196,7 +197,7 @@ export const LineChart = ({ return "transparent"; } - return "#343445"; + return "#222424"; }, }, min: 0, diff --git a/src/lib/data/constant.ts b/src/lib/data/constant.ts index 975011b99..ee9174aab 100644 --- a/src/lib/data/constant.ts +++ b/src/lib/data/constant.ts @@ -83,6 +83,7 @@ export enum StorageKeys { ProjectSidebar = "project-sidebar", Wallets = "wallets", Networks = "networks", + Annoucement = "annoucement", } export const HEX_WALLET_ADDRESS_LENGTH = 40; diff --git a/src/lib/layout/Footer.tsx b/src/lib/layout/Footer.tsx index 126269efa..b47b89611 100644 --- a/src/lib/layout/Footer.tsx +++ b/src/lib/layout/Footer.tsx @@ -2,7 +2,7 @@ import type { IconProps } from "@chakra-ui/react"; import { Flex, Image, Text } from "@chakra-ui/react"; import Link from "next/link"; -import { AmpEvent, track, trackSocial } from "lib/amplitude"; +import { trackSocial } from "lib/amplitude"; import { useCelatoneApp, useMobile } from "lib/app-provider"; import { CustomIcon } from "lib/components/icon"; import type { IconKeys } from "lib/components/icon"; @@ -17,35 +17,36 @@ interface SocialMenuType { const socialMenu: SocialMenuType[] = [ { - url: "https://github.com/alleslabs", + url: "https://initia.xyz", + icon: "website", + slug: "website", + }, + { + url: "https://github.com/initia-labs", icon: "github", slug: "github", }, { - url: "https://twitter.com/celatone_", + url: "https://twitter.com/initiaFDN", icon: "twitter", slug: "twitter", }, { - url: "https://blog.alleslabs.com", + url: "https://medium.com/@initiafdn", icon: "medium", slug: "medium", }, - { - url: "https://t.me/celatone_announcements", - icon: "telegram", - slug: "telegram", - }, ]; const socialSequence = { - github: 0, - discord: 1, - twitter: 2, - telegram: 3, - medium: 4, - reddit: 5, - linkedin: 6, + website: 0, + github: 1, + discord: 2, + twitter: 3, + telegram: 4, + medium: 5, + reddit: 6, + linkedin: 7, }; const SocialMenuRender = ({ @@ -93,54 +94,6 @@ const SocialMenuRender = ({ ); }; -const IconLink = ({ - href, - icon, - text1, - text2, -}: { - href: string; - icon: IconKeys; - text1: string; - text2: string; -}) => ( - track(AmpEvent.ALLESLABS)} - > - - - - {text1} - - {text2} - - - - -); - const Footer = () => { const isMobile = useMobile(); const { theme } = useCelatoneApp(); @@ -177,32 +130,13 @@ const Footer = () => { {theme.footer.description} - - - - - - - - {isMobile && } ) : ( { - {isMobile && } ); diff --git a/src/lib/layout/subheader/index.tsx b/src/lib/layout/subheader/index.tsx index 3d3bb3f4a..873ac9a55 100644 --- a/src/lib/layout/subheader/index.tsx +++ b/src/lib/layout/subheader/index.tsx @@ -20,7 +20,7 @@ import { getSubHeaderSequencer, } from "./utils"; -const ACTIVE_COLOR = "primary.light"; +const ACTIVE_COLOR = "accent.main"; const SubHeader = () => { const { tier } = useTierConfig(); diff --git a/src/lib/pages/home/components/AnnouncementModal.tsx b/src/lib/pages/home/components/AnnouncementModal.tsx new file mode 100644 index 000000000..ef47544b5 --- /dev/null +++ b/src/lib/pages/home/components/AnnouncementModal.tsx @@ -0,0 +1,71 @@ +import { + Button, + Divider, + Flex, + Heading, + Image, + Modal, + ModalBody, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Text, +} from "@chakra-ui/react"; + +interface AnnouncementModalProps { + isOpen: boolean; + onClose: () => void; +} +export const AnnouncementModal = ({ + isOpen, + onClose, +}: AnnouncementModalProps) => ( + {}}> + + + + + + + + + + + + Alles Labs is joining{" "} + Initia Labs + + + Alles Labs, the team behind Celatone, is joining Initia Labs to + enhance the user and developer experience within the Initia + ecosystem. The Celatone explorer on existing chains will continue to + operate without any changes. + + + + + + + + + + +); diff --git a/src/lib/pages/home/index.tsx b/src/lib/pages/home/index.tsx index 948a0874b..1231aee2e 100644 --- a/src/lib/pages/home/index.tsx +++ b/src/lib/pages/home/index.tsx @@ -1,26 +1,52 @@ import { useRouter } from "next/router"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { AmpEvent, track } from "lib/amplitude"; +import { useInitia } from "lib/app-provider"; import { TierSwitcher } from "lib/components/TierSwitcher"; +import { StorageKeys } from "lib/data"; +import { useLocalStorage } from "lib/hooks"; +import { AnnouncementModal } from "./components/AnnouncementModal"; import { HomeFull } from "./full"; import { HomeLite } from "./lite"; import { HomeSequencer } from "./sequencer"; const Home = () => { const router = useRouter(); + const isInitia = useInitia(); + + const [hasVisited, setHasVisited] = useLocalStorage( + StorageKeys.Annoucement, + false + ); + const [showModal, setShowModal] = useState(false); useEffect(() => { - if (router.isReady) track(AmpEvent.TO_OVERVIEW); - }, [router.isReady]); + if (router.isReady) { + track(AmpEvent.TO_OVERVIEW); + + if (!hasVisited) { + setShowModal(true); + setHasVisited(true); + } + } + }, [router.isReady, hasVisited, setHasVisited]); return ( - } - sequencer={} - lite={} - /> + <> + {!isInitia && ( + setShowModal(false)} + /> + )} + } + sequencer={} + lite={} + /> + ); }; diff --git a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx b/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx index 1077fcbe2..0446b9dac 100644 --- a/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx +++ b/src/lib/pages/validator-details/components/bonded-token-changes/VotingPowerChart.tsx @@ -55,19 +55,19 @@ export const VotingPowerChart = ({ const dataset = { data: historicalPowers.items.map((item) => item.votingPower.toNumber()), - borderColor: "#D8BEFC", + borderColor: "#4CE2F7", backgroundColor: (context: ScriptableContext<"line">) => { const { ctx } = context.chart; const gradient = ctx.createLinearGradient(0, 0, 0, 300); - gradient.addColorStop(0, "rgba(216, 190, 252, 1)"); - gradient.addColorStop(0.8, "rgba(115, 85, 156, 0)"); + gradient.addColorStop(0, "rgba(76, 226, 247, 1)"); + gradient.addColorStop(0.8, "rgba(14, 49, 57, 0)"); return gradient; }, - pointHoverBackgroundColor: "#F4F9D9", - pointHoverBorderColor: "#D8BEFC", + pointHoverBackgroundColor: "#F5F5F5", + pointHoverBorderColor: "#4CE2F7", }; const customizeTooltip = (tooltip: TooltipModel<"line">) => { @@ -87,13 +87,13 @@ export const VotingPowerChart = ({ return `
-

${ +

${ singleStakingDenom ? "Bonded Token" : "Voting Powers" }

-

${formattedAmount} ${currency}

+

${formattedAmount} ${currency}

-
-

${formattedDate}

+
+

${formattedDate}

`; };