feat: initial version

.eslintignore

@@ -0,0 +1,3 @@
+**/node_modules/*
+**/out/*
+**/.next/*

.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    'standard-with-typescript',
+    'plugin:@next/next/recommended',
+  ],
+  overrides: [],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: 'tsconfig.json',
+  },
+  plugins: ['react'],
+  rules: {
+    // React scope no longer necessary with new JSX transform\
+    'multiline-ternary': ['error', 'never'],
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/no-misused-promises': [
+      'error',
+      {
+        checksVoidReturn: false,
+      },
+    ],
+    // Allow .js files to use JSX syntax
+    'react/jsx-filename-extension': ['error', { extensions: ['.tsx'] }],
+    '@typescript-eslint/no-floating-promises': 'off',
+    '@typescript-eslint/prefer-nullish-coalescing': 'off',
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+    'react/no-unescaped-entities': 'off',
+  },
+}

.gitignore

@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.env

.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+.next
+yarn.lock
+package-lock.json
+public

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "printWidth": 100
+}

README.md

@@ -0,0 +1,32 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

components/Chart.tsx

@@ -0,0 +1,109 @@
+import { curveCardinal } from '@visx/curve'
+import {
+  AnimatedGrid,
+  XYChart,
+  Tooltip,
+  Axis,
+  AnimatedAreaSeries,
+  AnimatedAreaStack,
+  buildChartTheme
+} from '@visx/xychart'
+import dayjs from 'dayjs'
+import { DailyIntervalType } from '../types'
+import isMobile from 'is-mobile'
+
+const monthsShort = [
+  'Jan',
+  'Feb',
+  'Mar',
+  'Apr',
+  'May',
+  'Jun',
+  'Jul',
+  'Aug',
+  'Sep',
+  'Oct',
+  'Nov',
+  'Dec'
+]
+interface ChartProps {
+  data: DailyIntervalType[]
+}
+
+const customTheme = buildChartTheme({
+  backgroundColor: '#fff',
+  colors: ['rgba(0, 169, 187, 0.5)'],
+  gridColor: '#00A9BB',
+  tickLength: 8,
+  gridColorDark: ''
+})
+
+const Chart = ({ data }: ChartProps): JSX.Element => {
+  const IsMobile = isMobile()
+  return (
+    <div className="relative flex justify-center overflow-hidden">
+      <XYChart
+        height={350}
+        theme={customTheme}
+        xScale={{ type: 'band' }}
+        yScale={{ type: 'linear' }}
+      >
+        <Axis
+          orientation="bottom"
+          hideAxisLine
+          hideTicks
+          hideZero
+          numTicks={IsMobile ? 4 : 8}
+          tickFormat={(d) => `${monthsShort[dayjs(d).month()]} ${dayjs(d).year()}`}
+        />
+        <Axis
+          orientation="left"
+          hideAxisLine
+          hideTicks
+          hideZero
+          tickValues={[1000, 2000, 3000, 4000]}
+          labelProps={{ fontSize: 12, fontWeight: 600 }}
+        />
+
+        <AnimatedGrid
+          columns={false}
+          numTicks={5}
+          strokeDasharray="5, 5"
+          stroke="#00A9BB"
+          lineStyle={{ opacity: 0.5 }}
+        />
+
+        <AnimatedAreaStack curve={curveCardinal} renderLine>
+          <AnimatedAreaSeries
+            dataKey="Daily Interval"
+            data={data}
+            xAccessor={(d) => d.date}
+            yAccessor={(d) => d.count}
+            fillOpacity={0.3}
+          />
+        </AnimatedAreaStack>
+
+        <Tooltip
+          snapTooltipToDatumX
+          snapTooltipToDatumY
+          showVerticalCrosshair
+          renderTooltip={({ tooltipData }: any) => (
+            <div className="text-xs">
+              <div className="mb-1">Swaps</div>
+
+              <div className="mb-1">
+                {dayjs(tooltipData.nearestDatum.datum.date.split('T')[0]).format(
+                  'dddd, YYYY MMMM DD'
+                )}
+              </div>
+              <div className="mb-1">Count: {tooltipData.nearestDatum.datum.count}</div>
+            </div>
+          )}
+        />
+      </XYChart>
+      <div className="w-full h-12 absolute bottom-12 from-[#00a9bb00] to-[#fff] bg-gradient-to-b" />
+    </div>
+  )
+}
+
+export default Chart

components/ChartBox.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { AmountConverter } from '../utils/amountConverter'
+import { SummaryType } from '../types'
+import Chart from './Chart'
+
+interface PropsType {
+  summary: SummaryType
+}
+
+const ChartBox: React.FC<PropsType> = ({ summary }) => {
+  return (
+    <div className="px-4 py-0 lg:flex lg:items-center lg:justify-center lg:bg-neutral-100 lg:mx-16 lg:rounded-xl lg:p-8">
+      <div className="p-4 bg-neutral-100 lg:w-6/12 rounded-lg mb-5 lg:mb-0 lg:p-0">
+        <h3 className="text-base font-bold lg:text-3xl">Swaps</h3>
+
+        <Chart data={summary.dailyInterval} />
+      </div>
+      <div className="gap-5 px-4 py-6 bg-neutral-100 grid lg:gap-x-8 lg:gap-y-24 grid-cols-2 lg:w-6/12 lg:p-0 lg:grid-cols-3 rounded-lg">
+        <div className="lg:justify-self-center text-center">
+          <p className="text-xl lg:text-4xl font-bold">
+            {AmountConverter(summary.connectedWallets)}
+          </p>
+          <p className="text-xs">Total Wallets Connected</p>
+        </div>
+        <div className="lg:justify-self-center text-center">
+          <p className="text-xl lg:text-4xl truncate font-bold">
+            {AmountConverter(summary.totalTxVolumeUSD)}
+          </p>
+          <p className="text-xs">Total Swap Volume</p>
+        </div>
+        <div className="lg:justify-self-center text-center">
+          <p className="text-xl truncate lg:text-4xl font-bold">
+            {AmountConverter(summary.totalTxCount)}
+          </p>
+          <p className="text-xs">Total Swap</p>
+        </div>
+        <div className="lg:justify-self-center text-center">
+          <p className="text-xl truncate lg:text-4xl font-bold">
+            {AmountConverter(summary.supportedDexes)}
+          </p>
+          <p className="text-xs">Supported Dexes</p>
+        </div>
+        <div className="lg:justify-self-center text-center">
+          <p className="text-xl truncate lg:text-4xl font-bold">
+            {AmountConverter(summary.supportedChains)}
+          </p>
+          <p className="text-xs">Supported Chain</p>
+        </div>
+        <div className="lg:justify-self-center text-center">
+          <p className="text-xl truncate lg:text-4xl font-bold">
+            {AmountConverter(summary.supportedBridges)}
+          </p>
+          <p className="text-xs">Supported Bridges</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default ChartBox

components/Layout.tsx

@@ -0,0 +1,19 @@
+import Head from 'next/head'
+import Navbar from './Navbar'
+
+interface PropsType {
+  children: React.ReactNode
+  pageTitle: string
+}
+
+const Layout: React.FC<PropsType> = ({ children, pageTitle }: PropsType) => (
+  <div>
+    <Head>
+      <title>{`${pageTitle} | Rango Scanner`}</title>
+    </Head>
+    <Navbar hasSearch />
+    <main className="py-7 px-5 lg:py-11 lg:px-16">{children}</main>
+  </div>
+)
+
+export default Layout

components/Loading.tsx

@@ -0,0 +1,35 @@
+const Loading: React.FC = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    style={{
+      margin: 'auto',
+      display: 'block',
+      shapeRendering: 'auto'
+    }}
+    width={90}
+    height={90}
+    viewBox="0 0 100 100"
+    preserveAspectRatio="xMidYMid"
+  >
+    <g transform="matrix(.8 0 0 .8 10 10)">
+      <animateTransform
+        attributeName="transform"
+        type="translate"
+        repeatCount="indefinite"
+        dur="1s"
+        values="-20 -20;20 -20;0 20;-20 -20"
+        keyTimes="0;0.33;0.66;1"
+      />
+      <path
+        fill="#fff"
+        fillOpacity={0}
+        d="M44.19 26.158a17.914 17.914 0 0 0-12.751 5.282 17.914 17.914 0 0 0-5.282 12.751c0 4.817 1.876 9.345 5.282 12.751 3.406 3.406 7.934 5.282 12.751 5.282s9.345-1.876 12.751-5.282a17.914 17.914 0 0 0 5.282-12.751c0-4.817-1.876-9.345-5.282-12.751a17.908 17.908 0 0 0-12.751-5.282z"
+      />
+      <path
+        fill="#00a9bb"
+        d="M78.712 72.492 67.593 61.373l-3.475-3.475a24.073 24.073 0 0 0 3.475-7.596 24.3 24.3 0 0 0 0-12.238 24.074 24.074 0 0 0-6.297-10.979A24.119 24.119 0 0 0 44.19 20a24.118 24.118 0 0 0-17.105 7.085c-9.447 9.447-9.447 24.763 0 34.21a24.115 24.115 0 0 0 17.105 7.086c4.798 0 9.593-1.425 13.708-4.262l9.695 9.695 4.899 4.899c.859.858 1.984 1.287 3.11 1.287s2.251-.429 3.11-1.288a4.4 4.4 0 0 0 0-6.22zm-21.77-15.55c-3.406 3.406-7.934 5.282-12.751 5.282s-9.345-1.876-12.751-5.282a17.914 17.914 0 0 1-5.282-12.751c0-4.817 1.876-9.345 5.282-12.751a17.914 17.914 0 0 1 12.751-5.282c4.817 0 9.345 1.876 12.751 5.282a17.914 17.914 0 0 1 5.282 12.751 17.924 17.924 0 0 1-5.282 12.751z"
+      />
+    </g>
+  </svg>
+)
+export default Loading