[, , ]}
10 | />
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/src/components/D1Funds/D1Funds.js:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react";
2 | import { SidePanel } from "@aragon/ui";
3 | import Funds from "../Funds/Funds";
4 | import MintPanel from "../MintPanel/MintPanel";
5 | import RedeemPanel from "../RedeemPanel/RedeemPanel";
6 |
7 | function D1Funds() {
8 | const [panelTitle, setPanelTitle] = useState("");
9 | const [panelOpened, setPanelOpened] = useState(false);
10 | const [innerPanel, setInnerPanel] = useState();
11 |
12 | const handleMintClick = (vaultId, ticker) => {
13 | setPanelTitle(`Mint ${ticker}`);
14 | setPanelOpened(true);
15 | setInnerPanel();
16 | };
17 |
18 | const handleRedeemClick = (vaultId, ticker) => {
19 | setPanelTitle(`Redeem ${ticker}`);
20 | setPanelOpened(true);
21 | setInnerPanel();
22 | };
23 |
24 | return (
25 |
26 |
37 |
38 |
49 |
50 |
56 |
65 |
66 |
76 |
82 | setPanelOpened(false)}
86 | >
87 | {innerPanel}
88 |
89 |
90 | );
91 | }
92 |
93 | export default D1Funds;
94 |
--------------------------------------------------------------------------------
/src/components/FundIcon/FundIcon.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import { GU, EthIdenticon } from "@aragon/ui";
4 | import { network } from "../../environment";
5 | import { getKnownFunds } from "../../known-funds";
6 | import { EthereumAddressType } from "../../prop-types";
7 |
8 | function FundIcon({ fundAddress, size }) {
9 | const knownOrg = getKnownFunds(network.type, fundAddress);
10 | const knownOrgImage = knownOrg && knownOrg.image;
11 |
12 | return (
13 |
25 | {knownOrgImage ? (
26 |
33 | ) : (
34 |
40 | )}
41 |
Invalid Fund ID
;
53 | } else if (degree === 1) {
54 | return ;
55 | } else if (degree === 2) {
56 | return ;
57 | } else {
58 | return (
59 |
64 |
72 |
79 |
85 |
98 | Funds
99 |
100 |
{" "}
101 |
107 |
113 | ›
114 | {" "}
115 |
120 | Fund #{vaultId}
121 |
122 |
123 |
124 |
125 |
126 |
div {
129 | padding-bottom: 20px;
130 | }
131 | `}
132 | >
133 |
}
138 | />
139 |
140 |
8 | {title &&
}
9 |
{
13 | return [
14 | {ticker}
,
15 | N/A
,
16 | {supply}
,
17 | N/A
,
18 | N/A
,
19 | ];
20 | }}
21 | renderEntryActions={(entry, index) => {
22 | return (
23 |
24 | handleMint(entry.vaultId, entry.ticker)}
26 | >
27 | Mint
28 |
29 | handleRedeem(entry.vaultId, entry.ticker)}
31 | >
32 | Redeem
33 |
34 |
35 | );
36 | }}
37 | />
38 |
84 |
94 | setSelection(0, newIndex)}
98 | />
99 | setSelection(1, newIndex)}
103 | css={`
104 | margin-left: 15px;
105 | `}
106 | />
107 | div > div:first-child {
10 | }
11 | `}
12 | >
13 |
24 | #
25 |
26 |
27 |
28 |
28 | {title}
29 |
30 | {subtitle && (
31 |
37 | {subtitle}
38 |
39 | )}
40 | {calltoaction && (
41 |
50 | )}
51 |
52 | );
53 | }
54 |
55 | Header.propTypes = {
56 | title: PropTypes.node.isRequired,
57 | subtitle: PropTypes.node,
58 | calltoaction: PropTypes.node,
59 | topSpacing: PropTypes.number.isRequired,
60 | bottomSpacing: PropTypes.number.isRequired,
61 | };
62 |
63 | Header.defaultProps = {
64 | topSpacing: 10 * GU,
65 | bottomSpacing: 7 * GU,
66 | };
67 |
68 | export default Header;
69 |
--------------------------------------------------------------------------------
/src/components/HomeButton/HomeButton.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import PropTypes from "prop-types";
3 | import { Button, IconHome, GU, RADIUS, useTheme } from "@aragon/ui";
4 |
5 | function HomeButton({ onClick, ...props }) {
6 | const theme = useTheme();
7 | return (
8 |
21 | }
24 | label="Settings"
25 | size="medium"
26 | onClick={onClick}
27 | disabled={false}
28 | />
29 |
30 | );
31 | }
32 |
33 | HomeButton.propTypes = {
34 | onClick: PropTypes.func,
35 | };
36 |
37 | HomeButton.defaultProps = {
38 | onClick: () => {
39 | window.location.hash = "/";
40 | },
41 | };
42 |
43 | export default HomeButton;
44 |
--------------------------------------------------------------------------------
/src/components/InnerPanels/ApproveNftsPanel.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useEffect } from "react";
2 | import {
3 | DropDown,
4 | TextInput,
5 | Button,
6 | AddressField,
7 | IconCheck,
8 | } from "@aragon/ui";
9 | import Web3 from "web3";
10 | import { useWallet } from "use-wallet";
11 | import XStore from "../../contracts/XStore.json";
12 | import IErc721 from "../../contracts/IERC721.json";
13 | import Loader from "react-loader-spinner";
14 | import HashField from "../HashField/HashField";
15 | import { useFavoriteNFTs } from "../../contexts/FavoriteNFTsContext";
16 | import addresses from "../../addresses/mainnet.json";
17 |
18 | function ApproveNftsPanel({ vaultId, ticker, closePanel }) {
19 | const { account } = useWallet();
20 | const injected = window.ethereum;
21 | const provider =
22 | injected && injected.chainId === "0x1"
23 | ? injected
24 | : `wss://eth-mainnet.ws.alchemyapi.io/v2/${process.env.ALCHEMY_API_KEY}`;
25 |
26 | const { current: web3 } = useRef(new Web3(provider));
27 |
28 | const [tokenId, setTokenId] = useState("");
29 |
30 | const [txStatus, setTxStatus] = useState(null);
31 | const [txHash, setTxHash] = useState(null);
32 | const [txReceipt, setTxReceipt] = useState(null);
33 | const [txError, setTxError] = useState(null);
34 |
35 | const [nftAddress, setNftAddress] = useState("");
36 |
37 | const xStore = new web3.eth.Contract(XStore.abi, addresses.xStore);
38 |
39 | useEffect(() => {
40 | xStore.methods
41 | .nftAddress(vaultId)
42 | .call({ from: account })
43 | .then((retVal) => {
44 | setNftAddress(retVal);
45 | });
46 | }, []);
47 |
48 | const handleApproveAll = () => {
49 | const nft = new web3.eth.Contract(IErc721.abi, nftAddress);
50 | nft.methods
51 | .setApprovalForAll(addresses.nftxProxy, true)
52 | .send(
53 | {
54 | from: account,
55 | },
56 | (error, txHash) => {}
57 | )
58 | .on("error", (error) => setTxError(error))
59 | .on("transactionHash", (txHash) => setTxHash(txHash))
60 | .on("receipt", (receipt) => {
61 | setTxReceipt(receipt);
62 | });
63 | };
64 |
65 | const handleApproveIndividual = () => {
66 | const nft = new web3.eth.Contract(IErc721.abi, nftAddress);
67 | nft.methods
68 | .approve(addresses.nftxProxy, tokenId)
69 | .send(
70 | {
71 | from: account,
72 | },
73 | (error, txHash) => {}
74 | )
75 | .on("error", (error) => setTxError(error))
76 | .on("transactionHash", (txHash) => setTxHash(txHash))
77 | .on("receipt", (receipt) => {
78 | setTxReceipt(receipt);
79 | });
80 | };
81 |
82 | const handleViewNFT = () => {
83 | closePanel();
84 | };
85 |
86 | if (!txHash) {
87 | return (
88 |
93 | setTokenId(event.target.value)}
96 | placeholder="Token ID (e.g. 42)"
97 | wide={true}
98 | css={`
99 | margin-bottom: 10px;
100 | `}
101 | />
102 |
103 |
109 |
110 |
119 |
120 | );
121 | } else if (txHash && !txReceipt) {
122 | return (
123 |
124 |
130 | Transaction in progress...
131 |
132 |
133 |
143 |
148 |
154 | Fund minted succesfully
155 |
161 |
162 |
163 |
52 |
58 | Deploy an ERC20 fund token
59 |
60 |
setName(event.target.value)}
63 | placeholder="Name (e.g. Punk-Basic)"
64 | wide={true}
65 | css={`
66 | margin-bottom: 10px;
67 | `}
68 | />
69 | setSymbol(event.target.value)}
72 | placeholder="Symbol (e.g. PUNK-BASIC)"
73 | wide={true}
74 | css={`
75 | margin-bottom: 15px;
76 | `}
77 | />
78 |
84 |
89 |
95 | Transaction in progress...
96 |
97 |
98 |
108 |
113 |
119 | Error occured. Check console.
120 |
121 |
126 |
132 | Contract deployed succesfully
133 |
139 |
140 |
52 | setNftAddress(event.target.value)}
55 | placeholder="NFT contract address (e.g. 0x0bf7...D63a)"
56 | wide={true}
57 | css={`
58 | margin-bottom: 15px;
59 | `}
60 | />
61 |
62 |
68 |
69 | );
70 | } else if (txHash && !txReceipt) {
71 | return (
72 |
73 |
79 | Transaction in progress...
80 |
81 |
82 |
92 |
97 |
103 | Error occured. Check console.
104 |
105 |
110 |
116 | Fund created succesfully
117 |
123 |
124 |
61 | setName(event.target.value)}
64 | placeholder="Name (e.g. CryptoGems)"
65 | wide={true}
66 | css={`
67 | margin-top: 20px;
68 | margin-bottom: 10px;
69 | `}
70 | />
71 | setSymbol(event.target.value)}
74 | placeholder="Symbol (e.g. GEMS)"
75 | wide={true}
76 | css={`
77 | margin-bottom: 10px;
78 | `}
79 | />
80 | setMinTokenId(event.target.value)}
83 | placeholder="Minimum token ID (e.g. 0)"
84 | wide={true}
85 | css={`
86 | margin-bottom: 10px;
87 | `}
88 | />
89 | setMaxTokenId(event.target.value)}
92 | placeholder="Maximum token ID (e.g. 9999)"
93 | wide={true}
94 | css={`
95 | margin-bottom: 20px;
96 | `}
97 | />
98 |
104 |
105 | );
106 | } else if (txHash && !txReceipt) {
107 | return (
108 |
109 |
115 | Transaction in progress...
116 |
117 |
118 |
128 |
133 |
139 | Error occured. Check console.
140 |
141 |
146 |
152 | Contract deployed succesfully
153 |
159 |
160 |
161 |
59 | setTokenId(event.target.value)}
62 | placeholder="Token ID (e.g. 42)"
63 | wide={true}
64 | css={`
65 | margin-bottom: 10px;
66 | `}
67 | />
68 | setRecipient(event.target.value)}
71 | placeholder="Recipient (e.g. 0x0bf7...D63a)"
72 | wide={true}
73 | css={`
74 | margin-bottom: 20px;
75 | `}
76 | />
77 |
78 |
85 | );
86 | } else if (txHash && !txReceipt) {
87 | return (
88 |
89 |
95 | Transaction in progress...
96 |
97 |
98 |
108 |
113 |
119 | Error occured. Check console.
120 |
121 |
126 |
132 | NFT minted succesfully
133 |
139 |
140 |
141 |
57 | setSender(event.target.value)}
60 | placeholder="Sender (e.g. 0x0bf7...D63)"
61 | wide={true}
62 | css={`
63 | margin-bottom: 10px;
64 | `}
65 | />
66 | setTokenId(event.target.value)}
69 | placeholder="Token ID (e.g. 42)"
70 | wide={true}
71 | css={`
72 | margin-bottom: 10px;
73 | `}
74 | />
75 | setRecipient(event.target.value)}
78 | placeholder="Recipient (e.g. 0x0bf7...D63)"
79 | wide={true}
80 | css={`
81 | margin-bottom: 20px;
82 | `}
83 | />
84 |
90 |
91 | );
92 | } else if (txHash && !txReceipt) {
93 | return (
94 |
95 |
101 | Transaction in progress...
102 |
103 |
104 |
114 |
119 |
125 | Error occured. Check console.
126 |
127 |
132 |
138 | NFT transferred successfully
139 |
145 |
146 |
147 |
112 |
115 | network.name)}
117 | placeholder={selectorNetworksSorted[0].name}
118 | onChange={() => console.log("TODO")}
119 | disabled={false}
120 | wide
121 | />
122 | handleCreate(1)}
127 | hasError={
128 | createError[0] !== null && createError[0] !== "no-account"
129 | }
130 | />
131 | handleCreate(2)}
136 | hasError={
137 | createError[0] !== null && createError[0] !== "no-account"
138 | }
139 | />
140 |
16 | {items.map((item) => (
17 | -
25 |
36 |
37 | ))}
38 |
39 | );
40 | }
41 |
42 | FavoritesMenu.propTypes = {
43 | items: PropTypes.arrayOf(
44 | PropTypes.shape({
45 | favorited: PropTypes.bool,
46 | vaultId: PropTypes.number,
47 | image: PropTypes.node,
48 | secondary: PropTypes.node,
49 | }).isRequired
50 | ),
51 |
52 | // when the favorited status of an item changes
53 | onFavoriteUpdate: PropTypes.func.isRequired,
54 |
55 | // when the item itself gets clicked
56 | onActivate: PropTypes.func.isRequired,
57 |
58 | disabled: PropTypes.bool,
59 | };
60 |
61 | export default FavoritesMenu;
62 |
--------------------------------------------------------------------------------
/src/components/Landing/Suggestions/FavoritesMenu/FavoritesMenuItem.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from "react";
2 | import PropTypes from "prop-types";
3 | import { GU, IconStar, IconStarFilled, textStyle, useTheme } from "@aragon/ui";
4 | import FavoritesMenuItemButton from "./FavoritesMenuItemButton";
5 |
6 | function FavoritesMenuItem({
7 | favorited,
8 | vaultId,
9 | address,
10 | ticker,
11 | image,
12 | secondary,
13 | onActivate,
14 | onFavoriteUpdate,
15 | disabled,
16 | }) {
17 | const theme = useTheme();
18 |
19 | const handleActivationClick = useCallback(() => {
20 | if (!disabled) {
21 | onActivate(vaultId);
22 | }
23 | }, [vaultId, onActivate]);
24 |
25 | const handleFavoriteClick = useCallback(() => {
26 | onFavoriteUpdate(vaultId, address, ticker, !favorited);
27 | }, [onFavoriteUpdate, vaultId, favorited]);
28 |
29 | return (
30 |
36 |
46 |
53 |
60 | {image}
61 |
62 |
71 |
79 | {ticker}
80 |
81 | {secondary && (
82 |
88 | {secondary}
89 |
90 | )}
91 |
92 |
94 |
95 | {favorited ? : }
96 |
97 |
22 | {values.map((v, i) => (
23 |
29 | {
32 | const newValues = JSON.parse(JSON.stringify(values));
33 | newValues[i] = event.target.value;
34 | setValues(newValues);
35 | }}
36 | placeholder="NFT tokenID"
37 | />
38 | {i === values.length - 1 ? (
39 |
63 | ))}
64 |
69 |
107 |
}
110 | />
111 |
{
116 | return [
117 | {name}
,
118 | ,
119 | svg {
122 | }
123 | cursor: pointer;
124 | padding: 5px;
125 | `}
126 | onClick={() =>
127 | isAddressFavorited(address)
128 | ? removeFavoriteByAddress(address)
129 | : addFavorite({ name, address })
130 | }
131 | >
132 | {isAddressFavorited(address) ? : }
133 |
,
134 | ];
135 | }}
136 | renderEntryActions={(entry, index) => {
137 | return (
138 |
139 | handleMint(entry.address, entry.name)}
141 | >
142 | Mint
143 |
144 | handleTransfer(entry.address, entry.name)}
146 | >
147 | Transfer
148 |
149 |
150 | );
151 | }}
152 | />
153 | setPanelOpened(false)}
157 | >
158 | {innerPanel}
159 |
160 |
13 |
18 | setValue(event.target.value)}
21 | placeholder="NFT tokenID"
22 | />
23 |
31 |
38 |
31 |
36 | {" "}
37 | {text}
38 |
39 |
35 |
44 |
45 |
52 |
53 |
63 |
73 |
}
76 | label="Settings"
77 | size="medium"
78 | onClick={handleSettingsClick}
79 | disabled={true}
80 | />
81 |
82 |
37 |
46 |
48 |
54 | {title}
55 |
56 | {subtitle && (
57 |
63 | {subtitle}
64 |
65 | )}
66 |
67 | {calltoaction && (
68 |
74 | {calltoaction}
75 | Try it out!
76 |
77 | )}
78 |
41 |
42 | Our devs are hard at work building a new and improved app experience. Stay tuned! 🦧 🕳️
43 |
44 |