fix: reanabled fundAccount and created base for toasts (#103)

* fix: reanabled fundAccount and created base for toasts

* Update toaster + add router refresh

---------

Co-authored-by: bwvdhelm <34470358+bobthebuidlr@users.noreply.github.com>

package.json

@@ -6,8 +6,7 @@
     "build": "next build",
     "dev": "next dev",
     "lint": "eslint ./src/ && yarn prettier-check",
-    "index": "vscode-generate-index-standalone src/",
-    "format": "yarn index && eslint ./src/ --fix && prettier --write ./src/",
+    "format": "eslint ./src/ --fix && prettier --write ./src/",
     "prettier-check": "prettier --ignore-path .gitignore --check ./src/",
     "start": "next start"
   },
@@ -38,6 +37,7 @@
     "react-toastify": "^9.0.8",
     "react-use-clipboard": "^1.0.9",
     "recharts": "^2.2.0",
+    "sass": "^1.58.3",
     "swr": "^2.0.3",
     "tailwindcss-border-gradient-radius": "^3.0.1",
     "use-local-storage-state": "^18.1.1",

src/app/layout.tsx

@@ -4,7 +4,7 @@ import DesktopNavigation from 'components/Navigation/DesktopNavigation'
 import Toaster from 'components/Toaster'
 import { WalletConnectProvider } from 'components/Wallet/WalletConnectProvider'
 import 'react-toastify/dist/ReactToastify.min.css'
-import 'styles/globals.css'
+import 'styles/globals.scss'
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (

src/app/wallets/[wallet]/accounts/[account]/borrow/page.tsx

@@ -1,8 +1,5 @@
 import { BorrowTable } from 'components/Borrow/BorrowTable'
 import { Card } from 'components/Card'
-import Loading from 'components/Loading'
-import { Text } from 'components/Text'
-import { Suspense } from 'react'
 import { getAccountDebts, getBorrowData } from 'utils/api'
 import { getMarketAssets } from 'utils/assets'
 

src/components/Account/FundAccountModal.tsx

@@ -12,11 +12,11 @@ import { Slider } from 'components/Slider'
 import { Text } from 'components/Text'
 import useParams from 'hooks/useParams'
 import useStore from 'store'
+import { getWalletBalances } from 'utils/api'
 import { getMarketAssets } from 'utils/assets'
 import { hardcodedFee } from 'utils/contants'
 import { convertFromGwei, convertToGwei } from 'utils/formatters'
 import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
-import { getAccountDeposits } from 'utils/api'
 
 export const FundAccountModal = () => {
   // ---------------
@@ -26,7 +26,7 @@ export const FundAccountModal = () => {
   const params = useParams()
   const depositCreditAccount = useStore((s) => s.depositCreditAccount)
   const address = useStore((s) => s.client?.recentWallet.account?.address)
-  const { data: balancesData, isLoading: balanceIsLoading } = useSWR(address, getAccountDeposits)
+  const { data: balancesData, isLoading: balanceIsLoading } = useSWR(address, getWalletBalances)
 
   const selectedAccount = useStore((s) => s.selectedAccount)
   const marketAssets = getMarketAssets()
@@ -144,16 +144,16 @@ export const FundAccountModal = () => {
                     }}
                     value={selectedToken}
                   >
-                    {/* {marketAssets?.map((entry) => {
-                      const entrySymbol = getTokenSymbol(entry, marketAssets)
+                    {marketAssets?.map((entry) => {
                       return (
-                        entrySymbol !== '' && (
-                          <option key={entry} value={entry}>
-                            {getTokenSymbol(entry, marketAssets)}
+                        balancesData?.find((balance) => balance.denom === selectedToken)
+                          ?.amount && (
+                          <option key={entry.denom} value={entry.denom}>
+                            {entry.symbol}
                           </option>
                         )
-                      ) */}
-                    {/* })} */}
+                      )
+                    })}
                   </select>
                 </div>
                 <div className='flex justify-between p-2'>

src/components/Account/WithdrawModal.tsx

