Merge branch 'main' of github.com:blockworks-foundation/mango-ui-v3 into kierangillen/wallet-updates

.github/workflows/nextjs_bundle_analysis.yml

@@ -0,0 +1,113 @@
+name: 'Next.js Bundle Analysis'
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main # change this if your default branch is named differently
+  workflow_dispatch:
+
+defaults:
+  run:
+    # change this if your nextjs app does not live at the root of the repo
+    working-directory: ./
+
+jobs:
+  analyze:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up node
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+
+      - name: Install dependencies
+        uses: bahmutov/npm-install@v1
+
+      - name: Restore next build
+        uses: actions/cache@v2
+        id: restore-build-cache
+        env:
+          cache-name: cache-next-build
+        with:
+          # if you use a custom build directory, replace all instances of `.next` in this file with your build directory
+          # ex: if your app builds to `dist`, replace `.next` with `dist`
+          path: .next/cache
+          # change this if you prefer a more strict cache
+          key: ${{ runner.os }}-build-${{ env.cache-name }}
+
+      - name: Build next.js app
+        # change this if your site requires a custom build command
+        run: ./node_modules/.bin/next build
+
+      # Here's the first place where next-bundle-analysis' own script is used
+      # This step pulls the raw bundle stats for the current bundle
+      - name: Analyze bundle
+        run: npx -p nextjs-bundle-analysis report
+
+      - name: Upload bundle
+        uses: actions/upload-artifact@v2
+        with:
+          name: bundle
+          path: .next/analyze/__bundle_analysis.json
+
+      - name: Download base branch bundle stats
+        uses: dawidd6/action-download-artifact@v2
+        if: success() && github.event.number
+        with:
+          workflow: nextjs_bundle_analysis.yml
+          branch: ${{ github.event.pull_request.base.ref }}
+          path: .next/analyze/base
+
+      # And here's the second place - this runs after we have both the current and
+      # base branch bundle stats, and will compare them to determine what changed.
+      # There are two configurable arguments that come from package.json:
+      #
+      # - budget: optional, set a budget (bytes) against which size changes are measured
+      #           it's set to 350kb here by default, as informed by the following piece:
+      #           https://infrequently.org/2021/03/the-performance-inequality-gap/
+      #
+      # - red-status-percentage: sets the percent size increase where you get a red
+      #                          status indicator, defaults to 20%
+      #
+      # Either of these arguments can be changed or removed by editing the `nextBundleAnalysis`
+      # entry in your package.json file.
+      - name: Compare with base branch bundle
+        if: success() && github.event.number
+        run: ls -laR .next/analyze/base && npx -p nextjs-bundle-analysis compare
+
+      - name: Get comment body
+        id: get-comment-body
+        if: success() && github.event.number
+        run: |
+          body=$(cat .next/analyze/__bundle_analysis_comment.txt)
+          body="${body//'%'/'%25'}"
+          body="${body//$'\n'/'%0A'}"
+          body="${body//$'\r'/'%0D'}"
+          echo ::set-output name=body::$body
+
+      - name: Find Comment
+        uses: peter-evans/find-comment@v1
+        if: success() && github.event.number
+        id: fc
+        with:
+          issue-number: ${{ github.event.number }}
+          body-includes: '<!-- __NEXTJS_BUNDLE -->'
+
+      - name: Create Comment
+        uses: peter-evans/create-or-update-comment@v1.4.4
+        if: success() && github.event.number && steps.fc.outputs.comment-id == 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+
+      - name: Update Comment
+        uses: peter-evans/create-or-update-comment@v1.4.4
+        if: success() && github.event.number && steps.fc.outputs.comment-id != 0
+        with:
+          issue-number: ${{ github.event.number }}
+          body: ${{ steps.get-comment-body.outputs.body }}
+          comment-id: ${{ steps.fc.outputs.comment-id }}
+          edit-mode: replace

.github/workflows/node.js.yml

@@ -11,7 +11,6 @@ on:
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -29,3 +28,4 @@ jobs:
       - run: yarn install --frozen-lockfile
       - run: yarn type-check
       - run: yarn lint
+      - run: yarn prettier --check .

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
+yarn lint-all

components/Button.tsx

