Currency support (#132)

* Add balance chart

* beautified balance chart

* WIP Icon

* WIP portfolio

* beautified portfolio

* added settings panel

* added settings panel

* added settings panel

* added settings panel

* updated

* implemented preferences with store

* removed 'new' tag for power tools

* added currency support

* finalized currency support

* added currency support for llama urls, and more

* added currency support for dashboard

* added currency support for dashboard

* added currency support for dashboard

* added currency support for dashboard

* fixed bug with wallet ui / settings

* Fixes

* Update APIContext.tsx

* Fix build & start fixing balance chart

* included debug logs in configurable user settings; added .env override for debug mode

* changed title of debug info

* renamed variable

* fixed a bug

* small ui enhancements

* added some ui goodies

* fixed z-index for wallet menu

* added glass effect to wallet menu

---------

Authored-by: Secret Jupiter

Author: SecretSaturn

example.env

@@ -1,9 +1,10 @@
-# Local Development helper
-VITE_DEBUG_MODE=false
-
 # Mixpanel
 VITE_MIXPANEL_ENABLED=false
 VITE_MIXPANEL_PROJECT_TOKEN=
 
+# Overrides debug mode in user settings
+VITE_DEBUG_MODE=false
+
+
 # Transak
 TRANSAK_API_KEY=

package-lock.json

@@ -18,6 +18,7 @@
     "@evmos/eip712": "^0.3.2",
     "@evmos/proto": "^0.2.1",
     "@evmos/transactions": "^0.3.2",
+    "@floating-ui/react": "^0.26.9",
     "@fortawesome/fontawesome-free": "^6.2.1",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-brands-svg-icons": "^6.2.1",
@@ -57,7 +58,7 @@
     "react-socks": "^2.2.0",
     "sass": "^1.69.5",
     "secretjs": "^1.12.4",
-    "tailwindcss": "^3.3.5",
+    "tailwindcss": "^3.4.1",
     "vite": "^5.0.12",
     "vite-tsconfig-paths": "^4.2.1",
     "yup": "^1.3.2",

package.json

@@ -26,15 +26,24 @@ import Dashboard from 'pages/dashboard/Dashboard'
 import DefaultLayout from 'layouts/DefaultLayout'
 import Powertools from 'pages/powertools/Powertools'
 import { useSecretNetworkClientStore } from 'store/secretNetworkClient'
+import { useUserPreferencesStore } from 'store/UserPreferences'
+import { debugModeOverride } from 'utils/commons'
+
+const { debugMode } = useUserPreferencesStore.getState()
 
 if (import.meta.env.VITE_MIXPANEL_ENABLED === 'true') {
   mixpanel.init(import.meta.env.VITE_MIXPANEL_PROJECT_TOKEN, { debug: true })
   mixpanel.identify('Dashboard-App')
 
   mixpanel.track('Dashboard has been opened', {})
-  console.debug('[Mixpanel] Enabled')
+
+  if (debugMode || debugModeOverride) {
+    console.debug('[Mixpanel] Enabled')
+  }
 } else {
-  console.debug('[Mixpanel] Disabled')
+  if (debugMode || debugModeOverride) {
+    console.debug('[Mixpanel] Disabled')
+  }
 }
 
 export const websiteName = 'Secret Dashboard'

src/App.tsx

@@ -1,10 +1,13 @@
 import BigNumber from 'bignumber.js'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { Chain, Token, chains, tokens } from 'utils/config'
 import { useTokenPricesStore } from 'store/TokenPrices'
 import { GetBalanceError, useSecretNetworkClientStore } from 'store/secretNetworkClient'
 import { faKey } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { toCurrencyString } from 'utils/commons'
+import { APIContext } from 'context/APIContext'
+import { useUserPreferencesStore } from 'store/UserPreferences'
 
 interface IProps {
   token: Token
@@ -32,7 +35,7 @@ export default function BalanceUI({
   const { getValuePrice, priceMapping } = useTokenPricesStore()
 
   const [balance, setBalance] = useState<number | string>(null)
-  const [usdPriceString, setUsdPriceString] = useState<string>(null)
+  const [currencyPriceString, setCurrencyPriceString] = useState<string>(null)
   const tokenName = (isSecretToken ? 's' : '') + token.name
 
   useEffect(() => {
@@ -62,9 +65,19 @@ export default function BalanceUI({
     }
   }, [balanceMapping, ibcBalanceMapping, token, isSecretToken, chain])
 
+  const { convertCurrency } = useContext(APIContext)
+  const { currency } = useUserPreferencesStore()
+
   useEffect(() => {
     if (priceMapping !== null && balance !== null) {
-      setUsdPriceString(getValuePrice(token, BigNumber(balance)))
+      const valuePrice = getValuePrice(token, BigNumber(balance))
+      if (valuePrice) {
+        const priceInCurrency = convertCurrency('USD', valuePrice, currency)
+        if (priceInCurrency !== null) {
+          setCurrencyPriceString(toCurrencyString(priceInCurrency, currency))
+        }
+      } else {
+      }
     }
   }, [priceMapping, token, balance])
 
@@ -90,7 +103,7 @@ export default function BalanceUI({
               ).toLocaleString(undefined, {
                 maximumFractionDigits: token.decimals
               })} ${isSecretToken && !token.is_snip20 ? 's' : ''}${token.name} ${
-                token.coingecko_id && usdPriceString ? ` (${usdPriceString})` : ''
+                token.coingecko_id && currencyPriceString ? ` (${currencyPriceString})` : ''
               }`}</span>
             </>
           )}

src/components/BalanceUI.tsx

@@ -167,9 +167,9 @@ export function Navigation({
           >
             <FontAwesomeIcon icon={faReact} className="mr-2" />
             <span>Power Tools</span>
-            <span className="ml-2 bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300">
+            {/* <span className="ml-2 bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300">
               New
-            </span>
+            </span> */}
           </NavLink>
         </li>
         <li>