Merge pull request #737 from notional-finance/feat/network-icons

build: adds new network icons fixes bugs
notional-finance · Apr 5, 2024 · be0c639 · be0c639
2 parents b5d6562 + 231441a
commit be0c639
Show file tree

Hide file tree

Showing 21 changed files with 86 additions and 51 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
@@ -166,7 +166,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/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/vault/src/components/balancer-vault-img.tsx b/packages/features/vault/src/components/balancer-vault-img.tsx
@@ -2,12 +2,12 @@ import { SvgIcon, SvgIconProps, useTheme } from '@mui/material';
 
 /* eslint-disable-next-line */
 export interface BalancerVaultImgProps extends SvgIconProps {
-  tokenSymbol: string;
+  tokensymbol: string;
 }
 
 export function BalancerVaultImg(props: BalancerVaultImgProps) {
   const theme = useTheme();
-  const { tokenSymbol } = props;
+  const { tokensymbol } = props;
   return (
     <SvgIcon {...props} viewBox="0 0 498 223">
       <svg
@@ -55,7 +55,7 @@ export function BalancerVaultImg(props: BalancerVaultImgProps) {
         >
           <tspan x="108.23" y="26.9837">
             {' '}
-            Deposit {tokenSymbol}
+            Deposit {tokensymbol}
           </tspan>
         </text>
         <text
@@ -68,7 +68,7 @@ export function BalancerVaultImg(props: BalancerVaultImgProps) {
         >
           <tspan x="304.497" y="26.9837">
             {' '}
-            Deploy {tokenSymbol}
+            Deploy {tokensymbol}
           </tspan>
         </text>
         <path
@@ -114,7 +114,7 @@ export function BalancerVaultImg(props: BalancerVaultImgProps) {
             Borrow{' '}
           </tspan>
           <tspan x="258" y="116.984">
-            {tokenSymbol}{' '}
+            {tokensymbol}{' '}
           </tspan>
         </text>
         <path
@@ -374,8 +374,8 @@ export function BalancerVaultImg(props: BalancerVaultImgProps) {
             y2="9.43462"
             gradientUnits="userSpaceOnUse"
           >
-            <stop stop-color="#BFC9F5" stop-opacity="0.5" />
-            <stop offset="0.0001" stop-color="#8EA1F5" stop-opacity="0.5" />
+            <stop stop-color="#BFC9F5" stopOpacity="0.5" />
+            <stop offset="0.0001" stop-color="#8EA1F5" stopOpacity="0.5" />
             <stop offset="1" stop-color="#26CBCF" />
           </linearGradient>
           <linearGradient
@@ -386,8 +386,8 @@ export function BalancerVaultImg(props: BalancerVaultImgProps) {
             y2="9.43462"
             gradientUnits="userSpaceOnUse"
           >
-            <stop stop-color="#BFC9F5" stop-opacity="0.5" />
-            <stop offset="0.0001" stop-color="#8EA1F5" stop-opacity="0.5" />
+            <stop stop-color="#BFC9F5" stopOpacity="0.5" />
+            <stop offset="0.0001" stop-color="#8EA1F5" stopOpacity="0.5" />
             <stop offset="1" stop-color="#26CBCF" />
           </linearGradient>
           <linearGradient
@@ -409,8 +409,8 @@ export function BalancerVaultImg(props: BalancerVaultImgProps) {
             y2="139.435"
             gradientUnits="userSpaceOnUse"
           >
-            <stop stop-color="#BFC9F5" stop-opacity="0.5" />
-            <stop offset="0.0001" stop-color="#8EA1F5" stop-opacity="0.5" />
+            <stop stop-color="#BFC9F5" stopOpacity="0.5" />
+            <stop offset="0.0001" stop-color="#8EA1F5" stopOpacity="0.5" />
             <stop offset="1" stop-color="#26CBCF" />
           </linearGradient>
           <radialGradient
@@ -421,7 +421,7 @@ export function BalancerVaultImg(props: BalancerVaultImgProps) {
             gradientUnits="userSpaceOnUse"
             gradientTransform="translate(440.357 24.313) rotate(128.759) scale(14.7663 13.3252)"
           >
-            <stop stop-color="#3D3E4B" stop-opacity="0.75" />
+            <stop stop-color="#3D3E4B" stopOpacity="0.75" />
             <stop offset="1" stop-color="#13131C" />
           </radialGradient>
           <radialGradient

diff --git a/packages/features/vault/src/components/curve-vault-img.tsx b/packages/features/vault/src/components/curve-vault-img.tsx
@@ -2,11 +2,11 @@ import { SvgIcon, SvgIconProps, useTheme } from '@mui/material';
 
 /* eslint-disable-next-line */
 export interface CurveVaultImgProps extends SvgIconProps {
-  tokenSymbol: string;
+  tokensymbol: string;
 }
 
 export function CurveVaultImg(props: CurveVaultImgProps) {
-  const { tokenSymbol } = props;
+  const { tokensymbol } = props;
   const theme = useTheme();
 
   return (
@@ -28,7 +28,7 @@ export function CurveVaultImg(props: CurveVaultImgProps) {
         >
           <tspan x="108.23" y="26.9837">
             {' '}
-            Deposit {tokenSymbol}
+            Deposit {tokensymbol}
           </tspan>
         </text>
         <text
@@ -41,7 +41,7 @@ export function CurveVaultImg(props: CurveVaultImgProps) {
         >
           <tspan x="304.497" y="26.9837">
             {' '}
-            Deploy {tokenSymbol}
+            Deploy {tokensymbol}
           </tspan>
         </text>
         <path
@@ -6151,7 +6151,7 @@ export function CurveVaultImg(props: CurveVaultImgProps) {
             Borrow{' '}
           </tspan>
           <tspan x="258" y="116.984">
-            {tokenSymbol}{' '}
+            {tokensymbol}{' '}
           </tspan>
         </text>
         <path

diff --git a/packages/features/vault/src/components/how-it-works-faq.tsx b/packages/features/vault/src/components/how-it-works-faq.tsx
@@ -51,10 +51,10 @@ export const HowItWorksFaq = ({ tokenSymbol }: HowItWorksFaqProps) => {
             </BodyText>
             <ImageWrapper>
               {boosterProtocol === 'Convex' && (
-                <CurveVaultImg tokenSymbol={tokenSymbol} />
+                <CurveVaultImg tokensymbol={tokenSymbol} />
               )}
               {boosterProtocol === 'Aura' && (
-                <BalancerVaultImg tokenSymbol={tokenSymbol} />
+                <BalancerVaultImg tokensymbol={tokenSymbol} />
               )}
             </ImageWrapper>
             <H5

diff --git a/packages/shared/trade/src/transaction-confirmation/transaction-confirmation.tsx b/packages/shared/trade/src/transaction-confirmation/transaction-confirmation.tsx
@@ -69,7 +69,7 @@ export const TransactionConfirmation = ({
   }, []);
 
   return (
-    <Box sx={{ minHeight: theme.spacing(132) }}>
+    <Box sx={{ minHeight: theme.spacing(162) }}>
       <ScrollToTop />
       <StatusHeading
         heading={heading}

diff --git a/packages/shared/wallet/src/wallet-selector/wallet-selector.tsx b/packages/shared/wallet/src/wallet-selector/wallet-selector.tsx
@@ -77,15 +77,15 @@ export function WalletSelector() {
           {truncatedAddress && !isAccountPending && (
             <>
               {icon && icon.length > 0 && !isReadOnlyAddress && (
-                <IconContainer>
+                <IconContainer sx={{ paddingRight: '0px' }}>
                   <TokenIcon
                     symbol={getNetworkSymbol(walletNetwork)}
                     size="medium"
                   />
                 </IconContainer>
               )}
               {isReadOnlyAddress && (
-                <IconContainer>
+                <IconContainer sx={{ paddingRight: '0px' }}>
                   <EyeIcon />
                 </IconContainer>
               )}
@@ -167,7 +167,6 @@ const IconContainer = styled(Box)(
   display: flex;
   align-items: center;
   padding: ${theme.spacing(1)};
-  background: ${theme.gradient.aqua};
   border-radius: 4px;
   `
 );

diff --git a/packages/shared/web/src/dashboard-view/hooks/use-dashboard-config.tsx b/packages/shared/web/src/dashboard-view/hooks/use-dashboard-config.tsx
@@ -156,15 +156,15 @@ export const useDashboardConfig = (routeKey: PRODUCTS) => {
     toggleOptions: [
       <Box sx={{ fontSize: '14px', display: 'flex' }}>
         <TokenIcon
-          symbol="arb"
+          symbol="arbnetwork"
           size="small"
           style={{ marginRight: theme.spacing(1) }}
         />
         Arbitrum
       </Box>,
       <Box sx={{ fontSize: '14px', display: 'flex' }}>
         <TokenIcon
-          symbol="eth"
+          symbol="ethnetwork"
           size="small"
           style={{ marginRight: theme.spacing(1) }}
         />