Skip to content

Commit 6f62962

Browse files
authored
Merge pull request #1975 from streamr-dev/symbolic-chain-name-to-chain-key
Replace "chain symbolic name" with "chain key"
2 parents 7a60e3c + aaef35b commit 6f62962

33 files changed

+200
-217
lines changed

src/components/ActionBar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import Tabs, { Tab } from '~/shared/components/Tabs'
2020
import { useWalletAccount } from '~/shared/stores/wallet'
2121
import { TheGraph } from '~/shared/types'
2222
import { ProjectFilter } from '~/types'
23-
import { useCurrentChainSymbolicName } from '~/utils/chains'
23+
import { useCurrentChainKey } from '~/utils/chains'
2424
import { Route as R, routeOptions } from '~/utils/routes'
2525

2626
export enum TabOption {
@@ -73,7 +73,7 @@ const UnstyledActionBar = ({
7373

7474
const navigate = useNavigate()
7575

76-
const chainName = useCurrentChainSymbolicName()
76+
const chainKey = useCurrentChainKey()
7777

7878
return (
7979
<ActionBarContainer {...props}>
@@ -93,7 +93,7 @@ const UnstyledActionBar = ({
9393
<Tabs
9494
selection={scope}
9595
onSelectionChange={(id) => {
96-
navigate(R.projects(routeOptions(chainName, { tab: id })))
96+
navigate(R.projects(routeOptions(chainKey, { tab: id })))
9797
}}
9898
>
9999
<Tab id={TabOption.Any}>All projects</Tab>

src/components/ActionBars/AboutSponsorship.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import { SponsorshipPaymentTokenName } from '~/components/SponsorshipPaymentToke
1414
import { ExternalLinkIcon } from '~/icons'
1515
import { Sponsorship } from '~/parsers/Sponsorship'
1616
import { truncateStreamName } from '~/shared/utils/text'
17-
import { useCurrentChainSymbolicName } from '~/utils/chains'
17+
import { useCurrentChainKey } from '~/utils/chains'
1818
import { Route as R, routeOptions } from '~/utils/routes'
1919

2020
interface AboutSponsorshipProps {
@@ -24,7 +24,7 @@ interface AboutSponsorshipProps {
2424
export function AboutSponsorship({ sponsorship }: AboutSponsorshipProps) {
2525
const { streamId } = sponsorship
2626

27-
const chainName = useCurrentChainSymbolicName()
27+
const chainKey = useCurrentChainKey()
2828

2929
return (
3030
<DefaultSimpleDropdownMenu>
@@ -35,7 +35,7 @@ export function AboutSponsorship({ sponsorship }: AboutSponsorshipProps) {
3535
<strong>{truncateStreamName(streamId)}</strong>
3636
<div>
3737
<Link
38-
to={R.stream(streamId, routeOptions(chainName))}
38+
to={R.stream(streamId, routeOptions(chainKey))}
3939
target="_blank"
4040
>
4141
<ExternalLinkIcon />

src/components/ActionBars/SponsorshipActionBar.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import SvgIcon from '~/shared/components/SvgIcon'
2626
import { useWalletAccount } from '~/shared/stores/wallet'
2727
import { COLORS } from '~/shared/utils/styled'
2828
import { truncate, truncateStreamName } from '~/shared/utils/text'
29-
import { useCurrentChainId, useCurrentChainSymbolicName } from '~/utils/chains'
29+
import { useCurrentChainId, useCurrentChainKey } from '~/utils/chains'
3030
import { Route as R, routeOptions } from '~/utils/routes'
3131
import { isSponsorshipFundedByOperator } from '~/utils/sponsorships'
3232
import { AbstractActionBar } from './AbstractActionBar'
@@ -73,11 +73,11 @@ export function SponsorshipActionBar({ sponsorship }: SponsorshipActionBarProps)
7373

7474
const chainId = useCurrentChainId()
7575

76-
const chainName = useCurrentChainSymbolicName()
76+
const chainKey = useCurrentChainKey()
7777

7878
return (
7979
<AbstractActionBar
80-
fallbackBackButtonUrl={R.sponsorships(routeOptions(chainName))}
80+
fallbackBackButtonUrl={R.sponsorships(routeOptions(chainKey))}
8181
title={
8282
streamId ? (
8383
truncateStreamName(streamId, 30)

src/components/ChainSelector.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import UnstyledNetworkIcon from '~/shared/components/NetworkIcon'
99
import SvgIcon from '~/shared/components/SvgIcon'
1010
import { COLORS, LAPTOP } from '~/shared/utils/styled'
1111
import { StreamDraft } from '~/stores/streamDraft'
12-
import { getSymbolicChainName, useCurrentChain } from '~/utils/chains'
12+
import { getChainKey, useCurrentChain } from '~/utils/chains'
1313

1414
type MenuItemProps = {
1515
chain: Chain
@@ -45,14 +45,14 @@ const Menu = ({ chains, selectedChain, toggle }: MenuProps) => {
4545
onClick={() => {
4646
toggle(false)
4747

48-
const chainName = getSymbolicChainName(c.id)
48+
const chainKey = getChainKey(c.id)
4949

5050
setSearchParams((prev) => {
5151
const { chain: _, ...rest } = Object.fromEntries(prev)
5252

53-
return chainName === defaultChainKey
53+
return chainKey === defaultChainKey
5454
? rest
55-
: { ...rest, chain: chainName }
55+
: { ...rest, chain: chainKey }
5656
})
5757
}}
5858
/>

src/components/Footer.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
1-
import React from 'react'
2-
import styled from 'styled-components'
31
import {
4-
Footer as UnstyledLayoutFooter,
52
FooterColumn,
3+
SocialChannels,
64
FooterColumns as UnstyledFooterColumns,
5+
Footer as UnstyledLayoutFooter,
76
MadeBy as UnstyledMadeBy,
8-
SocialChannels,
97
} from '@streamr/streamr-layout'
8+
import React from 'react'
9+
import styled from 'styled-components'
1010
import { COLORS } from '~/shared/utils/styled'
11+
import { useCurrentChainKey } from '~/utils/chains'
1112
import { Route as R, routeOptions } from '~/utils/routes'
12-
import { useCurrentChainSymbolicName } from '~/utils/chains'
1313

1414
const MadeBy = styled(UnstyledMadeBy)`
1515
padding: 0 0 32px;
@@ -30,7 +30,7 @@ const FooterColumns = styled(UnstyledFooterColumns)`
3030
`
3131

3232
const Footer = ({ topBorder = false }) => {
33-
const chainName = useCurrentChainSymbolicName()
33+
const chainKey = useCurrentChainKey()
3434

3535
return (
3636
<LayoutFooter>
@@ -56,7 +56,7 @@ const Footer = ({ topBorder = false }) => {
5656
</FooterColumn>
5757
<FooterColumn title="Apps">
5858
<a href={R.networkExplorer()}>Network Explorer</a>
59-
<a href={R.hub(routeOptions(chainName))}>Hub</a>
59+
<a href={R.hub(routeOptions(chainKey))}>Hub</a>
6060
</FooterColumn>
6161
<FooterColumn title="Contact">
6262
<a href={R.contactGeneral()}>General</a>

src/components/Nav/NetworkAccordion.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { Link, useLocation } from 'react-router-dom'
33
import styled, { css } from 'styled-components'
44
import SvgIcon from '~/shared/components/SvgIcon'
55
import { COLORS, MEDIUM, REGULAR } from '~/shared/utils/styled'
6+
import { useCurrentChainKey } from '~/utils/chains'
67
import { Route as R, routeOptions } from '~/utils/routes'
7-
import { useCurrentChainSymbolicName } from '~/utils/chains'
88
import { NavLink, NavbarLinkMobile } from './Nav.styles'
99
import { NetworkNavItems, isNetworkTabActive } from './NetworkDropdown'
1010

@@ -13,7 +13,7 @@ export function NetworkAccordion() {
1313

1414
const [isOpen, toggle] = useReducer((x) => !x, false)
1515

16-
const chainName = useCurrentChainSymbolicName()
16+
const chainKey = useCurrentChainKey()
1717

1818
return (
1919
<>
@@ -23,7 +23,7 @@ export function NetworkAccordion() {
2323
>
2424
<NavLink
2525
as={Link}
26-
to={R.networkOverview(routeOptions(chainName))}
26+
to={R.networkOverview(routeOptions(chainKey))}
2727
onClick={(e) => {
2828
e.preventDefault()
2929

@@ -47,7 +47,7 @@ export function NetworkAccordion() {
4747
return (
4848
<NetworkMobileLink
4949
{...rest}
50-
to={linkFn(routeOptions(chainName))}
50+
to={linkFn(routeOptions(chainKey))}
5151
key={title}
5252
>
5353
<NetworkNavElement>

src/components/Nav/NetworkDropdown.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { NavLink, NavbarLinkDesktop } from '~/components/Nav/Nav.styles'
55
import { DefaultSimpleDropdownMenu, SimpleDropdown } from '~/components/SimpleDropdown'
66
import SvgIcon from '~/shared/components/SvgIcon'
77
import { COLORS } from '~/shared/utils/styled'
8-
import { useCurrentChainSymbolicName } from '~/utils/chains'
8+
import { useCurrentChainKey } from '~/utils/chains'
99
import { Route as R, routeOptions } from '~/utils/routes'
1010

1111
export function Dropdown() {
@@ -39,7 +39,7 @@ export function Dropdown() {
3939
}, 250)
4040
}
4141

42-
const chainName = useCurrentChainSymbolicName()
42+
const chainKey = useCurrentChainKey()
4343

4444
return (
4545
<NavbarLinkDesktop highlight={isOpen || isNetworkTabActive(pathname)}>
@@ -54,7 +54,7 @@ export function Dropdown() {
5454
<DropdownItem
5555
$active={pathname.startsWith(i.linkFn())}
5656
key={i.title}
57-
to={i.linkFn(routeOptions(chainName))}
57+
to={i.linkFn(routeOptions(chainKey))}
5858
onFocus={() => void show(toggle)}
5959
onClick={() => void hide(toggle, { immediately: true })}
6060
>
@@ -68,7 +68,7 @@ export function Dropdown() {
6868
{(toggle) => (
6969
<NavLink
7070
as={Link}
71-
to={R.networkOverview(routeOptions(chainName))}
71+
to={R.networkOverview(routeOptions(chainKey))}
7272
onFocus={() => void show(toggle)}
7373
onBlur={() => void hide(toggle)}
7474
onMouseEnter={() => void show(toggle)}

src/components/Nav/index.tsx

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,19 @@
1+
import { Button, HamburgerButton, Logo, NavOverlay } from '@streamr/streamr-layout'
12
import React, { FunctionComponent, HTMLAttributes } from 'react'
3+
import { Link, useLocation, useNavigate } from 'react-router-dom'
24
import styled from 'styled-components'
3-
import { useLocation, Link, useNavigate } from 'react-router-dom'
4-
import { Button, HamburgerButton, Logo, NavOverlay } from '@streamr/streamr-layout'
5-
import { DESKTOP, TABLET } from '~/shared/utils/styled'
6-
import SvgIcon from '~/shared/components/SvgIcon'
7-
import { truncate } from '~/shared/utils/text'
5+
import { ChainSelector as UnstyledChainSelector } from '~/components/ChainSelector'
6+
import { useMediaQuery } from '~/hooks'
7+
import { useOperatorForWalletQuery } from '~/hooks/operators'
88
import { connectModal } from '~/modals/ConnectModal'
9+
import SvgIcon from '~/shared/components/SvgIcon'
910
import { useEns, useWalletAccount } from '~/shared/stores/wallet'
10-
import toast from '~/utils/toast'
11-
import { useOperatorForWalletQuery } from '~/hooks/operators'
11+
import { DESKTOP, TABLET } from '~/shared/utils/styled'
12+
import { truncate } from '~/shared/utils/text'
1213
import { saveOperator } from '~/utils'
13-
import { useMediaQuery } from '~/hooks'
14-
import { ChainSelector as UnstyledChainSelector } from '~/components/ChainSelector'
15-
import { useCurrentChainId } from '~/utils/chains'
14+
import { useCurrentChainId, useCurrentChainKey } from '~/utils/chains'
1615
import { Route as R, routeOptions } from '~/utils/routes'
17-
import { useCurrentChainSymbolicName } from '~/utils/chains'
18-
import { Avatarless, Name, Username } from './User'
16+
import toast from '~/utils/toast'
1917
import {
2018
Avatar,
2119
LogoLink,
@@ -36,8 +34,9 @@ import {
3634
UserInfoMobile,
3735
WalletAddress,
3836
} from './Nav.styles'
39-
import { Dropdown } from './NetworkDropdown'
4037
import { NetworkAccordion } from './NetworkAccordion'
38+
import { Dropdown } from './NetworkDropdown'
39+
import { Avatarless, Name, Username } from './User'
4140

4241
const UnstyledDesktopNav: FunctionComponent = (props) => {
4342
const { pathname } = useLocation()
@@ -56,7 +55,7 @@ const UnstyledDesktopNav: FunctionComponent = (props) => {
5655

5756
const chainId = useCurrentChainId()
5857

59-
const chainName = useCurrentChainSymbolicName()
58+
const chainKey = useCurrentChainKey()
6059

6160
return (
6261
<div {...props} data-testid={'desktop-nav'}>
@@ -71,14 +70,14 @@ const UnstyledDesktopNav: FunctionComponent = (props) => {
7170
<div />
7271
<NavbarItem>
7372
<NavbarLinkDesktop highlight={pathname.startsWith(R.projects())}>
74-
<NavLink as={Link} to={R.projects(routeOptions(chainName))}>
73+
<NavLink as={Link} to={R.projects(routeOptions(chainKey))}>
7574
Projects
7675
</NavLink>
7776
</NavbarLinkDesktop>
7877
</NavbarItem>
7978
<NavbarItem>
8079
<NavbarLinkDesktop highlight={pathname.startsWith(R.streams())}>
81-
<NavLink as={Link} to={R.streams(routeOptions(chainName))}>
80+
<NavLink as={Link} to={R.streams(routeOptions(chainKey))}>
8281
Streams
8382
</NavLink>
8483
</NavbarLinkDesktop>
@@ -138,7 +137,7 @@ const UnstyledDesktopNav: FunctionComponent = (props) => {
138137
navigate(
139138
R.operator(
140139
operator.id,
141-
routeOptions(chainName),
140+
routeOptions(chainKey),
142141
),
143142
)
144143
}}
@@ -202,7 +201,7 @@ const UnstyledMobileNav: FunctionComponent<{ className?: string }> = ({ classNam
202201

203202
const { pathname } = useLocation()
204203

205-
const chainName = useCurrentChainSymbolicName()
204+
const chainKey = useCurrentChainKey()
206205

207206
return (
208207
<NavOverlay className={className}>
@@ -226,12 +225,12 @@ const UnstyledMobileNav: FunctionComponent<{ className?: string }> = ({ classNam
226225
</UserInfoMobile>
227226
)}
228227
<NavbarLinkMobile highlight={pathname.startsWith(R.projects())}>
229-
<NavLink as={Link} to={R.projects(routeOptions(chainName))}>
228+
<NavLink as={Link} to={R.projects(routeOptions(chainKey))}>
230229
Projects
231230
</NavLink>
232231
</NavbarLinkMobile>
233232
<NavbarLinkMobile highlight={pathname.startsWith(R.streams())}>
234-
<NavLink as={Link} to={R.streams(routeOptions(chainName))}>
233+
<NavLink as={Link} to={R.streams(routeOptions(chainKey))}>
235234
Streams
236235
</NavLink>
237236
</NavbarLinkMobile>

src/components/QueriedSponsorshipsTable.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ import { Sponsorship } from '~/parsers/Sponsorship'
2020
import { ScrollTableCore } from '~/shared/components/ScrollTable/ScrollTable'
2121
import { useWalletAccount } from '~/shared/stores/wallet'
2222
import { OrderDirection } from '~/types'
23-
import { useCurrentChainId, useCurrentChainSymbolicName } from '~/utils/chains'
23+
import { useCurrentChainId, useCurrentChainKey } from '~/utils/chains'
2424
import { Route as R, routeOptions } from '~/utils/routes'
2525
import { isSponsorshipFundedByOperator } from '~/utils/sponsorships'
2626

@@ -53,7 +53,7 @@ export function QueriedSponsorshipsTable({
5353

5454
const chainId = useCurrentChainId()
5555

56-
const chainName = useCurrentChainSymbolicName()
56+
const chainKey = useCurrentChainKey()
5757

5858
const fundSponsorship = useFundSponsorshipCallback()
5959

@@ -223,7 +223,7 @@ export function QueriedSponsorshipsTable({
223223
noDataFirstLine={noDataFirstLine}
224224
noDataSecondLine={noDataSecondLine}
225225
linkMapper={(element) =>
226-
R.sponsorship(element.id, routeOptions(chainName))
226+
R.sponsorship(element.id, routeOptions(chainKey))
227227
}
228228
/>
229229
{query.hasNextPage && (

src/components/QueriedStreamsTable.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
} from '~/hooks/streams'
1313
import { ScrollTableCore } from '~/shared/components/ScrollTable/ScrollTable'
1414
import { OrderDirection } from '~/types'
15-
import { useCurrentChainId, useCurrentChainSymbolicName } from '~/utils/chains'
15+
import { useCurrentChainId, useCurrentChainKey } from '~/utils/chains'
1616
import { Route as R, routeOptions } from '~/utils/routes'
1717

1818
interface Props {
@@ -42,7 +42,7 @@ export function QueriedStreamsTable({
4242

4343
const chainId = useCurrentChainId()
4444

45-
const chainName = useCurrentChainSymbolicName()
45+
const chainKey = useCurrentChainKey()
4646

4747
const indexerQueryErrored = query.isError && isIndexerColumn(chainId, orderBy)
4848

@@ -141,7 +141,7 @@ export function QueriedStreamsTable({
141141
valueMapper: ({ subscriberCount = '∞' }) => subscriberCount,
142142
},
143143
]}
144-
linkMapper={(element) => R.stream(element.id, routeOptions(chainName))}
144+
linkMapper={(element) => R.stream(element.id, routeOptions(chainKey))}
145145
/>
146146
{query.hasNextPage && (
147147
<LoadMoreButton

0 commit comments

Comments
 (0)