From 85718a9b21a09fee409ab5f39ec3f14860960d3f Mon Sep 17 00:00:00 2001 From: jesse snyder Date: Thu, 24 Oct 2024 10:53:14 -0600 Subject: [PATCH] Feature/navbar links configurable (#34) * add navbar links to config. cleanup imports. * active style for navbar link. lints --- web/.env.example | 5 ++ web/.env.test | 5 ++ web/src/App.tsx | 6 +-- .../components/DepositCard/DepositCard.tsx | 14 +++--- web/src/components/Navbar/Navbar.test.tsx | 10 ++++ web/src/components/Navbar/Navbar.tsx | 24 ++++++---- .../components/WithdrawCard/WithdrawCard.tsx | 20 ++++---- .../config/chainConfigs/ChainConfigsLocal.ts | 5 +- web/src/config/chainConfigs/index.ts | 18 +------- .../config/contexts/ConfigContext.test.tsx | 5 +- web/src/config/contexts/ConfigContext.tsx | 46 ++++++++++++++++--- web/src/config/env.ts | 4 ++ web/src/config/hooks/useConfig.ts | 2 +- web/src/config/index.ts | 40 +++++++++++++++- .../EthWalletConnector/EthWalletConnector.tsx | 7 +-- .../EthWallet/contexts/EthWalletContext.tsx | 12 +++-- .../features/EthWallet/hooks/useEthWallet.ts | 6 ++- .../EthWallet/hooks/useEvmChainSelection.tsx | 30 ++++-------- web/src/features/EthWallet/index.ts | 13 +++++- .../AstriaWithdrawerService.ts | 2 +- .../hooks/useIbcChainSelection.tsx | 15 +++--- .../contexts/NotificationsContext.tsx | 2 +- .../Notifications/hooks/useNotifications.ts | 17 +++++++ web/src/features/Notifications/index.ts | 15 ++++++ web/src/logo.svg | 29 ------------ web/src/pages/Layout.tsx | 7 +-- web/src/services/ibc.ts | 2 +- web/src/styles/navbar-customizations.scss | 3 ++ web/src/utils/index.test.ts | 4 ++ web/src/utils/index.ts | 10 +++- 30 files changed, 239 insertions(+), 139 deletions(-) create mode 100644 web/src/features/Notifications/hooks/useNotifications.ts create mode 100644 web/src/features/Notifications/index.ts delete mode 100644 web/src/logo.svg diff --git a/web/.env.example b/web/.env.example index 9ec0271..028abc6 100644 --- a/web/.env.example +++ b/web/.env.example @@ -5,3 +5,8 @@ REACT_APP_VERSION=$npm_package_version REACT_APP_IBC_CHAINS= # can set custom evm chains via json string REACT_APP_EVM_CHAINS= + +REACT_APP_BRAND_URL=https://astria.org +REACT_APP_BRIDGE_URL=https://bridge.astria.org +REACT_APP_SWAP_URL=https://flame.astria.org/swap +REACT_APP_POOL_URL=https://flame.astria.org/pool diff --git a/web/.env.test b/web/.env.test index cd370d7..184ea11 100644 --- a/web/.env.test +++ b/web/.env.test @@ -5,3 +5,8 @@ REACT_APP_ENV=test REACT_APP_IBC_CHAINS='{"Celestia Mocha-4":{"chainId":"mocha-4","chainName":"Celestia Mocha-4","rpc":"wss://rpc-mocha.pops.one","rest":"https://api-mocha.pops.one","stakeCurrency":{"coinDenom":"TIA","coinMinimalDenom":"utia","coinDecimals":6},"bip44":{"coinType":118},"bech32Config":{"bech32PrefixAccAddr":"celestia","bech32PrefixAccPub":"celestiapub","bech32PrefixConsAddr":"celestiavalcons","bech32PrefixConsPub":"celestiavalconspub","bech32PrefixValAddr":"celestiavaloper","bech32PrefixValPub":"celestiavaloperpub"},"currencies":[{"coinDenom":"TIA","coinMinimalDenom":"utia","coinDecimals":6,"ibcChannel":"channel-128","sequencerBridgeAccount":"astria1d7zjjljc0dsmxa545xkpwxym86g8uvvwhtezcr","iconClass":"i-celestia"},{"coinDenom":"STEEZE","coinMinimalDenom":"usteeze","coinDecimals":6}],"feeCurrencies":[{"coinDenom":"TIA","coinMinimalDenom":"utia","coinDecimals":6,"gasPriceStep":{"low":0.01,"average":0.02,"high":0.1}}],"iconClass":"i-celestia"}}' REACT_APP_EVM_CHAINS='' + +REACT_APP_BRAND_URL=https://astria.org +REACT_APP_BRIDGE_URL=https://bridge.astria.org +REACT_APP_SWAP_URL=https://flame.astria.org/swap +REACT_APP_POOL_URL=https://flame.astria.org/pool diff --git a/web/src/App.tsx b/web/src/App.tsx index 6e2290c..fc2aaf3 100644 --- a/web/src/App.tsx +++ b/web/src/App.tsx @@ -1,10 +1,10 @@ import type React from "react"; import { Route, Routes } from "react-router-dom"; -import { EthWalletContextProvider } from "features/EthWallet/contexts/EthWalletContext"; import BridgePage from "pages/BridgePage/BridgePage"; import Layout from "pages/Layout"; -import { NotificationsContextProvider } from "features/Notifications/contexts/NotificationsContext"; -import { ConfigContextProvider } from "config/contexts/ConfigContext"; +import { ConfigContextProvider } from "config"; +import { EthWalletContextProvider } from "features/EthWallet"; +import { NotificationsContextProvider } from "features/Notifications"; /** * App component with routes. diff --git a/web/src/components/DepositCard/DepositCard.tsx b/web/src/components/DepositCard/DepositCard.tsx index 880cc14..a2ddc1f 100644 --- a/web/src/components/DepositCard/DepositCard.tsx +++ b/web/src/components/DepositCard/DepositCard.tsx @@ -1,20 +1,18 @@ import type React from "react"; -import { useContext, useEffect, useMemo, useState } from "react"; +import { useEffect, useMemo, useState } from "react"; import { Dec, DecUtils } from "@keplr-wallet/unit"; import AnimatedArrowSpacer from "components/AnimatedDownArrowSpacer/AnimatedDownArrowSpacer"; import Dropdown, { type DropdownOption } from "components/Dropdown/Dropdown"; -import type { EvmChainInfo, IbcChainInfo } from "config/chainConfigs"; -import { useConfig } from "config/hooks/useConfig"; -import { NotificationType } from "features/Notifications/components/Notification/types"; -import { NotificationsContext } from "features/Notifications/contexts/NotificationsContext"; -import { useEvmChainSelection } from "features/EthWallet/hooks/useEvmChainSelection"; -import { useIbcChainSelection } from "features/IbcChainSelector/hooks/useIbcChainSelection"; +import { useConfig, type EvmChainInfo, type IbcChainInfo } from "config"; +import { useEvmChainSelection } from "features/EthWallet"; +import { useIbcChainSelection } from "features/IbcChainSelector"; +import { useNotifications, NotificationType } from "features/Notifications"; import { sendIbcTransfer } from "services/ibc"; export default function DepositCard(): React.ReactElement { - const { addNotification } = useContext(NotificationsContext); const { evmChains, ibcChains } = useConfig(); + const { addNotification } = useNotifications(); const { evmAccountAddress: recipientAddress, diff --git a/web/src/components/Navbar/Navbar.test.tsx b/web/src/components/Navbar/Navbar.test.tsx index 2e7e2c9..e43fcc0 100644 --- a/web/src/components/Navbar/Navbar.test.tsx +++ b/web/src/components/Navbar/Navbar.test.tsx @@ -10,4 +10,14 @@ describe("Navbar Component", () => { const logoElem = screen.getByAltText(/logo/i); expect(logoElem).toBeInTheDocument(); }); + + test("renders navbar links", () => { + renderWithRouter(); + const bridgeLink = screen.getByText(/bridge/i); + expect(bridgeLink).toBeInTheDocument(); + const swapLink = screen.getByText(/swap/i); + expect(swapLink).toBeInTheDocument(); + const poolLink = screen.getByText(/pool/i); + expect(poolLink).toBeInTheDocument(); + }); }); diff --git a/web/src/components/Navbar/Navbar.tsx b/web/src/components/Navbar/Navbar.tsx index 2a4f237..0301e7c 100644 --- a/web/src/components/Navbar/Navbar.tsx +++ b/web/src/components/Navbar/Navbar.tsx @@ -1,7 +1,9 @@ import type React from "react"; import { useState } from "react"; import { Link } from "react-router-dom"; -import logo from "../../logo-flame-w-text.svg"; + +import { useConfig } from "config"; +import logo from "logo-flame-w-text.svg"; function Navbar() { const [isMobileMenuActive, setIsMobileMenuActive] = useState(false); @@ -10,9 +12,7 @@ function Navbar() { setIsMobileMenuActive((prev) => !prev); }; - const brandLink = "https://www.astria.org/"; - const swapLink = "https://flame.astria.org/"; - const poolLink = "https://flame.astria.org/"; + const { brandURL, bridgeURL, swapURL, poolURL } = useConfig(); return (