@@ -42,7 +42,7 @@ export const LinkButton: FunctionComponent<ButtonProps> = ({
       disabled={disabled}
       className={`border-0 font-bold ${
         primary ? 'text-th-primary' : 'text-th-fgd-2'
-      } underline hover:no-underline hover:opacity-60 focus:outline-none ${className}`}
+      } underline hover:no-underline hover:opacity-60 focus:outline-none disabled:cursor-not-allowed disabled:underline disabled:opacity-60 ${className}`}
       {...props}
     >
       {children}

components/ErrorBoundary.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { FiveOhFive } from './FiveOhFive'
 
 class ErrorBoundary extends React.Component<
   any,
@@ -39,16 +40,7 @@ class ErrorBoundary extends React.Component<
   render() {
     if (this.state.hasError) {
       // You can render any custom fallback UI
-      return (
-        <div className="pt-1 text-center text-th-fgd-2">
-          <div>Something went wrong.</div>
-          <div className="text-th-red">{this.state.error.message}</div>
-          <button className="mt-2" onClick={() => location.reload()}>
-            Refresh and try again
-          </button>
-          <div className="mx-8 mt-4 px-8">{this.state.error.stack}</div>
-        </div>
-      )
+      return <FiveOhFive error={this.state.error} />
     }
 
     return this.props.children

components/FeeDiscountsTable.tsx

@@ -1,122 +0,0 @@
-import { percentFormat } from '../utils/index'
-import useSrmAccount from '../hooks/useSrmAccount'
-import {
-  MSRM_DECIMALS,
-  SRM_DECIMALS,
-} from '@project-serum/serum/lib/token-instructions'
-import Tooltip from './Tooltip'
-import { InformationCircleIcon } from '@heroicons/react/outline'
-import { useTranslation } from 'next-i18next'
-import Button from './Button'
-import useMangoStore from '../stores/useMangoStore'
-import { msrmMints, ZERO_BN } from '@blockworks-foundation/mango-client'
-import DepositMsrmModal from './DepositMsrmModal'
-import WithdrawMsrmModal from './WithdrawMsrmModal'
-import { useState } from 'react'
-import { useWallet } from '@solana/wallet-adapter-react'
-
-const FeeDiscountsTable = () => {
-  const { t } = useTranslation('common')
-  const { connected } = useWallet()
-  const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
-  const walletTokens = useMangoStore((s) => s.wallet.tokens)
-  const { totalSrm, totalMsrm, rates } = useSrmAccount()
-  const [showDeposit, setShowDeposit] = useState(false)
-  const [showWithdraw, setShowWithdraw] = useState(false)
-  const cluster = useMangoStore.getState().connection.cluster
-
-  const ownerMsrmAccount = walletTokens.find((t) =>
-    t.account.mint.equals(msrmMints[cluster])
-  )
-
-  return (
-    <div
-      className={`flex justify-center divide-x divide-gray-500 rounded-md bg-th-bkg-1 py-6`}
-    >
-      <div className="pr-10">
-        <div className="text-center text-lg">{t('serum-fees')}</div>
-        <div
-          className={`mt-4 flex flex-col justify-between text-center text-th-fgd-4 sm:flex-row`}
-        >
-          <div className="px-4">
-            <div>
-              {totalMsrm > 0 ? 'MSRM' : 'SRM'} {t('deposits')}
-            </div>
-            <div className="text-normal text-th-fgd-3">
-              {totalMsrm > 0
-                ? totalMsrm.toLocaleString(undefined, {
-                    maximumFractionDigits: MSRM_DECIMALS,
-                  })
-                : totalSrm.toLocaleString(undefined, {
-                    maximumFractionDigits: SRM_DECIMALS,
-                  })}
-            </div>
-          </div>
-          <div className="mt-4 px-4 sm:mt-0">
-            <div>{t('maker-fee')}</div>
-            <div className="text-normal text-th-fgd-3">
-              {rates ? percentFormat.format(rates.maker) : null}
-            </div>
-          </div>
-          <div className="mt-4 px-4 sm:mt-0">
-            <div className="flex items-center">
-              <div>{t('taker-fee')}</div>
-              <div className="flex items-center">
-                <Tooltip
-                  content={t('tooltip-serum-rebate', {
-                    taker_percent: percentFormat.format(rates.taker),
-                  })}
-                >
-                  <div>
-                    <InformationCircleIcon
-                      className={`ml-2 h-5 w-5 cursor-help text-th-fgd-4`}
-                    />
-                  </div>
-                </Tooltip>
-              </div>
-            </div>
-            <div className="text-normal text-th-fgd-3">
-              {rates
-                ? new Intl.NumberFormat(undefined, {
-                    style: 'percent',
-                    minimumFractionDigits: 2,
-                    maximumFractionDigits: 3,
-                  }).format(rates.takerWithRebate)
-                : null}
-            </div>
-          </div>
-        </div>
-        {connected && mangoAccount ? (
-          <div className="mt-6 flex justify-center">
-            <Button
-              onClick={() => setShowDeposit(true)}
-              disabled={!ownerMsrmAccount}
-            >
-              {t('deposit')} MSRM
-            </Button>
-            {mangoAccount.msrmAmount.gt(ZERO_BN) ? (
-              <Button onClick={() => setShowWithdraw(true)} className="ml-2">
-                {t('withdraw')} MSRM
-              </Button>
-            ) : null}
-          </div>
-        ) : null}
-      </div>
-      {showDeposit ? (
-        <DepositMsrmModal
-          isOpen={showDeposit}
-          onClose={() => setShowDeposit(false)}
-        />
-      ) : null}
-
-      {showWithdraw ? (
-        <WithdrawMsrmModal
-          isOpen={showWithdraw}
-          onClose={() => setShowWithdraw(false)}
-        />
-      ) : null}
-    </div>
-  )
-}
-
-export default FeeDiscountsTable

components/FiveOhFive.tsx

@@ -0,0 +1,133 @@
+import { useState } from 'react'
+import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/react/solid'
+import GradientText from './GradientText'
+import cls from 'classnames'
+
+const social = [
+  {
+    name: 'Twitter',
+    href: 'https://twitter.com/mangomarkets',
+    icon: (props) => (
+      <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+        <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" />
+      </svg>
+    ),
+  },
+  {
+    name: 'GitHub',
+    href: 'https://github.com/blockworks-foundation',
+    icon: (props) => (
+      <svg fill="currentColor" viewBox="0 0 24 24" {...props}>
+        <path
+          fillRule="evenodd"
+          d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+          clipRule="evenodd"
+        />
+      </svg>
+    ),
+  },
+]
+
+export const FiveOhFive = ({ error }) => {
+  const stack = error.stack.split('\n').slice(0, 5).join('\n')
+  const [showDetails, toggleDetails] = useState(false)
+
+  const Icon = showDetails ? ChevronDownIcon : ChevronRightIcon
+
+  return (
+    <div className="bg-bg-texture flex min-h-screen flex-col bg-cover bg-bottom bg-no-repeat">
+      <div className="h-2 w-screen bg-gradient-to-r from-mango-theme-green via-mango-theme-yellow-dark to-mango-theme-red-dark"></div>
+      <main className="my-[-2] mx-auto w-full max-w-7xl flex-grow px-4 sm:px-6 lg:px-8">
+        <div className="flex-shrink-0 pt-16">
+          <img
+            className="mx-auto h-12 w-auto"
+            src="/assets/logotext.svg"
+            alt="Workflow"
+          />
+        </div>
+        <div className="mx-auto max-w-xl py-16 sm:py-24">
+          <div className="text-center">
+            <p className="text-sm font-semibold uppercase tracking-wide">
+              <GradientText>505 error</GradientText>
+            </p>
+            <h1 className="mt-2 text-4xl font-extrabold tracking-tight text-white sm:text-5xl">
+              Something went wrong
+            </h1>
+            <p className="mt-2 text-lg text-gray-500">
+              The page you are looking for could not be loaded.
+            </p>
+          </div>
+
+          <div className="my-10 text-center">
+            <div className="font-mono mt-8 rounded-lg bg-th-bkg-2 p-8 text-left text-th-fgd-1">
+              <div className="flex">
+                <div className="text-mango-theme-fgd-2">{error.message}</div>
+                <div className="flex-grow"></div>
+                <div className="flex-shrink-0 self-center">
+                  <Icon
+                    className="text-mango-yellow h-5 w-5"
+                    aria-hidden="true"
+                    onClick={() => toggleDetails(!showDetails)}
+                  />
+                </div>
+              </div>
+
+              <div
+                style={{
+                  maxHeight: showDetails ? '500px' : 0,
+                  opacity: showDetails ? 1 : 0,
+                }}
+                className={cls('overflow-hidden transition-all')}
+              >
+                <div className="mt-6">{stack}</div>
+              </div>
+            </div>
+            <div className="flex flex-col items-center">
+              <div className="mt-10 flex flex-row">
+                <button
+                  className="mx-2 whitespace-nowrap rounded-full bg-th-bkg-button px-6 py-2 font-bold text-th-fgd-1 hover:brightness-[1.1] focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4 disabled:text-th-fgd-4 disabled:hover:brightness-100"
+                  onClick={() => location.reload()}
+                >
+                  Refresh and try again
+                </button>
+
+                <a
+                  className="whitespace-nowrap rounded-full bg-mango-theme-bkg-3 px-6 py-2 font-bold text-th-fgd-1 hover:brightness-[1.1] focus:outline-none disabled:cursor-not-allowed disabled:bg-th-bkg-4 disabled:text-th-fgd-4 disabled:hover:brightness-100"
+                  href="https://discord.gg/mangomarkets"
+                >
+                  <div className="flex">
+                    <img
+                      className="mr-2 h-[20px] w-[20px]"
+                      src="/assets/icons/discord.svg"
+                    />
+                    Join Discord
+                  </div>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+      <footer className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="border-t border-gray-200 py-12 text-center md:flex md:justify-between">
+          <p className="text-base text-gray-400">
+            &copy; Workflow, Inc. All rights reserved.
+          </p>
+          <div className="mt-6 flex justify-center space-x-8 md:mt-0">
+            {social.map((item, itemIdx) => (
+              <a
+                key={itemIdx}
+                href={item.href}
+                className="inline-flex text-gray-400 hover:text-gray-500"
+              >
+                <span className="sr-only">{item.name}</span>
+                <item.icon className="h-6 w-6" aria-hidden="true" />
+              </a>
+            ))}
+          </div>
+        </div>
+      </footer>
+      <div className="h-2 w-screen bg-gradient-to-r from-mango-theme-green via-mango-theme-yellow-dark to-mango-theme-red-dark"></div>
+    </div>
+  )
+}

components/GradientText.tsx

@@ -0,0 +1,7 @@
+const GradientText = (props) => (
+  <span className="bg-gradient-to-bl from-mango-theme-green via-mango-theme-yellow-dark to-mango-theme-red-dark bg-clip-text text-transparent">
+    {props.children}
+  </span>
+)
+
+export default GradientText

components/JupiterForm.tsx

@@ -355,7 +355,7 @@ const JupiterForm: FunctionComponent = () => {
       <div className="col-span-12 xl:col-span-10 xl:col-start-2 ">
         <div className="flex flex-col md:flex-row md:space-x-6">
           <div className="w-full md:w-1/2  lg:w-1/3">
-            <div className="relative z-10">
+            <div className="relative">
               {connected &&
               walletTokensWithInfos.length &&
               walletTokenPrices &&

components/TableElements.tsx

@@ -99,7 +99,7 @@ export const Row = ({ children }: RowProps) => {
   )
 }
 
-export const TableDateDisplay = ({ date }: { date: string }) => (
+export const TableDateDisplay = ({ date }: { date: string | number }) => (
   <>
     <p className="mb-0 text-th-fgd-2">{dayjs(date).format('DD MMM YYYY')}</p>
     <p className="mb-0 text-xs">{dayjs(date).format('h:mma')}</p>

components/TopBar.tsx

@@ -15,6 +15,7 @@ import Settings from './Settings'
 import TradeNavMenu from './TradeNavMenu'
 import {
   CalculatorIcon,
+  CurrencyDollarIcon,
   LightBulbIcon,
   UserAddIcon,
 } from '@heroicons/react/outline'
@@ -84,7 +85,7 @@ const TopBar = () => {
                       t('referrals'),
                       '/referral',
                       false,
-                      <UserAddIcon className="h-4 w-4" key="calculator" />,
+                      <UserAddIcon className="h-4 w-4" key="referrals" />,
                     ],
                     [
                       t('calculator'),
@@ -92,6 +93,12 @@ const TopBar = () => {
                       false,
                       <CalculatorIcon className="h-4 w-4" key="calculator" />,
                     ],
+                    [
+                      t('fees'),
+                      '/fees',
+                      false,
+                      <CurrencyDollarIcon className="h-4 w-4" key="fees" />,
+                    ],
                     [
                       t('learn'),
                       'https://docs.mango.markets/',

components/TradeHistoryTable.tsx

@@ -29,7 +29,7 @@ const formatTradeDateTime = (timestamp: BN | string) => {
   if (typeof timestamp === 'string') {
     return timestamp
   } else {
-    return (timestamp.toNumber() * 1000).toString()
+    return timestamp.toNumber() * 1000
   }
 }
 

components/UserInfo.tsx

@@ -6,16 +6,9 @@ import PositionsTable from './PerpPositionsTable'
 import TradeHistoryTable from './TradeHistoryTable'
 import ManualRefresh from './ManualRefresh'
 import Tabs from './Tabs'
-import FeeDiscountsTable from './FeeDiscountsTable'
 import { marketConfigSelector } from '../stores/selectors'
 
-const TABS = [
-  'Balances',
-  'Orders',
-  'Positions',
-  'Trade History',
-  'Fee Discount',
-]
+const TABS = ['Balances', 'Orders', 'Positions', 'Trade History']
 
 const UserInfoTabs = ({ activeTab, setActiveTab }) => {
   const totalOpenOrders = useMangoStore(
@@ -60,8 +53,6 @@ const TabContent = ({ activeTab }) => {
       return <TradeHistoryTable numTrades={100} />
     case 'Positions':
       return <PositionsTable />
-    case 'Fee Discount':
-      return <FeeDiscountsTable />
     default:
       return <BalancesTable clickToPopulateTradeForm />
   }

components/account_page/AccountOverview.tsx

@@ -35,14 +35,15 @@ export const fetchHourlyPerformanceStats = async (
       .format('YYYY-MM-DD')}`
   )
   const parsedResponse = await response.json()
