🦑 Add a link to the Calamar block explorer (#4401)

Add a link to the Calamar block explorer

packages/ui/src/app/components/SideBar.tsx

@@ -7,8 +7,7 @@ import { SidebarConnections } from '@/app/components/SidebarConnections'
 import { MembersRoutes, ProfileRoutes, SettingsRoutes } from '@/app/constants/routes'
 import { BountyRoutes } from '@/bounty/constants'
 import { Arrow } from '@/common/components/icons'
-import { LinkSymbol } from '@/common/components/icons/symbols'
-import { PolkadotSymbol } from '@/common/components/icons/symbols/PolkadotSymbol'
+import { CalamarSymbol, LinkSymbol, LinkSymbolStyle, PolkadotSymbol } from '@/common/components/icons/symbols'
 import { AppsIcon } from '@/common/components/page/Sidebar/LinksIcons/AppsIcon'
 import { BandwidthIcon } from '@/common/components/page/Sidebar/LinksIcons/BandwidthIcon'
 import { BountyIcon } from '@/common/components/page/Sidebar/LinksIcons/BountyIcon'
@@ -29,7 +28,7 @@ import { LogoLink } from '@/common/components/page/Sidebar/LogoLink'
 import { Navigation, NavigationInnerWrapper } from '@/common/components/page/Sidebar/Navigation'
 import { NavigationExpandButton } from '@/common/components/page/Sidebar/NavigationExpandButton'
 import { NavigationHeader } from '@/common/components/page/Sidebar/NavigationHeader'
-import { NavigationLink } from '@/common/components/page/Sidebar/NavigationLink'
+import { NAVIGATION_LINK_GAP, NavigationLink } from '@/common/components/page/Sidebar/NavigationLink'
 import { Colors, RemoveScrollbar } from '@/common/constants'
 import { useNetworkEndpoints } from '@/common/hooks/useNetworkEndpoints'
 import { useToggle } from '@/common/hooks/useToggle'
@@ -105,6 +104,12 @@ export const SideBar = () => {
                 icon={<PolkadotSymbol />}
                 to={`https://polkadot.js.org/apps/?rpc=${endpoints.nodeRpcEndpoint}#/explorer`}
               >
+                Chain info
+                <LinkSymbol color={Colors.Black[500]} className="sidebarLinkSymbol" />
+              </NavigationLink>
+            </NavigationLinksItem>
+            <NavigationLinksItem>
+              <NavigationLink icon={<CalamarSymbol />} to="https://calamar.app/joystream">
                 Explorer
                 <LinkSymbol color={Colors.Black[500]} className="sidebarLinkSymbol" />
               </NavigationLink>
@@ -191,6 +196,11 @@ const NavigationLinks = styled.ul`
   overflow: hidden;
   overflow-y: scroll;
   ${RemoveScrollbar};
+
+  ${LinkSymbolStyle} {
+    position: absolute;
+    right: ${NAVIGATION_LINK_GAP}px;
+  }
 `
 
 const NavigationLinksItem = styled.li`

packages/ui/src/common/components/icons/symbols/CalamarSymbol.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import { Icon } from '../Icon'
+
+export function CalamarSymbol() {
+  return (
+    <Icon viewBox="160 170 360 540">
+      <path
+        fill="currentColor"
+        d="M502.51,611c-26.94-21.89-42.34-37.4-18.27-66.28C556,458.54,423,315.75,398.38,289.2c13.77,3.93,47.75,30.29,54.64,38.27,10.71-8.35,43.43-23,33.81-35.48C404,184.19,340.71,173.74,340.71,173.74S277.46,184.19,194.59,292c-9.62,12.51,23.1,27.13,33.82,35.48,6.88-8,40.86-34.34,54.63-38.27-24.59,26.55-157.64,169.34-85.85,255.48,24.06,28.88,8.67,44.39-18.28,66.28-27.84,22.62-.12,66.23,41.69,22.92,44.2-45.79,74.87-22.89,43.81,24.49-27.79,42.4,19.31,70.19,40.65,16.91C319,640.56,319,609,340.71,608.78c21.72.17,21.75,31.78,35.65,66.5,21.34,53.28,68.45,25.49,40.66-16.91-31.07-47.38-.4-70.28,43.8-24.49C502.63,677.19,530.35,633.58,502.51,611Z"
+      />
+      <path d="M270.62,457.92a45.36,45.36,0,1,1-45.35,45.35,45.4,45.4,0,0,1,45.35-45.35m0-12A57.36,57.36,0,1,0,328,503.27a57.35,57.35,0,0,0-57.35-57.35Z" />
+      <circle cx="270.62" cy="503.27" r="37.89" />
+      <path d="M410.89,457.92a45.36,45.36,0,1,1-45.35,45.35,45.4,45.4,0,0,1,45.35-45.35m0-12a57.36,57.36,0,1,0,57.35,57.35,57.35,57.35,0,0,0-57.35-57.35Z" />
+      <circle cx="410.89" cy="503.27" r="37.89" />
+    </Icon>
+  )
+}

packages/ui/src/common/components/icons/symbols/index.ts

@@ -9,3 +9,5 @@ export * from './VotingSymbol'
 export * from './LockSymbol'
 export * from './BountyEntrySymbol'
 export * from './CherrySymbol'
+export * from './CalamarSymbol'
+export * from './PolkadotSymbol'

packages/ui/src/common/components/page/Sidebar/NavigationLink.tsx

@@ -99,7 +99,7 @@ const ActivePageIndicator = styled(motion.div)`
   }
 `
 
-const NAVIGATION_LINK_GAP = 16
+export const NAVIGATION_LINK_GAP = 16
 
 const NavigationItemLinkChildren = styled.div`
   display: grid;