GlcoinCore/squeaknode
1
0
Fork 0
mirror of https://github.com/yzernik/squeaknode.git synced 2026-08-13 12:33:25 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Copy external address to clipboard (#1380)

Browse source 
* Copy external address to clipboard, and set maxwidth to accommodate onion address

* Add description and tooltip

* edit description
This commit is contained in:
Abhishek Shandilya 2021-09-22 16:14:56 -04:00 • committed by GitHub
parent 4dce048f97
commit 02fe4a8ae3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

5
frontend/package.json
View file

@ -6,12 +6,16 @@
"websocket-extensions": "^0.1.4"
},
"dependencies": {
"@emotion/react": "^11.4.1",
"@emotion/styled": "^11.3.0",
"@grpc/grpc-js": "~1.1.8",
"@grpc/proto-loader": "~0.5.4",
"@material-ui/core": "^4.3.0",
"@material-ui/icons": "^4.2.1",
"@material-ui/lab": "^4.0.0-alpha.57",
"@material-ui/styles": "^4.3.0",
"@mui/icons-material": "^5.0.0",
"@mui/material": "^5.0.0",
"apexcharts": "^3.22.2",
"async": "~1.5.2",
"classnames": "^2.2.6",
@ -23,6 +27,7 @@
"protobufjs": "^6.10.2",
"react": "^16.14.0",
"react-apexcharts": "^1.3.3",
"react-copy-to-clipboard": "^5.0.4",
"react-dom": "^16.14.0",
"react-google-maps": "^9.4.5",
"react-router-dom": "^5.0.1",

42
frontend/src/components/ShowExternalAddressDialog/ShowExternalAddressDialog.js
View file

@ -3,11 +3,11 @@ import {
Dialog,
DialogTitle,
DialogContent,
TextField,
Button,
Tooltip,
} from '@material-ui/core';
// styles
import useStyles from './styles';
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import {CopyToClipboard} from 'react-copy-to-clipboard';
import {
getExternalAddressRequest,
@ -18,7 +18,6 @@ export default function ShowExternalAddressDialog({
handleClose,
...props
}) {
const classes = useStyles();
const [externalAddress, setExternalAddress] = useState(null);
@ -40,29 +39,26 @@ export default function ShowExternalAddressDialog({
}
function DisplayExternalAddress() {
const address = externalAddress && `${externalAddress.getHost()}:${externalAddress.getPort()}`;
return (
<TextField
id="standard-textarea"
label="external-address"
required
autoFocus
value={externalAddress && `${externalAddress.getHost()}:${externalAddress.getPort()}`}
fullWidth
inputProps={{
readOnly: true,
}}
/>
<CopyToClipboard text={address}>
<Tooltip title="Copy" placement="right">
<Button variant="outlined" style={{width: "100%"}}>
<div style={{float: "left"}}>{address}</div>
<ContentCopyIcon/>
</Button>
</Tooltip>
</CopyToClipboard>
);
}
return (
<Dialog open={open} onRendered={load} onClose={cancel} onClick={ignore} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Show External Address</DialogTitle>
<form className={classes.root} noValidate autoComplete="off">
<DialogContent>
{DisplayExternalAddress()}
</DialogContent>
</form>
<Dialog open={open} onRendered={load} onClose={cancel} onClick={ignore} aria-labelledby="form-dialog-title" maxWidth="lg">
<DialogTitle id="form-dialog-title">Your squeaknode external address</DialogTitle>
<DialogContent>
<p>Other squeaknodes can connect to your node using this address to exchange squeaks and offers.</p>
{DisplayExternalAddress()}
</DialogContent>
</Dialog>
);
}