-  const entries: any = Object.entries(parsedResponse)
+  const entries: any = Object.entries(parsedResponse).sort((a, b) =>
+    b[0].localeCompare(a[0])
+  )
 
   const stats = entries
     .map(([key, value]) => {
       return { ...value, time: key }
     })
     .filter((x) => x)
-    .reverse()
 
   return stats
 }
@@ -183,7 +184,7 @@ export default function AccountOverview() {
       <h2 className="mb-4">{t('assets-liabilities')}</h2>
 
       <div className="grid grid-flow-col grid-cols-1 grid-rows-2 pb-8 md:grid-cols-2 md:grid-rows-1 md:gap-4 md:pb-12">
-        <div className="rounded-md border-t border-th-bkg-4 p-3 sm:rounded-lg sm:p-4 md:border-b">
+        <div className="border-t border-th-bkg-4 p-3 sm:p-4 md:border-b">
           <div className="pb-0.5 text-th-fgd-3">{t('total-assets')}</div>
           <div className="flex items-center">
             <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
@@ -193,7 +194,7 @@ export default function AccountOverview() {
             </div>
           </div>
         </div>
-        <div className="rounded-md border-b border-t border-th-bkg-4 p-3 sm:rounded-lg sm:p-4">
+        <div className="border-b border-t border-th-bkg-4 p-3 sm:p-4">
           <div className="pb-0.5 text-th-fgd-3">{t('total-liabilities')}</div>
           <div className="flex items-center">
             <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">

components/account_page/AccountPerformance.tsx

@@ -74,14 +74,15 @@ const AccountPerformance = () => {
         `https://mango-transaction-log.herokuapp.com/v3/stats/account-performance?mango-account=${mangoAccountPk}`
       )
       const parsedResponse = await response.json()
-      const entries: any = Object.entries(parsedResponse)
+      const entries: any = Object.entries(parsedResponse).sort((a, b) =>
+        b[0].localeCompare(a[0])
+      )
 
       const stats = entries
         .map(([key, value]) => {
           return { ...value, time: key }
         })
         .filter((x) => x)
-        .reverse()
 
       setLoading(false)
       setHourlyPerformanceStats(stats)

components/account_page/MangoAccountSearch.tsx

@@ -0,0 +1,60 @@
+import { PublicKey } from '@solana/web3.js'
+import Button from 'components/Button'
+import Input from 'components/Input'
+import { useRouter } from 'next/router'
+import React, { useState } from 'react'
+import { ExclamationCircleIcon } from '@heroicons/react/outline'
+
+export const MangoAccountSearch = () => {
+  const router = useRouter()
+  const [value, setValue] = useState('')
+  const [isInvalid, setIsInvalid] = useState(false)
+
+  const validatePubKey = (key: string) => {
+    try {
+      const pubkey = new PublicKey(key)
+      return PublicKey.isOnCurve(pubkey.toBuffer())
+    } catch (e) {
+      return false
+    }
+  }
+
+  const onClickSearch = () => {
+    const isValid = validatePubKey(value)
+
+    if (isValid) {
+      const route = `/account?pubkey=${value}`
+      setValue('')
+      router.push(route)
+    } else {
+      setIsInvalid(true)
+    }
+  }
+
+  return (
+    <div className="flex flex-col items-center rounded-lg px-4 text-th-fgd-1">
+      <h2 className="mb-1 text-base">Search by Mango Account</h2>
+      <p className="mb-2 text-center">
+        Enter a Mango account address to show account details
+      </p>
+      <div className="w-[350px] p-1 md:w-[400px]">
+        <Input
+          type="text"
+          error={isInvalid}
+          placeholder="Address"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+      </div>
+      {isInvalid && (
+        <div className="flex items-center pt-1.5 text-th-red">
+          <ExclamationCircleIcon className="mr-1.5 h-4 w-4" />
+          The address is invalid
+        </div>
+      )}
+      <div className="pt-3 pb-2">
+        <Button onClick={onClickSearch}>Search</Button>
+      </div>
+    </div>
+  )
+}

components/index.tsx

@@ -19,7 +19,6 @@ export * from './DropMenu'
 export * from './EmptyState'
 export * from './ErrorBoundary'
 export * from './FavoritesShortcutBar'
-export * from './FeeDiscountsTable'
 export * from './FlipCard'
 export * from './FloatingElement'
 export * from './GlobalNotification'

components/stats_page/StatsTotals.tsx

@@ -15,11 +15,12 @@ function formatNumberString(x: number, decimals): string {
 }
 
 const getAverageStats = (
-  stats,
+  stats: any[],
   daysAgo: number,
   symbol: string,
   type: string
-) => {
+): string => {
+  if (stats?.length) {
     const priorDate = new Date(Date.now() - daysAgo * 24 * 60 * 60 * 1000)
     const selectedStatsData = stats.filter((s) => s.name === symbol)
     const timeFilteredStats = selectedStatsData.filter(
@@ -39,6 +40,8 @@ const getAverageStats = (
       return `${avg.toFixed(4)}%`
     }
   }
+  return '-'
+}
 
 export default function StatsTotals({ latestStats, stats }) {
   const { t } = useTranslation('common')

netlify.toml

@@ -1,6 +0,0 @@
-[build]
-command = "yarn build"
-publish = ".next"
-
-[functions]
-included_files = ["public/locales/*/*.json", "next-i18next.config.js"]

next.config.js

@@ -26,29 +26,12 @@ const moduleExports = {
     if (!isServer) {
       config.resolve.fallback.fs = false
     }
+
     config.module.rules.push({
-      test: /\.svg?$/,
-      oneOf: [
-        {
-          use: [
-            {
-              loader: '@svgr/webpack',
-              options: {
-                prettier: false,
-                svgo: true,
-                svgoConfig: {
-                  plugins: [{ removeViewBox: false }],
-                },
-                titleProp: true,
-              },
-            },
-          ],
-          issuer: {
-            and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
-          },
-        },
-      ],
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
     })
+
     return config
   },
 }

package.json

@@ -13,8 +13,7 @@
     "format": "prettier --write .",
     "lint": "eslint . --ext ts --ext tsx --ext js --quiet",
     "lint-staged": "lint-staged --config lint-staged.js",
-    "test": "jest",
-    "test-all": "yarn lint && yarn type-check && yarn test"
+    "lint-all": "yarn lint && yarn type-check"
   },
   "dependencies": {
     "@blockworks-foundation/mango-client": "git+https://github.com/blockworks-foundation/mango-client-v3.git#update-wallet-type",
@@ -40,7 +39,6 @@
     "bignumber.js": "^9.0.2",
     "bn.js": "^5.1.0",
     "bs58": "^4.0.1",
-    "buffer-layout": "^1.2.0",
     "dayjs": "^1.10.4",
     "export-to-csv": "^0.2.1",
     "immer": "^9.0.1",
@@ -64,7 +62,6 @@
     "zustand": "^3.7.0"
   },
   "devDependencies": {
-    "@netlify/plugin-nextjs": "^4.1.0",
     "@svgr/webpack": "^6.1.2",
     "@testing-library/react": "^11.2.5",
     "@types/jest": "^26.0.20",
@@ -79,7 +76,6 @@
     "eslint-plugin-react-hooks": "^4.3.0",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.4.7",
     "jest-watch-typeahead": "^0.6.1",
     "lint-staged": "^12.3.6",
     "postcss": "^8.4.7",
@@ -95,5 +91,10 @@
     "bn.js": "5.1.3",
     "@solana/buffer-layout": "3.0.0",
     "@types/bn.js": "5.1.0"
+  },
+  "nextBundleAnalysis": {
+    "budget": 512000,
+    "budgetPercentIncreaseRed": 20,
+    "showDetails": true
   }
 }

pages/account.tsx

@@ -53,6 +53,7 @@ import DelegateModal from 'components/DelegateModal'
 import { Menu, Transition } from '@headlessui/react'
 import { useWallet } from '@solana/wallet-adapter-react'
 import { handleWalletConnect } from 'components/ConnectWalletButton'
+import { MangoAccountSearch } from 'components/account_page/MangoAccountSearch'
 
 export async function getStaticProps({ locale }) {
   return {
@@ -446,6 +447,11 @@ export default function Account() {
             />
           )}
         </div>
+        {!connected && (
+          <div className="mt-6 md:mt-3 md:rounded-lg md:bg-th-bkg-2 md:p-6">
+            <MangoAccountSearch />
+          </div>
+        )}
       </PageBodyContainer>
       {showAccountsModal ? (
         <AccountsModal

pages/fees.tsx

@@ -0,0 +1,218 @@
+import { useTranslation } from 'next-i18next'
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
+import TopBar from '../components/TopBar'
+import PageBodyContainer from '../components/PageBodyContainer'
+import useSrmAccount from '../hooks/useSrmAccount'
+import {
+  MSRM_DECIMALS,
+  SRM_DECIMALS,
+} from '@project-serum/serum/lib/token-instructions'
+import { percentFormat } from '../utils/index'
+import Tooltip from '../components/Tooltip'
+import { InformationCircleIcon } from '@heroicons/react/outline'
+import DepositMsrmModal from '../components/DepositMsrmModal'
+import WithdrawMsrmModal from '../components/WithdrawMsrmModal'
+import { useState } from 'react'
+import { LinkButton } from '../components/Button'
+import useMangoStore from '../stores/useMangoStore'
+import { msrmMints, ZERO_BN } from '@blockworks-foundation/mango-client'
+import useFees from '../hooks/useFees'
+import { useWallet } from '@solana/wallet-adapter-react'
+
+export async function getStaticProps({ locale }) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ['common'])),
+      // Will be passed to the page component as props
+    },
+  }
+}
+
+export default function Fees() {
+  const { t } = useTranslation('common')
+  const { totalSrm, totalMsrm, rates } = useSrmAccount()
+  const { takerFee, makerFee } = useFees()
+  const { connected } = useWallet()
+  const [showDeposit, setShowDeposit] = useState(false)
+  const [showWithdraw, setShowWithdraw] = useState(false)
+  const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
+  const walletTokens = useMangoStore((s) => s.wallet.tokens)
+  const cluster = useMangoStore.getState().connection.cluster
+  const ownerMsrmAccount = walletTokens.find((t) =>
+    t.account.mint.equals(msrmMints[cluster])
+  )
+  return (
+    <div className={`bg-th-bkg-1 text-th-fgd-1 transition-all`}>
+      <TopBar />
+      <PageBodyContainer>
+        <div className="flex flex-col py-4 sm:flex-row md:pb-4 md:pt-10">
+          <h1>{t('fees')}</h1>
+        </div>
+        <div className="md:rounded-lg md:bg-th-bkg-2 md:p-6">
+          <h2 className="mb-4">{t('futures')}</h2>
+
+          <div className="grid grid-cols-1 grid-rows-2 pb-8 md:grid-cols-2 md:grid-rows-1 md:gap-4">
+            <div className="border-t border-th-bkg-4 p-3 sm:p-4 md:border-b">
+              <div className="pb-0.5 text-th-fgd-3">{t('maker-fee')}</div>
+              <div className="flex items-center">
+                <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                  {percentFormat.format(makerFee)}
+                </div>
+              </div>
+              <div className="flex items-center">
+                <p className="mb-0">
+                  {t('if-referred', {
+                    fee: percentFormat.format(
+                      makerFee < 0
+                        ? makerFee + makerFee * 0.04
+                        : makerFee - makerFee * 0.04
+                    ),
+                  })}
+                </p>
+
+                <Tooltip content={t('if-referred-tooltip')}>
+                  <div>
+                    <InformationCircleIcon
+                      className={`ml-1.5 h-5 w-5 cursor-help text-th-fgd-3`}
+                    />
+                  </div>
+                </Tooltip>
+              </div>
+            </div>
+            <div className="border-b border-t border-th-bkg-4 p-3 sm:p-4">
+              <div className="pb-0.5 text-th-fgd-3">{t('taker-fee')}</div>
+              <div className="flex items-center">
+                <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                  {percentFormat.format(takerFee)}
+                </div>
+              </div>
+              <div className="flex items-center">
+                <p className="mb-0">
+                  {t('if-referred', {
+                    fee: percentFormat.format(
+                      takerFee < 0
+                        ? takerFee + takerFee * 0.04
+                        : takerFee - takerFee * 0.04
+                    ),
+                  })}
+                </p>
+
+                <Tooltip content={t('if-referred-tooltip')}>
+                  <div>
+                    <InformationCircleIcon
+                      className={`ml-1.5 h-5 w-5 cursor-help text-th-fgd-3`}
+                    />
+                  </div>
+                </Tooltip>
+              </div>
+            </div>
+          </div>
+          <h2 className="mb-4">{t('serum-fees')}</h2>
+
+          <div className="grid grid-cols-1 grid-rows-2 pb-8 md:grid-cols-3 md:grid-rows-1 md:gap-4">
+            <div className="border-t border-th-bkg-4 p-3 sm:p-4 md:border-b">
+              <div className="pb-0.5 text-th-fgd-3">{t('maker-fee')}</div>
+              <div className="flex items-center">
+                <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                  {rates ? percentFormat.format(rates.maker) : null}
+                </div>
+              </div>
+            </div>
+            <div className="border-t border-th-bkg-4 p-3 sm:p-4 md:border-b">
+              <div className="flex items-center pb-0.5 text-th-fgd-3">
+                {t('taker-fee')}
+                <Tooltip
+                  content={t('tooltip-serum-rebate', {
+                    taker_percent: percentFormat.format(rates.taker),
+                  })}
+                >
+                  <div>
+                    <InformationCircleIcon
+                      className={`ml-1.5 h-5 w-5 cursor-help text-th-fgd-3`}
+                    />
+                  </div>
+                </Tooltip>
+              </div>
+              <div className="flex items-center">
+                <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                  {rates
+                    ? new Intl.NumberFormat(undefined, {
+                        style: 'percent',
+                        minimumFractionDigits: 2,
+                        maximumFractionDigits: 3,
+                      }).format(rates.takerWithRebate)
+                    : null}
+                </div>
+              </div>
+            </div>
+            <div className="border-b border-t border-th-bkg-4 p-3 sm:p-4">
+              <div className="flex items-center justify-between pb-0.5 text-th-fgd-3">
+                {totalMsrm > 0 ? 'MSRM' : 'SRM'} {t('deposits')}
+                {connected && mangoAccount ? (
+                  <div className="flex justify-center space-x-3 pl-2">
+                    <LinkButton
+                      onClick={() => setShowDeposit(true)}
+                      disabled={!ownerMsrmAccount}
+                    >
+                      {t('deposit')}
+                    </LinkButton>
+                    {mangoAccount.msrmAmount.gt(ZERO_BN) ? (
+                      <LinkButton onClick={() => setShowWithdraw(true)}>
+                        {t('withdraw')}
+                      </LinkButton>
+                    ) : null}
+                  </div>
+                ) : null}
+              </div>
+              <div className="flex items-center">
+                <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                  {totalMsrm > 0
+                    ? totalMsrm.toLocaleString(undefined, {
+                        maximumFractionDigits: MSRM_DECIMALS,
+                      })
+                    : totalSrm.toLocaleString(undefined, {
+                        maximumFractionDigits: SRM_DECIMALS,
+                      })}
+                </div>
+              </div>
+            </div>
+          </div>
+          <h2 className="mb-4">{t('other')}</h2>
+          <div className="grid grid-cols-1 grid-rows-3 pb-6 md:grid-cols-3 md:grid-rows-1 md:gap-4">
+            <div className="border-t border-th-bkg-4 p-3 sm:p-4 md:border-b">
+              <div className="pb-0.5 text-th-fgd-3">{t('withdraw')}</div>
+              <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                0%
+              </div>
+            </div>
+            <div className="border-t border-th-bkg-4 p-3 sm:p-4 md:border-b">
+              <div className="pb-0.5 text-th-fgd-3">{t('borrow')}</div>
+              <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                0%
+              </div>
+            </div>
+            <div className="border-b border-t border-th-bkg-4 p-3 sm:p-4">
+              <div className="pb-0.5 text-th-fgd-3">{t('lend')}</div>
+              <div className="text-xl font-bold text-th-fgd-1 md:text-2xl">
+                0%
+              </div>
+            </div>
+          </div>
+        </div>
+      </PageBodyContainer>
+      {showDeposit ? (
+        <DepositMsrmModal
+          isOpen={showDeposit}
+          onClose={() => setShowDeposit(false)}
+        />
+      ) : null}
+
+      {showWithdraw ? (
+        <WithdrawMsrmModal
+          isOpen={showWithdraw}
+          onClose={() => setShowWithdraw(false)}
+        />
+      ) : null}
+    </div>
+  )
+}

