Skip to content

Commit 85936cd

Browse files
greenlucidgreenlucid
authored
Merge pull request #270 from kleros/fix/footer-explorer-link
Fix/footer explorer link
2 parents 8b42628 + af28294 commit 85936cd

File tree

8 files changed

+371
-8
lines changed

8 files changed

+371
-8
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@
2323
"@kleros/erc-792": "^4.0.1",
2424
"@kleros/gtcr-encoder": "^1.6.1",
2525
"@kleros/kleros": "^0.1.5",
26-
"@kleros/react-components": "^1.0.0",
2726
"@kleros/tcr": "^2.0.0",
2827
"@loadable/component": "^5.10.1",
2928
"@walletconnect/qrcode-modal": "^1.0.0-beta.35",

‎src/bootstrap/app.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react'
22
import { BrowserRouter } from 'react-router-dom'
33
import { Helmet } from 'react-helmet'
4-
import { Footer } from '@kleros/react-components'
4+
import Footer from '../components/footer.tsx'
55
import styled from 'styled-components/macro'
66
import Web3Provider from 'web3-react'
77
import { Layout } from 'antd'
@@ -93,7 +93,7 @@ const App = () => {
9393
</Layout>
9494
</StyledLayout>
9595
<FooterWrapper>
96-
<Footer appName="Kleros · Curate" />
96+
<Footer />
9797
</FooterWrapper>
9898
<WalletModal connectors={connectors} />
9999
<WelcomeModal />

‎src/components/contract-explorer-url.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import React from 'react'
2+
import styled from 'styled-components/macro'
3+
import { getAddressPage } from 'utils/network-utils'
4+
5+
const StyledIcon = styled.svg`
6+
height: 1.2rem;
7+
width: auto;
8+
vertical-align: text-bottom;
9+
margin-left: 0.3rem;
10+
11+
.main-stop {
12+
stop-color: #863fe5d9;
13+
}
14+
.alt-stop {
15+
stop-color: #4d00b4d9;
16+
}
17+
path {
18+
fill: url(#gradient);
19+
}
20+
`
21+
22+
const StyledLink = styled.a`
23+
margin-left: 1rem;
24+
display: flex;
25+
align-items: center;
26+
`
27+
28+
const ContractExplorerUrl: React.FC<{
29+
networkId: number
30+
contractAddress: string
31+
}> = ({ networkId, contractAddress }) => {
32+
const url = `${getAddressPage({
33+
networkId,
34+
address: contractAddress
35+
})}#code`
36+
return (
37+
<StyledLink
38+
href={url}
39+
style={{ textDecoration: 'underline', color: '#4d00b473' }}
40+
target="_blank"
41+
rel="noopener noreferrer"
42+
>
43+
<StyledIcon
44+
xmlns="http://www.w3.org/2000/svg"
45+
viewBox="0 0 293.775 293.667"
46+
>
47+
<linearGradient id="gradient">
48+
<stop className="main-stop" offset="0%" />
49+
<stop className="alt-stop" offset="100%" />
50+
</linearGradient>
51+
<g
52+
id="etherscan-logo-light-circle"
53+
transform="translate(-219.378 -213.333)"
54+
>
55+
<path
56+
id="Path_1"
57+
data-name="Path 1"
58+
d="M280.433,353.152A12.45,12.45,0,0,1,292.941,340.7l20.737.068a12.467,12.467,0,0,1,12.467,12.467v78.414c2.336-.692,5.332-1.43,8.614-2.2a10.389,10.389,0,0,0,8.009-10.11V322.073a12.469,12.469,0,0,1,12.467-12.47h20.779a12.47,12.47,0,0,1,12.467,12.47v90.276s5.2-2.106,10.269-4.245a10.408,10.408,0,0,0,6.353-9.577V290.9a12.466,12.466,0,0,1,12.465-12.467h20.779A12.468,12.468,0,0,1,450.815,290.9v88.625c18.014-13.055,36.271-28.758,50.759-47.639a20.926,20.926,0,0,0,3.185-19.537,146.6,146.6,0,0,0-136.644-99.006c-81.439-1.094-148.744,65.385-148.736,146.834a146.371,146.371,0,0,0,19.5,73.45,18.56,18.56,0,0,0,17.707,9.173c3.931-.346,8.825-.835,14.643-1.518a10.383,10.383,0,0,0,9.209-10.306V353.152"
59+
transform="translate(0 0)"
60+
/>
61+
<path
62+
id="Path_2"
63+
data-name="Path 2"
64+
d="M244.417,398.641A146.808,146.808,0,0,0,477.589,279.9c0-3.381-.157-6.724-.383-10.049-53.642,80-152.686,117.405-232.79,128.793"
65+
transform="translate(35.564 80.269)"
66+
/>
67+
</g>
68+
</StyledIcon>
69+
</StyledLink>
70+
)
71+
}
72+
export default ContractExplorerUrl

‎src/components/footer.tsx‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import React from 'react'
2+
import styled from 'styled-components'
3+
import icons from './social-icons'
4+
5+
const SOCIAL_NAV = [
6+
{
7+
icon: icons.github,
8+
href: 'https://github.com/kleros'
9+
},
10+
{
11+
icon: icons.slack,
12+
href: 'https://slack.kleros.io/'
13+
},
14+
{
15+
icon: icons.reddit,
16+
href: 'https://reddit.com/r/Kleros/'
17+
},
18+
{
19+
icon: icons.twitter,
20+
href: 'https://twitter.com/kleros_io?'
21+
},
22+
{
23+
icon: icons.blog,
24+
href: 'https://blog.kleros.io/'
25+
},
26+
{
27+
icon: icons.telegram,
28+
href: 'https://t.me/kleros'
29+
},
30+
{
31+
icon: icons.linkedin,
32+
href: 'https://www.linkedin.com/company/kleros/'
33+
}
34+
]
35+
36+
const Footer = () => (
37+
<StyledFooter>
38+
<a
39+
href="https://kleros.io"
40+
className="g-kleros_footer__anchor"
41+
style={{ display: 'flex', alignItems: 'center' }}
42+
>
43+
{icons.securedByKleros}
44+
</a>
45+
<div className="g-kleros_footer__help">
46+
<SocialLink href="https://t.me/kleros">
47+
I need help {icons.help}
48+
</SocialLink>
49+
</div>
50+
<div className="g-kleros_footer__social">
51+
{SOCIAL_NAV.map(item => (
52+
<SocialLink href={item.href}>{item.icon}</SocialLink>
53+
))}
54+
</div>
55+
</StyledFooter>
56+
)
57+
58+
export default Footer
59+
60+
const SocialLink: React.FC<{
61+
children: React.ReactNode
62+
href: string
63+
}> = ({ children, href }) => (
64+
<a
65+
className="g-kleros_footer__anchor"
66+
href={href}
67+
rel="noopener noreferrer"
68+
target="_blank"
69+
>
70+
{children}
71+
</a>
72+
)
73+
74+
const StyledFooter = styled.footer`
75+
font-family: Roboto, sans-serif;
76+
font-size: 1rem;
77+
width: 100%;
78+
height: 4rem;
79+
display: grid;
80+
background: #4d00b4;
81+
grid: 1fr / [footer-start] 1fr [banner] 18fr [help] 12fr 1fr [footer-end];
82+
align-items: center;
83+
justify-items: center;
84+
85+
.g-kleros_footer__anchor {
86+
color: white;
87+
text-decoration: none;
88+
margin-left: 1rem;
89+
}
90+
91+
.g-kleros_footer__help {
92+
display: grid;
93+
grid-column: help;
94+
justify-self: end;
95+
color: white;
96+
}
97+
98+
.g-kleros_footer__social {
99+
display: none;
100+
grid: 1fr / 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
101+
grid-column: social;
102+
justify-self: stretch;
103+
align-items: center;
104+
text-align: center;
105+
}
106+
@media (min-width: 992px) {
107+
.g-kleros_footer {
108+
grid: 1fr / [footer-start] 1fr [banner] 20fr [title] 20fr [help] 8fr 2fr [social] 10fr 1fr [footer-end];
109+
}
110+
111+
.g-kleros_footer__title {
112+
display: initial;
113+
}
114+
115+
.g-kleros_footer__social {
116+
display: grid;
117+
margin-right: 1.8rem;
118+
}
119+
}
120+
`

0 commit comments

Comments
 (0)