Merge branch 'alpha/arbitrum' into v3/dev

notional-finance · Apr 5, 2024 · 5381de3 · 5381de3
2 parents 58befd6 + be0c639
commit 5381de3
Show file tree

Hide file tree

Showing 33 changed files with 162 additions and 178 deletions.
diff --git a/apps/web/src/containers/Markets/hooks/use-all-networks-toggle.tsx b/apps/web/src/containers/Markets/hooks/use-all-networks-toggle.tsx
@@ -20,7 +20,7 @@ export const useAllNetworksToggle = () => {
       <FormattedMessage defaultMessage={'All Networks'} />
     </Body>,
     <TokenIcon
-      symbol="arb"
+      symbol="arbnetwork"
       size="small"
       style={{
         display: 'flex',
@@ -30,7 +30,7 @@ export const useAllNetworksToggle = () => {
       }}
     />,
     <TokenIcon
-      symbol="eth"
+      symbol="ethnetwork"
       size="small"
       style={{
         display: 'flex',

diff --git a/packages/common/icons/src/assets/icons/currencies/arb-network-selector.svg b/packages/common/icons/src/assets/icons/currencies/arb-network-selector.svg
diff --git a/packages/common/icons/src/assets/icons/currencies/eth-network-selector.svg b/packages/common/icons/src/assets/icons/currencies/eth-network-selector.svg
diff --git a/packages/common/icons/src/lib/received-icon/received-icon.tsx b/packages/common/icons/src/lib/received-icon/received-icon.tsx
@@ -9,7 +9,7 @@ export const ReceivedIcon = (props: ReceivedIconProps) => {
   const { fill } = props;
   return (
     <SvgIcon {...props}>
-      <rect width="24" height="24" rx="12" fill={fill} fill-opacity="0.15" />
+      <rect width="24" height="24" rx="12" fill={fill} fillOpacity="0.15" />
       <path d="M6 18V19.25H18V18H6Z" fill={fill} />
       <path
         d="M11.3529 5V13.5394L7.93212 10.1577L7 11.0795L11.5343 15.5602L12 16L12.4657 15.5602L17 11.0795L16.0685 10.159L12.6484 13.5388V5H11.3529Z"

diff --git a/packages/common/icons/src/lib/sent-icon/sent-icon.tsx b/packages/common/icons/src/lib/sent-icon/sent-icon.tsx
@@ -9,7 +9,7 @@ export const SentIcon = (props: SentIconProps) => {
   const { fill } = props;
   return (
     <SvgIcon {...props}>
-      <rect width="24" height="24" rx="12" fill={fill} fill-opacity="0.15" />
+      <rect width="24" height="24" rx="12" fill={fill} fillOpacity="0.15" />
       <path d="M6 18V19.25H18V18H6Z" fill={fill} />
       <path
         d="M11.3529 16V7.46059L7.93212 10.8423L7 9.92054L11.5343 5.43976L12 5L12.4657 5.43976L17 9.92054L16.0685 10.841L12.6484 7.46123V16H11.3529Z"

diff --git a/packages/common/icons/src/lib/token-icon/token-icon.tsx b/packages/common/icons/src/lib/token-icon/token-icon.tsx
@@ -1,8 +1,10 @@
 import unknown from '../../assets/icons/currencies/currency-unknown.svg';
 import wbtc from '../../assets/icons/currencies/currency-wbtc.svg';
 import arb from '../../assets/icons/currencies/arbitrum.svg';
+import arbNetwork from '../../assets/icons/currencies/arb-network-selector.svg';
 import arb_alt from '../../assets/icons/currencies/arb-alt.svg';
 import eth from '../../assets/icons/currencies/currency-eth.svg';
+import ethNetwork from '../../assets/icons/currencies/eth-network-selector.svg';
 import peth from '../../assets/icons/currencies/pETH.svg';
 import reth from '../../assets/icons/currencies/rETH.svg';
 import reth_alt from '../../assets/icons/currencies/reth-alt.svg';
@@ -110,6 +112,11 @@ export const TokenImageList: TokenImageMap = {
     accentBorderImg: eth_alt,
     alt: 'Ethereum icon',
   },
+  ethnetwork: {
+    name: 'ethnetwork',
+    img: ethNetwork,
+    alt: 'Ethereum network icon',
+  },
   peth: {
     name: 'peth',
     img: peth,
@@ -298,6 +305,11 @@ export const TokenImageList: TokenImageMap = {
     accentBorderImg: arb_alt,
     alt: 'arb',
   },
+  arbnetwork: {
+    name: 'arbnetwork',
+    img: arbNetwork,
+    alt: 'arb network icon',
+  },
   trading_fees: {
     name: 'trading_fees',
     img: trading_fees,
@@ -448,7 +460,7 @@ export function TokenIcon({
     : TokenImageList['unknown'];
 
   const networkIcon = network
-    ? TokenImageList[getNetworkSymbol(network)]
+    ? TokenImageList[getNetworkSymbol(network, true)]
     : undefined;
 
   const tokenSizes = {

diff --git a/packages/common/mui/src/lib/data-table/data-table-body/data-table-body.tsx b/packages/common/mui/src/lib/data-table/data-table-body/data-table-body.tsx
@@ -118,10 +118,10 @@ export const DataTableBody = ({
             : {};
 
         return (
-          <Fragment key={`row-container-${row.id}`}>
+          <Fragment key={`row-container-${i}`}>
             <StyledTableRow
               theme={theme}
-              key={`row-${row.id}`}
+              key={`row-${i}`}
               rowSelected={rowSelected}
               expandableTableActive={expandableTableActive}
               tableVariant={tableVariant}
@@ -148,9 +148,10 @@ export const DataTableBody = ({
                 ...scrollableStyles,
               }}
             >
-              {cells.map((cell: Record<string, any>) => {
+              {cells.map((cell: Record<string, any>, j) => {
                 return (
                   <TableCell
+                    key={`cell-${j}`}
                     className={cell.column.columnDef.className}
                     sx={{
                       margin: 'auto',

diff --git a/packages/common/mui/src/lib/data-table/data-table-scroll/data-table-scroll.tsx b/packages/common/mui/src/lib/data-table/data-table-scroll/data-table-scroll.tsx
@@ -73,7 +73,8 @@ export const DataTableScroll = ({
       sx={{
         overflow: 'auto',
         position: 'relative',
-        height: maxHeight,
+        maxHeight: maxHeight,
+        height: '100%',
         '.table': {
           display: 'grid',
           borderRadius: theme.shape.borderRadius(),

diff --git a/packages/common/mui/src/lib/data-table/data-table.tsx b/packages/common/mui/src/lib/data-table/data-table.tsx
@@ -175,6 +175,7 @@ export const DataTable = ({
         border: maxHeight ? theme.shape.borderStandard : '',
         borderRadius: maxHeight ? theme.shape.borderRadius() : '',
         zIndex: maxHeight ? 2 : 1,
+        marginTop: maxHeight ? theme.spacing(5) : '',
       }}
     >
       {csvDataFormatter && data && (

diff --git a/packages/common/mui/src/lib/section-link/section-link.tsx b/packages/common/mui/src/lib/section-link/section-link.tsx
@@ -94,7 +94,9 @@ export function SectionLink({
           {/* dropdowns have the opposite theme as the page, so use contrast when the page 
               is light (therefore the drop down is dark) */}
           <H4>{title}</H4>
-          <Label sx={{ whiteSpace: 'nowrap' }}>{description}</Label>
+          <Label sx={{ whiteSpace: 'nowrap' }} component="div">
+            {description}
+          </Label>
         </Box>
         <Box>
           <IconButton

diff --git a/packages/features/liquidity/src/liquidity-variable/liquidity-variable-summary.tsx b/packages/features/liquidity/src/liquidity-variable/liquidity-variable-summary.tsx
@@ -165,7 +165,6 @@ export const LiquidityVariableSummary = () => {
         columns={poolTableColumns}
         data={poolTableData}
         maxHeight={theme.spacing(54)}
-        sx={{ marginTop: theme.spacing(5) }}
       />
       <Box sx={{ marginTop: theme.spacing(5) }}>
         <FaqHeader

diff --git a/packages/features/portfolio/src/components/side-nav/side-nav.tsx b/packages/features/portfolio/src/components/side-nav/side-nav.tsx
@@ -7,7 +7,7 @@ import { useThemeVariant } from '@notional-finance/notionable-hooks';
 interface CollapsibleProps {
   theme: NotionalTheme;
   open: boolean;
-  sideBoxShadow: string;
+  sideboxshadow: string;
 }
 
 export const SideNav = () => {
@@ -29,7 +29,7 @@ export const SideNav = () => {
         onMouseLeave={() => setOpen(false)}
         theme={theme}
         open={open}
-        sideBoxShadow={sideBoxShadow}
+        sideboxshadow={sideBoxShadow}
       >
         <Collapse orientation="horizontal" in={open} collapsedSize={80}>
           <SideNavOptons open={open} />
@@ -52,7 +52,7 @@ const NonCollapsible = styled(Box)(
 
 // NOTE* this unique padding-top is necessary to align with the button bar
 const Collapsible = styled(Box)(
-  ({ theme, open, sideBoxShadow }: CollapsibleProps) => `  
+  ({ theme, open, sideboxshadow }: CollapsibleProps) => `  
   height: 100vh;
   position: fixed;
   left: 0;
@@ -61,7 +61,7 @@ const Collapsible = styled(Box)(
   background: ${theme.palette.background.paper};
   border-right: ${theme.shape.borderStandard};
   z-index: 4;
-  box-shadow: ${open ? sideBoxShadow : 'none'};
+  box-shadow: ${open ? sideboxshadow : 'none'};
   ${theme.breakpoints.up('xxl')} {
     display: none;
   }

diff --git a/packages/features/portfolio/src/containers/portfolio-holdings/use-detailed-holdings.tsx b/packages/features/portfolio/src/containers/portfolio-holdings/use-detailed-holdings.tsx
@@ -99,6 +99,7 @@ export function useDetailedHoldingsTable() {
           totalIncentiveEarnings,
           hasMatured,
           isHighUtilization,
+          hasNToken,
         }) => {
           const isDebt = b.isNegative();
           const { icon, formattedTitle, titleWithMaturity, title } =
@@ -118,6 +119,48 @@ export function useDetailedHoldingsTable() {
               )
             );
 
+          const buttonBarData: {
+            buttonText: React.ReactNode;
+            callback: () => void;
+          }[] = [];
+
+          if (hasNToken) {
+            buttonBarData.push({
+              buttonText: <FormattedMessage defaultMessage={'Manage'} />,
+              callback: () => {
+                history.push(
+                  b.isPositive()
+                    ? `/portfolio/${network}/holdings/${PORTFOLIO_ACTIONS.CONVERT_ASSET}/${manageTokenId}`
+                    : `/portfolio/${network}/holdings/${PORTFOLIO_ACTIONS.ROLL_DEBT}/${manageTokenId}`
+                );
+              },
+            });
+          }
+
+          if (b.isPositive()) {
+            buttonBarData.push({
+              buttonText: <FormattedMessage defaultMessage={'Withdraw'} />,
+              callback: () => {
+                history.push(
+                  `/portfolio/${network}/holdings/${
+                    PORTFOLIO_ACTIONS.WITHDRAW
+                  }/${maturedTokenId}${
+                    isHighUtilization ? `?warning=${isHighUtilization}` : ''
+                  }`
+                );
+              },
+            });
+          } else {
+            buttonBarData.push({
+              buttonText: <FormattedMessage defaultMessage={'Repay'} />,
+              callback: () => {
+                history.push(
+                  `/portfolio/${network}/holdings/${PORTFOLIO_ACTIONS.REPAY_DEBT}/${maturedTokenId}`
+                );
+              },
+            });
+          }
+
           return {
             sortOrder: getHoldingsSortOrder(b.token),
             tokenId: b.tokenId,
@@ -213,43 +256,7 @@ export function useDetailedHoldingsTable() {
                     .toDisplayString(4)} ${b.underlying.symbol}`,
                 },
               ],
-              buttonBarData: [
-                {
-                  buttonText: <FormattedMessage defaultMessage={'Manage'} />,
-                  callback: () => {
-                    history.push(
-                      b.isPositive()
-                        ? `/portfolio/${network}/holdings/${PORTFOLIO_ACTIONS.CONVERT_ASSET}/${manageTokenId}`
-                        : `/portfolio/${network}/holdings/${PORTFOLIO_ACTIONS.ROLL_DEBT}/${manageTokenId}`
-                    );
-                  },
-                },
-                b.isPositive()
-                  ? {
-                      buttonText: (
-                        <FormattedMessage defaultMessage={'Withdraw'} />
-                      ),
-                      callback: () => {
-                        history.push(
-                          `/portfolio/${network}/holdings/${
-                            PORTFOLIO_ACTIONS.WITHDRAW
-                          }/${maturedTokenId}${
-                            isHighUtilization
-                              ? `?warning=${isHighUtilization}`
-                              : ''
-                          }`
-                        );
-                      },
-                    }
-                  : {
-                      buttonText: <FormattedMessage defaultMessage={'Repay'} />,
-                      callback: () => {
-                        history.push(
-                          `/portfolio/${network}/holdings/${PORTFOLIO_ACTIONS.REPAY_DEBT}/${maturedTokenId}`
-                        );
-                      },
-                    },
-              ],
+              buttonBarData,
               hasMatured: hasMatured,
               txnHistory: `/portfolio/${network}/transaction-history?${new URLSearchParams(
                 {

diff --git a/packages/features/portfolio/src/side-drawers/components/portfolio-side-drawer.tsx b/packages/features/portfolio/src/side-drawers/components/portfolio-side-drawer.tsx
@@ -50,7 +50,7 @@ export const PortfolioSideDrawer = ({
       variableBorrowRequired={enablePrimeBorrow}
       requiredApprovalAmount={requiredApprovalAmount}
     >
-      <Box sx={{ marginBottom: theme.spacing(6) }}>{children}</Box>
+      <Box sx={{ marginBottom: theme.spacing(9) }}>{children}</Box>
     </TransactionSidebar>
   );
 };
diff --git a/packages/features/portfolio/src/side-drawers/components/select-convert-asset.tsx b/packages/features/portfolio/src/side-drawers/components/select-convert-asset.tsx
@@ -3,6 +3,7 @@ import { Box, useTheme } from '@mui/material';
 import {
   LargeInputTextEmphasized,
   SideDrawerButton,
+  DisplayCell,
   ButtonText,
   DataTable,
   Body,
@@ -166,6 +167,7 @@ export const SelectConvertAsset = ({
           {
             header: <FormattedMessage defaultMessage="Detail" />,
             accessorKey: 'detail',
+            cell: DisplayCell,
             textAlign: 'left',
           },
           {