public/assets/icons/discord.svg

@@ -0,0 +1 @@
+<svg fill="#ffffff" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 50 50" width="50px" height="50px"><path d="M 41.625 10.769531 C 37.644531 7.566406 31.347656 7.023438 31.078125 7.003906 C 30.660156 6.96875 30.261719 7.203125 30.089844 7.589844 C 30.074219 7.613281 29.9375 7.929688 29.785156 8.421875 C 32.417969 8.867188 35.652344 9.761719 38.578125 11.578125 C 39.046875 11.867188 39.191406 12.484375 38.902344 12.953125 C 38.710938 13.261719 38.386719 13.429688 38.050781 13.429688 C 37.871094 13.429688 37.6875 13.378906 37.523438 13.277344 C 32.492188 10.15625 26.210938 10 25 10 C 23.789063 10 17.503906 10.15625 12.476563 13.277344 C 12.007813 13.570313 11.390625 13.425781 11.101563 12.957031 C 10.808594 12.484375 10.953125 11.871094 11.421875 11.578125 C 14.347656 9.765625 17.582031 8.867188 20.214844 8.425781 C 20.0625 7.929688 19.925781 7.617188 19.914063 7.589844 C 19.738281 7.203125 19.34375 6.960938 18.921875 7.003906 C 18.652344 7.023438 12.355469 7.566406 8.320313 10.8125 C 6.214844 12.761719 2 24.152344 2 34 C 2 34.175781 2.046875 34.34375 2.132813 34.496094 C 5.039063 39.605469 12.972656 40.941406 14.78125 41 C 14.789063 41 14.800781 41 14.8125 41 C 15.132813 41 15.433594 40.847656 15.621094 40.589844 L 17.449219 38.074219 C 12.515625 36.800781 9.996094 34.636719 9.851563 34.507813 C 9.4375 34.144531 9.398438 33.511719 9.765625 33.097656 C 10.128906 32.683594 10.761719 32.644531 11.175781 33.007813 C 11.234375 33.0625 15.875 37 25 37 C 34.140625 37 38.78125 33.046875 38.828125 33.007813 C 39.242188 32.648438 39.871094 32.683594 40.238281 33.101563 C 40.601563 33.515625 40.5625 34.144531 40.148438 34.507813 C 40.003906 34.636719 37.484375 36.800781 32.550781 38.074219 L 34.378906 40.589844 C 34.566406 40.847656 34.867188 41 35.1875 41 C 35.199219 41 35.210938 41 35.21875 41 C 37.027344 40.941406 44.960938 39.605469 47.867188 34.496094 C 47.953125 34.34375 48 34.175781 48 34 C 48 24.152344 43.785156 12.761719 41.625 10.769531 Z M 18.5 30 C 16.566406 30 15 28.210938 15 26 C 15 23.789063 16.566406 22 18.5 22 C 20.433594 22 22 23.789063 22 26 C 22 28.210938 20.433594 30 18.5 30 Z M 31.5 30 C 29.566406 30 28 28.210938 28 26 C 28 23.789063 29.566406 22 31.5 22 C 33.433594 22 35 23.789063 35 26 C 35 28.210938 33.433594 30 31.5 30 Z"/></svg>

