Merge pull request #74 from Magickbase/add_node_size_alert

feat(neuron): add ckb node size alert

packages/explorer/.gitignore

@@ -0,0 +1 @@
+.vercel

packages/neuron/.env.example

@@ -16,10 +16,11 @@ NEXT_PUBLIC_REPO=nervosnetwork/neuron
 NEXT_PUBLIC_ALGOLIA_APP_ID=N4B3ZR1EJA
 NEXT_PUBLIC_ALGOLIA_SEARCH_KEY=
 
+NODE_INFO_API_ENDPOINT=https://ckb-node-info.magickbase.com/api
 # For accessing api.github.com
 # https://docs.github.com/en/rest/overview/authenticating-to-the-rest-api?apiVersion=2022-11-28
 GITHUB_TOKEN=
 
 ALGOLIA_ADMIN_KEY=
 
-UPTIME_KEY=
+UPTIME_KEY=

packages/neuron/public/locales/en/download.json

@@ -1,4 +1,8 @@
 {
   "Current Version": "Current Version",
-  "Download Neuron": "Download Neuron"
+  "Download Neuron": "Download Neuron",
+  "Download Note": "Download Note",
+  "Cancel": "Cancel",
+  "Continue": "Continue",
+  "node_info_alert": "The current CKB full node data size is approximately <tag1>{{size}}G</tag1> and continues to grow over time. While Neuron's built-in light client node can greatly reduce the data required for synchronization, please make sure you have enough disk space for you to use the Neuron wallet properly."
 }

packages/neuron/public/locales/zh/download.json

@@ -1,4 +1,8 @@
 {
   "Current Version": "当前版本",
-  "Download Neuron": "下载 Neuron"
+  "Download Neuron": "下载 Neuron",
+  "Download Note": "下载须知",
+  "Cancel": "取消",
+  "Continue": "继续",
+  "node_info_alert": "当前CKB全节点数据大小约为 <tag1>{{size}} G</tag1> 并随着时间持续增长，虽然 Neuron 内置的轻节点可以大大减少同步所需数据，但是为了您可以正常使用 Neuron 钱包，请确保您有足够的磁盘空间。"
 }

packages/neuron/src/components/Dialog/index.module.scss

@@ -0,0 +1,74 @@
+.dialogOverlay {
+  position: fixed;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 16px;
+  background-color: rgb(0 0 0 / 80%);
+  inset: 0;
+}
+
+.dialogContent {
+  position: relative;
+  z-index: 50;
+  display: grid;
+  gap: 1rem;
+  width: 100%;
+  max-width: 32rem;
+  padding: 1.5rem;
+  color: #f5f5f5;
+  background-color: #111;
+  border: 1px solid #fff3;
+  border-radius: 0.5rem;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -2px rgb(0 0 0 / 5%);
+  transition-duration: 200ms;
+}
+
+.dialogClose {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  border-radius: 0.125rem;
+  opacity: 0.7;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+  transition-property: opacity;
+
+  :hover {
+    opacity: 1;
+  }
+}
+
+.dialogHeader {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 12px;
+  text-align: center;
+  border-bottom: 1px solid #333;
+
+  @media (width >= 640px) {
+    text-align: left;
+  }
+}
+
+.dialogFooter {
+  display: flex;
+  flex-direction: column-reverse;
+
+  @media (width >= 640px) {
+    flex-direction: row;
+  }
+}
+
+.dialogTitle {
+  margin: 0;
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 32px;
+}
+
+.dialogDescription {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}

packages/neuron/src/components/Dialog/index.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import clsx from 'clsx'
+import styles from './index.module.scss'
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay ref={ref} className={clsx(styles.dialogOverlay, className)} {...props} />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay>
+      <DialogPrimitive.Content ref={ref} className={clsx(styles.dialogContent, className)} {...props}>
+        {children}
+      </DialogPrimitive.Content>
+    </DialogOverlay>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={clsx(styles.dialogHeader, className)} {...props} />
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={clsx(styles.dialogFooter, className)} {...props} />
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title ref={ref} className={clsx(styles.dialogTitle, className)} {...props} />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description ref={ref} className={clsx(styles.dialogDescription, className)} {...props} />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}

packages/neuron/src/pages/download/index.module.scss

@@ -115,3 +115,12 @@
     border-width: 0.5px;
   }
 }
+
+.alert {
+  padding: 16px 24px;
+  color: #e3a952;
+  line-height: 24px;
+  background-color: #2f281880;
+  border: 1px solid #ffb90433;
+  border-radius: 24px;
+}

packages/neuron/src/pages/download/index.page.tsx

@@ -1,15 +1,17 @@
 import { GetStaticProps, type NextPage } from 'next'
-import { useTranslation } from 'next-i18next'
+import { useTranslation, Trans } from 'next-i18next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import Image from 'next/image'
 import { useMemo } from 'react'
 import { useIsMobile } from '@magickbase-website/shared'
 import {
   CompatibleData,
   Release,
+  NodeInfo,
   getAssetsFromNeuronRelease,
   getLatestRelease,
   getNeuronCompatibleData,
+  getNodeInfo,
 } from '../../utils'
 import { Page } from '../../components/Page'
 import styles from './index.module.scss'
@@ -21,9 +23,10 @@ import { CompatibleTable } from './CompatibleTable'
 interface PageProps {
   release: Release | null
   compatibleData: CompatibleData | null
+  nodeInfo: NodeInfo | null
 }
 
-const Download: NextPage<PageProps> = ({ release, compatibleData }) => {
+const Download: NextPage<PageProps> = ({ release, compatibleData, nodeInfo }) => {
   const { t } = useTranslation('download')
   const isMobile = useIsMobile()
 
@@ -56,6 +59,22 @@ const Download: NextPage<PageProps> = ({ release, compatibleData }) => {
 
       {isMobile && versionComp}
 
+      {nodeInfo && (
+        <div className={styles.alert} style={{ marginTop: isMobile ? 24 : 32 }}>
+          {t('Download Note')}:{' '}
+          <Trans
+            t={t}
+            i18nKey="node_info_alert"
+            values={{
+              size: nodeInfo.data_size_g.toFixed(2),
+            }}
+            components={{
+              tag1: <strong />,
+            }}
+          />
+        </div>
+      )}
+
       <Assets className={styles.assets} assets={assets} />
 
       {compatibleData && (
@@ -71,11 +90,13 @@ const Download: NextPage<PageProps> = ({ release, compatibleData }) => {
 export const getStaticProps: GetStaticProps = async ({ locale = 'en' }) => {
   const release = await getLatestRelease()
   const compatibleData = await getNeuronCompatibleData()
+  const nodeInfo = await getNodeInfo()
   const lng = await serverSideTranslations(locale, ['common', 'download'])
 
   const props: PageProps = {
     release,
     compatibleData,
+    nodeInfo,
     ...lng,
   }
 

packages/neuron/src/pages/home/index.module.scss

@@ -241,3 +241,19 @@
     }
   }
 }
+
+.cancelBtn {
+  padding-top: 15px;
+  padding-bottom: 15px;
+  border-width: 1px;
+}
+
+.dialogTitle {
+  display: flex;
+  align-items: center;
+}
+
+.dialogClose {
+  margin-left: auto;
+  cursor: pointer;
+}