add custom nav icons

nym-wallet/src/components/Nav.tsx

@@ -1,18 +1,9 @@
 import React, { useContext, useEffect } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import { List, ListItem, ListItemIcon, ListItemText } from '@mui/material'
-import {
-  AccountBalanceWalletOutlined,
-  ArrowBack,
-  ArrowForward,
-  AttachMoney,
-  CancelOutlined,
-  HowToVoteOutlined,
-  MoneyOff,
-  Description,
-  Settings,
-} from '@mui/icons-material'
+import { AccountBalanceWalletOutlined, ArrowBack, ArrowForward, Description, Settings } from '@mui/icons-material'
 import { ADMIN_ADDRESS, ClientContext } from '../context/main'
+import { Bond, Delegate, Unbond, Undelegate } from '../svg-icons'
 
 let routesSchema = [
   {
@@ -33,22 +24,22 @@ let routesSchema = [
   {
     label: 'Bond',
     route: '/bond',
-    Icon: AttachMoney,
+    Icon: Bond,
   },
   {
     label: 'Unbond',
     route: '/unbond',
-    Icon: MoneyOff,
+    Icon: Unbond,
   },
   {
     label: 'Delegate',
     route: '/delegate',
-    Icon: HowToVoteOutlined,
+    Icon: Delegate,
   },
   {
     label: 'Undelegate',
     route: '/undelegate',
-    Icon: CancelOutlined,
+    Icon: Undelegate,
   },
 ]
 
@@ -80,16 +71,14 @@ export const Nav = () => {
             <ListItemIcon
               sx={{
                 minWidth: 30,
-                color:
-                  location.pathname === route ? 'primary.main' : 'common.white',
+                color: location.pathname === route ? 'primary.main' : 'common.white',
               }}
             >
               <Icon sx={{ fontSize: 20 }} />
             </ListItemIcon>
             <ListItemText
               sx={{
-                color:
-                  location.pathname === route ? 'primary.main' : 'common.white',
+                color: location.pathname === route ? 'primary.main' : 'common.white',
               }}
               primary={label}
             />

nym-wallet/src/svg-icons/bond.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+export const Bond = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 17C14.8954 17 14 16.1046 14 15L14 9C14 7.89543 14.8954 7 16 7L22 7C23.1046 7 24 7.89543 24 9L24 15C24 16.1046 23.1046 17 22 17L16 17ZM16 9L16 15L22 15L22 9L16 9Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 17C0.89543 17 -1.00647e-07 16.1046 -2.24801e-07 15L-8.99206e-07 9C-1.02336e-06 7.89543 0.895429 7 2 7L8 7C9.10457 7 10 7.89543 10 9L10 15C10 16.1046 9.10457 17 8 17L2 17ZM2 9L2 15L8 15L8 9L2 9Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6 12C6 11.4477 6.44772 11 7 11H17C17.5523 11 18 11.4477 18 12C18 12.5523 17.5523 13 17 13H7C6.44772 13 6 12.5523 6 12Z"
+      />
+    </SvgIcon>
+  )
+}

nym-wallet/src/svg-icons/delegate.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+export const Delegate = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M4 12V15H6V12H4ZM16 7L14.59 5.59L13 7.17V2H11V7.19L9.39 5.61L8 7L12 11L16 7ZM4 17H20V15H4V17Z" />
+      <path d="M20 21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V20H20V21Z" />
+      <rect x="18" y="12" width="2" height="3" />
+      <rect x="18" y="17" width="2" height="3" />
+      <rect x="4" y="17" width="2" height="3" />
+    </SvgIcon>
+  )
+}

nym-wallet/src/svg-icons/index.ts

@@ -0,0 +1,4 @@
+export * from './delegate'
+export * from './undelegate'
+export * from './bond'
+export * from './unbond'

nym-wallet/src/svg-icons/unbond.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+export const Unbond = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 17C14.8954 17 14 16.1046 14 15L14 9C14 7.89543 14.8954 7 16 7L22 7C23.1046 7 24 7.89543 24 9L24 15C24 16.1046 23.1046 17 22 17L16 17ZM16 9L16 15L22 15L22 9L16 9Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M2 17C0.89543 17 -1.00647e-07 16.1046 -2.24801e-07 15L-8.99206e-07 9C-1.02336e-06 7.89543 0.895429 7 2 7L8 7C9.10457 7 10 7.89543 10 9L10 15C10 16.1046 9.10457 17 8 17L2 17ZM2 9L2 15L8 15L8 9L2 9Z"
+      />
+    </SvgIcon>
+  )
+}

nym-wallet/src/svg-icons/undelegate.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+export const Undelegate = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props}>
+      <path d="M4 12V15H6V12H4ZM4 17H20V15H4V17Z" />
+      <path d="M20 21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V20H20V21Z" />
+      <rect x="18" y="12" width="2" height="3" />
+      <rect x="18" y="17" width="2" height="3" />
+      <rect x="4" y="17" width="2" height="3" />
+      <path d="M9.41 7.41L8 6L12 2L16 6L14.61 7.39L13 5.81L13 11L11 11L11 5.83L9.41 7.41Z" />
+    </SvgIcon>
+  )
+}