public/assets/logotext.svg

@@ -0,0 +1,56 @@
+<svg width="2963" height="864" viewBox="0 0 2963 864" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1274.13 488.608C1277.75 495.431 1281.05 502.575 1284.04 510.039C1287.24 517.289 1290.33 524.646 1293.31 532.11C1296.29 524.433 1299.39 516.863 1302.58 509.399C1305.78 501.935 1309.19 494.792 1312.81 487.968L1449.66 231.754C1451.37 228.556 1453.07 225.997 1454.78 224.077C1456.69 222.158 1458.72 220.772 1460.85 219.919C1463.2 219.066 1465.75 218.533 1468.52 218.32C1471.3 218.107 1474.6 218 1478.44 218H1543.34V680.528H1467.57V381.772C1467.57 376.228 1467.67 370.15 1467.89 363.54C1468.31 356.929 1468.84 350.212 1469.48 343.388L1329.76 605.679C1326.56 611.65 1322.41 616.341 1317.29 619.753C1312.17 622.952 1306.21 624.551 1299.39 624.551H1287.56C1280.73 624.551 1274.77 622.952 1269.65 619.753C1264.53 616.341 1260.38 611.65 1257.18 605.679L1115.54 342.428C1116.39 349.465 1116.92 356.396 1117.14 363.22C1117.56 369.83 1117.78 376.014 1117.78 381.772V680.528H1042V218H1106.91C1110.74 218 1114.05 218.107 1116.82 218.32C1119.59 218.533 1122.04 219.066 1124.17 219.919C1126.52 220.772 1128.65 222.158 1130.57 224.077C1132.48 225.997 1134.3 228.556 1136 231.754L1274.13 488.608Z" fill="white"/>
+<path d="M1889.09 680.528H1853.6C1846.14 680.528 1840.28 679.462 1836.02 677.329C1831.76 674.984 1828.56 670.399 1826.43 663.575L1819.39 640.225C1811.08 647.688 1802.87 654.299 1794.77 660.056C1786.89 665.601 1778.68 670.292 1770.15 674.131C1761.63 677.969 1752.57 680.848 1742.98 682.767C1733.38 684.686 1722.73 685.646 1711 685.646C1697.15 685.646 1684.36 683.833 1672.63 680.208C1660.91 676.37 1650.79 670.719 1642.26 663.255C1633.95 655.792 1627.45 646.515 1622.76 635.427C1618.07 624.338 1615.72 611.437 1615.72 596.723C1615.72 584.355 1618.92 572.2 1625.31 560.258C1631.92 548.103 1642.79 537.227 1657.93 527.631C1673.06 517.822 1693.2 509.719 1718.36 503.322C1743.51 496.924 1774.74 493.299 1812.04 492.446V473.254C1812.04 451.29 1807.35 435.083 1797.97 424.634C1788.8 413.972 1775.38 408.641 1757.68 408.641C1744.89 408.641 1734.24 410.134 1725.71 413.119C1717.18 416.104 1709.72 419.516 1703.33 423.355C1697.15 426.98 1691.39 430.285 1686.06 433.271C1680.73 436.256 1674.87 437.749 1668.48 437.749C1663.15 437.749 1658.57 436.363 1654.73 433.59C1650.89 430.818 1647.8 427.406 1645.46 423.355L1631.07 398.085C1668.8 363.54 1714.31 346.267 1767.6 346.267C1786.78 346.267 1803.83 349.465 1818.75 355.863C1833.89 362.047 1846.68 370.79 1857.12 382.092C1867.57 393.181 1875.45 406.508 1880.78 422.075C1886.32 437.642 1889.09 454.702 1889.09 473.254V680.528ZM1735.62 631.268C1743.72 631.268 1751.18 630.522 1758 629.029C1764.82 627.537 1771.22 625.298 1777.19 622.312C1783.37 619.327 1789.23 615.702 1794.77 611.437C1800.53 606.958 1806.28 601.734 1812.04 595.763V540.426C1789.02 541.492 1769.73 543.518 1754.17 546.504C1738.82 549.276 1726.46 552.901 1717.08 557.379C1707.7 561.857 1700.98 567.082 1696.93 573.053C1693.1 579.023 1691.18 585.527 1691.18 592.564C1691.18 606.425 1695.23 616.341 1703.33 622.312C1711.64 628.283 1722.41 631.268 1735.62 631.268Z" fill="white"/>
+<path d="M1966.75 680.528V352.344H2015.03C2025.26 352.344 2031.98 357.142 2035.17 366.738L2040.61 392.648C2047.22 385.824 2054.14 379.64 2061.39 374.095C2068.85 368.551 2076.63 363.753 2084.73 359.701C2093.04 355.65 2101.89 352.557 2111.27 350.425C2120.65 348.293 2130.88 347.226 2141.96 347.226C2159.87 347.226 2175.75 350.318 2189.6 356.503C2203.46 362.473 2214.97 371.003 2224.14 382.092C2233.51 392.967 2240.55 406.082 2245.24 421.436C2250.14 436.576 2252.59 453.316 2252.59 471.655V680.528H2173.62V471.655C2173.62 451.61 2168.93 436.149 2159.55 425.274C2150.38 414.185 2136.53 408.641 2117.98 408.641C2104.34 408.641 2091.55 411.733 2079.62 417.917C2067.68 424.101 2056.38 432.524 2045.72 443.187V680.528H1966.75Z" fill="white"/>
+<path d="M2443.7 346.587C2457.77 346.587 2470.99 348.079 2483.35 351.065C2495.71 353.837 2507.01 357.995 2517.24 363.54H2611.56V392.967C2611.56 397.872 2610.28 401.71 2607.73 404.483C2605.17 407.255 2600.8 409.174 2594.62 410.24L2565.2 415.678C2567.33 421.222 2568.93 427.087 2570 433.271C2571.28 439.455 2571.92 445.959 2571.92 452.783C2571.92 468.989 2568.61 483.703 2562 496.924C2555.61 509.932 2546.66 521.021 2535.15 530.19C2523.85 539.36 2510.31 546.504 2494.54 551.621C2478.98 556.526 2462.03 558.978 2443.7 558.978C2431.34 558.978 2419.3 557.806 2407.57 555.46C2397.34 561.644 2392.23 568.574 2392.23 576.251C2392.23 582.862 2395.21 587.766 2401.18 590.965C2407.36 593.951 2415.35 596.083 2425.16 597.362C2435.18 598.642 2446.47 599.495 2459.05 599.921C2471.63 600.135 2484.52 600.774 2497.74 601.841C2510.95 602.907 2523.85 604.826 2536.43 607.598C2549 610.157 2560.19 614.315 2570 620.073C2580.02 625.831 2588.01 633.721 2593.98 643.743C2600.16 653.552 2603.25 666.241 2603.25 681.807C2603.25 696.308 2599.63 710.382 2592.38 724.03C2585.34 737.678 2575.01 749.833 2561.36 760.495C2547.94 771.157 2531.42 779.687 2511.81 786.084C2492.2 792.695 2469.81 796 2444.66 796C2419.72 796 2398.09 793.548 2379.76 788.643C2361.42 783.952 2346.18 777.554 2334.03 769.451C2322.1 761.561 2313.14 752.391 2307.18 741.942C2301.21 731.493 2298.22 720.618 2298.22 709.316C2298.22 693.962 2302.91 681.061 2312.29 670.612C2321.67 660.163 2334.67 651.847 2351.3 645.662C2343.2 641.184 2336.7 635.213 2331.8 627.75C2326.89 620.286 2324.44 610.584 2324.44 598.642C2324.44 593.737 2325.29 588.726 2327 583.608C2328.71 578.277 2331.26 573.053 2334.67 567.935C2338.3 562.817 2342.77 558.019 2348.1 553.541C2353.43 548.849 2359.72 544.691 2366.97 541.066C2350.34 532.11 2337.23 520.168 2327.64 505.241C2318.26 490.314 2313.57 472.828 2313.57 452.783C2313.57 436.576 2316.77 421.969 2323.16 408.961C2329.77 395.74 2338.83 384.544 2350.34 375.375C2362.06 365.992 2375.81 358.848 2391.59 353.944C2407.57 349.039 2424.94 346.587 2443.7 346.587ZM2530.35 695.242C2530.35 688.845 2528.43 683.62 2524.6 679.568C2520.76 675.517 2515.54 672.425 2508.93 670.292C2502.32 667.947 2494.54 666.241 2485.59 665.174C2476.85 664.108 2467.47 663.362 2457.45 662.935C2447.65 662.296 2437.41 661.762 2426.76 661.336C2416.31 660.696 2406.19 659.737 2396.38 658.457C2387.43 663.362 2380.18 669.226 2374.64 676.05C2369.31 682.66 2366.65 690.337 2366.65 699.08C2366.65 704.838 2368.03 710.169 2370.8 715.074C2373.79 720.191 2378.37 724.563 2384.55 728.188C2390.95 731.813 2399.15 734.586 2409.17 736.505C2419.19 738.637 2431.45 739.703 2445.94 739.703C2460.65 739.703 2473.33 738.531 2483.99 736.185C2494.65 734.052 2503.39 730.96 2510.21 726.909C2517.24 723.07 2522.36 718.379 2525.55 712.834C2528.75 707.503 2530.35 701.639 2530.35 695.242ZM2443.7 508.439C2453.51 508.439 2462.03 507.16 2469.28 504.601C2476.53 501.829 2482.5 498.097 2487.19 493.406C2492.09 488.714 2495.71 483.063 2498.06 476.453C2500.62 469.842 2501.89 462.592 2501.89 454.702C2501.89 438.495 2496.99 425.7 2487.19 416.318C2477.59 406.722 2463.1 401.924 2443.7 401.924C2424.31 401.924 2409.7 406.722 2399.9 416.318C2390.31 425.7 2385.51 438.495 2385.51 454.702C2385.51 462.379 2386.68 469.522 2389.03 476.133C2391.59 482.743 2395.21 488.501 2399.9 493.406C2404.8 498.097 2410.88 501.829 2418.12 504.601C2425.58 507.16 2434.11 508.439 2443.7 508.439Z" fill="white"/>
+<path d="M2801.21 347.226C2825.73 347.226 2847.9 351.171 2867.72 359.061C2887.76 366.952 2904.81 378.147 2918.88 392.648C2932.95 407.148 2943.82 424.847 2951.49 445.745C2959.16 466.643 2963 489.994 2963 515.796C2963 541.812 2959.16 565.269 2951.49 586.167C2943.82 607.065 2932.95 624.871 2918.88 639.585C2904.81 654.299 2887.76 665.601 2867.72 673.491C2847.9 681.381 2825.73 685.326 2801.21 685.326C2776.7 685.326 2754.43 681.381 2734.39 673.491C2714.35 665.601 2697.19 654.299 2682.91 639.585C2668.85 624.871 2657.87 607.065 2649.98 586.167C2642.31 565.269 2638.47 541.812 2638.47 515.796C2638.47 489.994 2642.31 466.643 2649.98 445.745C2657.87 424.847 2668.85 407.148 2682.91 392.648C2697.19 378.147 2714.35 366.952 2734.39 359.061C2754.43 351.171 2776.7 347.226 2801.21 347.226ZM2801.21 624.551C2828.5 624.551 2848.64 615.382 2861.64 597.043C2874.86 578.704 2881.47 551.835 2881.47 516.436C2881.47 481.037 2874.86 454.062 2861.64 435.51C2848.64 416.957 2828.5 407.681 2801.21 407.681C2773.5 407.681 2753.04 417.064 2739.83 435.83C2726.61 454.382 2720 481.251 2720 516.436C2720 551.621 2726.61 578.49 2739.83 597.043C2753.04 615.382 2773.5 624.551 2801.21 624.551Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M337.746 201.289C337.751 201.283 337.755 201.277 337.76 201.27C374.05 219.89 413.76 226.27 451.76 226.16C473.84 246.44 492.21 270.26 509.47 294.72C516.627 304.937 523.082 315.628 528.79 326.72C541.989 352.136 551.696 379.028 561.518 406.237C564.398 414.217 567.289 422.225 570.28 430.23C571.217 433.656 572.196 437.084 573.217 440.514L573.27 440.5C588.44 492.53 610.59 548.11 640.27 594L640.241 594.012C650.058 609.087 661.055 623.361 673.13 636.7C675.506 639.27 677.936 641.816 680.369 644.365L680.37 644.366L680.371 644.367L680.374 644.37C691.742 656.28 703.19 668.274 709.68 683.28C717.76 701.98 717.14 723.49 712.28 743.28C689.35 836.56 599.52 861.07 513.67 863.33L513.711 863.223C481.522 863.864 449.556 861.465 421.21 858.56C421.21 858.56 284.5 844.41 168.62 759.69L164.88 756.91C164.88 756.91 164.88 756.91 164.881 756.909C151.355 746.83 138.451 735.941 126.24 724.3C93.76 693.3 64.86 658.14 42.76 619.54C42.9078 619.392 43.0553 619.243 43.2026 619.095C40.587 614.388 38.0795 609.634 35.68 604.83C14.3 562.04 1.27 515.46 0.679999 465.95C-0.325631 382.873 28.0953 297.795 82.1176 236.113C82.0984 236.062 82.0792 236.011 82.06 235.96C111.31 203.92 147.87 178.75 191.15 164.42C218.283 155.354 246.768 151.001 275.37 151.55C292.775 171.987 313.954 188.874 337.746 201.289ZM271.153 744.85C290.711 737.711 309.24 728.11 326.518 716.279C309.131 728.03 290.575 737.637 271.153 744.85Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M621.498 133.628C621.512 133.628 621.526 133.628 621.54 133.627L622.72 132.867C470.3 -127.133 271 77.5671 271 77.5671L271.285 78.0685C271.273 78.0714 271.262 78.0742 271.25 78.0771C385.856 279.01 603.664 145.087 621.498 133.628Z" fill="url(#paint1_linear)"/>
+<path d="M432.56 581.44C390.56 681.84 309.92 748.32 212.22 758.39C210.12 758.67 183.38 760.78 168.62 759.69C284.5 844.41 421.21 858.56 421.21 858.56C450.48 861.56 483.61 864.02 516.86 863.15C528.57 832.58 535.16 797.58 533.27 757.87C528.88 665.64 582.36 618.29 640.27 594C610.59 548.11 588.44 492.53 573.27 440.5C528.05 452.53 470.62 490.36 432.56 581.44Z" fill="url(#paint2_linear)"/>
+<path d="M531.44 757.22C533.34 796.93 525.38 832.76 513.67 863.33C599.52 861.07 689.35 836.56 712.28 743.28C717.14 723.49 717.76 701.98 709.68 683.28C701.8 665.06 686.61 651.28 673.13 636.7C660.519 622.769 649.084 607.818 638.94 592C581.08 616.3 527.05 665 531.44 757.22Z" fill="url(#paint3_linear)"/>
+<path d="M570.28 430.23C557.09 394.93 545.86 359.59 528.79 326.72C523.082 315.628 516.627 304.937 509.47 294.72C492.21 270.26 473.84 246.44 451.76 226.16C413.76 226.27 374.05 219.89 337.76 201.27C301 253.41 258.94 341.86 297.44 442.82C354.29 591.92 238.92 693.82 164.88 756.91L168.62 759.69C182.502 760.773 196.455 760.573 210.3 759.09C307.99 749.01 393.3 680.93 435.3 580.54C473.37 489.46 528.75 454.86 573.91 442.82C572.637 438.62 571.427 434.423 570.28 430.23Z" fill="url(#paint4_linear)"/>
+<path d="M86.09 231.67C29.49 293.67 -0.350001 380.86 0.679999 465.95C1.27 515.46 14.3 562.04 35.68 604.83C38.887 611.25 42.287 617.583 45.88 623.83C164.87 504.39 121.88 326.42 86.09 231.67Z" fill="url(#paint5_linear)"/>
+<path d="M299.44 442.82C260.94 341.82 302.06 253.95 338.77 201.82C314.561 189.357 293.024 172.28 275.37 151.55C246.768 151.001 218.283 155.354 191.15 164.42C147.87 178.75 111.31 203.92 82.06 235.96C117.06 328.63 159.12 502.72 42.76 619.54C64.86 658.14 93.76 693.3 126.24 724.3C139.051 736.513 152.625 747.899 166.88 758.39C240.92 695.33 356.29 591.92 299.44 442.82Z" fill="url(#paint6_linear)"/>
+<path d="M443 94.13C523.57 125.92 580 134.53 620.91 133.3L622.09 132.54C469.67 -127.46 270.37 77.24 270.37 77.24L270.66 77.75C313.65 70.13 376.13 67.76 443 94.13Z" fill="url(#paint7_linear)"/>
+<path d="M444 92.33C377.17 66 314.33 67 270.62 77.75C385.23 278.69 603.05 144.75 620.87 133.3C579.93 134.53 524.57 124.12 444 92.33Z" fill="url(#paint8_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="-88.5" y1="273.5" x2="843.5" y2="832" gradientUnits="userSpaceOnUse">
+<stop stop-color="#E54033"/>
+<stop offset="0.489583" stop-color="#FECA1A"/>
+<stop offset="1" stop-color="#AFD803"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="263632" y1="31154.5" x2="205286" y2="-28862.6" gradientUnits="userSpaceOnUse">
+<stop offset="0.15" stop-color="#6CBF00"/>
+<stop offset="1" stop-color="#AFD803"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="72.43" y1="766.73" x2="656.43" y2="624.73" gradientUnits="userSpaceOnUse">
+<stop offset="0.21" stop-color="#E54033"/>
+<stop offset="0.84" stop-color="#FECA1A"/>
+</linearGradient>
+<linearGradient id="paint3_linear" x1="532.54" y1="727.34" x2="712.74" y2="728.69" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FECA1A"/>
+<stop offset="0.4" stop-color="#FECA1A"/>
+<stop offset="1" stop-color="#AFD803"/>
+</linearGradient>
+<linearGradient id="paint4_linear" x1="124.65" y1="770.37" x2="494.1" y2="270.2" gradientUnits="userSpaceOnUse">
+<stop offset="0.16" stop-color="#E54033"/>
+<stop offset="0.84" stop-color="#FECA1A"/>
+</linearGradient>
+<linearGradient id="paint5_linear" x1="70.85" y1="273.39" x2="54.49" y2="596.45" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FECA1A"/>
+<stop offset="0.76" stop-color="#E54033"/>
+</linearGradient>
+<linearGradient id="paint6_linear" x1="251.58" y1="189.5" x2="152.91" y2="564.17" gradientUnits="userSpaceOnUse">
+<stop offset="0.16" stop-color="#FECA1A"/>
+<stop offset="1" stop-color="#E54033"/>
+</linearGradient>
+<linearGradient id="paint7_linear" x1="289.8" y1="10.1199" x2="655.13" y2="144.78" gradientUnits="userSpaceOnUse">
+<stop offset="0.15" stop-color="#6CBF00"/>
+<stop offset="1" stop-color="#AFD803"/>
+</linearGradient>
+<linearGradient id="paint8_linear" x1="263631" y1="31154.2" x2="205285" y2="-28862.9" gradientUnits="userSpaceOnUse">
+<stop offset="0.15" stop-color="#6CBF00"/>
+<stop offset="1" stop-color="#AFD803"/>
+</linearGradient>
+</defs>
+</svg>

