92141ad · bridge · git.iko.soy

src/assets/copy.svgnew file+7

@@ -0,0 +1,7 @@

1+<svg class="svg-icon" viewBox="0 0 20 20">

2+ <path fill="black" d="M18.378,1.062H3.855c-0.309,0-0.559,0.25-0.559,0.559c0,0.309,0.25,0.559,0.559,0.559h13.964v13.964

3+ c0,0.309,0.25,0.559,0.559,0.559c0.31,0,0.56-0.25,0.56-0.559V1.621C18.938,1.312,18.688,1.062,18.378,1.062z M16.144,3.296H1.621

4+ c-0.309,0-0.559,0.25-0.559,0.559v14.523c0,0.31,0.25,0.56,0.559,0.56h14.523c0.309,0,0.559-0.25,0.559-0.56V3.855

5+ C16.702,3.546,16.452,3.296,16.144,3.296z M15.586,17.262c0,0.31-0.25,0.558-0.56,0.558H2.738c-0.309,0-0.559-0.248-0.559-0.558

6+ V4.972c0-0.309,0.25-0.559,0.559-0.559h12.289c0.31,0,0.56,0.25,0.56,0.559V17.262z"></path>

7+</svg>

src/components/CopiableAddress.js+3−18

@@ -1,23 +1,8 @@

1import React from 'react';

2import cn from 'classnames';

3

4−import useCopiable from 'lib/useCopiable';

4+import CopiableWithTooltip from './CopiableWithTooltip';

5

6−export default function CopiableAddress({

6+export default function CopiableAddress({ className, ...rest }) {

7− as: As = 'span',

8− children,

9− className,

10−}) {

11− const [doCopy, didCopy] = useCopiable(children);

12−

13− return (

14− <As

15− onClick={doCopy}

16− className={cn(className, 'mono', {

7+ return <CopiableWithTooltip className={cn(className, 'mono')} {...rest} />;

17− pointer: !didCopy,

18− green3: didCopy,

19− })}>

20− {children}

21− </As>

22− );

23}

8}

src/components/CopiableWithTooltip.jsnew file+29

@@ -0,0 +1,29 @@

1+import React from 'react';

2+import cn from 'classnames';

3+import { ReactComponent as Copy } from 'assets/copy.svg';

4+

5+import useCopiable from 'lib/useCopiable';

6+import WithTooltip from 'components/WithTooltip';

7+

8+export default function CopiableWithTooltip({

9+ as: As = 'span',

10+ text,

11+ children,

12+ className,

13+ ...rest

14+}) {

15+ const [doCopy, didCopy] = useCopiable(text || children);

16+

17+ return (

18+ <As className={cn(className, 'nowrap')} {...rest}>

19+ {children}

20+ <WithTooltip content={didCopy ? 'Copied!' : 'Copy'}>

21+ <Copy

22+ style={{ height: '1em', width: '1em' }}

23+ className="ml1 pointer"

24+ onClick={doCopy}

25+ />

26+ </WithTooltip>

27+ </As>

28+ );

29+}

src/components/WithTooltip.jsnew file+23

@@ -0,0 +1,23 @@

1+import React, { useState, useCallback } from 'react';

2+

3+export default function WithTooltip({ content, children }) {

4+ const [isHovered, setHovered] = useState(false);

5+ const onMouseEnter = useCallback(() => setHovered(true), []);

6+ const onMouseLeave = useCallback(() => setHovered(false), []);

7+

8+ return (

9+ <div

10+ className="rel nowrap inline-block"

11+ onMouseEnter={onMouseEnter}

12+ onMouseLeave={onMouseLeave}>

13+ {children}

14+ {isHovered && (

15+ <div

16+ className="abs mb1 bg-black white ph4 pv2 r4"

17+ style={{ bottom: '100%' }}>

18+ {content}

19+ </div>

20+ )}

21+ </div>

22+ );

23+}

src/views/Admin/AdminSetProxy.js+6−1

@@ -29,6 +29,7 @@ import {

29} from 'form/validators';

30import BridgeForm from 'form/BridgeForm';

31import FormError from 'form/FormError';

32+import CopiableAddress from 'components/CopiableAddress';

32

33

33const proxyFromDetails = (details, contracts, proxyType) => {

34const proxyFromDetails = (details, contracts, proxyType) => {

34 switch (proxyType) {

35 switch (proxyType) {

@@ -191,7 +192,11 @@ export default function AdminSetProxy() {

191 gray4: !completed && !isProxySet,

192 gray4: !completed && !isProxySet,

192 green3: completed,

193 green3: completed,

193 })}>

194 })}>

194− {isProxySet ? proxyAddress : 'Unset'}

195+ {isProxySet ? (

196+ <CopiableAddress>{proxyAddress}</CopiableAddress>

197+ ) : (

198+ 'Unset'

199+ )}

195 </Flex.Item>

200 </Flex.Item>

196 {!completed && isProxySet && (

201 {!completed && isProxySet && (

197 <Flex.Item

202 <Flex.Item

src/views/Points.js+5−8

@@ -14,13 +14,13 @@ import useIsEclipticOwner from 'lib/useIsEclipticOwner';

14import { useSyncKnownPoints } from 'lib/useSyncPoints';

15import useRejectedIncomingPointTransfers from 'lib/useRejectedIncomingPointTransfers';

16import pluralize from 'lib/pluralize';

17−import useCopiable from 'lib/useCopiable';

18

17

19import View from 'components/View';

18import View from 'components/View';

20import Blinky from 'components/Blinky';

19import Blinky from 'components/Blinky';

21import Passport from 'components/Passport';

20import Passport from 'components/Passport';

22import Footer from 'components/Footer';

21import Footer from 'components/Footer';

23import { ForwardButton } from 'components/Buttons';

22import { ForwardButton } from 'components/Buttons';

23+import CopiableAddress from 'components/CopiableAddress';

24

25const maybeGetResult = (obj, key, defaultValue) =>

26 obj.matchWith({

@@ -163,7 +163,6 @@ export default function Points() {

163 ]);

164

165 const address = need.addressFromWallet(wallet);

166− const [doCopy, didCopy] = useCopiable(address);

167

166

168 const loading = Nothing.hasInstance(controlledPoints);

167 const loading = Nothing.hasInstance(controlledPoints);

169

168

@@ -210,12 +209,10 @@ export default function Points() {

210 return (

209 return (

211 <View pop={pop} inset>

210 <View pop={pop} inset>

212 <Grid>

211 <Grid>

213− <Grid.Item

214− full

215− as={H1}

216− className="f6 mono gray4 mb4 us-none clickable"

212+ <Grid.Item full as={H1} className="f6 mono gray4 mb4 us-none pointer">

217− onClick={doCopy}>

213+ <CopiableAddress text={address}>

218− {`${abbreviateAddress(address)}${didCopy ? ' (copied!)' : ''}`}

214+ {abbreviateAddress(address)}

215+ </CopiableAddress>

219 </Grid.Item>

216 </Grid.Item>

220

217

221 {loading && (

218 {loading && (