(
null,
diff --git a/web/src/features/Notifications/contexts/NotificationsContext.tsx b/web/src/features/Notifications/contexts/NotificationsContext.tsx
index 6a253db..4813fb4 100644
--- a/web/src/features/Notifications/contexts/NotificationsContext.tsx
+++ b/web/src/features/Notifications/contexts/NotificationsContext.tsx
@@ -7,7 +7,7 @@ import type {
Notification,
} from "features/Notifications/components/Notification/types";
-interface NotificationsContextProps {
+export interface NotificationsContextProps {
notifications: Notification[];
addNotification: (opts: AddNotificationOpts) => void;
removeNotification: (id: string) => void;
diff --git a/web/src/features/Notifications/hooks/useNotifications.ts b/web/src/features/Notifications/hooks/useNotifications.ts
new file mode 100644
index 0000000..1375417
--- /dev/null
+++ b/web/src/features/Notifications/hooks/useNotifications.ts
@@ -0,0 +1,17 @@
+import { useContext } from "react";
+
+import {
+ NotificationsContext,
+ type NotificationsContextProps,
+} from "features/Notifications/contexts/NotificationsContext";
+
+// hook to make NotificationsContext easier to access
+export const useNotifications = (): NotificationsContextProps => {
+ const context = useContext(NotificationsContext);
+ if (!context) {
+ throw new Error(
+ "useNotifications must be used within an NotificationsContextProvider",
+ );
+ }
+ return context;
+};
diff --git a/web/src/features/Notifications/index.ts b/web/src/features/Notifications/index.ts
new file mode 100644
index 0000000..6a0176d
--- /dev/null
+++ b/web/src/features/Notifications/index.ts
@@ -0,0 +1,15 @@
+import Notification from "./components/Notification/Notification";
+import { NotificationType } from "./components/Notification/types";
+import {
+ NotificationsContext,
+ NotificationsContextProvider,
+} from "./contexts/NotificationsContext";
+import { useNotifications } from "./hooks/useNotifications";
+
+export {
+ Notification,
+ NotificationsContextProvider,
+ NotificationType,
+ NotificationsContext,
+ useNotifications,
+};
diff --git a/web/src/logo.svg b/web/src/logo.svg
deleted file mode 100644
index 25bd0b2..0000000
--- a/web/src/logo.svg
+++ /dev/null
@@ -1,29 +0,0 @@
-
diff --git a/web/src/pages/Layout.tsx b/web/src/pages/Layout.tsx
index 5aa579a..59b358c 100644
--- a/web/src/pages/Layout.tsx
+++ b/web/src/pages/Layout.tsx
@@ -1,18 +1,15 @@
import type React from "react";
-import { useContext } from "react";
import { Outlet } from "react-router-dom";
import Navbar from "components/Navbar/Navbar";
-import Notification from "features/Notifications/components/Notification/Notification";
-import { NotificationsContext } from "features/Notifications/contexts/NotificationsContext";
+import { Notification, useNotifications } from "features/Notifications";
/**
* Layout component with Navbar and footer.
* Uses `` to render children.
*/
export default function Layout(): React.ReactElement {
- const { notifications, removeNotification } =
- useContext(NotificationsContext);
+ const { notifications, removeNotification } = useNotifications();
return (
diff --git a/web/src/services/ibc.ts b/web/src/services/ibc.ts
index a2dd23a..8b9ba83 100644
--- a/web/src/services/ibc.ts
+++ b/web/src/services/ibc.ts
@@ -1,7 +1,7 @@
import Long from "long";
import { SigningStargateClient, StargateClient } from "@cosmjs/stargate";
import { Dec } from "@keplr-wallet/unit";
-import type { IbcChainInfo, IbcCurrency } from "config/chainConfigs";
+import type { IbcChainInfo, IbcCurrency } from "config";
import type { Keplr } from "@keplr-wallet/types";
import type { Key } from "@keplr-wallet/types/src/wallet/keplr";
diff --git a/web/src/styles/navbar-customizations.scss b/web/src/styles/navbar-customizations.scss
index f7330ea..fc32e46 100644
--- a/web/src/styles/navbar-customizations.scss
+++ b/web/src/styles/navbar-customizations.scss
@@ -12,6 +12,9 @@
align-items: center;
flex-grow: 1;
}
+ a.navbar-item.is-active {
+ color: $astria-grey-light;
+ }
&.navbar-menu-dropdown.is-active {
background: none;
border: none;
diff --git a/web/src/utils/index.test.ts b/web/src/utils/index.test.ts
index e0e8023..ac318ec 100644
--- a/web/src/utils/index.test.ts
+++ b/web/src/utils/index.test.ts
@@ -6,6 +6,10 @@ describe("Utility Functions", () => {
expect(formatBalance("1000000000000000000")).toBe("1.00");
expect(formatBalance("1500000000000000000")).toBe("1.50");
expect(formatBalance("123456000000000000")).toBe("0.12");
+
+ expect(formatBalance("100000000000", 6)).toBe("100000.00");
+ expect(formatBalance("150000000000", 6)).toBe("150000.00");
+ expect(formatBalance("123456000000", 6)).toBe("123456.00");
});
});
diff --git a/web/src/utils/index.ts b/web/src/utils/index.ts
index 6b43151..8405105 100644
--- a/web/src/utils/index.ts
+++ b/web/src/utils/index.ts
@@ -1,11 +1,17 @@
/**
* Format balance to 2 decimal places
* @param rawBalance
+ * @param decimals - number of decimal places this
*/
-export const formatBalance = (rawBalance: string) => {
- return (Number.parseInt(rawBalance) / 1_000_000_000_000_000_000).toFixed(2);
+export const formatBalance = (rawBalance: string, decimals = 18) => {
+ const denom = 10 ** decimals;
+ return (Number.parseInt(rawBalance) / denom).toFixed(2);
};
+/**
+ * Format chain id as a number
+ * @param chainIdHex
+ */
export const formatChainAsNum = (chainIdHex: string) => {
return Number.parseInt(chainIdHex);
};