public/locales/en/common.json

@@ -139,6 +139,7 @@
   "favorite": "Favorite",
   "favorites": "Favorites",
   "fee": "Fee",
+  "fees": "Fees",
   "fee-discount": "Fee Discount",
   "first-deposit-desc": "There is a one-time cost of 0.035 SOL when you make your first deposit. This covers the rent on the Solana Blockchain for your account.",
   "funding": "Funding",
@@ -156,6 +157,8 @@
   "hourly-borrow-interest": "Hourly Borrow Interest",
   "hourly-deposit-interest": "Hourly Deposit Interest",
   "hourly-funding": "Hourly Funding",
+  "if-referred": "{{fee}} if referred or 10k MNGO",
+  "if-referred-tooltip": "If you create your Mango Account from a referral link or have 10k MNGO in your Mango Account you get a 0.04% discount off futures fees.",
   "in-orders": "In Orders",
   "include-perp": "Include Perp",
   "include-spot": "Include Spot",
@@ -182,6 +185,7 @@
   "layout-tip-title": "Customize Layout",
   "learn": "Documentation",
   "learn-more": "Learn more",
+  "lend": "Lend",
   "lets-go": "Let's Go",
   "leverage": "Leverage",
   "leverage-too-high": "Leverage too high. Reduce the amount to withdraw",
