@ant-design/icons#QrcodeOutlined JavaScript Examples
The following examples show how to use
@ant-design/icons#QrcodeOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: File.js From getlink-next with MIT License | 5 votes |
|
export default function File({
loading,
list,
handleRemove,
}) {
const { isAdmin, user } = useContext(Context);
const columns = useMemo(() => [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Date',
dataIndex: 'createdAt',
key: 'createdAt',
render: createdAt => new Date(createdAt).toLocaleString(),
},
{
title: '',
key: 'op',
width: 220,
fixed: 'right',
render: (text, record) => (
<div>
<Popover
content={(
<img
alt="loading"
style={{ width: 150, height: 150 }}
src={cdnQrcode(record.key, 'file', isAdmin)}
/>
)}>
<Button style={{ marginLeft: 10 }}>
<QrcodeOutlined />
</Button>
</Popover>
{user && (
<Popconfirm
title="Are you sure to delete this ?"
onConfirm={() => handleRemove(record.objectId)}
>
<Button style={{ marginLeft: 10 }} type="danger">
<DeleteOutlined />
</Button>
</Popconfirm>
)}
<CopyToClipboard text={cdnUrl(record.key, 'file', isAdmin)}
onCopy={() => message.success('Copied successfully')}>
<Button style={{ marginLeft: 10 }} type="primary">Copy</Button>
</CopyToClipboard>
</div>
),
},
], [handleRemove]);
return (
<Table
loading={loading}
dataSource={list}
columns={columns}
pagination={false}
/>
);
}
Example #2
| Source File: Media.js From getlink-next with MIT License | 5 votes |
|
export default function Media({
type,
list,
handleRemove,
loading,
}) {
const { isAdmin, user, isDev } = useContext(Context);
const ref = useRef(null);
const margin = useMargin(ref);
return (
<Spin spinning={loading}>
<div className="card-list" ref={ref}>
{list.map(item => (
<Card
key={item.key}
style={{ margin: `10px ${margin}px` }}
bodyStyle={{
position: 'relative',
// background: type === 'image'
// ? `url(${cdnUrl(item.key, type, isAdmin)}?x-oss-process=image/resize,m_pad,h_181,w_298)`
// : 'unset'
}}
actions={[
<CopyToClipboard key="copy" text={cdnUrl(item.key, type, isAdmin)}
onCopy={() => message.success('Copied successfully')}>
<span>Copy</span>
</CopyToClipboard>,
type === 'image' && <CopyToClipboard key="copy_md" text={`})`}
onCopy={() => message.success('Copied successfully')}>
<span>Copy MD</span>
</CopyToClipboard>,
(user || isDev) &&
<Popconfirm
title="Are you sure to delete this?"
onConfirm={() => handleRemove(item.objectId)}
>
<span style={{ color: 'red' }}>
Delete
</span>
</Popconfirm>,
<Popover content={(
<img
style={{ width: 150, height: 150 }}
src={cdnQrcode(item.key, type, !user)}
/>
)}>
<QrcodeOutlined />
</Popover>
].filter(Boolean)}
>
{type === 'video' && (
<Player
playsInline
width={298}
height={181}
fluid={false}
poster={`${cdnUrl(item.key, type, isAdmin)}?x-oss-process=video/snapshot,t_0,h_181,w_298,ar_auto`}
src={cdnUrl(item.key, type, isAdmin)}
/>
)}
{type === 'image' && (
<img src={`${cdnUrl(item.key, type, isAdmin)}${ext(item.key) === '.svg' ? '' : '?x-oss-process=image/resize,m_pad,h_181,w_298'}`} />
)}
<Meta
title={item.name}
description={new Date(item.createdAt).toLocaleString()}
/>
</Card>
))}
</div>
</Spin>
);
}
Example #3
| Source File: AddressInput.jsx From Tai-Shang-NFT-Wallet with MIT License | 4 votes |
|
// probably we need to change value={toAddress} to address={toAddress}
/*
~ What it does? ~
Displays an address input with QR scan option
~ How can I use? ~
<AddressInput
autoFocus
ensProvider={mainnetProvider}
placeholder="Enter address"
value={toAddress}
onChange={setToAddress}
/>
~ Features ~
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide placeholder="Enter address" value for the input
- Value of the address input is stored in value={toAddress}
- Control input change by onChange={setToAddress}
or onChange={address => { setToAddress(address);}}
*/
export default function AddressInput(props) {
const [value, setValue] = useState(props.value);
const [scan, setScan] = useState(false);
const currentValue = typeof props.value !== "undefined" ? props.value : value;
const ens = useLookupAddress(props.ensProvider, currentValue);
const scannerButton = (
<div
style={{ marginTop: 4, cursor: "pointer" }}
onClick={() => {
setScan(!scan);
}}
>
<Badge count={<CameraOutlined style={{ fontSize: 9 }} />}>
<QrcodeOutlined style={{ fontSize: 18 }} />
</Badge>{" "}
Scan
</div>
);
const { ensProvider, onChange } = props;
const updateAddress = useCallback(
async newValue => {
if (typeof newValue !== "undefined") {
let address = newValue;
if (address.indexOf(".eth") > 0 || address.indexOf(".xyz") > 0) {
try {
const possibleAddress = await ensProvider.resolveName(address);
if (possibleAddress) {
address = possibleAddress;
}
// eslint-disable-next-line no-empty
} catch (e) {}
}
setValue(address);
if (typeof onChange === "function") {
onChange(address);
}
}
},
[ensProvider, onChange],
);
const scanner = scan ? (
<div
style={{
zIndex: 256,
position: "absolute",
left: 0,
top: 0,
width: "100%",
}}
onClick={() => {
setScan(false);
}}
>
<QrReader
delay={250}
resolution={1200}
onError={e => {
console.log("SCAN ERROR", e);
setScan(false);
}}
onScan={newValue => {
if (newValue) {
console.log("SCAN VALUE", newValue);
let possibleNewValue = newValue;
if (possibleNewValue.indexOf("/") >= 0) {
possibleNewValue = possibleNewValue.substr(possibleNewValue.lastIndexOf("0x"));
console.log("CLEANED VALUE", possibleNewValue);
}
setScan(false);
updateAddress(possibleNewValue);
}
}}
style={{ width: "100%" }}
/>
</div>
) : (
""
);
return (
<div>
{scanner}
<Input
id="0xAddress" // name it something other than address for auto fill doxxing
name="0xAddress" // name it something other than address for auto fill doxxing
autoComplete="off"
autoFocus={props.autoFocus}
placeholder={props.placeholder ? props.placeholder : "address"}
prefix={<Blockie address={currentValue} size={8} scale={3} />}
value={ens || currentValue}
addonAfter={scannerButton}
onChange={e => {
updateAddress(e.target.value);
}}
/>
</div>
);
}
Example #4
| Source File: Wallet.jsx From Tai-Shang-NFT-Wallet with MIT License | 4 votes |
|
/*
~ What it does? ~
Displays a wallet where you can specify address and send USD/ETH, with options to
scan address, to convert between USD and ETH, to see and generate private keys,
to send, receive and extract the burner wallet
~ How can I use? ~
<Wallet
provider={userProvider}
address={address}
ensProvider={mainnetProvider}
price={price}
color='red'
/>
~ Features ~
- Provide provider={userProvider} to display a wallet
- Provide address={address} if you want to specify address, otherwise
your default address will be used
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide price={price} of ether and easily convert between USD and ETH
- Provide color to specify the color of wallet icon
*/
export default function Wallet(props) {
const [signerAddress, setSignerAddress] = useState();
useEffect(() => {
async function getAddress() {
if (props.signer) {
const newAddress = await props.signer.getAddress();
setSignerAddress(newAddress);
}
}
getAddress();
}, [props.signer]);
const selectedAddress = props.address || signerAddress;
const [open, setOpen] = useState();
const [qr, setQr] = useState();
const [amount, setAmount] = useState();
const [toAddress, setToAddress] = useState();
const [pk, setPK] = useState();
const providerSend = props.signer ? (
<Tooltip title="Wallet">
<WalletOutlined
onClick={() => {
setOpen(!open);
}}
rotate={-90}
style={{
padding: 7,
color: props.color ? props.color : "",
cursor: "pointer",
fontSize: 28,
verticalAlign: "middle",
}}
/>
</Tooltip>
) : (
""
);
let display;
let receiveButton;
let privateKeyButton;
if (qr) {
display = (
<div>
<div>
<Text copyable>{selectedAddress}</Text>
</div>
<QR
value={selectedAddress}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
</div>
);
receiveButton = (
<Button
key="hide"
onClick={() => {
setQr("");
}}
>
<QrcodeOutlined /> Hide
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
} else if (pk) {
const pk = localStorage.getItem("metaPrivateKey");
const wallet = new ethers.Wallet(pk);
if (wallet.address !== selectedAddress) {
display = (
<div>
<b>*injected account*, private key unknown</b>
</div>
);
} else {
const extraPkDisplayAdded = {};
const extraPkDisplay = [];
extraPkDisplayAdded[wallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16, padding: 2, backgroundStyle: "#89e789" }}>
<a href={"/pk#" + pk}>
<Address minimized address={wallet.address} ensProvider={props.ensProvider} /> {wallet.address.substr(0, 6)}
</a>
</div>,
);
for (const key in localStorage) {
if (key.indexOf("metaPrivateKey_backup") >= 0) {
console.log(key);
const pastpk = localStorage.getItem(key);
const pastwallet = new ethers.Wallet(pastpk);
if (!extraPkDisplayAdded[pastwallet.address] /* && selectedAddress!=pastwallet.address */) {
extraPkDisplayAdded[pastwallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16 }}>
<a href={"/pk#" + pastpk}>
<Address minimized address={pastwallet.address} ensProvider={props.ensProvider} />{" "}
{pastwallet.address.substr(0, 6)}
</a>
</div>,
);
}
}
}
display = (
<div>
<b>Private Key:</b>
<div>
<Text copyable>{pk}</Text>
</div>
<hr />
<i>
Point your camera phone at qr code to open in
<a target="_blank" href={"https://xdai.io/" + pk} rel="noopener noreferrer">
burner wallet
</a>
:
</i>
<QR
value={"https://xdai.io/" + pk}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
<Paragraph style={{ fontSize: "16" }} copyable>
{"https://xdai.io/" + pk}
</Paragraph>
{extraPkDisplay ? (
<div>
<h3>Known Private Keys:</h3>
{extraPkDisplay}
<Button
onClick={() => {
const currentPrivateKey = window.localStorage.getItem("metaPrivateKey");
if (currentPrivateKey) {
window.localStorage.setItem("metaPrivateKey_backup" + Date.now(), currentPrivateKey);
}
const randomWallet = ethers.Wallet.createRandom();
const privateKey = randomWallet._signingKey().privateKey;
window.localStorage.setItem("metaPrivateKey", privateKey);
window.location.reload();
}}
>
Generate
</Button>
</div>
) : (
""
)}
</div>
);
}
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK("");
setQr("");
}}
>
<KeyOutlined /> Hide
</Button>
);
} else {
const inputStyle = {
padding: 10,
};
display = (
<div>
<div style={inputStyle}>
<AddressInput
autoFocus
ensProvider={props.ensProvider}
placeholder="to address"
address={toAddress}
onChange={setToAddress}
/>
</div>
<div style={inputStyle}>
<EtherInput
price={props.price}
value={amount}
onChange={value => {
setAmount(value);
}}
/>
</div>
</div>
);
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
}
return (
<span>
{providerSend}
<Modal
visible={open}
title={
<div>
{selectedAddress ? <Address address={selectedAddress} ensProvider={props.ensProvider} /> : <Spin />}
<div style={{ float: "right", paddingRight: 25 }}>
<Balance address={selectedAddress} provider={props.provider} dollarMultiplier={props.price} />
</div>
</div>
}
onOk={() => {
setQr();
setPK();
setOpen(!open);
}}
onCancel={() => {
setQr();
setPK();
setOpen(!open);
}}
footer={[
privateKeyButton,
receiveButton,
<Button
key="submit"
type="primary"
disabled={!amount || !toAddress || qr}
loading={false}
onClick={() => {
const tx = Transactor(props.signer);
let value;
try {
value = ethers.utils.parseEther("" + amount);
} catch (e) {
// failed to parseEther, try something else
value = ethers.utils.parseEther("" + parseFloat(amount).toFixed(8));
}
tx({
to: toAddress,
value,
});
setOpen(!open);
setQr();
}}
>
<SendOutlined /> Send
</Button>,
]}
>
{display}
</Modal>
</span>
);
}
Example #5
| Source File: AddressInput.jsx From moonshot with MIT License | 4 votes |
|
// probably we need to change value={toAddress} to address={toAddress}
/*
~ What it does? ~
Displays an address input with QR scan option
~ How can I use? ~
<AddressInput
autoFocus
ensProvider={mainnetProvider}
placeholder="Enter address"
value={toAddress}
onChange={setToAddress}
/>
~ Features ~
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide placeholder="Enter address" value for the input
- Value of the address input is stored in value={toAddress}
- Control input change by onChange={setToAddress}
or onChange={address => { setToAddress(address);}}
*/
export default function AddressInput(props) {
const [value, setValue] = useState(props.value);
const [scan, setScan] = useState(false);
const currentValue = typeof props.value !== "undefined" ? props.value : value;
const ens = useLookupAddress(props.ensProvider, currentValue);
const scannerButton = (
<div
style={{ marginTop: 4, cursor: "pointer" }}
onClick={() => {
setScan(!scan);
}}
>
<Badge count={<CameraOutlined style={{ fontSize: 9 }} />}>
<QrcodeOutlined style={{ fontSize: 18 }} />
</Badge>{" "}
Scan
</div>
);
const {ensProvider, onChange} = props;
const updateAddress = useCallback(
async newValue => {
if (typeof newValue !== "undefined") {
let address = newValue;
if (address.indexOf(".eth") > 0 || address.indexOf(".xyz") > 0) {
try {
const possibleAddress = await ensProvider.resolveName(address);
if (possibleAddress) {
address = possibleAddress;
}
// eslint-disable-next-line no-empty
} catch (e) {}
}
setValue(address);
if (typeof onChange === "function") {
onChange(address);
}
}
},
[ensProvider, onChange],
);
const scanner = scan ? (
<div
style={{
zIndex: 256,
position: "absolute",
left: 0,
top: 0,
width: "100%",
}}
onClick={() => {
setScan(false);
}}
>
<QrReader
delay={250}
resolution={1200}
onError={e => {
console.log("SCAN ERROR", e);
setScan(false);
}}
onScan={newValue => {
if (newValue) {
console.log("SCAN VALUE", newValue);
let possibleNewValue = newValue;
if (possibleNewValue.indexOf("/") >= 0) {
possibleNewValue = possibleNewValue.substr(possibleNewValue.lastIndexOf("0x"));
console.log("CLEANED VALUE", possibleNewValue);
}
setScan(false);
updateAddress(possibleNewValue);
}
}}
style={{ width: "100%" }}
/>
</div>
) : (
""
);
return (
<div>
{scanner}
<Input
id={"0xAddress"}//name it something other than address for auto fill doxxing
name={"0xAddress"}//name it something other than address for auto fill doxxing
autoComplete="off"
autoFocus={props.autoFocus}
placeholder={props.placeholder ? props.placeholder : "address"}
prefix={<Blockie address={currentValue} size={8} scale={3} />}
value={ens || currentValue}
addonAfter={scannerButton}
onChange={e => {
updateAddress(e.target.value);
}}
/>
</div>
);
}
Example #6
| Source File: Wallet.jsx From moonshot with MIT License | 4 votes |
|
/*
~ What it does? ~
Displays a wallet where you can specify address and send USD/ETH, with options to
scan address, to convert between USD and ETH, to see and generate private keys,
to send, receive and extract the burner wallet
~ How can I use? ~
<Wallet
provider={userProvider}
address={address}
ensProvider={mainnetProvider}
price={price}
color='red'
/>
~ Features ~
- Provide provider={userProvider} to display a wallet
- Provide address={address} if you want to specify address, otherwise
your default address will be used
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide price={price} of ether and easily convert between USD and ETH
- Provide color to specify the color of wallet icon
*/
export default function Wallet(props) {
const signerAddress = useUserAddress(props.provider);
const selectedAddress = props.address || signerAddress;
const [open, setOpen] = useState();
const [qr, setQr] = useState();
const [amount, setAmount] = useState();
const [toAddress, setToAddress] = useState();
const [pk, setPK] = useState()
const providerSend = props.provider ? (
<Tooltip title="Wallet">
<WalletOutlined
onClick={() => {
setOpen(!open);
}}
rotate={-90}
style={{
padding: 7,
color: props.color ? props.color : "",
cursor: "pointer",
fontSize: 28,
verticalAlign: "middle",
}}
/>
</Tooltip>
) : (
""
);
let display;
let receiveButton;
let privateKeyButton
if (qr) {
display = (
<div>
<div>
<Text copyable>{selectedAddress}</Text>
</div>
<QR
value={selectedAddress}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
</div>
);
receiveButton = (
<Button
key="hide"
onClick={() => {
setQr("");
}}
>
<QrcodeOutlined /> Hide
</Button>
);
privateKeyButton = (
<Button key="hide" onClick={()=>{setPK(selectedAddress);setQr("")}}>
<KeyOutlined /> Private Key
</Button>
)
}else if(pk){
let pk = localStorage.getItem("metaPrivateKey")
let wallet = new ethers.Wallet(pk)
if(wallet.address!==selectedAddress){
display = (
<div>
<b>*injected account*, private key unknown</b>
</div>
)
}else{
let extraPkDisplayAdded = {}
let extraPkDisplay = []
extraPkDisplayAdded[wallet.address] = true
extraPkDisplay.push(
<div style={{fontSize:16,padding:2,backgroundStyle:"#89e789"}}>
<a href={"/pk#"+pk}>
<Address minimized={true} address={wallet.address} ensProvider={props.ensProvider} /> {wallet.address.substr(0,6)}
</a>
</div>
)
for (var key in localStorage){
if(key.indexOf("metaPrivateKey_backup")>=0){
console.log(key)
let pastpk = localStorage.getItem(key)
let pastwallet = new ethers.Wallet(pastpk)
if(!extraPkDisplayAdded[pastwallet.address] /*&& selectedAddress!=pastwallet.address*/){
extraPkDisplayAdded[pastwallet.address] = true
extraPkDisplay.push(
<div style={{fontSize:16}}>
<a href={"/pk#"+pastpk}>
<Address minimized={true} address={pastwallet.address} ensProvider={props.ensProvider} /> {pastwallet.address.substr(0,6)}
</a>
</div>
)
}
}
}
display = (
<div>
<b>Private Key:</b>
<div>
<Text copyable>{pk}</Text>
</div>
<hr/>
<i>Point your camera phone at qr code to open in
<a target="_blank" href={"https://xdai.io/"+pk} rel="noopener noreferrer">burner wallet</a>:
</i>
<QR value={"https://xdai.io/"+pk} size={"450"} level={"H"} includeMargin={true} renderAs={"svg"} imageSettings={{excavate:false}}/>
<Paragraph style={{fontSize:"16"}} copyable>{"https://xdai.io/"+pk}</Paragraph>
{extraPkDisplay?(
<div>
<h3>
Known Private Keys:
</h3>
{extraPkDisplay}
<Button onClick={()=>{
let currentPrivateKey = window.localStorage.getItem("metaPrivateKey");
if(currentPrivateKey){
window.localStorage.setItem("metaPrivateKey_backup"+Date.now(),currentPrivateKey);
}
const randomWallet = ethers.Wallet.createRandom()
const privateKey = randomWallet._signingKey().privateKey
window.localStorage.setItem("metaPrivateKey",privateKey);
window.location.reload()
}}>
Generate
</Button>
</div>
):""}
</div>
)
}
receiveButton = (
<Button key="receive" onClick={()=>{setQr(selectedAddress);setPK("")}}>
<QrcodeOutlined /> Receive
</Button>
)
privateKeyButton = (
<Button key="hide" onClick={()=>{setPK("");setQr("")}}>
<KeyOutlined /> Hide
</Button>
)
} else {
const inputStyle = {
padding: 10,
};
display = (
<div>
<div style={inputStyle}>
<AddressInput
autoFocus
ensProvider={props.ensProvider}
placeholder="to address"
address={toAddress}
onChange={setToAddress}
/>
</div>
<div style={inputStyle}>
<EtherInput
price={props.price}
value={amount}
onChange={value => {
setAmount(value);
}}
/>
</div>
</div>
);
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button key="hide" onClick={()=>{setPK(selectedAddress);setQr("")}}>
<KeyOutlined /> Private Key
</Button>
);
}
return (
<span>
{providerSend}
<Modal
visible={open}
title={
<div>
{selectedAddress ? <Address address={selectedAddress} ensProvider={props.ensProvider} /> : <Spin />}
<div style={{ float: "right", paddingRight: 25 }}>
<Balance address={selectedAddress} provider={props.provider} dollarMultiplier={props.price} />
</div>
</div>
}
onOk={() => {
setQr();
setPK();
setOpen(!open);
}}
onCancel={() => {
setQr();
setPK();
setOpen(!open);
}}
footer={[
privateKeyButton, receiveButton,
<Button
key="submit"
type="primary"
disabled={!amount || !toAddress || qr}
loading={false}
onClick={() => {
const tx = Transactor(props.provider);
let value;
try {
value = parseEther("" + amount);
} catch (e) {
// failed to parseEther, try something else
value = parseEther("" + parseFloat(amount).toFixed(8));
}
tx({
to: toAddress,
value,
});
setOpen(!open);
setQr();
}}
>
<SendOutlined /> Send
</Button>,
]}
>
{display}
</Modal>
</span>
);
}
Example #7
| Source File: AddressInput.jsx From quadratic-diplomacy with MIT License | 4 votes |
|
// probably we need to change value={toAddress} to address={toAddress}
/*
~ What it does? ~
Displays an address input with QR scan option
~ How can I use? ~
<AddressInput
autoFocus
ensProvider={mainnetProvider}
placeholder="Enter address"
value={toAddress}
onChange={setToAddress}
/>
~ Features ~
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide placeholder="Enter address" value for the input
- Value of the address input is stored in value={toAddress}
- Control input change by onChange={setToAddress}
or onChange={address => { setToAddress(address);}}
*/
export default function AddressInput(props) {
const [value, setValue] = useState(props.value);
const [scan, setScan] = useState(false);
const currentValue = typeof props.value !== "undefined" ? props.value : value;
const ens = useLookupAddress(props.ensProvider, currentValue);
const scannerButton = (
<div
style={{ marginTop: 4, cursor: "pointer" }}
onClick={() => {
setScan(!scan);
}}
>
<Badge count={<CameraOutlined style={{ fontSize: 9 }} />}>
<QrcodeOutlined style={{ fontSize: 18 }} />
</Badge>{" "}
Scan
</div>
);
const { ensProvider, onChange } = props;
const updateAddress = useCallback(
async newValue => {
if (typeof newValue !== "undefined") {
let address = newValue;
if (address.indexOf(".eth") > 0 || address.indexOf(".xyz") > 0) {
try {
const possibleAddress = await ensProvider.resolveName(address);
if (possibleAddress) {
address = possibleAddress;
}
// eslint-disable-next-line no-empty
} catch (e) {}
}
setValue(address);
if (typeof onChange === "function") {
onChange(address);
}
}
},
[ensProvider, onChange],
);
const scanner = scan ? (
<div
style={{
zIndex: 256,
position: "absolute",
left: 0,
top: 0,
width: "100%",
}}
onClick={() => {
setScan(false);
}}
>
<QrReader
delay={250}
resolution={1200}
onError={e => {
console.log("SCAN ERROR", e);
setScan(false);
}}
onScan={newValue => {
if (newValue) {
console.log("SCAN VALUE", newValue);
let possibleNewValue = newValue;
if (possibleNewValue.indexOf("/") >= 0) {
possibleNewValue = possibleNewValue.substr(possibleNewValue.lastIndexOf("0x"));
console.log("CLEANED VALUE", possibleNewValue);
}
setScan(false);
updateAddress(possibleNewValue);
}
}}
style={{ width: "100%" }}
/>
</div>
) : (
""
);
return (
<div>
{scanner}
<Input
id="0xAddress" // name it something other than address for auto fill doxxing
name="0xAddress" // name it something other than address for auto fill doxxing
autoComplete="off"
autoFocus={props.autoFocus}
placeholder={props.placeholder ? props.placeholder : "address"}
prefix={<Blockie address={currentValue} size={8} scale={3} />}
value={ens || currentValue}
addonAfter={scannerButton}
onChange={e => {
updateAddress(e.target.value);
}}
/>
</div>
);
}
Example #8
| Source File: Wallet.jsx From quadratic-diplomacy with MIT License | 4 votes |
|
/*
~ What it does? ~
Displays a wallet where you can specify address and send USD/ETH, with options to
scan address, to convert between USD and ETH, to see and generate private keys,
to send, receive and extract the burner wallet
~ How can I use? ~
<Wallet
provider={userProvider}
address={address}
ensProvider={mainnetProvider}
price={price}
color='red'
/>
~ Features ~
- Provide provider={userProvider} to display a wallet
- Provide address={address} if you want to specify address, otherwise
your default address will be used
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide price={price} of ether and easily convert between USD and ETH
- Provide color to specify the color of wallet icon
*/
export default function Wallet(props) {
const [signerAddress, setSignerAddress] = useState();
useEffect(() => {
async function getAddress() {
if (props.signer) {
const newAddress = await props.signer.getAddress();
setSignerAddress(newAddress);
}
}
getAddress();
}, [props.signer]);
const selectedAddress = props.address || signerAddress;
const [open, setOpen] = useState();
const [qr, setQr] = useState();
const [amount, setAmount] = useState();
const [toAddress, setToAddress] = useState();
const [pk, setPK] = useState();
const providerSend = props.provider ? (
<Tooltip title="Wallet">
<WalletOutlined
onClick={() => {
setOpen(!open);
}}
rotate={-90}
style={{
padding: 7,
color: props.color ? props.color : "",
cursor: "pointer",
fontSize: 28,
verticalAlign: "middle",
}}
/>
</Tooltip>
) : (
""
);
let display;
let receiveButton;
let privateKeyButton;
if (qr) {
display = (
<div>
<div>
<Text copyable>{selectedAddress}</Text>
</div>
<QR
value={selectedAddress}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
</div>
);
receiveButton = (
<Button
key="hide"
onClick={() => {
setQr("");
}}
>
<QrcodeOutlined /> Hide
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
} else if (pk) {
const pk = localStorage.getItem("metaPrivateKey");
const wallet = new ethers.Wallet(pk);
if (wallet.address !== selectedAddress) {
display = (
<div>
<b>*injected account*, private key unknown</b>
</div>
);
} else {
const extraPkDisplayAdded = {};
const extraPkDisplay = [];
extraPkDisplayAdded[wallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16, padding: 2, backgroundStyle: "#89e789" }}>
<a href={"/pk#" + pk}>
<Address minimized address={wallet.address} ensProvider={props.ensProvider} /> {wallet.address.substr(0, 6)}
</a>
</div>,
);
for (const key in localStorage) {
if (key.indexOf("metaPrivateKey_backup") >= 0) {
console.log(key);
const pastpk = localStorage.getItem(key);
const pastwallet = new ethers.Wallet(pastpk);
if (!extraPkDisplayAdded[pastwallet.address] /* && selectedAddress!=pastwallet.address */) {
extraPkDisplayAdded[pastwallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16 }}>
<a href={"/pk#" + pastpk}>
<Address minimized address={pastwallet.address} ensProvider={props.ensProvider} />{" "}
{pastwallet.address.substr(0, 6)}
</a>
</div>,
);
}
}
}
display = (
<div>
<b>Private Key:</b>
<div>
<Text copyable>{pk}</Text>
</div>
<hr />
<i>
Point your camera phone at qr code to open in
<a target="_blank" href={"https://xdai.io/" + pk} rel="noopener noreferrer">
burner wallet
</a>
:
</i>
<QR
value={"https://xdai.io/" + pk}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
<Paragraph style={{ fontSize: "16" }} copyable>
{"https://xdai.io/" + pk}
</Paragraph>
{extraPkDisplay ? (
<div>
<h3>Known Private Keys:</h3>
{extraPkDisplay}
<Button
onClick={() => {
const currentPrivateKey = window.localStorage.getItem("metaPrivateKey");
if (currentPrivateKey) {
window.localStorage.setItem("metaPrivateKey_backup" + Date.now(), currentPrivateKey);
}
const randomWallet = ethers.Wallet.createRandom();
const privateKey = randomWallet._signingKey().privateKey;
window.localStorage.setItem("metaPrivateKey", privateKey);
window.location.reload();
}}
>
Generate
</Button>
</div>
) : (
""
)}
</div>
);
}
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK("");
setQr("");
}}
>
<KeyOutlined /> Hide
</Button>
);
} else {
const inputStyle = {
padding: 10,
};
display = (
<div>
<div style={inputStyle}>
<AddressInput
autoFocus
ensProvider={props.ensProvider}
placeholder="to address"
address={toAddress}
onChange={setToAddress}
/>
</div>
<div style={inputStyle}>
<EtherInput
price={props.price}
value={amount}
onChange={value => {
setAmount(value);
}}
/>
</div>
</div>
);
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
}
return (
<span>
{providerSend}
<Modal
visible={open}
title={
<div>
{selectedAddress ? <Address address={selectedAddress} ensProvider={props.ensProvider} /> : <Spin />}
<div style={{ float: "right", paddingRight: 25 }}>
<Balance address={selectedAddress} provider={props.provider} dollarMultiplier={props.price} />
</div>
</div>
}
onOk={() => {
setQr();
setPK();
setOpen(!open);
}}
onCancel={() => {
setQr();
setPK();
setOpen(!open);
}}
footer={[
privateKeyButton,
receiveButton,
<Button
key="submit"
type="primary"
disabled={!amount || !toAddress || qr}
loading={false}
onClick={() => {
const tx = Transactor(props.signer || props.provider);
let value;
try {
value = ethers.utils.parseEther("" + amount);
} catch (e) {
// failed to parseEther, try something else
value = ethers.utils.parseEther("" + parseFloat(amount).toFixed(8));
}
tx({
to: toAddress,
value,
});
setOpen(!open);
setQr();
}}
>
<SendOutlined /> Send
</Button>,
]}
>
{display}
</Modal>
</span>
);
}
Example #9
| Source File: index.js From getlink-next with MIT License | 4 votes |
|
App = ({ user, isAdmin, isDev }) => {
const [type, setType] = useState('image');
const handleTypeChange = useCallback((e) => {
setType(e.key);
}, []);
return (
<Context.Provider value={{ user, isAdmin, isDev }}>
<Layout style={{ height: '100%', flexDirection: 'row' }}>
<HTMLHead />
<Sider
breakpoint="lg"
collapsedWidth={0}
>
<a className="logo" href="https://github.com/int64ago/getlink-next" target="_blank">
Get Link!
</a>
<Menu
theme="dark"
mode="inline"
selectedKeys={[type]}
onClick={handleTypeChange}
>
<Menu.Item key="image">
<FileImageOutlined />IMAGE
</Menu.Item>
<Menu.Item key="video">
<VideoCameraOutlined />VIDEO
</Menu.Item>
<Menu.Item key="file">
<FileOutlined />FILE
</Menu.Item>
<Menu.Item key="placeholder">
<ContainerOutlined />Placeholder
</Menu.Item>
<Menu.Item key="qrcode">
<QrcodeOutlined />QR Code
</Menu.Item>
<Menu.Item key="urlshorten">
<LinkOutlined />URL Shortener
</Menu.Item>
</Menu>
</Sider>
<Layout style={{ background: '#fff', overflow: 'hidden' }}>
<Header>
{user ? (
<Dropdown overlay={(
<Menu>
<Menu.Item>
<a href="/api/logout">Logout</a>
</Menu.Item>
</Menu>
)}>
<Avatar src={user.picture} />
</Dropdown>
) : (
<div>
<Button type="link" href="/api/login">Login</Button>
</div>
)}
</Header>
<Content
style={{
padding: 24,
height: '100%',
background: '#fff',
overflow: 'auto',
}}
>
{type === 'image' && <Uploader type="image" />}
{type === 'video' && <Uploader type="video" />}
{type === 'file' && <Uploader type="file" />}
{type === 'qrcode' && <QRCode />}
{type === 'urlshorten' && <ShortUrl />}
{type === 'placeholder' && <Placeholder />}
</Content>
</Layout>
</Layout>
</Context.Provider>
);
}
Example #10
| Source File: Wallet.jsx From nft-e2e-example with MIT License | 4 votes |
|
/*
~ What it does? ~
Displays a wallet where you can specify address and send USD/ETH, with options to
scan address, to convert between USD and ETH, to see and generate private keys,
to send, receive and extract the burner wallet
~ How can I use? ~
<Wallet
provider={userProvider}
address={address}
ensProvider={mainnetProvider}
price={price}
color='red'
/>
~ Features ~
- Provide provider={userProvider} to display a wallet
- Provide address={address} if you want to specify address, otherwise
your default address will be used
- Provide ensProvider={mainnetProvider} and your address will be replaced by ENS name
(ex. "0xa870" => "user.eth") or you can enter directly ENS name instead of address
- Provide price={price} of ether and easily convert between USD and ETH
- Provide color to specify the color of wallet icon
*/
export default function Wallet(props) {
const signerAddress = useUserAddress(props.provider);
const selectedAddress = props.address || signerAddress;
const [open, setOpen] = useState();
const [qr, setQr] = useState();
const [amount, setAmount] = useState();
const [toAddress, setToAddress] = useState();
const [pk, setPK] = useState();
const providerSend = props.provider ? (
<Tooltip title="Wallet">
<WalletOutlined
onClick={() => {
setOpen(!open);
}}
rotate={-90}
style={{
padding: 7,
color: props.color ? props.color : "",
cursor: "pointer",
fontSize: 28,
verticalAlign: "middle",
}}
/>
</Tooltip>
) : (
""
);
let display;
let receiveButton;
let privateKeyButton;
if (qr) {
display = (
<div>
<div>
<Text copyable>{selectedAddress}</Text>
</div>
<QR
value={selectedAddress}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
</div>
);
receiveButton = (
<Button
key="hide"
onClick={() => {
setQr("");
}}
>
<QrcodeOutlined /> Hide
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
} else if (pk) {
const pk = localStorage.getItem("metaPrivateKey");
const wallet = new ethers.Wallet(pk);
if (wallet.address !== selectedAddress) {
display = (
<div>
<b>*injected account*, private key unknown</b>
</div>
);
} else {
const extraPkDisplayAdded = {};
const extraPkDisplay = [];
extraPkDisplayAdded[wallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16, padding: 2, backgroundStyle: "#89e789" }}>
<a href={"/pk#" + pk}>
<Address minimized address={wallet.address} ensProvider={props.ensProvider} /> {wallet.address.substr(0, 6)}
</a>
</div>,
);
for (const key in localStorage) {
if (key.indexOf("metaPrivateKey_backup") >= 0) {
console.log(key);
const pastpk = localStorage.getItem(key);
const pastwallet = new ethers.Wallet(pastpk);
if (!extraPkDisplayAdded[pastwallet.address] /* && selectedAddress!=pastwallet.address */) {
extraPkDisplayAdded[pastwallet.address] = true;
extraPkDisplay.push(
<div style={{ fontSize: 16 }}>
<a href={"/pk#" + pastpk}>
<Address minimized address={pastwallet.address} ensProvider={props.ensProvider} />{" "}
{pastwallet.address.substr(0, 6)}
</a>
</div>,
);
}
}
}
display = (
<div>
<b>Private Key:</b>
<div>
<Text copyable>{pk}</Text>
</div>
<hr />
<i>
Point your camera phone at qr code to open in
<a target="_blank" href={"https://xdai.io/" + pk} rel="noopener noreferrer">
burner wallet
</a>
:
</i>
<QR
value={"https://xdai.io/" + pk}
size="450"
level="H"
includeMargin
renderAs="svg"
imageSettings={{ excavate: false }}
/>
<Paragraph style={{ fontSize: "16" }} copyable>
{"https://xdai.io/" + pk}
</Paragraph>
{extraPkDisplay ? (
<div>
<h3>Known Private Keys:</h3>
{extraPkDisplay}
<Button
onClick={() => {
const currentPrivateKey = window.localStorage.getItem("metaPrivateKey");
if (currentPrivateKey) {
window.localStorage.setItem("metaPrivateKey_backup" + Date.now(), currentPrivateKey);
}
const randomWallet = ethers.Wallet.createRandom();
const privateKey = randomWallet._signingKey().privateKey;
window.localStorage.setItem("metaPrivateKey", privateKey);
window.location.reload();
}}
>
Generate
</Button>
</div>
) : (
""
)}
</div>
);
}
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK("");
setQr("");
}}
>
<KeyOutlined /> Hide
</Button>
);
} else {
const inputStyle = {
padding: 10,
};
display = (
<div>
<div style={inputStyle}>
<AddressInput
autoFocus
ensProvider={props.ensProvider}
placeholder="to address"
address={toAddress}
onChange={setToAddress}
/>
</div>
<div style={inputStyle}>
<EtherInput
price={props.price}
value={amount}
onChange={value => {
setAmount(value);
}}
/>
</div>
</div>
);
receiveButton = (
<Button
key="receive"
onClick={() => {
setQr(selectedAddress);
setPK("");
}}
>
<QrcodeOutlined /> Receive
</Button>
);
privateKeyButton = (
<Button
key="hide"
onClick={() => {
setPK(selectedAddress);
setQr("");
}}
>
<KeyOutlined /> Private Key
</Button>
);
}
return (
<span>
{providerSend}
<Modal
visible={open}
title={
<div>
{selectedAddress ? <Address address={selectedAddress} ensProvider={props.ensProvider} /> : <Spin />}
<div style={{ float: "right", paddingRight: 25 }}>
<Balance address={selectedAddress} provider={props.provider} dollarMultiplier={props.price} />
</div>
</div>
}
onOk={() => {
setQr();
setPK();
setOpen(!open);
}}
onCancel={() => {
setQr();
setPK();
setOpen(!open);
}}
footer={[
privateKeyButton,
receiveButton,
<Button
key="submit"
type="primary"
disabled={!amount || !toAddress || qr}
loading={false}
onClick={() => {
const tx = Transactor(props.provider);
let value;
try {
value = parseEther("" + amount);
} catch (e) {
// failed to parseEther, try something else
value = parseEther("" + parseFloat(amount).toFixed(8));
}
tx({
to: toAddress,
value,
});
setOpen(!open);
setQr();
}}
>
<SendOutlined /> Send
</Button>,
]}
>
{display}
</Modal>
</span>
);
}
