Update Abacus 0.7.0 & Misc. bug fixes (#84)

* Add Notification icon w/ stroke

* Update to abacus0.7.0

* Fix goodTilTime string

* Fix tradingView initial load

* Temp remove notif onClick

* remove isConnected state from dydxClient

src/hooks/tradingView/useTradingView.ts

@@ -33,7 +33,7 @@ export const useTradingView = ({
   const marketIds = useSelector(getMarketIds, shallowEqual);
   const selectedLocale = useSelector(getSelectedLocale);
   const selectedNetwork = useSelector(getSelectedNetwork);
-  const { getCandlesForDatafeed } = useDydxClient();
+  const { getCandlesForDatafeed, isConnected: isClientConnected } = useDydxClient();
 
   const [savedTvChartConfig, setTvChartConfig] = useLocalStorage<object | undefined>({
     key: LocalStorageKey.TradingViewChartConfig,
@@ -44,7 +44,7 @@ export const useTradingView = ({
   const hasMarkets = marketIds.length > 0;
 
   useEffect(() => {
-    if (hasMarkets) {
+    if (hasMarkets && isClientConnected) {
       const widgetOptions = getWidgetOptions();
       const widgetOverrides = getWidgetOverrides(appTheme);
       const options = {
@@ -75,7 +75,7 @@ export const useTradingView = ({
       tvWidgetRef.current = null;
       setIsChartReady(false);
     };
-  }, [getCandlesForDatafeed, hasMarkets, selectedLocale, selectedNetwork]);
+  }, [getCandlesForDatafeed, isClientConnected, hasMarkets, selectedLocale, selectedNetwork]);
 
   return { savedResolution };
 };

src/hooks/useCurrentMarketId.ts

@@ -44,6 +44,9 @@ export const useCurrentMarketId = () => {
   }, [validId]);
 
   useEffect(() => {
-    abacusStateManager.setMarket(marketId ?? DEFAULT_MARKETID);
-  }, [selectedNetwork, marketId]);
+    // Check for marketIds otherwise Abacus will silently fail its isMarketValid check
+    if (marketIds) {
+      abacusStateManager.setMarket(marketId ?? DEFAULT_MARKETID);
+    }
+  }, [selectedNetwork, marketIds, marketId]);
 };

src/hooks/useDydxClient.tsx

@@ -13,7 +13,7 @@ import {
 
 import type { ResolutionString } from 'public/tradingview/charting_library';
 
-import type { NetworkConfig, ConnectNetworkEvent } from '@/constants/abacus';
+import type { ConnectNetworkEvent, NetworkConfig } from '@/constants/abacus';
 import { type Candle, RESOLUTION_MAP } from '@/constants/candles';
 
 import { getSelectedNetwork } from '@/state/appSelectors';
@@ -37,7 +37,7 @@ const useDydxClientContext = () => {
 
   const selectedNetwork = useSelector(getSelectedNetwork);
 
-  const [networkConfig, setNetworkConfig] = useState<Partial<NetworkConfig>>();
+  const [networkConfig, setNetworkConfig] = useState<NetworkConfig>();
 
   useEffect(() => {
     const onConnectNetwork = (event: ConnectNetworkEvent) => setNetworkConfig(event.detail);
@@ -57,14 +57,14 @@ const useDydxClientContext = () => {
       if (
         networkConfig?.chainId &&
         networkConfig?.indexerUrl &&
-        networkConfig?.indexerSocketUrl &&
+        networkConfig?.websocketUrl &&
         networkConfig?.validatorUrl
       ) {
         try {
           const initializedClient = await CompositeClient.connect(
             new Network(
               selectedNetwork,
-              new IndexerConfig(networkConfig.indexerUrl, networkConfig.indexerSocketUrl),
+              new IndexerConfig(networkConfig.indexerUrl, networkConfig.websocketUrl),
               new ValidatorConfig(networkConfig.validatorUrl, networkConfig.chainId, {
                 broadcastPollIntervalMs: 3_000,
                 broadcastTimeoutMs: 60_000,
@@ -209,6 +209,7 @@ const useDydxClientContext = () => {
     networkConfig,
     compositeClient,
     faucetClient,
+    isConnected: !!compositeClient,
 
     // Wallet Methods
     getWalletFromEvmSignature,

src/hooks/useNotificationTypes.tsx

@@ -4,15 +4,14 @@ import { useSelector, shallowEqual, useDispatch } from 'react-redux';
 import { groupBy } from 'lodash';
 
 import { AlertType } from '@/constants/alerts';
-import { AbacusOrderStatus, ORDER_SIDES, ORDER_STATUS_STRINGS } from '@/constants/abacus';
+import { AbacusOrderStatus, ORDER_SIDES } from '@/constants/abacus';
 import { DialogTypes } from '@/constants/dialogs';
-import { STRING_KEYS } from '@/constants/localization';
+import { STRING_KEYS, StringKey } from '@/constants/localization';
 import { type NotificationTypeConfig, NotificationType } from '@/constants/notifications';
-import { ORDER_SIDE_STRINGS, TRADE_TYPE_STRINGS, TradeTypes } from '@/constants/trade';
+import { ORDER_SIDE_STRINGS } from '@/constants/trade';
 
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
 
-import { AlertMessage } from '@/components/AlertMessage';
 import { Icon, IconName } from '@/components/Icon';
 import { Output, OutputType } from '@/components/Output';
 import { TransferStatusToast } from '@/views/TransferStatus';
@@ -69,11 +68,11 @@ export const notificationTypes = [
                   <OrderStatusIcon status={order.status} totalFilled={order.totalFilled ?? 0} />
                 ),
                 title: `${stringGetter({
-                  key: TRADE_TYPE_STRINGS[order.type.rawValue as TradeTypes].tradeTypeKey,
+                  key: order.resources.typeStringKey as StringKey,
                 })} ${
                   order.status === AbacusOrderStatus.open && (order?.totalFilled ?? 0) > 0
                     ? stringGetter({ key: STRING_KEYS.PARTIALLY_FILLED })
-                    : stringGetter({ key: ORDER_STATUS_STRINGS[order.status.name] })
+                    : stringGetter({ key: order.resources.statusStringKey as StringKey })
                 }`,
                 description: `${stringGetter({
                   key: ORDER_SIDE_STRINGS[ORDER_SIDES[order.side.name]],
@@ -91,18 +90,34 @@ export const notificationTypes = [
       }, [orderIds]);
     },
 
-    useNotificationAction: () => {
-      const dispatch = useDispatch();
+    // useNotificationAction: () => {
+    //   const dispatch = useDispatch();
+    //   const orders = useSelector(getSubaccountOrders, shallowEqual) || [];
+    //   const ordersByOrderId = Object.fromEntries(orders.map((order) => [order.id, order]));
 
-      return (orderId) => {
-        dispatch(
-          openDialog({
-            type: DialogTypes.OrderDetails,
-            dialogProps: { orderId },
-          })
-        );
-      };
-    },
+    //   const fills = useSelector(getSubaccountFills, shallowEqual) || [];
+    //   const fillsByOrderId = groupBy(fills, (fill) => fill.orderId);
+
+    //   return (id) => {
+    //     if (ordersByOrderId[id]) {
+    //       dispatch(
+    //         openDialog({
+    //           type: DialogTypes.OrderDetails,
+    //           dialogProps: { orderId: id },
+    //         })
+    //       );
+    //     } else if (fillsByOrderId[id]) {
+    //       const fillId = fillsByOrderId[id][0].id;
+
+    //       dispatch(
+    //         openDialog({
+    //           type: DialogTypes.FillDetails,
+    //           dialogProps: { fillId },
+    //         })
+    //       );
+    //     }
+    //   };
+    // },
   } as NotificationTypeConfig<string, [string, number]>,
   {
     type: NotificationType.SquidTransfer,
@@ -138,7 +153,8 @@ export const notificationTypes = [
                   {stringGetter({
                     key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
                     params: {
-                      ERROR_MESSAGE: error.message || stringGetter({ key: STRING_KEYS.UNKNOWN_ERROR }),
+                      ERROR_MESSAGE:
+                        error.message || stringGetter({ key: STRING_KEYS.UNKNOWN_ERROR }),
                     },
                   })}
                 </Styled.ErrorMessage>
@@ -182,8 +198,8 @@ Styled.TransferText = styled.span`
   display: inline-flex;
   align-items: center;
   gap: 0.5ch;
-`
+`;
 
 Styled.ErrorMessage = styled.div`
   max-width: 13rem;
-`;
+`;