@@ -263,6 +267,7 @@
   "orderbook": "Orderbook",
   "orderbook-animation": "Orderbook Animation",
   "orders": "Orders",
+  "other": "Other",
   "performance": "Performance",
   "performance-insights": "Performance Insights",
   "period-progress": "Period Progress",

public/locales/es/common.json

@@ -138,6 +138,7 @@
   "favorite": "Favorito",
   "favorites": "Favoritos",
   "fee": "Tarifa",
+  "fees": "Fees",
   "fee-discount": "Comisiones",
   "first-deposit-desc": "Necesita 0.035 SOL para crear una cuenta de mango.",
   "funding": "Fondos",
@@ -155,6 +156,8 @@
   "hourly-borrow-interest": "Interés por préstamo por hora",
   "hourly-deposit-interest": "Interés por depósito por hora",
   "hourly-funding": "Financiamiento por hora",
+  "if-referred": "{{fee}} if referred or 10k MNGO",
+  "if-referred-tooltip": "If you create your Mango Account from a referral link or have 10k MNGO in your Mango Account you get a 0.04% discount off futures fees.",
   "in-orders": "En órdenes",
   "includes-borrow": "Incluye el préstamo",
   "init-error": "No se pudo realizar la operación de depósito y cuenta de margen inicial",