@@ -92,8 +92,12 @@ export const WithdrawModal = () => {
 
   const { mutate, isLoading } = useWithdrawFunds(withdrawAmount, borrowAmount, selectedToken, {
     onSuccess: () => {
-      useStore.setState({ withdrawModal: false })
-      toast.success(`${amount} ${selectedTokenSymbol} successfully withdrawn`)
+      useStore.setState({
+        withdrawModal: false,
+        toast: {
+          message: `${amount} ${selectedTokenSymbol} successfully withdrawn`,
+        },
+      })
     },
   })
 

src/components/Background.tsx

@@ -1,11 +1,5 @@
 'use client'
 
-import classNames from 'classnames'
-
 export default function Background() {
-  const backgroundClasses = classNames(
-    'top-0 left-0 absolute block h-full w-full flex-col bg-body bg-desktop bg-top bg-no-repeat filter bg-[#06040C]',
-  )
-
-  return <div className={backgroundClasses} />
+  return <div className='background' />
 }

src/components/Borrow/AssetExpanded.tsx

@@ -1,9 +1,8 @@
 import React from 'react'
+import { Row } from '@tanstack/react-table'
 
 import { getMarketAssets } from 'utils/assets'
-import { Row } from '@tanstack/react-table'
 import { Button } from 'components/Button'
-import { useRouter } from 'next/navigation'
 
 type AssetRowProps = {
   row: Row<BorrowAsset>
@@ -13,7 +12,6 @@ type AssetRowProps = {
 }
 
 export default function AssetExpanded(props: AssetRowProps) {
-  const router = useRouter()
   const marketAssets = getMarketAssets()
   const asset = marketAssets.find((asset) => asset.denom === props.row.original.denom)
 
@@ -32,7 +30,7 @@ export default function AssetExpanded(props: AssetRowProps) {
     >
       <td colSpan={4}>
         <div className='flex justify-end p-4'>
-          <Button color='secondary' text='CLick me' onClick={() => router.refresh()} />
+          <Button color='secondary' text='CLick me' onClick={() => {}} />
           <Button color='primary' text='CLick me' />
         </div>
       </td>

src/components/Borrow/AssetRow.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
+import { flexRender, Row } from '@tanstack/react-table'
 
 import { getMarketAssets } from 'utils/assets'
-import { flexRender, Row } from '@tanstack/react-table'
 
 type AssetRowProps = {
   row: Row<BorrowAsset>

src/components/Borrow/BorrowTable.tsx

@@ -10,11 +10,12 @@ import {
 } from '@tanstack/react-table'
 import Image from 'next/image'
 import React from 'react'
+import classNames from 'classnames'
 
 import { AssetRow } from 'components/Borrow/AssetRow'
 import { ChevronDown, ChevronUp } from 'components/Icons'
 import { getMarketAssets } from 'utils/assets'
-import classNames from 'classnames'
+
 import AssetExpanded from './AssetExpanded'
 
 type Props = {

src/components/BorrowModal.tsx

@@ -2,7 +2,6 @@ import { Dialog, Switch, Transition } from '@headlessui/react'
 import BigNumber from 'bignumber.js'
 import React, { useMemo, useState } from 'react'
 import { NumericFormat } from 'react-number-format'
-import { toast } from 'react-toastify'
 
 import { Button } from 'components/Button'
 import { CircularProgress } from 'components/CircularProgress'
@@ -20,10 +19,10 @@ import { useBorrowFunds } from 'hooks/mutations/useBorrowFunds'
 import { useAllBalances } from 'hooks/queries/useAllBalances'
 import { useMarkets } from 'hooks/queries/useMarkets'
 import { useTokenPrices } from 'hooks/queries/useTokenPrices'
-import { formatCurrency, formatValue } from 'utils/formatters'
-import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
 import useStore from 'store'
 import { getBaseAsset, getMarketAssets } from 'utils/assets'
+import { formatCurrency, formatValue } from 'utils/formatters'
+import { getTokenDecimals, getTokenSymbol } from 'utils/tokens'
 
 type Props = {
   show: boolean
@@ -73,7 +72,9 @@ export const BorrowModal = ({ show, onClose, tokenDenom }: Props) => {
   const { mutate, isLoading } = useBorrowFunds(borrowAmount, tokenDenom, !isBorrowToCreditAccount, {
     onSuccess: () => {
       onClose()
-      toast.success(`${amount} ${tokenSymbol} successfully Borrowed`)
+      useStore.setState({
+        toast: { message: `${amount} ${tokenSymbol} successfully Borrowed` },
+      })
     },
   })
 

src/components/RepayModal.tsx

@@ -55,7 +55,9 @@ export const RepayModal = ({ show, onClose, tokenDenom }: Props) => {
     {
       onSuccess: () => {
         onClose()
-        toast.success(`${amount} ${tokenSymbol} successfully repaid`)
+        useStore.setState({
+          toast: { message: `${amount} ${tokenSymbol} successfully repaid` },
+        })
       },
     },
   )

src/components/Toaster.tsx

@@ -1,10 +1,23 @@
 'use client'
-import { Slide, ToastContainer } from 'react-toastify'
+import { useRouter } from 'next/navigation'
+import { toast as createToast, Slide, ToastContainer } from 'react-toastify'
 
 import useStore from 'store'
 
 export default function Toaster() {
   const enableAnimations = useStore((s) => s.enableAnimations)
+  const toast = useStore((s) => s.toast)
+  const router = useRouter()
+
+  if (toast) {
+    if (toast.isError) {
+      createToast.error(toast.message)
+    } else {
+      createToast.success(toast.message)
+    }
+    useStore.setState({ toast: null })
+    router.refresh()
+  }
 
   return (
     <ToastContainer

src/components/Trade/TradeActionModule.tsx

@@ -96,12 +96,14 @@ export const TradeActionModule = () => {
     slippageTolerance / 100,
     {
       onSuccess: () => {
-        toast.success(
-          `${amountIn} ${getTokenSymbol(
-            selectedTokenIn,
-            marketAssets,
-          )} swapped for ${amountOut} ${getTokenSymbol(selectedTokenOut, marketAssets)}`,
-        )
+        useStore.setState({
+          toast: {
+            message: `${amountIn} ${getTokenSymbol(
+              selectedTokenIn,
+              marketAssets,
+            )} swapped for ${amountOut} ${getTokenSymbol(selectedTokenOut, marketAssets)}`,
+          },
+        })
         resetAmounts()
       },
     },

src/hooks/mutations/useBorrowFunds.tsx

@@ -1,6 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { useMemo } from 'react'
-import { toast } from 'react-toastify'
 
 import useStore from 'store'
 import { queryKeys } from 'types/query-keys-factory'
@@ -59,7 +58,9 @@ export const useBorrowFunds = (
         }
       },
       onError: (err: Error) => {
-        toast.error(err.message)
+        useStore.setState({
+          toast: { message: err.message, isError: true },
+        })
       },
       ...options,
     },

src/hooks/mutations/useRepayFunds.tsx

@@ -1,6 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { useMemo } from 'react'
-import { toast } from 'react-toastify'
 
 import useStore from 'store'
 import { queryKeys } from 'types/query-keys-factory'
@@ -54,7 +53,9 @@ export const useRepayFunds = (
         queryClient.invalidateQueries(queryKeys.redbankBalances())
       },
       onError: (err: Error) => {
-        toast.error(err.message)
+        useStore.setState({
+          toast: { message: err.message, isError: true },
+        })
       },
       ...options,
     },

src/hooks/mutations/useTradeAsset.tsx

@@ -1,6 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
 import { useMemo } from 'react'
-import { toast } from 'react-toastify'
 
 import useStore from 'store'
 import { Action } from 'types/generated/mars-credit-manager/MarsCreditManager.types'
@@ -70,7 +69,9 @@ export const useTradeAsset = (
         queryClient.invalidateQueries(queryKeys.redbankBalances())
       },
       onError: (err: Error) => {
-        toast.error(err.message)
+        useStore.setState({
+          toast: { message: err.message, isError: true },
+        })
       },
       ...options,
     },

src/hooks/mutations/useWithdrawFunds.tsx

@@ -1,6 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useMemo } from 'react'
-import { toast } from 'react-toastify'
 
 import useStore from 'store'
 import { queryKeys } from 'types/query-keys-factory'
@@ -60,7 +59,9 @@ export const useWithdrawFunds = (
         onSuccess && onSuccess()
       },
       onError: (err: Error) => {
-        toast.error(err.message)
+        useStore.setState({
+          toast: { message: err.message, isError: true },
+        })
       },
     },
   )

src/pages/api/markets/borrow.ts

@@ -1,9 +1,9 @@
 import { NextApiRequest, NextApiResponse } from 'next'
+import { Coin } from '@cosmjs/stargate'
+import BigNumber from 'bignumber.js'
 
 import { ENV_MISSING_MESSAGE, URL_API } from 'constants/env'
 import { getMarketAssets } from 'utils/assets'
-import { Coin } from '@cosmjs/stargate'
-import BigNumber from 'bignumber.js'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (!URL_API) {

src/pages/api/markets/debts.ts

@@ -1,8 +1,7 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-
-import { ADDRESS_RED_BANK, ENV_MISSING_MESSAGE, URL_API, URL_GQL } from 'constants/env'
 import { gql, request as gqlRequest } from 'graphql-request'
 
+import { ADDRESS_RED_BANK, ENV_MISSING_MESSAGE, URL_API, URL_GQL } from 'constants/env'
 import { getContractQuery } from 'utils/query'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {

src/pages/api/markets/deposits.ts

@@ -1,8 +1,7 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-
-import { ADDRESS_RED_BANK, ENV_MISSING_MESSAGE, URL_API, URL_GQL, URL_RPC } from 'constants/env'
 import { gql, request as gqlRequest } from 'graphql-request'
 
+import { ADDRESS_RED_BANK, ENV_MISSING_MESSAGE, URL_API, URL_GQL, URL_RPC } from 'constants/env'
 import { getContractQuery } from 'utils/query'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {

src/pages/api/markets/liquidity.ts

@@ -1,6 +1,6 @@
 import { NextApiRequest, NextApiResponse } from 'next'
-
 import { Coin } from '@cosmjs/stargate'
+
 import { ENV_MISSING_MESSAGE, URL_API } from 'constants/env'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {

src/pages/api/prices/index.ts

@@ -1,9 +1,9 @@
 import { gql, request as gqlRequest } from 'graphql-request'
 import { NextApiRequest, NextApiResponse } from 'next'
+import { Coin } from '@cosmjs/stargate'
 
 import { ADDRESS_ORACLE, ENV_MISSING_MESSAGE, URL_GQL } from 'constants/env'
 import { getMarketAssets } from 'utils/assets'
-import { Coin } from '@cosmjs/stargate'
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
   if (!URL_GQL || !ADDRESS_ORACLE) {

src/store/slices/broadcast.ts

@@ -1,7 +1,6 @@
 import { Coin, StdFee } from '@cosmjs/stargate'
 import { MsgExecuteContract, TxBroadcastResult } from '@marsprotocol/wallet-connector'
 import { isMobile } from 'react-device-detect'
-import { toast } from 'react-toastify'
 import { GetState, SetState } from 'zustand'
 
 import { ADDRESS_CREDIT_MANAGER, ENV_MISSING_MESSAGE } from 'constants/env'
@@ -17,6 +16,7 @@ interface BroadcastResult {
 }
 
 export interface BroadcastSlice {
+  toast: { message: string; isError?: boolean } | null
   executeMsg: (options: {
     msg: Record<string, unknown>
     fee: StdFee
@@ -34,6 +34,7 @@ export interface BroadcastSlice {
 export function createBroadcastSlice(set: SetState<Store>, get: GetState<Store>): BroadcastSlice {
   const marketAssets = getMarketAssets()
   return {
+    toast: null,
     createCreditAccount: async (options: { fee: StdFee }) => {
       const msg = {
         create_credit_account: {},
@@ -44,12 +45,13 @@ export function createBroadcastSlice(set: SetState<Store>, get: GetState<Store>)
       if (response.result) {
         set({ createAccountModal: false })
         const id = getSingleValueFromBroadcastResult(response.result, 'wasm', 'token_id')
-        toast.success(`Account ${id} Created`)
-        set({ fundAccountModal: true })
+        set({ fundAccountModal: true, toast: { message: `Account ${id} created` } })
         return id
       } else {
-        set({ createAccountModal: false })
-        toast.error(response.error)
+        set({
+          createAccountModal: false,
+          toast: { message: response.error ?? 'transaction failed', isError: true },
+        })
         return null
       }
     },
@@ -64,9 +66,9 @@ export function createBroadcastSlice(set: SetState<Store>, get: GetState<Store>)
 
       set({ deleteAccountModal: false })
       if (response.result) {
-        toast.success(`Account ${options.accountId} deleted`)
+        set({ toast: { message: `Account ${options.accountId} deleted` } })
       } else {
-        toast.error(response.error)
+        set({ toast: { message: response.error ?? 'transaction failed', isError: true } })
       }
       return !!response.result
     },
@@ -89,15 +91,17 @@ export function createBroadcastSlice(set: SetState<Store>, get: GetState<Store>)
 
       const response = await get().executeMsg({ msg, fee: options.fee, funds })
       if (response.result) {
-        toast.success(
-          `Deposited ${convertFromGwei(
-            deposit.amount,
-            deposit.denom,
-            marketAssets,
-          )} ${getTokenSymbol(deposit.denom, marketAssets)} to Account ${options.accountId}`,
-        )
+        set({
+          toast: {
+            message: `Deposited ${convertFromGwei(
+              deposit.amount,
+              deposit.denom,
+              marketAssets,
+            )} ${getTokenSymbol(deposit.denom, marketAssets)} to Account ${options.accountId}`,
+          },
+        })
       } else {
-        toast.error(response.error)
+        set({ toast: { message: response.error ?? 'transaction failed', isError: true } })
       }
       return !!response.result
     },

src/styles/globals.scss

@@ -65,6 +65,56 @@ a {
   font-feature-settings: 'tnum' on;
 }
 
+/* ORBS */
+@mixin orbs($count) {
+  $text-shadow: ();
+  @for $i from 0 through $count {
+    $text-shadow: $text-shadow,
+      (-0.5+ (random()) * 3) +
+        em
+        (-0.5+ (random()) * 3) +
+        em
+        7px
+        hsla((random() * 50)+210, 100%, 45%, 0.3);
+  }
+  text-shadow: $text-shadow;
+}
+
+.background {
+  font-family: serif;
+  font-size: 90px;
+  overflow: hidden;
+  background: #0b0e20;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  inset: 0;
+
+  &:before,
+  &:after {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 3em;
+    height: 3em;
+    content: '.';
+    mix-blend-mode: screen;
+  }
+
+  &:before {
+    @include orbs(15);
+    animation-duration: 300s;
+    animation-delay: -50s;
+    animation: 180s -15s move infinite ease-in-out alternate;
+  }
+
+  &:after {
+    @include orbs(25);
+    animation-duration: 600s;
+    animation: 180s 0s move infinite ease-in-out alternate;
+  }
+}
+
 /* react-toastify */
 /* https://fkhadra.github.io/react-toastify/how-to-style#override-css-variables  */
 .Toastify__toast {
@@ -74,3 +124,13 @@ a {
 .Toastify__toast-theme--colored.Toastify__toast--success {
   @apply bg-green-500;
 }
+
+/* KEYFRAMES */
+@keyframes move {
+  from {
+    transform: rotate(0deg) scale(12) translateX(-20px);
+  }
+  to {
+    transform: rotate(360deg) scale(18) translateX(20px);
+  }
+}

src/utils/api.ts

@@ -1,4 +1,5 @@
 import { Coin } from '@cosmjs/stargate'
+
 import { URL_API } from 'constants/env'
 
 export async function callAPI<T>(endpoint: string): Promise<T> {

yarn.lock

@@ -3782,7 +3782,7 @@ chalk@^4.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -5313,6 +5313,11 @@ immediate@~3.0.5:
   resolved "https://registry.yarnpkg.com/immediate/-/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
   integrity sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==
 
+immutable@^4.0.0:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.2.4.tgz#83260d50889526b4b531a5e293709a77f7c55a2a"
+  integrity sha512-WDxL3Hheb1JkRN3sQkyujNlL/xRjAo3rJtaU5xeufUauG66JdMr32bLj4gF+vWl84DIA3Zxw7tiAjneYzRRw+w==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -6831,6 +6836,15 @@ safe-regex-test@^1.0.0:
     get-intrinsic "^1.1.3"
     is-regex "^1.1.4"
 
+sass@^1.58.3:
+  version "1.58.3"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.58.3.tgz#2348cc052061ba4f00243a208b09c40e031f270d"
+  integrity sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 scheduler@^0.23.0:
   version "0.23.0"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
@@ -7005,7 +7019,7 @@ snakecase-keys@^5.1.2, snakecase-keys@^5.4.1:
     snake-case "^3.0.4"
     type-fest "^2.5.2"
 
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==