chore: use monorepo organization

packages/admin-ui/src/pages/Dashboard/Footer/Footer.jsx

@@ -0,0 +1,101 @@
+import { useQuery, gql } from '@apollo/client'
+import BigNumber from 'bignumber.js'
+import * as R from 'ramda'
+import React from 'react'
+import { Label2 } from 'src/components/typography'
+import TxInIcon from 'src/styling/icons/direction/cash-in.svg?react'
+import TxOutIcon from 'src/styling/icons/direction/cash-out.svg?react'
+
+import { fromNamespace } from 'src/utils/config'
+
+import classes from './Footer.module.css'
+
+const GET_DATA = gql`
+  query getData {
+    cryptoRates
+    cryptoCurrencies {
+      code
+      display
+    }
+    config
+    accountsConfig {
+      code
+      display
+    }
+  }
+`
+
+BigNumber.config({ ROUNDING_MODE: BigNumber.ROUND_HALF_UP })
+
+const Footer = () => {
+  const { data } = useQuery(GET_DATA)
+
+  const withCommissions = R.path(['cryptoRates', 'withCommissions'])(data) ?? {}
+  const config = R.path(['config'])(data) ?? {}
+  // const canExpand = R.keys(withCommissions).length > 4
+
+  const wallets = fromNamespace('wallets')(config)
+  const cryptoCurrencies = R.path(['cryptoCurrencies'])(data) ?? []
+  const accountsConfig = R.path(['accountsConfig'])(data) ?? []
+  const localeFiatCurrency = R.path(['locale_fiatCurrency'])(config) ?? ''
+
+  const renderFooterItem = key => {
+    const idx = R.findIndex(R.propEq('code', key))(cryptoCurrencies)
+    const tickerCode = wallets[`${key}_ticker`]
+    const tickerIdx = R.findIndex(R.propEq('code', tickerCode))(accountsConfig)
+
+    const tickerName = tickerIdx > -1 ? accountsConfig[tickerIdx].display : ''
+
+    const cashInNoCommission = parseFloat(
+      R.path(['cryptoRates', 'withoutCommissions', key, 'cashIn'])(data)
+    )
+    const cashOutNoCommission = parseFloat(
+      R.path(['cryptoRates', 'withoutCommissions', key, 'cashOut'])(data)
+    )
+
+    const avgOfAskBid = new BigNumber(
+      (cashInNoCommission + cashOutNoCommission) / 2
+    ).toFormat(2)
+    const cashIn = new BigNumber(
+      parseFloat(
+        R.path(['cryptoRates', 'withCommissions', key, 'cashIn'])(data)
+      )
+    ).toFormat(2)
+    const cashOut = new BigNumber(
+      parseFloat(
+        R.path(['cryptoRates', 'withCommissions', key, 'cashOut'])(data)
+      )
+    ).toFormat(2)
+
+    return (
+      <div className="flex flex-col w-1/4">
+        <Label2 className="text-comet mt-3 mb-2">
+          {cryptoCurrencies[idx].display}
+        </Label2>
+        <div className="flex gap-6">
+          <div className="flex items-center gap-1">
+            <TxInIcon />
+            <Label2 noMargin>{`${cashIn} ${localeFiatCurrency}`}</Label2>
+          </div>
+          <div className="flex items-center gap-1">
+            <TxOutIcon />
+            <Label2 noMargin>{`${cashOut} ${localeFiatCurrency}`}</Label2>
+          </div>
+        </div>
+        <Label2 className="text-comet mt-2">
+          {`${tickerName}: ${avgOfAskBid} ${localeFiatCurrency}`}
+        </Label2>
+      </div>
+    )
+  }
+
+  return (
+    <div className={classes.footer1}>
+      <div className={classes.content1}>
+        {R.keys(withCommissions).map(key => renderFooterItem(key))}
+      </div>
+    </div>
+  )
+}
+
+export default Footer