merge main

.github/workflows/ci-code-review.yml

@@ -0,0 +1,76 @@
+name: Code Review
+
+on:
+  pull_request:
+    branches: ['main']
+  push:
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'yarn'
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+  sast:
+    name: Security Scan
+    runs-on: ubuntu-latest
+    permissions:
+      actions: read
+      contents: read
+      security-events: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        language: ['javascript']
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Initialise CodeQL
+        uses: github/codeql-action/init@v2
+        with:
+          languages: ${{ matrix.language }}
+
+      - name: Run CodeQL
+        uses: github/codeql-action/analyze@v2
+
+  sca:
+    name: Dependency Scan
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      # Fail the job on critical vulnerabiliies with fix available
+      - name: Fail on critical vulnerabilities
+        uses: aquasecurity/trivy-action@master
+        with:
+          scan-type: 'fs'
+          ignore-unfixed: true
+          hide-progress: true
+          format: 'table'
+          severity: 'CRITICAL'
+          exit-code: '1'
+
+  all-pass:
+    name: All tests pass 🚀
+    needs: ['lint', 'sast', 'sca']
+    runs-on: ubuntu-latest
+    steps:
+      - run: echo ok

components/home/HomePage.tsx

@@ -23,6 +23,7 @@ import HeroStat from './HeroStat'
 import useMarketsData from '../../hooks/useMarketData'
 import { useQuery } from '@tanstack/react-query'
 import { MANGO_DATA_API_URL } from '../../utils/constants'
+import Loading from '../shared/Loading'
 
 gsap.registerPlugin(MotionPathPlugin)
 gsap.registerPlugin(ScrollTrigger)
@@ -48,7 +49,7 @@ const MOBILE_IMAGE_CLASSES =
 const fetchAppData = async () => {
   try {
     const response = await fetch(
-      `${MANGO_DATA_API_URL}/stats/mango-protocol-summary`
+      `${MANGO_DATA_API_URL}/stats/mango-protocol-summary`,
     )
     const data = await response.json()
     return data
@@ -292,15 +293,15 @@ const HomePage = () => {
               title={t('home:active-traders')}
               tooltipContent={t('home:tooltip-active-traders')}
               value={formatNumericValue(
-                formattedAppStatsData.weeklyActiveTraders
+                formattedAppStatsData.weeklyActiveTraders,
               )}
               loading={loadingAppData}
             />
             <HeroStat
               title={t('home:daily-volume')}
               tooltipContent={t('home:tooltip-daily-volume')}
               value={`$${numberCompacter.format(
-                formattedAppStatsData.totalVol24h
+                formattedAppStatsData.totalVol24h,
               )}`}
               loading={loadingAppData}
             />
@@ -366,33 +367,39 @@ const HomePage = () => {
           />
         </div>
       </SectionWrapper>
-      {formattedSpotData.length && formattedPerpData.length ? (
-        <SectionWrapper className="border-t border-th-bkg-3">
-          <div className="w-full h-full">
-            <h2 className="mb-4 text-center">{t('markets')}</h2>
-            <p className="mb-10 intro-p text-center max-w-lg mx-auto">
-              {t('home:markets-desc')}
-            </p>
-            <div className="flex justify-center pb-10">
-              <TabsText
-                activeTab={activeMarketTab}
-                className="text-2xl"
-                onChange={setActiveMarketTab}
-                tabs={tabsWithCount}
-              />
-            </div>
-            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 max-h-[580px] overflow-auto thin-scroll">
-              {activeMarketTab === 'spot'
-                ? formattedSpotData.map((data) => (
-                    <MarketCard marketData={data} key={data.name} />
-                  ))
-                : formattedPerpData.map((data) => (
-                    <MarketCard marketData={data} key={data.name} />
-                  ))}
-            </div>
+      <SectionWrapper className="border-t border-th-bkg-3">
+        <div className="w-full h-full">
+          <h2 className="mb-4 text-center">{t('markets')}</h2>
+          <p className="mb-10 intro-p text-center max-w-lg mx-auto">
+            {t('home:markets-desc')}
+          </p>
+          <div className="flex justify-center pb-10">
+            <TabsText
+              activeTab={activeMarketTab}
+              className="text-2xl"
+              onChange={setActiveMarketTab}
+              tabs={tabsWithCount}
+            />
           </div>
-        </SectionWrapper>
-      ) : null}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 h-[580px] overflow-auto thin-scroll">
+            {!loadingMarketData ? (
+              activeMarketTab === 'spot' ? (
+                formattedSpotData.map((data) => (
+                  <MarketCard marketData={data} key={data.name} />
+                ))
+              ) : (
+                formattedPerpData.map((data) => (
+                  <MarketCard marketData={data} key={data.name} />
+                ))
+              )
+            ) : (
+              <div className="h-full col-span-4 border border-th-bkg-3 rounded-xl flex items-center justify-center">
+                <Loading className="text-th-fgd-1" />
+              </div>
+            )}
+          </div>
+        </div>
+      </SectionWrapper>
       <div className="bg-[url('/images/new/stage-slice.png')] bg-repeat-x bg-contain">
         <SectionWrapper className="relative overflow-hidden">
           <ColorBlur

components/rewards/RewardsPage.tsx

@@ -52,13 +52,13 @@ const FAQS = [
           app.mango.markets
         </a>
         , connect your wallet and follow the steps to create and fund your
-        account. Now get trading and start earning rewards!
+        account. Now, get trading and start earning rewards!
       </span>
     ),
   },
   {
     q: 'How do I participate in rewards?',
-    a: 'Simply by trading on Mango. Points are allocated for spot trades and swaps. Other actions may also earn points. The more volume you do the more points you earn. At the end of each week prizes are distributed to all wallets with points. The more points you have the more prizes you could win.',
+    a: 'Simply by trading on Mango. Points are allocated for spot trades and swaps. Other actions may also earn points. The more volume you do, the more points you earn and the more points you earn the more prizes you could win. At the end of each week prizes are distributed to all wallets with points.',
   },
   {
     q: 'What can I win?',
@@ -105,7 +105,7 @@ type CurrentSeason = {
 const fetchCurrentSeason = async (): Promise<CurrentSeason | undefined> => {
   try {
     const data = await fetch(
-      `${MANGO_DATA_API_URL}/seasons/season-id?timestamp=${new Date().toISOString()}`
+      `${MANGO_DATA_API_URL}/seasons/season-id?timestamp=${new Date().toISOString()}`,
     )
     const res = await data.json()
     return res

components/shared/Loading.tsx

@@ -0,0 +1,26 @@
+const Loading = ({ className = '' }: { className?: string }) => {
+  return (
+    <svg
+      className={`${className} h-5 w-5 animate-spin`}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className={`opacity-25`}
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="4"
+      ></circle>
+      <path
+        className={`opacity-75`}
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  )
+}
+
+export default Loading