@@ -179,6 +182,7 @@
   "layout-tip-title": "Personalizar diseño",
   "learn": "Aprender",
   "learn-more": "Aprender más",
+  "lend": "Lend",
   "lets-go": "Vamos",
   "leverage": "Apalancamiento",
   "leverage-too-high": "Apalancamiento demasiado alto. Reducir la cantidad a retirar",
@@ -260,6 +264,7 @@
   "orderbook": "Libro de órdenes",
   "orderbook-animation": "Animación del libro de ordenes",
   "orders": "Órdenes",
+  "other": "Other",
   "performance": "Performance",
   "performance-insights": "Performance Insights",
   "period-progress": "Period Progress",

public/locales/zh/common.json

@@ -138,6 +138,7 @@
     "favorite": "喜爱",
     "favorites": "喜爱",
     "fee": "费率",
+    "fees": "Fees",
     "fee-discount": "费率折扣",
     "first-deposit-desc": "创建Mango帐户最少需要0.035 SOL。",
     "funding": "资金费",
@@ -155,6 +156,8 @@
     "hourly-borrow-interest": "1小时借贷利息",
     "hourly-deposit-interest": "1小时存款利息",
     "hourly-funding": "1小时资金费",
+    "if-referred": "{{fee}} if referred or 10k MNGO",
+    "if-referred-tooltip": "If you create your Mango Account from a referral link or have 10k MNGO in your Mango Account you get a 0.04% discount off futures fees.",
     "in-orders": "在掛单中",
     "includes-borrow": "包括存入",
     "init-error": "创建Mango帐户与存款出错了",
@@ -179,6 +182,7 @@
     "layout-tip-title": "个人化页面布局",
     "learn": "学习",
     "learn-more": "学习",
+    "lend": "Lend",
     "lets-go": "前往",
     "leverage": "杠杆",
     "leverage-too-high": "杠杆太高。请减少取款数量",
@@ -260,6 +264,7 @@
     "orderbook": "订单簿",
     "orderbook-animation": "订单动画",
     "orders": "订单",
+    "other": "Other",
     "performance": "表现",
     "performance-insights": "表现分析",
     "period-progress": "期间进度",

public/locales/zh_tw/common.json

@@ -138,6 +138,7 @@
   "favorite": "喜愛",
   "favorites": "喜愛",
   "fee": "費率",
+  "fees": "Fees",
   "fee-discount": "費率折扣",
   "first-deposit-desc": "創建Mango帳戶最少需要0.035 SOL。",
   "funding": "資金費",
@@ -155,6 +156,8 @@
   "hourly-borrow-interest": "1小時借貸利息",
   "hourly-deposit-interest": "1小時存款利息",
   "hourly-funding": "1小時資金費",
+  "if-referred": "{{fee}} if referred or 10k MNGO",
+  "if-referred-tooltip": "If you create your Mango Account from a referral link or have 10k MNGO in your Mango Account you get a 0.04% discount off futures fees.",
   "in-orders": "在掛單中",
   "includes-borrow": "包括存入",
   "init-error": "創建Mango帳戶與存款出錯了",
@@ -179,6 +182,7 @@
   "layout-tip-title": "個人化頁面佈局",
   "learn": "學習",
   "learn-more": "學習",
+  "lend": "Lend",
   "lets-go": "前往",
   "leverage": "槓桿",
   "leverage-too-high": "槓桿太高。請減少取款數量",
@@ -260,6 +264,7 @@
   "orderbook": "掛單簿",
   "orderbook-animation": "訂單動畫",
   "orders": "訂單",
+  "other": "Other",
   "performance": "表現",
   "performance-insights": "表現分析",
   "period-progress": "期間進度",