();
73 |
74 | useEffect(() => {
75 | if (appNetworkId && provider) {
76 | const { NoteStream } = getContractAddressesForNetwork(appNetworkId);
77 | const signer = new Web3Provider(provider).getSigner();
78 | const noteStreamContract = new Contract(
79 | NoteStream,
80 | abis.NoteStream,
81 | signer,
82 | );
83 | setStreamContract(noteStreamContract);
84 | }
85 | }, [provider, appNetworkId]);
86 |
87 | return (
88 |
89 |
90 |
91 |
92 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 | );
113 | };
114 |
115 | export default App;
116 |
--------------------------------------------------------------------------------
/packages/react-app/src/abis/ERC20Detailed.ts:
--------------------------------------------------------------------------------
1 | export default {
2 | contractName: 'ERC20Detailed',
3 | abi: [
4 | {
5 | inputs: [
6 | {
7 | internalType: 'string',
8 | name: 'name',
9 | type: 'string',
10 | },
11 | {
12 | internalType: 'string',
13 | name: 'symbol',
14 | type: 'string',
15 | },
16 | {
17 | internalType: 'uint8',
18 | name: 'decimals',
19 | type: 'uint8',
20 | },
21 | ],
22 | payable: false,
23 | stateMutability: 'nonpayable',
24 | type: 'constructor',
25 | },
26 | {
27 | anonymous: false,
28 | inputs: [
29 | {
30 | indexed: true,
31 | internalType: 'address',
32 | name: 'owner',
33 | type: 'address',
34 | },
35 | {
36 | indexed: true,
37 | internalType: 'address',
38 | name: 'spender',
39 | type: 'address',
40 | },
41 | {
42 | indexed: false,
43 | internalType: 'uint256',
44 | name: 'value',
45 | type: 'uint256',
46 | },
47 | ],
48 | name: 'Approval',
49 | type: 'event',
50 | },
51 | {
52 | anonymous: false,
53 | inputs: [
54 | {
55 | indexed: true,
56 | internalType: 'address',
57 | name: 'from',
58 | type: 'address',
59 | },
60 | {
61 | indexed: true,
62 | internalType: 'address',
63 | name: 'to',
64 | type: 'address',
65 | },
66 | {
67 | indexed: false,
68 | internalType: 'uint256',
69 | name: 'value',
70 | type: 'uint256',
71 | },
72 | ],
73 | name: 'Transfer',
74 | type: 'event',
75 | },
76 | {
77 | constant: true,
78 | inputs: [
79 | {
80 | internalType: 'address',
81 | name: 'owner',
82 | type: 'address',
83 | },
84 | {
85 | internalType: 'address',
86 | name: 'spender',
87 | type: 'address',
88 | },
89 | ],
90 | name: 'allowance',
91 | outputs: [
92 | {
93 | internalType: 'uint256',
94 | name: '',
95 | type: 'uint256',
96 | },
97 | ],
98 | payable: false,
99 | stateMutability: 'view',
100 | type: 'function',
101 | },
102 | {
103 | constant: false,
104 | inputs: [
105 | {
106 | internalType: 'address',
107 | name: 'spender',
108 | type: 'address',
109 | },
110 | {
111 | internalType: 'uint256',
112 | name: 'amount',
113 | type: 'uint256',
114 | },
115 | ],
116 | name: 'approve',
117 | outputs: [
118 | {
119 | internalType: 'bool',
120 | name: '',
121 | type: 'bool',
122 | },
123 | ],
124 | payable: false,
125 | stateMutability: 'nonpayable',
126 | type: 'function',
127 | },
128 | {
129 | constant: true,
130 | inputs: [
131 | {
132 | internalType: 'address',
133 | name: 'account',
134 | type: 'address',
135 | },
136 | ],
137 | name: 'balanceOf',
138 | outputs: [
139 | {
140 | internalType: 'uint256',
141 | name: '',
142 | type: 'uint256',
143 | },
144 | ],
145 | payable: false,
146 | stateMutability: 'view',
147 | type: 'function',
148 | },
149 | {
150 | constant: true,
151 | inputs: [],
152 | name: 'decimals',
153 | outputs: [
154 | {
155 | internalType: 'uint8',
156 | name: '',
157 | type: 'uint8',
158 | },
159 | ],
160 | payable: false,
161 | stateMutability: 'view',
162 | type: 'function',
163 | },
164 | {
165 | constant: true,
166 | inputs: [],
167 | name: 'name',
168 | outputs: [
169 | {
170 | internalType: 'string',
171 | name: '',
172 | type: 'string',
173 | },
174 | ],
175 | payable: false,
176 | stateMutability: 'view',
177 | type: 'function',
178 | },
179 | {
180 | constant: true,
181 | inputs: [],
182 | name: 'symbol',
183 | outputs: [
184 | {
185 | internalType: 'string',
186 | name: '',
187 | type: 'string',
188 | },
189 | ],
190 | payable: false,
191 | stateMutability: 'view',
192 | type: 'function',
193 | },
194 | {
195 | constant: true,
196 | inputs: [],
197 | name: 'totalSupply',
198 | outputs: [
199 | {
200 | internalType: 'uint256',
201 | name: '',
202 | type: 'uint256',
203 | },
204 | ],
205 | payable: false,
206 | stateMutability: 'view',
207 | type: 'function',
208 | },
209 | {
210 | constant: false,
211 | inputs: [
212 | {
213 | internalType: 'address',
214 | name: 'recipient',
215 | type: 'address',
216 | },
217 | {
218 | internalType: 'uint256',
219 | name: 'amount',
220 | type: 'uint256',
221 | },
222 | ],
223 | name: 'transfer',
224 | outputs: [
225 | {
226 | internalType: 'bool',
227 | name: '',
228 | type: 'bool',
229 | },
230 | ],
231 | payable: false,
232 | stateMutability: 'nonpayable',
233 | type: 'function',
234 | },
235 | {
236 | constant: false,
237 | inputs: [
238 | {
239 | internalType: 'address',
240 | name: 'sender',
241 | type: 'address',
242 | },
243 | {
244 | internalType: 'address',
245 | name: 'recipient',
246 | type: 'address',
247 | },
248 | {
249 | internalType: 'uint256',
250 | name: 'amount',
251 | type: 'uint256',
252 | },
253 | ],
254 | name: 'transferFrom',
255 | outputs: [
256 | {
257 | internalType: 'bool',
258 | name: '',
259 | type: 'bool',
260 | },
261 | ],
262 | payable: false,
263 | stateMutability: 'nonpayable',
264 | type: 'function',
265 | },
266 | ],
267 | bytecode: '0x',
268 | deployedBytecode: '0x',
269 | linkReferences: {},
270 | deployedLinkReferences: {},
271 | };
272 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/Link.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react';
2 | import { Link } from 'react-router-dom';
3 |
4 | import isExternal from '../utils/links';
5 |
6 | const flexLink = (props: any): ReactElement => {
7 | return isExternal(props.to) ? (
8 |
9 | {props.children}
10 |
11 | ) : (
12 | {props.children}
13 | );
14 | };
15 |
16 | export default flexLink;
17 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/Sidebar/SideBarLinks.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement, useEffect, useState } from 'react';
2 | import { useTheme } from '@material-ui/core/styles';
3 | import List from '@material-ui/core/List';
4 | import ListItem from '@material-ui/core/ListItem';
5 | import ListItemIcon from '@material-ui/core/ListItemIcon';
6 | import ListItemText from '@material-ui/core/ListItemText';
7 | import Divider from '@material-ui/core/Divider';
8 |
9 | import HomeIcon from '@material-ui/icons/Home';
10 | import LocalAtmIcon from '@material-ui/icons/LocalAtm';
11 | import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet';
12 | import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
13 | import SwapHorizIcon from '@material-ui/icons/SwapHoriz';
14 | import HelpIcon from '@material-ui/icons/Help';
15 | import GitHubIcon from '@material-ui/icons/GitHub';
16 |
17 | import TransakSDK from '@transak/transak-sdk';
18 | import Link from '../Link';
19 |
20 | import setupTransak from '../../utils/transak';
21 | import { useAddress } from '../../contexts/OnboardContext';
22 |
23 | const mainLinks = [
24 | { text: 'Home', icon: , url: '/' },
25 | { text: 'Convert assets', icon: , url: '/exchange' },
26 | { text: 'Create new stream', icon: , url: '/send' },
27 | {
28 | text: 'Collect earnings',
29 | icon: ,
30 | url: '/receive',
31 | },
32 | ];
33 |
34 | const secondaryLinks = [
35 | { text: 'FAQ', icon: , url: 'https://docs.note.stream' },
36 | {
37 | text: 'Github',
38 | icon: ,
39 | url: 'https://github.com/TomAFrench/NoteStream',
40 | },
41 | ];
42 |
43 | const NavLinkItem = ({
44 | text,
45 | url,
46 | icon,
47 | }: {
48 | text: string;
49 | url: string;
50 | icon: ReactElement;
51 | }): ReactElement => (
52 |
53 | {icon}
54 |
55 |
56 | );
57 |
58 | const SideBarLinks = (): ReactElement => {
59 | const theme = useTheme();
60 | const userAddress = useAddress();
61 | const [transak, setTransak] = useState();
62 |
63 | useEffect(() => {
64 | setTransak(setupTransak(userAddress, theme.palette.primary.main));
65 | }, [userAddress, theme.palette.primary.main]);
66 |
67 | return (
68 |
69 | {mainLinks.map((link, index) => (
70 |
76 | ))}
77 |
78 | => transak.init()}>
79 |
80 |
81 |
82 |
83 |
84 | {secondaryLinks.map((link, index) => (
85 |
91 | ))}
92 |
93 | );
94 | };
95 |
96 | export default SideBarLinks;
97 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/Sidebar/WalletButton.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import ListItem from '@material-ui/core/ListItem';
4 | import ListItemIcon from '@material-ui/core/ListItemIcon';
5 | import ListItemText from '@material-ui/core/ListItemText';
6 | import Avatar from '@material-ui/core/Avatar';
7 | import Blockies from 'react-blockies';
8 |
9 | import { useAddress, useSetup } from '../../contexts/OnboardContext';
10 | import useENSName from '../../hooks/useENSName';
11 |
12 | const useStyles = makeStyles((theme) => ({
13 | avatar: {
14 | marginLeft: theme.spacing(-1),
15 | },
16 | }));
17 |
18 | const trimAddress = (address: string): string =>
19 | `${address.slice(0, 6)}...${address.slice(-5, -1)}`;
20 |
21 | const WalletButton = (): ReactElement => {
22 | const classes = useStyles();
23 | const setup = useSetup();
24 | const userAddress = useAddress();
25 | const ensName = useENSName(userAddress);
26 |
27 | if (!userAddress) {
28 | return (
29 | setup()}>
30 | {/* */}
31 |
32 |
33 | );
34 | }
35 | return (
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 | );
45 | };
46 |
47 | export default WalletButton;
48 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/Sidebar/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react';
2 | import { makeStyles } from '@material-ui/core/styles';
3 | import Drawer from '@material-ui/core/Drawer';
4 | import Divider from '@material-ui/core/Divider';
5 | import Grid from '@material-ui/core/Grid';
6 | import IconButton from '@material-ui/core/IconButton';
7 | import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
8 | import ChevronRightIcon from '@material-ui/icons/ChevronRight';
9 |
10 | import { Typography } from '@material-ui/core';
11 | import SideBarLinks from './SideBarLinks';
12 | import WalletButton from './WalletButton';
13 |
14 | const drawerWidth = 240;
15 |
16 | const useStyles = makeStyles((theme) => ({
17 | drawer: {
18 | width: drawerWidth,
19 | flexShrink: 0,
20 | whiteSpace: 'nowrap',
21 | },
22 | drawerOpen: {
23 | width: drawerWidth,
24 | transition: theme.transitions.create('width', {
25 | easing: theme.transitions.easing.sharp,
26 | duration: theme.transitions.duration.enteringScreen,
27 | }),
28 | },
29 | drawerClose: {
30 | transition: theme.transitions.create('width', {
31 | easing: theme.transitions.easing.sharp,
32 | duration: theme.transitions.duration.leavingScreen,
33 | }),
34 | width: theme.spacing(7),
35 | [theme.breakpoints.up('sm')]: {
36 | width: theme.spacing(8),
37 | },
38 | },
39 | paper: { overflowX: 'hidden' },
40 | toolbar: {
41 | padding: theme.spacing(0, 1),
42 | // necessary for content to be below app bar
43 | ...theme.mixins.toolbar,
44 | },
45 | }));
46 |
47 | const SideBar = ({
48 | open,
49 | setOpen,
50 | }: {
51 | open: boolean;
52 | setOpen: Function;
53 | }): ReactElement => {
54 | const classes = useStyles();
55 |
56 | const toggleDraw = (): void => {
57 | setOpen(!open);
58 | };
59 |
60 | return (
61 |
72 |
80 |
81 | NoteStream
82 |
83 |
84 |
85 | {open ? : }
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 | );
95 | };
96 |
97 | export default SideBar;
98 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/StreamTable/StreamRow.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import Button from '@material-ui/core/Button';
5 | import TableCell from '@material-ui/core/TableCell';
6 | import TableRow from '@material-ui/core/TableRow';
7 |
8 | import moment from 'moment';
9 |
10 | import { Contract } from 'ethers';
11 |
12 | import { withdrawFunds, cancelStream } from '../../utils/stream';
13 | import { Stream, ZkNote } from '../../types/types';
14 |
15 | import { useAztec } from '../../contexts/AztecContext';
16 | import { useAddress } from '../../contexts/OnboardContext';
17 | import { convertToTokenValueDisplay } from '../../utils/units/convertToTokenValue';
18 | import DoubleProgressBar from '../display/DoubleProgressBar';
19 | import useENSName from '../../hooks/useENSName';
20 | import useDecodedNote from '../../hooks/useDecodedNote';
21 |
22 | const StreamRow = ({
23 | stream,
24 | streamContract,
25 | role,
26 | }: {
27 | stream: Stream;
28 | streamContract: Contract;
29 | role: string;
30 | }): ReactElement | null => {
31 | const userAddress = useAddress();
32 | const aztec = useAztec();
33 | const {
34 | sender,
35 | recipient,
36 | id,
37 | startTime,
38 | lastWithdrawTime,
39 | stopTime,
40 | noteHash,
41 | zkAsset,
42 | } = stream;
43 | const note: ZkNote | undefined = useDecodedNote(noteHash);
44 | const displayName = useENSName(role === 'recipient' ? sender : recipient);
45 |
46 | const displayValue =
47 | note?.value &&
48 | convertToTokenValueDisplay(
49 | note.value,
50 | zkAsset.scalingFactor,
51 | zkAsset.linkedToken.decimals,
52 | );
53 |
54 | const button =
55 | role === 'recipient' ? (
56 |
63 | ) : (
64 |
73 | );
74 |
75 | if (!displayName || note?.value === undefined || !zkAsset.symbol) {
76 | return null;
77 | }
78 | return (
79 |
80 |
81 | {displayName}
82 |
83 | {`${displayValue} ${zkAsset.symbol}`}
84 |
85 |
90 |
91 |
92 | {moment.unix(startTime).format('MMM D, YYYY - HH:mm')}
93 |
94 |
95 | {moment.unix(stopTime).format('MMM D, YYYY - HH:mm')}
96 |
97 | {button}
98 |
99 | );
100 | };
101 |
102 | StreamRow.propTypes = {
103 | streamContract: PropTypes.instanceOf(Contract),
104 | stream: PropTypes.object.isRequired,
105 | role: PropTypes.string.isRequired,
106 | };
107 |
108 | export default StreamRow;
109 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/StreamTable/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement, useCallback } from 'react';
2 | import moment from 'moment';
3 |
4 | import TableCell from '@material-ui/core/TableCell';
5 | import TableRow from '@material-ui/core/TableRow';
6 |
7 | import { useQuery } from '@apollo/client';
8 | import { Contract } from 'ethers';
9 | import { Button, Grid, CircularProgress } from '@material-ui/core';
10 | import { generateColumns, STREAM_TABLE_ID, Column } from '../Table/columns';
11 | import { cellWidth } from '../Table/TableHead';
12 | import Table from '../Table';
13 |
14 | import {
15 | GET_SENDER_STREAMS,
16 | GET_RECIPIENT_STREAMS,
17 | } from '../../graphql/streams';
18 | import { useAddress } from '../../contexts/OnboardContext';
19 | import { Stream, Hash, ZkNote } from '../../types/types';
20 | import { cancelStream } from '../../utils/stream';
21 | import { convertToTokenValueDisplay } from '../../utils/units/convertToTokenValue';
22 |
23 | import { useAztec } from '../../contexts/AztecContext';
24 | import useDecodedNote from '../../hooks/useDecodedNote';
25 | import useENSName from '../../hooks/useENSName';
26 | import DoubleProgressBar from '../display/DoubleProgressBar';
27 |
28 | type HumanReadableStream = {
29 | id: number;
30 | recipient: string;
31 | sender: string;
32 | noteHash: Hash;
33 | humanDeposit: string;
34 | humanStartTime: string;
35 | humanStopTime: string;
36 |
37 | zkAsset: any;
38 | };
39 | type TableRowData = HumanReadableStream & {
40 | humanStartTimeOrder: number;
41 | humanStopTimeOrder: number;
42 | humanLastWithdrawTimeOrder: number;
43 | cancelStream: Function;
44 | };
45 |
46 | const humanReadableStream = (stream: Stream): HumanReadableStream => {
47 | const {
48 | id,
49 | recipient,
50 | noteHash,
51 | sender,
52 | startTime,
53 | stopTime,
54 | zkAsset,
55 | } = stream;
56 | const humanStartTime: string = moment
57 | .unix(startTime)
58 | .format('MMM D, YYYY - HH:mm');
59 | const humanStopTime: string = moment
60 | .unix(stopTime)
61 | .format('MMM D, YYYY - HH:mm');
62 | const humanDeposit = '';
63 |
64 | return {
65 | id,
66 | recipient,
67 | sender,
68 | noteHash,
69 | humanDeposit,
70 | humanStartTime,
71 | humanStopTime,
72 | zkAsset,
73 | };
74 | };
75 |
76 | function NewStreamTable({
77 | role,
78 | streamContract,
79 | }: {
80 | role: 'sender' | 'recipient';
81 | streamContract: Contract;
82 | }): ReactElement {
83 | const userAddress = useAddress();
84 | const aztec = useAztec();
85 | const { loading, error, data } = useQuery(
86 | role === 'sender' ? GET_SENDER_STREAMS : GET_RECIPIENT_STREAMS,
87 | {
88 | variables: { address: userAddress || '' },
89 | fetchPolicy: 'network-only',
90 | },
91 | );
92 |
93 | const cancelSelectedStream = useCallback(
94 | (id) => cancelStream(aztec, streamContract, id, userAddress),
95 | [aztec, streamContract, userAddress],
96 | );
97 |
98 | if (loading || error) {
99 | return (
100 |
107 |
108 |
109 | );
110 | }
111 |
112 | const columns = generateColumns();
113 |
114 | const streamInProgress = data.streams.filter(
115 | (stream: Stream) => stream.cancellation == null,
116 | );
117 | console.log(streamInProgress);
118 |
119 | const tableContents: TableRowData[] = streamInProgress.map(
120 | (stream: Stream) => ({
121 | ...humanReadableStream(stream),
122 | humanStartTimeOrder: stream.startTime,
123 | humanStopTimeOrder: stream.stopTime,
124 | humanLastWithdrawTimeOrder: stream.lastWithdrawTime,
125 | }),
126 | );
127 | return (
128 |
139 | {(sortedData: TableRowData[]): any =>
140 | sortedData.map((row: TableRowData) => (
141 |
148 | ))
149 | }
150 |
151 | );
152 | }
153 |
154 | const NewStreamRow = ({
155 | role,
156 | row,
157 | columns,
158 | cancelSelectedStream,
159 | }: {
160 | role: 'sender' | 'recipient';
161 | row: TableRowData;
162 | columns: Column[];
163 | cancelSelectedStream: Function;
164 | }): ReactElement => {
165 | const {
166 | id,
167 | humanStartTime,
168 | humanStopTime,
169 | noteHash,
170 | recipient,
171 | sender,
172 | humanStartTimeOrder,
173 | humanStopTimeOrder,
174 | humanLastWithdrawTimeOrder,
175 | zkAsset,
176 | }: TableRowData = row;
177 | const note: ZkNote | undefined = useDecodedNote(noteHash);
178 | const displayName = useENSName(role === 'sender' ? recipient : sender);
179 | const displayValue =
180 | note?.value &&
181 | convertToTokenValueDisplay(
182 | note.value,
183 | zkAsset.scalingFactor,
184 | zkAsset.linkedToken.decimals,
185 | );
186 |
187 | return (
188 |
189 |
195 | {id}
196 |
197 |
203 | {displayName}
204 |
205 |
211 | {`${displayValue} ${zkAsset.symbol}`}
212 |
213 |
219 |
224 |
225 |
231 | {humanStartTime}
232 |
233 |
239 | {humanStopTime}
240 |
241 |
242 |
249 |
250 |
251 | );
252 | };
253 |
254 | export default NewStreamTable;
255 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/Table/TableHead.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react';
2 |
3 | import TableCell from '@material-ui/core/TableCell';
4 | import TableHead from '@material-ui/core/TableHead';
5 | import TableRow from '@material-ui/core/TableRow';
6 | import TableSortLabel from '@material-ui/core/TableSortLabel';
7 | import { Column } from './columns';
8 |
9 | export const cellWidth = (width?: number): object | undefined => {
10 | if (!width) {
11 | return undefined;
12 | }
13 |
14 | return {
15 | maxWidth: `${width}px`,
16 | };
17 | };
18 |
19 | function TableHeader(props: any): ReactElement {
20 | const { columns, order, orderBy, onSort } = props;
21 |
22 | const changeSort = (property: string, orderAttr: boolean) => () => {
23 | onSort(property, orderAttr);
24 | };
25 |
26 | return (
27 |
28 |
29 | {columns.map((column: Column) => (
30 |
36 | {column.static ? (
37 | {column.label}
38 | ) : (
39 |
45 | {column.label}
46 |
47 | )}
48 |
49 | ))}
50 |
51 |
52 | );
53 | }
54 |
55 | export default TableHeader;
56 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/Table/columns.ts:
--------------------------------------------------------------------------------
1 | export const STREAM_TABLE_ID = 'id';
2 | export const STREAM_TABLE_RECIPIENT_ID = 'recipient';
3 | export const STREAM_TABLE_DEPOSIT_ID = 'humanDeposit';
4 | export const STREAM_TABLE_PROGRESS_ID = 'progress';
5 | export const STREAM_TABLE_START_TIME_ID = 'humanStartTime';
6 | export const STREAM_TABLE_END_TIME_ID = 'humanStopTime';
7 | export const STREAM_TABLE_STATUS_ID = 'status';
8 | export const STREAM_TABLE_ACTION_ID = 'action';
9 |
10 | export type Column = {
11 | id: string;
12 | order: boolean;
13 | disablePadding: boolean;
14 | label: string;
15 | custom: boolean;
16 | align?: 'right' | 'inherit' | 'left' | 'center' | 'justify' | undefined;
17 | width?: number;
18 | style?: any;
19 | static?: boolean;
20 | };
21 |
22 | export const generateColumns = (): Column[] => {
23 | const nonceColumn: Column = {
24 | id: STREAM_TABLE_ID,
25 | disablePadding: false,
26 | label: 'Stream ID',
27 | custom: false,
28 | order: false,
29 | width: 10,
30 | };
31 |
32 | const recipientColumn: Column = {
33 | id: STREAM_TABLE_RECIPIENT_ID,
34 | order: false,
35 | disablePadding: false,
36 | label: 'To',
37 | custom: false,
38 | width: 200,
39 | };
40 |
41 | const depositColumn: Column = {
42 | id: STREAM_TABLE_DEPOSIT_ID,
43 | order: false,
44 | disablePadding: false,
45 | label: 'Value',
46 | custom: false,
47 | width: 120,
48 | static: true,
49 | };
50 |
51 | const progressColumn: Column = {
52 | id: STREAM_TABLE_PROGRESS_ID,
53 | disablePadding: false,
54 | order: true,
55 | label: 'Progress',
56 | custom: false,
57 | static: true,
58 | };
59 |
60 | const startColumn: Column = {
61 | id: STREAM_TABLE_START_TIME_ID,
62 | disablePadding: false,
63 | order: true,
64 | label: 'Start Time',
65 | custom: false,
66 | };
67 |
68 | const endColumn: Column = {
69 | id: STREAM_TABLE_END_TIME_ID,
70 | disablePadding: false,
71 | order: true,
72 | label: 'End Time',
73 | custom: false,
74 | };
75 |
76 | const actionColumn: Column = {
77 | id: STREAM_TABLE_ACTION_ID,
78 | order: false,
79 | disablePadding: false,
80 | label: '',
81 | custom: true,
82 | align: 'right',
83 | static: true,
84 | };
85 |
86 | return [
87 | nonceColumn,
88 | recipientColumn,
89 | depositColumn,
90 | progressColumn,
91 | startColumn,
92 | endColumn,
93 | actionColumn,
94 | ];
95 | };
96 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/Table/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement, useState, useEffect } from 'react';
2 |
3 | import CircularProgress from '@material-ui/core/CircularProgress';
4 | import Table from '@material-ui/core/Table';
5 | import TableBody from '@material-ui/core/TableBody';
6 | import TablePagination from '@material-ui/core/TablePagination';
7 |
8 | import { makeStyles } from '@material-ui/core';
9 | import TableHead from './TableHead';
10 | import { getSorting, stableSort, Order } from './sorting';
11 | import { Column } from './columns';
12 |
13 | const sm = '8px';
14 | const xl = '32px';
15 | const xxl = '40px';
16 |
17 | const useStyles = makeStyles(() => ({
18 | root: {
19 | backgroundColor: 'white',
20 | borderTopRightRadius: sm,
21 | borderTopLeftRadius: sm,
22 | // boxShadow: "1px 2px 10px 0 rgba(212, 212, 211, 0.59)",
23 | },
24 | selectRoot: {
25 | lineHeight: xxl,
26 | backgroundColor: 'white',
27 | },
28 | white: {
29 | backgroundColor: 'white',
30 | },
31 | paginationRoot: {
32 | backgroundColor: 'white',
33 | // boxShadow: "1px 2px 10px 0 rgba(212, 212, 211, 0.59)",
34 | marginBottom: xl,
35 | borderBottomRightRadius: sm,
36 | borderBottomLeftRadius: sm,
37 | },
38 | loader: {
39 | // boxShadow: "1px 2px 10px 0 rgba(212, 212, 211, 0.59)",
40 | },
41 | }));
42 |
43 | const FIXED_HEIGHT = 49;
44 |
45 | const backProps = {
46 | 'aria-label': 'Previous Page',
47 | };
48 |
49 | const nextProps = {
50 | 'aria-label': 'Next Page',
51 | };
52 |
53 | const getEmptyStyle = (emptyRows: number): object => ({
54 | height: FIXED_HEIGHT * emptyRows,
55 | borderTopRightRadius: sm,
56 | borderTopLeftRadius: sm,
57 | backgroundColor: 'white',
58 | width: '100%',
59 | display: 'flex',
60 | justifyContent: 'center',
61 | alignItems: 'center',
62 | });
63 |
64 | type Props = {
65 | children: Function;
66 | columns: Column[];
67 | data: any[];
68 | defaultFixed: boolean;
69 | defaultOrder: Order;
70 | defaultOrderBy: string;
71 | defaultRowsPerPage: number;
72 | disableLoadingOnEmptyTable?: boolean;
73 | disablePagination?: boolean;
74 | label: string;
75 | noBorder?: boolean;
76 | size: number;
77 | };
78 |
79 | type State = {
80 | page: number;
81 | order: Order | undefined;
82 | orderBy: string | undefined;
83 | fixed: boolean | undefined;
84 | orderProp: boolean;
85 | rowsPerPage: number | undefined;
86 | };
87 |
88 | const GnoTable = (props: Props): ReactElement => {
89 | const classes = useStyles();
90 |
91 | const {
92 | children,
93 | columns,
94 | data,
95 | defaultFixed,
96 | defaultOrder = 'asc',
97 | defaultOrderBy,
98 | defaultRowsPerPage = 5,
99 | disableLoadingOnEmptyTable = false,
100 | disablePagination = false,
101 | label,
102 | noBorder,
103 | size,
104 | }: Props = props;
105 |
106 | const [page, setPage] = useState(0);
107 | const [rowsPerPage, setRowsPerPage] = useState();
108 | const [order, setOrder] = useState();
109 | const [orderBy, setOrderBy] = useState();
110 | const [fixed, setFixed] = useState();
111 | const [orderProp, setOrderProp] = useState();
112 |
113 | useEffect(() => {
114 | if (defaultOrderBy && columns) {
115 | const defaultOrderCol: Column | undefined = columns.find(
116 | ({ id }: { id: string }) => id === defaultOrderBy,
117 | );
118 |
119 | if (defaultOrderCol?.order) {
120 | setOrderProp(true);
121 | }
122 | }
123 | }, [defaultOrderBy, columns]);
124 |
125 | const onSort = (newOrderBy: string, newOrderProp: boolean): void => {
126 | let newOrder: Order = 'desc';
127 |
128 | // if table was previously sorted by the user
129 | if (order && orderBy === newOrderBy && order === 'desc') {
130 | newOrder = 'asc';
131 | } else if (!order && defaultOrder === 'desc') {
132 | // if it was not sorted and defaultOrder is used
133 | newOrder = 'asc';
134 | }
135 | setOrder(newOrder);
136 | setOrderBy(newOrderBy);
137 | setOrderProp(newOrderProp);
138 | setFixed(false);
139 | };
140 |
141 | const handleChangePage = (e: any, newPage: number): void => {
142 | setPage(newPage);
143 | };
144 |
145 | const handleChangeRowsPerPage = (e: any): void => {
146 | const newRowsPerPage = Number(e.target.value);
147 | setRowsPerPage(newRowsPerPage);
148 | };
149 |
150 | const orderByParam: string = orderBy || defaultOrderBy;
151 | const orderParam: Order = order || defaultOrder;
152 | const displayRows: number = rowsPerPage || defaultRowsPerPage;
153 | const fixedParam = typeof fixed !== 'undefined' ? fixed : !!defaultFixed;
154 |
155 | // const paginationClasses = {
156 | // selectRoot: classes.selectRoot,
157 | // root: !noBorder && classes.paginationRoot,
158 | // input: classes.white,
159 | // };
160 |
161 | let sortedData = stableSort(
162 | data,
163 | getSorting(orderParam, orderByParam, orderProp as boolean),
164 | fixedParam,
165 | );
166 |
167 | if (!disablePagination) {
168 | sortedData = sortedData.slice(
169 | page * displayRows,
170 | page * displayRows + displayRows,
171 | );
172 | }
173 |
174 | const emptyRows =
175 | displayRows - Math.min(displayRows, data.length - page * displayRows);
176 | const isEmpty = size === 0 && !disableLoadingOnEmptyTable;
177 |
178 | return (
179 | <>
180 | {!isEmpty && (
181 |
186 |
192 | {children(sortedData)}
193 |
194 | )}
195 | {isEmpty && (
196 |
197 |
198 |
199 | )}
200 | {!disablePagination && (
201 |
213 | )}
214 |
215 | );
216 | };
217 |
218 | export default GnoTable;
219 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/Table/sorting.ts:
--------------------------------------------------------------------------------
1 | export const FIXED = 'fixed';
2 |
3 | export const buildOrderFieldFrom = (attr: string): string => `${attr}Order`;
4 |
5 | export type Order = 'asc' | 'desc';
6 |
7 | const desc = (a: any, b: any, orderBy: string, orderProp: boolean): number => {
8 | const order = orderProp ? buildOrderFieldFrom(orderBy) : orderBy;
9 |
10 | if (b[order] < a[order]) {
11 | return -1;
12 | }
13 | if (b[order] > a[order]) {
14 | return 1;
15 | }
16 |
17 | return 0;
18 | };
19 |
20 | // eslint-disable-next-line
21 | export const stableSort = (dataArray:any, cmp: Function, fixed:any) => {
22 | const fixedElems = fixed ? dataArray.filter((elem: any) => elem.fixed) : [];
23 | const data = fixed
24 | ? dataArray.filter((elem: any) => !elem[FIXED])
25 | : dataArray;
26 | let stabilizedThis = data.map((el: any, index: number) => [el, index]);
27 |
28 | stabilizedThis = stabilizedThis.sort((a: any, b: any) => {
29 | const order = cmp(a[0], b[0]);
30 |
31 | if (order !== 0) {
32 | return order;
33 | }
34 |
35 | return a[1] - b[1];
36 | });
37 |
38 | const sortedElems = stabilizedThis.map((el: any) => el[0]);
39 |
40 | return fixedElems.concat(sortedElems);
41 | };
42 |
43 | export const getSorting = (
44 | order: Order,
45 | orderBy: string,
46 | orderProp: boolean,
47 | ): Function =>
48 | order === 'desc'
49 | ? (a: any, b: any) => desc(a, b, orderBy, orderProp)
50 | : (a: any, b: any) => -desc(a, b, orderBy, orderProp);
51 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/display/DoubleProgressBar.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect, ReactElement, useMemo } from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | import LinearProgress from '@material-ui/core/LinearProgress';
5 |
6 | import moment from 'moment';
7 |
8 | import calculateTime from '../../utils/time';
9 |
10 | const DoubleProgressBar = ({
11 | startTime,
12 | stopTime,
13 | lastWithdrawTime,
14 | }: {
15 | startTime: number;
16 | stopTime: number;
17 | lastWithdrawTime: number;
18 | }): ReactElement | null => {
19 | const [timePercentage, setTimePercentage] = useState(0);
20 |
21 | useEffect(() => {
22 | const intervalId = setInterval(() => {
23 | const newTimePercentage = calculateTime(
24 | moment.unix(startTime),
25 | moment.unix(stopTime),
26 | );
27 | setTimePercentage(parseFloat(newTimePercentage.toFixed(2)));
28 | }, 1000);
29 | return (): void => {
30 | clearInterval(intervalId);
31 | };
32 | }, [startTime, stopTime]);
33 |
34 | const withdrawPercentage = useMemo(
35 | () =>
36 | calculateTime(
37 | moment.unix(startTime),
38 | moment.unix(stopTime),
39 | moment.unix(lastWithdrawTime),
40 | ),
41 | [startTime, stopTime, lastWithdrawTime],
42 | );
43 |
44 | return (
45 | <>
46 |
47 |
52 |
53 | );
54 | };
55 |
56 | DoubleProgressBar.propTypes = {
57 | startTime: PropTypes.number.isRequired,
58 | stopTime: PropTypes.number.isRequired,
59 | lastWithdrawTime: PropTypes.number.isRequired,
60 | };
61 |
62 | export default DoubleProgressBar;
63 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/form/AddressInput.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement, useState, useEffect } from 'react';
2 | import { utils } from 'ethers';
3 |
4 | import TextField from '@material-ui/core/TextField';
5 | import { Address, AztecSDK } from '../../types/types';
6 |
7 | const AddressInput = (props: any): ReactElement => {
8 | const {
9 | address,
10 | setAddress,
11 | aztec,
12 | }: {
13 | address: Address;
14 | setAddress: Function;
15 | aztec: AztecSDK;
16 | } = props;
17 |
18 | const [invalidAddress, setInvalidAddress] = useState(false);
19 |
20 | useEffect(() => {
21 | const checkAddressIsValid = async (testAddress: Address): Promise => {
22 | try {
23 | if (utils.getAddress(testAddress)) {
24 | const user = await aztec.user(testAddress);
25 | setInvalidAddress(!user.registered);
26 | }
27 | } catch (e) {
28 | // Don't show error state if user is still typing
29 | setInvalidAddress(false);
30 | }
31 | };
32 |
33 | checkAddressIsValid(address);
34 | }, [aztec, address]);
35 |
36 | return (
37 | {
40 | setAddress(val.target.value);
41 | }}
42 | {...props}
43 | error={invalidAddress}
44 | helperText={invalidAddress && 'Recipient does not have an Aztec account'}
45 | />
46 | );
47 | };
48 |
49 | export default AddressInput;
50 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/form/AmountInput.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react';
2 |
3 | import TextField from '@material-ui/core/TextField';
4 | import InputAdornment from '@material-ui/core/InputAdornment';
5 |
6 | const AmountInput = (props: any): ReactElement => {
7 | const {
8 | amount,
9 | setAmount,
10 | balance,
11 | symbol,
12 | }: {
13 | amount: string;
14 | setAmount: Function;
15 | balance: string;
16 | symbol: string;
17 | } = props;
18 |
19 | return (
20 | {
24 | setAmount(val.target.value);
25 | }}
26 | InputProps={{
27 | endAdornment: (
28 | {`Balance: ${balance} ${symbol}`}
29 | ),
30 | }}
31 | />
32 | );
33 | };
34 |
35 | export default AmountInput;
36 |
--------------------------------------------------------------------------------
/packages/react-app/src/components/form/ZkAssetSelect.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react';
2 |
3 | import TextField from '@material-ui/core/TextField';
4 | import {
5 | Address,
6 | zkAssetMetadata,
7 | ZkAsset,
8 | zkAssetMap,
9 | } from '../../types/types';
10 |
11 | const ZkAssetSelect = ({
12 | currentAsset,
13 | updateAsset,
14 | assetList,
15 | }: {
16 | currentAsset?: ZkAsset;
17 | updateAsset: Function;
18 | assetList: zkAssetMap;
19 | }): ReactElement => {
20 | return (
21 | => updateAsset(val.target.value)}
26 | SelectProps={{
27 | native: true,
28 | }}
29 | variant="filled"
30 | fullWidth
31 | // className={classes.formControl}
32 | >
33 | {Object.entries(assetList).map(
34 | ([address, metadata]: [Address, zkAssetMetadata]) => (
35 |
38 | ),
39 | )}
40 |
41 | );
42 | };
43 |
44 | export default ZkAssetSelect;
45 |
--------------------------------------------------------------------------------
/packages/react-app/src/contexts/AztecContext.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | Component,
3 | createContext,
4 | ReactElement,
5 | useContext,
6 | } from 'react';
7 | import PropTypes from 'prop-types';
8 | import getZkAssetsForNetwork from 'zkasset-metadata';
9 |
10 | import { getContractAddressesForNetwork } from '@notestream/contract-artifacts';
11 | import { zkAssetMap, AztecSDK } from '../types/types';
12 |
13 | interface Props {
14 | children: ReactElement | Array;
15 | }
16 |
17 | interface State {
18 | aztec: AztecSDK;
19 | zkAssets: zkAssetMap;
20 | }
21 |
22 | export const AztecContext = createContext({} as State);
23 |
24 | export function useAztecContext(): State {
25 | return useContext(AztecContext);
26 | }
27 |
28 | const NETWORK_ID: number = parseInt(
29 | process.env.REACT_APP_NETWORK_ID as string,
30 | 10,
31 | );
32 |
33 | async function setup(networkId: number): Promise {
34 | const addresses = getContractAddressesForNetwork(networkId);
35 | await window.aztec.enable({
36 | contractAddresses: {
37 | ACE: addresses.ACE,
38 | },
39 | apiKey: process.env.REACT_APP_AZTEC_API_KEY, // API key for use with GSN for free txs.
40 | });
41 | }
42 |
43 | class AztecProvider extends Component {
44 | state: Readonly = {
45 | aztec: {},
46 | zkAssets: {},
47 | };
48 |
49 | static propTypes = {
50 | children: PropTypes.any.isRequired,
51 | };
52 |
53 | constructor(props: Props) {
54 | super(props);
55 |
56 | this.state = {
57 | ...this.state,
58 | zkAssets: getZkAssetsForNetwork(NETWORK_ID),
59 | };
60 | }
61 |
62 | componentDidMount(): void {
63 | window.addEventListener('load', () => {
64 | setup(NETWORK_ID).then(() => {
65 | this.setState({ aztec: window.aztec });
66 | });
67 | });
68 | }
69 |
70 | render(): ReactElement {
71 | return (
72 |
73 | {this.props.children}
74 |
75 | );
76 | }
77 | }
78 |
79 | export const useAztec = (): AztecSDK => {
80 | const { aztec } = useAztecContext();
81 | return aztec;
82 | };
83 |
84 | export const useZkAssets = (): zkAssetMap => {
85 | const { zkAssets } = useAztecContext();
86 | return zkAssets;
87 | };
88 |
89 | export default AztecProvider;
90 |
--------------------------------------------------------------------------------
/packages/react-app/src/contexts/OnboardContext.tsx:
--------------------------------------------------------------------------------
1 | import React, {
2 | Component,
3 | createContext,
4 | ReactElement,
5 | useContext,
6 | } from 'react';
7 | import PropTypes from 'prop-types';
8 |
9 | import Onboard from 'bnc-onboard';
10 | import {
11 | API,
12 | ConfigOptions,
13 | Initialization,
14 | UserState,
15 | WalletCheckInit,
16 | Wallet,
17 | WalletInitOptions,
18 | // eslint-disable-next-line import/no-unresolved
19 | } from 'bnc-onboard/dist/src/interfaces';
20 | import { Address } from '../types/types';
21 |
22 | interface Props {
23 | children: ReactElement | Array;
24 | }
25 |
26 | interface State extends UserState {
27 | onboard: API;
28 | setup: Function;
29 | }
30 |
31 | export const OnboardContext = createContext({} as State);
32 |
33 | export function useOnboardContext(): State {
34 | return useContext(OnboardContext);
35 | }
36 |
37 | const walletChecks: Array = [
38 | { checkName: 'connect' },
39 | { checkName: 'network' },
40 | ];
41 |
42 | const wallets: Array = [
43 | { walletName: 'metamask', preferred: true },
44 | ];
45 |
46 | // dappid is mandatory so will have throw away id for local usage.
47 | const testid = 'c212885d-e81d-416f-ac37-06d9ad2cf5af';
48 |
49 | class OnboardProvider extends Component {
50 | state: Readonly = {
51 | onboard: {} as API,
52 | address: '',
53 | balance: '',
54 | network: 0,
55 | wallet: {} as Wallet,
56 | mobileDevice: false,
57 | appNetworkId: 0,
58 | setup: () => null,
59 | };
60 |
61 | static propTypes = {
62 | children: PropTypes.any.isRequired,
63 | };
64 |
65 | constructor(props: Props) {
66 | super(props);
67 |
68 | const initialisation: Initialization = {
69 | dappId: testid,
70 | networkId: parseInt(process.env.REACT_APP_NETWORK_ID as string, 10),
71 | walletCheck: walletChecks,
72 | walletSelect: {
73 | heading: 'Select a wallet to connect to NoteStream',
74 | description:
75 | 'To use NoteStream you need an Ethereum wallet. Please select one from below:',
76 | wallets,
77 | },
78 | subscriptions: {
79 | address: (address: Address): void => {
80 | this.setState({ address });
81 | },
82 | balance: (balance: string): void => {
83 | this.setState({ balance });
84 | },
85 | network: (network: number): void => {
86 | this.setState({ network });
87 | },
88 | wallet: (wallet: Wallet): void => {
89 | this.setState({ wallet });
90 | },
91 | },
92 | };
93 |
94 | const onboard = Onboard(initialisation);
95 |
96 | this.state = {
97 | ...this.state,
98 | onboard,
99 | };
100 | }
101 |
102 | componentDidMount(): void {
103 | this.setup('MetaMask');
104 | }
105 |
106 | setup = async (defaultWallet: string): Promise => {
107 | const { onboard } = this.state;
108 | try {
109 | const selected = await onboard.walletSelect(defaultWallet);
110 | if (selected) {
111 | const ready = await onboard.walletCheck();
112 | if (ready) {
113 | const walletState = onboard.getState();
114 | this.setState({ ...walletState });
115 | console.log(walletState);
116 | } else {
117 | // Connection to wallet failed
118 | }
119 | } else {
120 | // User aborted set up
121 | }
122 | } catch (error) {
123 | console.log('error onboarding', error);
124 | }
125 | };
126 |
127 | setConfig = (config: ConfigOptions): void =>
128 | this.state.onboard.config(config);
129 |
130 | render(): ReactElement {
131 | return (
132 |
133 | {this.props.children}
134 |
135 | );
136 | }
137 | }
138 |
139 | export const useOnboard = (): API => {
140 | const { onboard } = useOnboardContext();
141 | return onboard;
142 | };
143 |
144 | export const useGetState = (): UserState => {
145 | const { onboard } = useOnboardContext();
146 | return onboard.getState();
147 | };
148 |
149 | export const useAddress = (): Address => {
150 | const { address } = useOnboardContext();
151 | return address;
152 | };
153 |
154 | export const useWallet = (): Wallet => {
155 | const { wallet } = useOnboardContext();
156 | return wallet;
157 | };
158 |
159 | export const useNetwork = (): { network: number; appNetworkId: number } => {
160 | const { network, appNetworkId } = useOnboardContext();
161 | return { network, appNetworkId };
162 | };
163 |
164 | export const useSetup = (): Function => {
165 | const { setup } = useOnboardContext();
166 | return setup;
167 | };
168 |
169 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
170 | export const useWalletProvider = (): any | null => {
171 | const { provider } = useWallet() || {};
172 | return provider;
173 | };
174 |
175 | export default OnboardProvider;
176 |
--------------------------------------------------------------------------------
/packages/react-app/src/graphql/streams.ts:
--------------------------------------------------------------------------------
1 | import { gql } from '@apollo/client';
2 |
3 | export const GET_RECIPIENT_STREAMS = gql`
4 | query getStreams($address: String!) {
5 | streams(where: { recipient: $address }) {
6 | id
7 | cancellation {
8 | id
9 | }
10 | lastWithdrawTime
11 | noteHash
12 | recipient
13 | sender
14 | startTime
15 | stopTime
16 | zkAsset {
17 | id
18 | symbol
19 | scalingFactor
20 | linkedToken {
21 | id
22 | decimals
23 | }
24 | }
25 | }
26 | }
27 | `;
28 |
29 | export const GET_SENDER_STREAMS = gql`
30 | query getStreams($address: String!) {
31 | streams(where: { sender: $address }) {
32 | id
33 | cancellation {
34 | id
35 | }
36 | lastWithdrawTime
37 | noteHash
38 | recipient
39 | sender
40 | startTime
41 | stopTime
42 | zkAsset {
43 | id
44 | symbol
45 | scalingFactor
46 | linkedToken {
47 | id
48 | decimals
49 | }
50 | }
51 | }
52 | }
53 | `;
54 |
--------------------------------------------------------------------------------
/packages/react-app/src/hooks/useDecodedNote.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 |
3 | import { Hash, ZkNote } from '../types/types';
4 | import { useAztec } from '../contexts/AztecContext';
5 |
6 | const useDecodedNote = (noteHash: Hash): ZkNote | undefined => {
7 | const { zkNote } = useAztec();
8 | const [note, setNote] = useState();
9 |
10 | useEffect(() => {
11 | const decodeNote = async (hash: Hash, i = 1): Promise => {
12 | const decodedNote = await zkNote(hash);
13 | if (decodedNote.valid) {
14 | setNote(decodedNote);
15 | } else if (i < 10) {
16 | // There seems to be an issue where on initial loadup where zkNote always returns an invalid note.
17 | // On subsequent renders after the aztec sdk has loaded fully then this works fine.
18 | // We then add a simple limited retry logic to fix the initial render.
19 | setTimeout(() => {
20 | decodeNote(hash, i + 1);
21 | }, 400);
22 | }
23 | };
24 |
25 | if (zkNote) {
26 | decodeNote(noteHash);
27 | }
28 | }, [zkNote, noteHash]);
29 |
30 | return note;
31 | };
32 |
33 | export default useDecodedNote;
34 |
--------------------------------------------------------------------------------
/packages/react-app/src/hooks/useENSName.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import { Web3Provider } from 'ethers/providers';
3 | import { Address } from '../types/types';
4 | import { useWalletProvider } from '../contexts/OnboardContext';
5 | import lookupAddress from '../utils/ens/lookupAddress';
6 |
7 | const useENSName = (address: Address): string => {
8 | const provider = useWalletProvider();
9 | const [ensName, setEnsName] = useState(address);
10 |
11 | useEffect(() => {
12 | if (provider) {
13 | lookupAddress(new Web3Provider(provider), address).then((name: string) =>
14 | setEnsName(name),
15 | );
16 | }
17 | }, [provider, address]);
18 |
19 | return ensName;
20 | };
21 |
22 | export default useENSName;
23 |
--------------------------------------------------------------------------------
/packages/react-app/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
15 | .bn-onboard-custom.bn-onboard-modal {
16 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
17 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
18 | sans-serif;
19 | }
20 |
--------------------------------------------------------------------------------
/packages/react-app/src/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { ThemeProvider } from '@material-ui/core/styles';
4 |
5 | import './index.css';
6 | import {
7 | ApolloClient,
8 | ApolloProvider,
9 | HttpLink,
10 | InMemoryCache,
11 | } from '@apollo/client';
12 | import App from './App';
13 | import * as serviceWorker from './serviceWorker';
14 | import OnboardProvider from './contexts/OnboardContext';
15 | import AztecProvider from './contexts/AztecContext';
16 | import theme from './theme';
17 |
18 | const client = new ApolloClient({
19 | cache: new InMemoryCache(),
20 | link: new HttpLink({
21 | uri: process.env.REACT_APP_SUBGRAPH_URL,
22 | }),
23 | });
24 |
25 | ReactDOM.render(
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | ,
35 | document.getElementById('root'),
36 | );
37 |
38 | // If you want your app to work offline and load faster, you can change
39 | // unregister() to register() below. Note this comes with some pitfalls.
40 | // Learn more about service workers: https://bit.ly/CRA-PWA
41 | serviceWorker.unregister();
42 |
--------------------------------------------------------------------------------
/packages/react-app/src/pages/HomePage.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react';
2 |
3 | import { makeStyles } from '@material-ui/core/styles';
4 | import { Paper, Grid, Typography, CircularProgress } from '@material-ui/core';
5 |
6 | import { Contract } from 'ethers';
7 | import StreamTable from '../components/StreamTable';
8 |
9 | const useStyles = makeStyles((theme) => ({
10 | paper: {
11 | padding: theme.spacing(2),
12 | [theme.breakpoints.up(800 + theme.spacing(3) * 2)]: {
13 | padding: theme.spacing(3),
14 | },
15 | },
16 | pageElement: {
17 | marginTop: theme.spacing(1.5),
18 | marginBottom: theme.spacing(1.5),
19 | [theme.breakpoints.up(800 + theme.spacing(3) * 2)]: {
20 | marginTop: theme.spacing(3),
21 | marginBottom: theme.spacing(3),
22 | },
23 | },
24 | icon: {
25 | marginRight: theme.spacing(2),
26 | },
27 | }));
28 |
29 | const HomePage = ({
30 | streamContract,
31 | }: {
32 | streamContract?: Contract;
33 | }): ReactElement => {
34 | const classes = useStyles();
35 |
36 | if (!streamContract) {
37 | return (
38 |
39 |
46 |
47 |
48 |
49 | );
50 | }
51 | return (
52 |
53 |
54 |
55 | Incoming streams
56 |
57 |
58 |
59 |
60 |
61 | Outgoing streams
62 |
63 |
64 |
65 |
66 | );
67 | };
68 |
69 | export default HomePage;
70 |
--------------------------------------------------------------------------------
/packages/react-app/src/pages/ReceivePage.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react';
2 |
3 | import { makeStyles } from '@material-ui/core/styles';
4 | import Paper from '@material-ui/core/Paper';
5 | import Grid from '@material-ui/core/Grid';
6 | import CircularProgress from '@material-ui/core/CircularProgress';
7 |
8 | import { Contract } from 'ethers';
9 | import StreamTable from '../components/StreamTable';
10 |
11 | const useStyles = makeStyles((theme) => ({
12 | paper: {
13 | padding: theme.spacing(2),
14 | [theme.breakpoints.up(800 + theme.spacing(3) * 2)]: {
15 | padding: theme.spacing(3),
16 | },
17 | },
18 | pageElement: {
19 | marginTop: theme.spacing(1.5),
20 | marginBottom: theme.spacing(1.5),
21 | [theme.breakpoints.up(800 + theme.spacing(3) * 2)]: {
22 | marginTop: theme.spacing(3),
23 | marginBottom: theme.spacing(3),
24 | },
25 | },
26 | icon: {
27 | marginRight: theme.spacing(2),
28 | },
29 | }));
30 |
31 | const ReceivePage = ({
32 | streamContract,
33 | }: {
34 | streamContract?: Contract;
35 | }): ReactElement => {
36 | const classes = useStyles();
37 |
38 | if (!streamContract) {
39 | return (
40 |
41 |
48 |
49 |
50 |
51 | );
52 | }
53 | return (
54 |
55 |
56 |
57 | );
58 | };
59 |
60 | export default ReceivePage;
61 |
--------------------------------------------------------------------------------
/packages/react-app/src/pages/SendPage.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactElement } from 'react';
2 |
3 | import { makeStyles } from '@material-ui/core/styles';
4 | import Paper from '@material-ui/core/Paper';
5 | import Grid from '@material-ui/core/Grid';
6 | import CircularProgress from '@material-ui/core/CircularProgress';
7 |
8 | import { Contract } from 'ethers';
9 | import CreateStreamDialog from '../components/modals/CreateStreamModal';
10 |
11 | import StreamTable from '../components/StreamTable';
12 |
13 | const useStyles = makeStyles((theme) => ({
14 | paper: {
15 | marginTop: theme.spacing(1.5),
16 | marginBottom: theme.spacing(1.5),
17 | padding: theme.spacing(2),
18 | [theme.breakpoints.up(800 + theme.spacing(3) * 2)]: {
19 | padding: theme.spacing(3),
20 | marginTop: theme.spacing(3),
21 | marginBottom: theme.spacing(3),
22 | },
23 | },
24 | }));
25 |
26 | const SendPage = ({
27 | streamContract,
28 | }: {
29 | streamContract?: Contract;
30 | }): ReactElement => {
31 | const classes = useStyles();
32 |
33 | if (!streamContract) {
34 | return (
35 |
36 |
43 |
44 |
45 |
46 | );
47 | }
48 |
49 | return (
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 | );
63 | };
64 |
65 | export default SendPage;
66 |
--------------------------------------------------------------------------------
/packages/react-app/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/packages/react-app/src/serviceWorker.ts:
--------------------------------------------------------------------------------
1 | // This optional code is used to register a service worker.
2 | // register() is not called by default.
3 |
4 | // This lets the app load faster on subsequent visits in production, and gives
5 | // it offline capabilities. However, it also means that developers (and users)
6 | // will only see deployed updates on subsequent visits to a page, after all the
7 | // existing tabs open on the page have been closed, since previously cached
8 | // resources are updated in the background.
9 |
10 | // To learn more about the benefits of this model and instructions on how to
11 | // opt-in, read https://bit.ly/CRA-PWA
12 |
13 | type Config = {
14 | onSuccess: Function;
15 | onUpdate: Function;
16 | };
17 |
18 | const isLocalhost = Boolean(
19 | window.location.hostname === 'localhost' ||
20 | // [::1] is the IPv6 localhost address.
21 | window.location.hostname === '[::1]' ||
22 | // 127.0.0.0/8 are considered localhost for IPv4.
23 | // eslint-disable-next-line @typescript-eslint/prefer-regexp-exec
24 | window.location.hostname.match(
25 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
26 | ),
27 | );
28 |
29 | function registerValidSW(swUrl: string, config: Config): void {
30 | navigator.serviceWorker
31 | .register(swUrl)
32 | .then((registration) => {
33 | // eslint-disable-next-line no-param-reassign
34 | registration.onupdatefound = (): void => {
35 | const installingWorker = registration.installing;
36 | if (installingWorker == null) {
37 | return;
38 | }
39 | installingWorker.onstatechange = (): void => {
40 | if (installingWorker.state === 'installed') {
41 | if (navigator.serviceWorker.controller) {
42 | // At this point, the updated precached content has been fetched,
43 | // but the previous service worker will still serve the older
44 | // content until all client tabs are closed.
45 | console.log(
46 | 'New content is available and will be used when all ' +
47 | 'tabs for this page are closed. See https://bit.ly/CRA-PWA.',
48 | );
49 |
50 | // Execute callback
51 | if (config && config.onUpdate) {
52 | config.onUpdate(registration);
53 | }
54 | } else {
55 | // At this point, everything has been precached.
56 | // It's the perfect time to display a
57 | // "Content is cached for offline use." message.
58 | console.log('Content is cached for offline use.');
59 |
60 | // Execute callback
61 | if (config && config.onSuccess) {
62 | config.onSuccess(registration);
63 | }
64 | }
65 | }
66 | };
67 | };
68 | })
69 | .catch((error) => {
70 | console.error('Error during service worker registration:', error);
71 | });
72 | }
73 |
74 | function checkValidServiceWorker(swUrl: string, config: Config): void {
75 | // Check if the service worker can be found. If it can't reload the page.
76 | fetch(swUrl, {
77 | headers: { 'Service-Worker': 'script' },
78 | })
79 | .then((response) => {
80 | // Ensure service worker exists, and that we really are getting a JS file.
81 | const contentType = response.headers.get('content-type');
82 | if (
83 | response.status === 404 ||
84 | (contentType != null && !contentType.includes('javascript'))
85 | ) {
86 | // No service worker found. Probably a different app. Reload the page.
87 | navigator.serviceWorker.ready.then((registration) => {
88 | registration.unregister().then(() => {
89 | window.location.reload();
90 | });
91 | });
92 | } else {
93 | // Service worker found. Proceed as normal.
94 | registerValidSW(swUrl, config);
95 | }
96 | })
97 | .catch(() => {
98 | console.log(
99 | 'No internet connection found. App is running in offline mode.',
100 | );
101 | });
102 | }
103 |
104 | export function register(config: Config): void {
105 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
106 | // The URL constructor is available in all browsers that support SW.
107 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
108 | if (publicUrl.origin !== window.location.origin) {
109 | // Our service worker won't work if PUBLIC_URL is on a different origin
110 | // from what our page is served on. This might happen if a CDN is used to
111 | // serve assets; see https://github.com/facebook/create-react-app/issues/2374
112 | return;
113 | }
114 |
115 | window.addEventListener('load', () => {
116 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
117 |
118 | if (isLocalhost) {
119 | // This is running on localhost. Let's check if a service worker still exists or not.
120 | checkValidServiceWorker(swUrl, config);
121 |
122 | // Add some additional logging to localhost, pointing developers to the
123 | // service worker/PWA documentation.
124 | navigator.serviceWorker.ready.then(() => {
125 | console.log(
126 | 'This web app is being served cache-first by a service ' +
127 | 'worker. To learn more, visit https://bit.ly/CRA-PWA',
128 | );
129 | });
130 | } else {
131 | // Is not localhost. Just register service worker
132 | registerValidSW(swUrl, config);
133 | }
134 | });
135 | }
136 | }
137 |
138 | export function unregister(): void {
139 | if ('serviceWorker' in navigator) {
140 | navigator.serviceWorker.ready
141 | .then((registration) => {
142 | registration.unregister();
143 | })
144 | .catch((error) => {
145 | console.error(error.message);
146 | });
147 | }
148 | }
149 |
--------------------------------------------------------------------------------
/packages/react-app/src/setupTests.ts:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | // eslint-disable-next-line import/no-extraneous-dependencies
6 | import '@testing-library/jest-dom/extend-expect';
7 |
--------------------------------------------------------------------------------
/packages/react-app/src/theme.tsx:
--------------------------------------------------------------------------------
1 | import { createMuiTheme } from '@material-ui/core/styles';
2 | import { cyan, orange, grey } from '@material-ui/core/colors';
3 |
4 | const theme = createMuiTheme({
5 | palette: {
6 | primary: cyan,
7 | secondary: orange,
8 | background: {
9 | default: grey[200],
10 | },
11 | },
12 | });
13 |
14 | export default theme;
15 |
--------------------------------------------------------------------------------
/packages/react-app/src/types/declarations.d.ts:
--------------------------------------------------------------------------------
1 | declare module '@aztec/secp256k1';
2 |
3 | declare module 'zkasset-metadata';
4 |
5 | declare module '@notestream/contract-artifacts';
6 |
7 | declare module 'react-blockies';
8 |
9 | declare module '@transak/transak-sdk';
10 |
--------------------------------------------------------------------------------
/packages/react-app/src/types/types.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | import BN from 'bn.js';
3 |
4 | export type Address = string;
5 |
6 | export type Hash = string;
7 |
8 | export type AztecSDK = any;
9 |
10 | declare global {
11 | interface Window {
12 | aztec: AztecSDK;
13 | ethereum: any;
14 | web3: any;
15 | }
16 | }
17 |
18 | export interface Stream {
19 | id: number;
20 | cancellation: any;
21 | sender: Address;
22 | recipient: Address;
23 | startTime: number;
24 | lastWithdrawTime: number;
25 | stopTime: number;
26 | tokenAddress: Address;
27 | noteHash: Hash;
28 | zkAsset: any;
29 | }
30 |
31 | export type ZkNote = {
32 | asset: {
33 | address: Address;
34 | linkedTokenAddress: Address;
35 | };
36 | id: Hash;
37 | noteHash: Hash;
38 | owner: {
39 | address: Address;
40 | };
41 | status: 'CREATED' | 'DESTROYED';
42 | value: number;
43 | viewingKey: string;
44 | valid: boolean;
45 | visible: boolean;
46 | destroyed: boolean;
47 | };
48 |
49 | export type Note = {
50 | a: BN;
51 | k: BN;
52 | gamma: BN;
53 | sigma: BN;
54 | noteHash: Hash;
55 | metadata: string;
56 | owner: Address;
57 | };
58 |
59 | export type Fraction = {
60 | numerator: number;
61 | denominator: number;
62 | err: number;
63 | };
64 |
65 | export type Dividend = {
66 | source: number;
67 | target: number;
68 | residual: number;
69 | };
70 |
71 | export type ZkAsset = {
72 | address: Address;
73 | scalingFactor: number;
74 | balance: Function;
75 | balanceOfLinkedToken: Function;
76 | deposit: Function;
77 | send: Function;
78 | withdraw: Function;
79 | linkedTokenAddress: Address;
80 | token: Token;
81 | toTokenValue: Function;
82 | toNoteValue: Function;
83 | };
84 |
85 | export type Token = {
86 | name: string;
87 | symbol: string;
88 | decimals: number;
89 | };
90 |
91 | export type zkAssetMetadata = {
92 | name: string;
93 | symbol: string;
94 | scalingFactor: number;
95 | linkedToken: Address;
96 | };
97 |
98 | export type zkAssetMap = {
99 | [name: string]: zkAssetMetadata;
100 | };
101 |
102 | export type Proof = {
103 | blindingFactors: any;
104 | blindingScalars: any;
105 | challenge: any;
106 | challengeHash: { data: string[] };
107 | data: string[][];
108 | hash: string;
109 | inputNotes: Note[];
110 | m: number;
111 | notes: Note[];
112 | output: string;
113 | outputNotes: Note[];
114 | outputs: string;
115 | publicOwner: Address;
116 | publicValue: BN;
117 | rollingHash: { data: string[] };
118 | sender: Address;
119 | type: string;
120 | validatedProofHash: string;
121 | encodeABI: Function;
122 | };
123 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/ens/lookupAddress.ts:
--------------------------------------------------------------------------------
1 | import { Web3Provider } from 'ethers/providers';
2 | import { getAddress } from 'ethers/utils';
3 |
4 | const lookupAddress = async (
5 | provider: Web3Provider,
6 | address: string,
7 | ): Promise => {
8 | try {
9 | const reportedName = await provider.lookupAddress(address);
10 | const resolvedAddress = await provider.resolveName(reportedName);
11 | if (getAddress(address) === getAddress(resolvedAddress)) {
12 | return reportedName;
13 | }
14 | } catch (e) {
15 | // Do nothing
16 | }
17 | return '';
18 | };
19 |
20 | export default lookupAddress;
21 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/links.ts:
--------------------------------------------------------------------------------
1 | const isExternal = (url: string): boolean => {
2 | return url.startsWith('https');
3 | };
4 |
5 | export default isExternal;
6 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/note.ts:
--------------------------------------------------------------------------------
1 | import { Fraction, Dividend } from '../types/types';
2 | /*
3 | * Calculate the optimal fraction for the Dividend proof to minimise the remainder
4 | */
5 | export function getFraction(value: number, maxdenom = 10000): Fraction {
6 | const best = { numerator: 1, denominator: 1, err: Math.abs(value - 1) };
7 | for (
8 | let denominator = 1;
9 | best.err > 0 && denominator <= maxdenom;
10 | denominator += 1
11 | ) {
12 | const numerator = Math.round(value * denominator);
13 | const err = Math.abs(value - numerator / denominator);
14 | if (err < best.err) {
15 | best.numerator = numerator;
16 | best.denominator = denominator;
17 | best.err = err;
18 | }
19 | }
20 | return best;
21 | }
22 |
23 | /*
24 | * Calculates the values of the target and remainder notes for a given source note and ratio za:zb
25 | */
26 | export const computeRemainderNoteValue = (
27 | source: number,
28 | za: number,
29 | zb: number,
30 | ): Dividend => {
31 | const target = Math.floor(source * (za / zb));
32 | const residual = source * za - target * zb;
33 |
34 | return {
35 | source,
36 | target,
37 | residual,
38 | };
39 | };
40 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/proofs/dividend.ts:
--------------------------------------------------------------------------------
1 | import { getFraction, computeRemainderNoteValue } from '../note';
2 | import {
3 | Stream,
4 | Address,
5 | Fraction,
6 | Dividend,
7 | AztecSDK,
8 | Proof,
9 | } from '../../types/types';
10 |
11 | const buildDividendProof = async (
12 | stream: Stream,
13 | streamContractAddress: Address,
14 | withdrawalValue: number,
15 | aztec: AztecSDK,
16 | ): Promise => {
17 | const { recipient, noteHash } = stream;
18 |
19 | const payee = await aztec.user(recipient);
20 |
21 | const streamZkNote = await aztec.zkNote(noteHash);
22 | const streamNote = await streamZkNote.export();
23 |
24 | const ratio: Fraction = getFraction(withdrawalValue / streamZkNote.value);
25 |
26 | console.table(ratio);
27 |
28 | const withdrawPayment: Dividend = computeRemainderNoteValue(
29 | streamZkNote.value,
30 | ratio.numerator,
31 | ratio.denominator,
32 | );
33 |
34 | const withdrawPaymentNote = await payee.createNote(withdrawPayment.target, [
35 | payee.address,
36 | ]);
37 | const remainderNote = await payee.createNote(withdrawPayment.residual);
38 |
39 | // Note: The current dividend proof implementation takes the residual note as an argument before the target note
40 | // It also has swapped the meanings of z_a and z_b relative to the documentation.
41 | // This results in the slightly unintuitive argument ordering below
42 | // see https://github.com/AztecProtocol/AZTEC/blob/develop/packages/aztec.js/src/proof/proofs/UTILITY/epoch0/dividend/index.js
43 | return new aztec.DividendProof(
44 | streamNote,
45 | remainderNote,
46 | withdrawPaymentNote,
47 | streamContractAddress,
48 | ratio.denominator,
49 | ratio.numerator,
50 | );
51 | };
52 |
53 | export default buildDividendProof;
54 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/proofs/index.ts:
--------------------------------------------------------------------------------
1 | import buildProofs from './proofs';
2 | import { Stream, Address, AztecSDK, Proof } from '../../types/types';
3 |
4 | // On a withdrawal the change note remains on the contract
5 | const buildWithdrawalProofs = (
6 | aztec: AztecSDK,
7 | streamContractAddress: Address,
8 | streamObj: Stream,
9 | withdrawalValue: number,
10 | ): Promise<{ dividendProof: Proof; joinSplitProof: Proof }> =>
11 | buildProofs(
12 | aztec,
13 | streamContractAddress,
14 | streamObj,
15 | withdrawalValue,
16 | streamContractAddress,
17 | );
18 |
19 | // On a cancellation the change note is returned to the stream sender
20 | const buildCancellationProofs = (
21 | aztec: AztecSDK,
22 | streamContractAddress: Address,
23 | streamObj: Stream,
24 | withdrawalValue: number,
25 | ): Promise<{ dividendProof: Proof; joinSplitProof: Proof }> =>
26 | buildProofs(
27 | aztec,
28 | streamContractAddress,
29 | streamObj,
30 | withdrawalValue,
31 | streamObj.sender,
32 | );
33 |
34 | export { buildWithdrawalProofs, buildCancellationProofs };
35 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/proofs/joinsplit.ts:
--------------------------------------------------------------------------------
1 | import secp256k1 from '@aztec/secp256k1';
2 | import { Stream, Address, Note, AztecSDK, Proof } from '../../types/types';
3 |
4 | const buildJoinSplitProof = async (
5 | stream: Stream,
6 | streamContractAddress: Address,
7 | streamNote: Note,
8 | withdrawPaymentNote: Note,
9 | changeNoteOwner: Address,
10 | aztec: AztecSDK,
11 | ): Promise => {
12 | const { sender, recipient } = stream;
13 |
14 | const payer = await aztec.user(sender);
15 | const payee = await aztec.user(recipient);
16 | const changeValue = Math.max(
17 | streamNote.k.toNumber() - withdrawPaymentNote.k.toNumber(),
18 | 0,
19 | );
20 |
21 | const changeNote = await aztec.note.create(
22 | secp256k1.generateAccount().publicKey,
23 | changeValue,
24 | [
25 | { address: payer.address, linkedPublicKey: payer.linkedPublicKey },
26 | { address: payee.address, linkedPublicKey: payee.linkedPublicKey },
27 | ],
28 | changeNoteOwner,
29 | );
30 |
31 | return new aztec.JoinSplitProof(
32 | [streamNote],
33 | [withdrawPaymentNote, changeNote],
34 | streamContractAddress,
35 | 0, // No transfer from private to public assets or vice versa
36 | recipient,
37 | );
38 | };
39 |
40 | export default buildJoinSplitProof;
41 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/proofs/proofs.ts:
--------------------------------------------------------------------------------
1 | import buildDividendProof from './dividend';
2 | import buildJoinSplitProof from './joinsplit';
3 | import { Stream, Address, AztecSDK, Proof } from '../../types/types';
4 |
5 | export default async function buildProofs(
6 | aztec: AztecSDK,
7 | streamContractAddress: Address,
8 | streamObj: Stream,
9 | withdrawalValue: number,
10 | changeNoteOwner: Address,
11 | ): Promise<{ dividendProof: Proof; joinSplitProof: Proof }> {
12 | const dividendProof = await buildDividendProof(
13 | streamObj,
14 | streamContractAddress,
15 | withdrawalValue,
16 | aztec,
17 | );
18 |
19 | const [streamNote] = dividendProof.inputNotes;
20 | const [withdrawalNote] = dividendProof.outputNotes;
21 |
22 | const joinSplitProof = await buildJoinSplitProof(
23 | streamObj,
24 | streamContractAddress,
25 | streamNote,
26 | withdrawalNote,
27 | changeNoteOwner,
28 | aztec,
29 | );
30 |
31 | return {
32 | dividendProof,
33 | joinSplitProof,
34 | };
35 | }
36 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/stream/cancellation.ts:
--------------------------------------------------------------------------------
1 | import { Contract } from 'ethers';
2 | import { calculateWithdrawal } from './withdrawal';
3 | import { buildCancellationProofs } from '../proofs';
4 | import { Address, AztecSDK, Stream, Proof } from '../../types/types';
5 |
6 | const BUFFER_SECONDS = 120;
7 |
8 | export default async function cancelStream(
9 | aztec: AztecSDK,
10 | streamContract: Contract,
11 | streamId: number,
12 | userAddress: Address,
13 | ): Promise {
14 | const streamObj: Stream = await streamContract.getStream(streamId);
15 |
16 | const note = await aztec.zkNote(streamObj.noteHash);
17 |
18 | // If stream sender is cancelling the stream then they need to cancel
19 | // at a timestamp AFTER which the transaction is included in a block.
20 | // We then add a buffer of 2 minutes to the time which they try to cancel at.
21 | const bufferSeconds = userAddress === streamObj.sender ? BUFFER_SECONDS : 0;
22 |
23 | // Calculate a valid timestamp to cancel stream at
24 | const { withdrawalValue, withdrawalDuration } = calculateWithdrawal(
25 | note.value,
26 | streamObj.lastWithdrawTime,
27 | streamObj.stopTime,
28 | bufferSeconds,
29 | );
30 |
31 | const {
32 | dividendProof,
33 | joinSplitProof,
34 | }: {
35 | dividendProof: Proof;
36 | joinSplitProof: Proof;
37 | } = await buildCancellationProofs(
38 | aztec,
39 | streamContract.address,
40 | streamObj,
41 | withdrawalValue,
42 | );
43 |
44 | console.log('Cancelling stream:', streamId);
45 | console.log('Proofs:', dividendProof, joinSplitProof);
46 | return streamContract.cancelStream(
47 | streamId,
48 | dividendProof.encodeABI(),
49 | joinSplitProof.encodeABI(streamObj.tokenAddress),
50 | withdrawalDuration,
51 | );
52 | }
53 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/stream/creation.ts:
--------------------------------------------------------------------------------
1 | import { Contract } from 'ethers';
2 | import { Address, Hash, Note } from '../../types/types';
3 |
4 | function initialiseStream(
5 | streamContract: Contract,
6 | payeeAddress: Address,
7 | noteForStreamContract: Note,
8 | zkAssetAddress: Address,
9 | startTime: number,
10 | endTime: number,
11 | ): number {
12 | return streamContract
13 | .createStream(
14 | payeeAddress,
15 | noteForStreamContract.noteHash,
16 | zkAssetAddress,
17 | startTime,
18 | endTime,
19 | )
20 | .then((err: any, txHash: Hash) => {
21 | if (err) {
22 | console.log(err);
23 | return null;
24 | }
25 | console.log('transaction hash', txHash);
26 | return txHash;
27 | });
28 | }
29 |
30 | async function fundStream(
31 | streamContractAddress: Address,
32 | payerAddress: Address,
33 | payeeAddress: Address,
34 | sendAmount: number,
35 | asset: any,
36 | ): Promise {
37 | const { outputNotes } = await asset.send(
38 | [
39 | {
40 | to: streamContractAddress,
41 | amount: sendAmount,
42 | aztecAccountNotRequired: true,
43 | numberOfOutputNotes: 1, // contract has one
44 | },
45 | ],
46 | { userAccess: [payerAddress, payeeAddress] }, // Give view access to sender and recipient
47 | );
48 | const noteForStreamContract = outputNotes[0];
49 | console.log('noteForStreamContract', noteForStreamContract);
50 | return noteForStreamContract;
51 | }
52 |
53 | async function createStream(
54 | sendAmount: number,
55 | streamContract: Contract,
56 | payerAddress: Address,
57 | payeeAddress: Address,
58 | zkAsset: any,
59 | startTime: number,
60 | endTime: number,
61 | ): Promise {
62 | const streamNote = await fundStream(
63 | streamContract.address,
64 | payerAddress,
65 | payeeAddress,
66 | sendAmount,
67 | zkAsset,
68 | );
69 | return initialiseStream(
70 | streamContract,
71 | payeeAddress,
72 | streamNote,
73 | zkAsset.address,
74 | startTime,
75 | endTime,
76 | );
77 | }
78 |
79 | export default createStream;
80 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/stream/index.ts:
--------------------------------------------------------------------------------
1 | export { default as createStream } from './creation';
2 | export { default as withdrawFunds } from './withdrawal';
3 | export { default as cancelStream } from './cancellation';
4 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/stream/withdrawal.ts:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | import { Contract } from 'ethers';
4 | import { buildWithdrawalProofs } from '../proofs';
5 | import { getFraction } from '../note';
6 | import { AztecSDK, Proof } from '../../types/types';
7 |
8 | function calculateSafeWithdrawal(
9 | currentBalance: number,
10 | remainingStreamLength: number,
11 | targettedWithdrawDuration: number,
12 | ): { withdrawalValue: number; withdrawalDuration: number } {
13 | // Find time period for single note to be unlocked then multiply by withdrawal
14 | const timeBetweenNotes = remainingStreamLength / currentBalance;
15 |
16 | // This is often a decimal so we want to get the smallest number of periods to generate a duration of an integer number of seconds
17 | const safeMultipleOfPeriods = getFraction(timeBetweenNotes).denominator;
18 | const safeTimeBetweenNotes = timeBetweenNotes * safeMultipleOfPeriods;
19 |
20 | // Calculate the number of complete safe periods which has passed to give number of withdrawable notes
21 | const withdrawalValue =
22 | Math.floor(targettedWithdrawDuration / safeTimeBetweenNotes) *
23 | safeMultipleOfPeriods;
24 | const withdrawalDuration = withdrawalValue * timeBetweenNotes;
25 |
26 | return {
27 | withdrawalValue,
28 | withdrawalDuration,
29 | };
30 | }
31 |
32 | export function calculateWithdrawal(
33 | noteValue: number,
34 | lastWithdrawTime: number,
35 | stopTime: number,
36 | bufferTime = 0,
37 | ): { withdrawalValue: number; withdrawalDuration: number } {
38 | if (noteValue === 0) {
39 | return {
40 | withdrawalValue: 0,
41 | withdrawalDuration: 0,
42 | };
43 | }
44 |
45 | const remainingStreamLength = moment
46 | .duration(moment.unix(stopTime).diff(moment.unix(lastWithdrawTime)))
47 | .asSeconds();
48 |
49 | // withdraw up to now or to end of stream
50 | if (moment().isAfter(moment.unix(stopTime))) {
51 | return {
52 | withdrawalValue: noteValue,
53 | withdrawalDuration: remainingStreamLength,
54 | };
55 | }
56 |
57 | const targettedWithdrawDuration = moment
58 | .duration(moment().startOf('second').diff(moment.unix(lastWithdrawTime)))
59 | .add(bufferTime, 'seconds')
60 | .asSeconds();
61 |
62 | const { withdrawalValue, withdrawalDuration } = calculateSafeWithdrawal(
63 | noteValue,
64 | remainingStreamLength,
65 | targettedWithdrawDuration,
66 | );
67 |
68 | return {
69 | withdrawalValue,
70 | withdrawalDuration,
71 | };
72 | }
73 |
74 | async function withdrawFunds(
75 | aztec: AztecSDK,
76 | streamContract: Contract,
77 | streamId: number,
78 | ): Promise {
79 | const streamObj = await streamContract.getStream(streamId);
80 |
81 | const note = await aztec.zkNote(streamObj.noteHash);
82 |
83 | // Calculate what value of the stream is redeemable
84 | const { withdrawalValue, withdrawalDuration } = calculateWithdrawal(
85 | note.value,
86 | streamObj.lastWithdrawTime,
87 | streamObj.stopTime,
88 | );
89 |
90 | const {
91 | dividendProof,
92 | joinSplitProof,
93 | }: {
94 | dividendProof: Proof;
95 | joinSplitProof: Proof;
96 | } = await buildWithdrawalProofs(
97 | aztec,
98 | streamContract.address,
99 | streamObj,
100 | withdrawalValue,
101 | );
102 |
103 | console.log('Withdrawing from stream:', streamId);
104 | console.log('Proofs:', dividendProof, joinSplitProof);
105 | return streamContract.withdrawFromStream(
106 | streamId,
107 | dividendProof.encodeABI(),
108 | joinSplitProof.encodeABI(streamObj.tokenAddress),
109 | withdrawalDuration,
110 | );
111 | }
112 |
113 | export default withdrawFunds;
114 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/time.ts:
--------------------------------------------------------------------------------
1 | import moment, { Moment } from 'moment';
2 |
3 | /*
4 | * Calculates the fraction of time through an interval the current time is.
5 | */
6 | const calculateTime = (
7 | startTime: Moment,
8 | endTime: Moment,
9 | testTime: Moment = moment(),
10 | ): number => {
11 | if (startTime.isAfter(testTime)) {
12 | return 0;
13 | }
14 | if (endTime.isBefore(testTime)) {
15 | return 100;
16 | }
17 |
18 | const elapsedTime = moment
19 | .duration(testTime.diff(startTime))
20 | .asMilliseconds();
21 | const streamDuration = moment
22 | .duration(endTime.diff(startTime))
23 | .asMilliseconds();
24 | const percentageElapsed = 100 * (elapsedTime / streamDuration);
25 | return percentageElapsed;
26 | };
27 |
28 | export default calculateTime;
29 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/transak.ts:
--------------------------------------------------------------------------------
1 | import TransakSDK from '@transak/transak-sdk';
2 |
3 | import { Address } from '../types/types';
4 |
5 | const setupTransak = (userAddress: Address, themeColor: string): any => {
6 | return new TransakSDK({
7 | apiKey: process.env.REACT_APP_TRANSAK_API_KEY,
8 | environment: 'STAGING',
9 | exchangeScreenTitle: 'Purchase crypto instantly',
10 | defaultCryptoCurrency: 'ETH',
11 | cryptoCurrencyList: 'ETH,DAI',
12 | walletAddress: userAddress,
13 | themeColor,
14 | // fiatCurrency: 'GBP',
15 | // fiatAmount: 100,
16 | email: '',
17 | redirectURL: '',
18 | hostURL: window.location.origin,
19 | widgetHeight: '600px',
20 | widgetWidth: '450px',
21 | });
22 | };
23 |
24 | export default setupTransak;
25 |
--------------------------------------------------------------------------------
/packages/react-app/src/utils/units/convertToTokenValue.ts:
--------------------------------------------------------------------------------
1 | import {
2 | BigNumberish,
3 | formatUnits,
4 | bigNumberify,
5 | BigNumber,
6 | } from 'ethers/utils';
7 |
8 | export const convertToTokenValue = (
9 | value: BigNumberish,
10 | scalingFactor: BigNumberish,
11 | ): BigNumber => {
12 | return bigNumberify(value).mul(scalingFactor);
13 | };
14 |
15 | export const convertToTokenValueDisplay = (
16 | value: BigNumberish,
17 | scalingFactor: BigNumberish,
18 | decimals: number,
19 | ): string => {
20 | return formatUnits(convertToTokenValue(value, scalingFactor), decimals);
21 | };
22 |
--------------------------------------------------------------------------------
/packages/react-app/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": [
4 | "DOM"
5 | ],
6 | "module": "esnext",
7 | "outDir": "build",
8 | "sourceMap": true,
9 | "target": "ES2015",
10 | "allowJs": true,
11 | "noImplicitAny": true,
12 | "strict": true,
13 | "esModuleInterop": true,
14 | "moduleResolution": "node",
15 | "resolveJsonModule": true,
16 | "skipLibCheck": false,
17 | "forceConsistentCasingInFileNames": true,
18 | "jsx": "react",
19 | "allowSyntheticDefaultImports": true,
20 | "isolatedModules": true,
21 | "noEmit": true,
22 | },
23 | "include": [
24 | "./src/**/*"
25 | ],
26 | }
--------------------------------------------------------------------------------
/packages/subgraph/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | "env": {
3 | "es6": true,
4 | },
5 | "extends": [
6 | 'eslint:recommended',
7 | "prettier/@typescript-eslint", // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
8 | "plugin:prettier/recommended" // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
9 | ],
10 | "rules": {
11 | "no-console": "off",
12 | "import/prefer-default-export": "off",
13 | "import/extensions": [
14 | "error",
15 | "ignorePackages",
16 | {
17 | "ts": "never",
18 | }
19 | ],
20 | "import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.js"]}]
21 | },
22 | "settings": {
23 | 'import/resolver': {
24 | node: {
25 | paths: ["src"],
26 | extensions: ['.ts']
27 | },
28 | },
29 | },
30 | };
31 |
--------------------------------------------------------------------------------
/packages/subgraph/.gitignore:
--------------------------------------------------------------------------------
1 | # folders
2 | .vscode/
3 | build/
4 | lib/
5 | node_modules/
6 | src/types/
7 |
8 | # files
9 | .DS_Store
10 | .env
11 | subgraph.yaml
12 | npm-debug.log*
13 | yarn-debug.log*
14 | yarn-error.log*
15 | *.log
16 |
--------------------------------------------------------------------------------
/packages/subgraph/.lintstagedrc:
--------------------------------------------------------------------------------
1 | {
2 | "*.ts": [
3 | "eslint --fix"
4 | ]
5 | }
--------------------------------------------------------------------------------
/packages/subgraph/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | semi: true,
3 | trailingComma: "all",
4 | singleQuote: true,
5 | tabWidth: 2
6 | };
--------------------------------------------------------------------------------
/packages/subgraph/README.md:
--------------------------------------------------------------------------------
1 | ## NoteStream Subgraph
2 |
3 | The Graph is a tool that helps dapps index their blockchain data so that users don't have to wait hours or more for the website to load.
4 |
5 | This is our subgraph, a collection of schemas and event handlers that parse the data broadcast on the Ethereum blockchain to GraphQL form.
6 |
7 | Our smart contracts can be found in the [NoteStream monorepo](https://github.com/TomAFrench/NoteStream).
8 |
9 | ## Contributing
10 |
11 | Before you can build, create and deploy this subgraph, you have to execute the following commands in the terminal:
12 |
13 | ```bash
14 | $ yarn
15 | $ yarn prepare:mainnet
16 | ```
17 |
18 | The first command installs all external dependencies, while the latter generates the `subgraph.yaml` file, which is
19 | required by The Graph.
20 |
21 | We use [Handlebars](https://github.com/wycats/handlebars.js/) to compile a [template subgraph](./subgraph.template.yaml) and add the parameters specific to each
22 | network (Mainnet, Goerli, Kovan, Rinkeby, Ropsten). The network can be changed via the `NETWORK_NAME` environment
23 | variable or directly by choosing a different "prepare" script. See [package.json](./package.json) for all options.
24 |
25 | ## Queries
26 |
27 | ### Querying All Streams
28 |
29 | ```graphql
30 | {
31 | streams {
32 | id
33 | cancellation {
34 | recipientBalance
35 | timestamp
36 | txhash
37 | }
38 | deposit
39 | lastWithdrawTime
40 | recipient
41 | sender
42 | startTime
43 | stopTime
44 | timestamp
45 | txs {
46 | id
47 | block
48 | event
49 | from
50 | timestamp
51 | to
52 | }
53 | withdrawals {
54 | id
55 | duration
56 | }
57 | zkAsset {
58 | id
59 | name
60 | scalingFactor
61 | symbol
62 | }
63 | }
64 | }
65 | ```
66 |
67 | ### Querying All Transactions
68 |
69 | ```graphql
70 | {
71 | transactions {
72 | id
73 | block
74 | event
75 | from
76 | stream {
77 | id
78 | }
79 | timestamp
80 | to
81 | }
82 | }
83 | ```
84 |
--------------------------------------------------------------------------------
/packages/subgraph/abis/NoteStream.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "inputs": [
4 | {
5 | "internalType": "address",
6 | "name": "_aceContractAddress",
7 | "type": "address"
8 | }
9 | ],
10 | "payable": false,
11 | "stateMutability": "nonpayable",
12 | "type": "constructor"
13 | },
14 | {
15 | "anonymous": false,
16 | "inputs": [
17 | {
18 | "indexed": true,
19 | "internalType": "uint256",
20 | "name": "streamId",
21 | "type": "uint256"
22 | },
23 | {
24 | "indexed": true,
25 | "internalType": "address",
26 | "name": "sender",
27 | "type": "address"
28 | },
29 | {
30 | "indexed": true,
31 | "internalType": "address",
32 | "name": "recipient",
33 | "type": "address"
34 | },
35 | {
36 | "indexed": false,
37 | "internalType": "uint256",
38 | "name": "cancelDuration",
39 | "type": "uint256"
40 | }
41 | ],
42 | "name": "CancelStream",
43 | "type": "event"
44 | },
45 | {
46 | "anonymous": false,
47 | "inputs": [
48 | {
49 | "indexed": true,
50 | "internalType": "uint256",
51 | "name": "streamId",
52 | "type": "uint256"
53 | },
54 | {
55 | "indexed": true,
56 | "internalType": "address",
57 | "name": "sender",
58 | "type": "address"
59 | },
60 | {
61 | "indexed": true,
62 | "internalType": "address",
63 | "name": "recipient",
64 | "type": "address"
65 | },
66 | {
67 | "indexed": false,
68 | "internalType": "address",
69 | "name": "zkAsset",
70 | "type": "address"
71 | },
72 | {
73 | "indexed": false,
74 | "internalType": "bytes32",
75 | "name": "noteHash",
76 | "type": "bytes32"
77 | },
78 | {
79 | "indexed": false,
80 | "internalType": "uint256",
81 | "name": "startTime",
82 | "type": "uint256"
83 | },
84 | {
85 | "indexed": false,
86 | "internalType": "uint256",
87 | "name": "stopTime",
88 | "type": "uint256"
89 | }
90 | ],
91 | "name": "CreateStream",
92 | "type": "event"
93 | },
94 | {
95 | "anonymous": false,
96 | "inputs": [
97 | {
98 | "indexed": true,
99 | "internalType": "uint256",
100 | "name": "streamId",
101 | "type": "uint256"
102 | },
103 | {
104 | "indexed": true,
105 | "internalType": "address",
106 | "name": "sender",
107 | "type": "address"
108 | },
109 | {
110 | "indexed": true,
111 | "internalType": "address",
112 | "name": "recipient",
113 | "type": "address"
114 | },
115 | {
116 | "indexed": false,
117 | "internalType": "bytes32",
118 | "name": "noteHash",
119 | "type": "bytes32"
120 | },
121 | {
122 | "indexed": false,
123 | "internalType": "uint256",
124 | "name": "withdrawDuration",
125 | "type": "uint256"
126 | }
127 | ],
128 | "name": "WithdrawFromStream",
129 | "type": "event"
130 | },
131 | {
132 | "constant": false,
133 | "inputs": [
134 | {
135 | "internalType": "uint256",
136 | "name": "streamId",
137 | "type": "uint256"
138 | },
139 | {
140 | "internalType": "bytes",
141 | "name": "_proof1",
142 | "type": "bytes"
143 | },
144 | {
145 | "internalType": "bytes",
146 | "name": "_proof2",
147 | "type": "bytes"
148 | },
149 | {
150 | "internalType": "uint256",
151 | "name": "_unclaimedTime",
152 | "type": "uint256"
153 | }
154 | ],
155 | "name": "cancelStream",
156 | "outputs": [
157 | {
158 | "internalType": "bool",
159 | "name": "",
160 | "type": "bool"
161 | }
162 | ],
163 | "payable": false,
164 | "stateMutability": "nonpayable",
165 | "type": "function"
166 | },
167 | {
168 | "constant": false,
169 | "inputs": [
170 | {
171 | "internalType": "address",
172 | "name": "recipient",
173 | "type": "address"
174 | },
175 | {
176 | "internalType": "bytes32",
177 | "name": "noteHash",
178 | "type": "bytes32"
179 | },
180 | {
181 | "internalType": "address",
182 | "name": "tokenAddress",
183 | "type": "address"
184 | },
185 | {
186 | "internalType": "uint256",
187 | "name": "startTime",
188 | "type": "uint256"
189 | },
190 | {
191 | "internalType": "uint256",
192 | "name": "stopTime",
193 | "type": "uint256"
194 | }
195 | ],
196 | "name": "createStream",
197 | "outputs": [
198 | {
199 | "internalType": "uint256",
200 | "name": "",
201 | "type": "uint256"
202 | }
203 | ],
204 | "payable": false,
205 | "stateMutability": "nonpayable",
206 | "type": "function"
207 | },
208 | {
209 | "constant": true,
210 | "inputs": [
211 | {
212 | "internalType": "uint256",
213 | "name": "streamId",
214 | "type": "uint256"
215 | }
216 | ],
217 | "name": "getStream",
218 | "outputs": [
219 | {
220 | "internalType": "address",
221 | "name": "sender",
222 | "type": "address"
223 | },
224 | {
225 | "internalType": "address",
226 | "name": "recipient",
227 | "type": "address"
228 | },
229 | {
230 | "internalType": "bytes32",
231 | "name": "noteHash",
232 | "type": "bytes32"
233 | },
234 | {
235 | "internalType": "address",
236 | "name": "tokenAddress",
237 | "type": "address"
238 | },
239 | {
240 | "internalType": "uint256",
241 | "name": "startTime",
242 | "type": "uint256"
243 | },
244 | {
245 | "internalType": "uint256",
246 | "name": "lastWithdrawTime",
247 | "type": "uint256"
248 | },
249 | {
250 | "internalType": "uint256",
251 | "name": "stopTime",
252 | "type": "uint256"
253 | }
254 | ],
255 | "payable": false,
256 | "stateMutability": "view",
257 | "type": "function"
258 | },
259 | {
260 | "constant": true,
261 | "inputs": [],
262 | "name": "nextStreamId",
263 | "outputs": [
264 | {
265 | "internalType": "uint256",
266 | "name": "",
267 | "type": "uint256"
268 | }
269 | ],
270 | "payable": false,
271 | "stateMutability": "view",
272 | "type": "function"
273 | },
274 | {
275 | "constant": false,
276 | "inputs": [
277 | {
278 | "internalType": "uint256",
279 | "name": "streamId",
280 | "type": "uint256"
281 | },
282 | {
283 | "internalType": "bytes",
284 | "name": "_proof1",
285 | "type": "bytes"
286 | },
287 | {
288 | "internalType": "bytes",
289 | "name": "_proof2",
290 | "type": "bytes"
291 | },
292 | {
293 | "internalType": "uint256",
294 | "name": "_streamDurationToWithdraw",
295 | "type": "uint256"
296 | }
297 | ],
298 | "name": "withdrawFromStream",
299 | "outputs": [],
300 | "payable": false,
301 | "stateMutability": "nonpayable",
302 | "type": "function"
303 | }
304 | ]
305 |
--------------------------------------------------------------------------------
/packages/subgraph/networks.yaml:
--------------------------------------------------------------------------------
1 | rinkeby:
2 | contracts:
3 | NoteStream:
4 | address: '0xCcb98Efa4eA6a3814ece095f73264c43D7D50071'
5 | startBlock: 6625807
6 | networkName: rinkeby
7 |
--------------------------------------------------------------------------------
/packages/subgraph/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@notestream/subgraph",
3 | "description": "GraphQL server built with The Graph",
4 | "version": "2.1.0",
5 | "author": {
6 | "name": "Tom French",
7 | "email": "tom@tomfren.ch",
8 | "url": "https://github.com/TomAFrench/NoteStream"
9 | },
10 | "bugs": {
11 | "url": "https://github.com/TomAFrench/NoteStream/issues"
12 | },
13 | "devDependencies": {
14 | "@graphprotocol/graph-cli": "^0.18.0",
15 | "@graphprotocol/graph-ts": "^0.18.1",
16 | "axios": "^0.19.0",
17 | "fs-extra": "^8.1.0",
18 | "handlebars": "^4.5.2",
19 | "js-yaml": "^3.13.1",
20 | "lint-staged": "^10.2.2",
21 | "shx": "^0.3.2",
22 | "typy": "^3.3.0"
23 | },
24 | "license": "LGPL-3.0",
25 | "repository": {
26 | "type": "git",
27 | "url": "git+https://github.com/TomAFrench/NoteStream.git"
28 | },
29 | "scripts": {
30 | "precommit": "lint-staged",
31 | "commit": "git-cz",
32 | "clean": "shx rm -rf ./build ./src/types ./subgraph.yaml",
33 | "codegen": "graph codegen --debug --output-dir src/types/",
34 | "create:local": "graph create tomafrench/notestream --node http://127.0.0.1:8020",
35 | "deploy": "graph deploy $SUBGRAPH --debug --ipfs https://api.thegraph.com/ipfs/ --node https://api.thegraph.com/deploy/",
36 | "deploy:goerli": "yarn prepare:goerli && SUBGRAPH=tomafrench/notestream-goerli yarn deploy",
37 | "deploy:kovan": "yarn prepare:kovan && SUBGRAPH=tomafrench/notestream-kovan yarn deploy",
38 | "deploy:local": "graph deploy tomafrench/notestream --debug --ipfs http://127.0.0.1:5001 --node http://127.0.0.1:8020",
39 | "deploy:mainnet": "yarn prepare:mainnet && SUBGRAPH=tomafrench/notestream yarn deploy",
40 | "deploy:rinkeby": "yarn prepare:rinkeby && SUBGRAPH=tomafrench/notestream-rinkeby yarn deploy",
41 | "deploy:ropsten": "yarn prepare:ropsten && SUBGRAPH=tomafrench/notestream-ropsten yarn deploy",
42 | "prepare:goerli": "NETWORK_NAME=goerli node ./updateAddresses.js && NETWORK_NAME=goerli node ./templatify.js",
43 | "prepare:kovan": "NETWORK_NAME=kovan node ./updateAddresses.js && NETWORK_NAME=kovan node ./templatify.js",
44 | "prepare:mainnet": "NETWORK_NAME=mainnet node ./updateAddresses.js && NETWORK_NAME=mainnet node ./templatify.js",
45 | "prepare:rinkeby": "NETWORK_NAME=rinkeby node ./updateAddresses.js && NETWORK_NAME=rinkeby node ./templatify.js",
46 | "prepare:ropsten": "NETWORK_NAME=ropsten node ./updateAddresses.js && NETWORK_NAME=ropsten node ./templatify.js",
47 | "prepare:local": "NETWORK_NAME=local node ./updateAddresses.js && NETWORK_NAME=local node ./templatify.js",
48 | "remove-local": "graph remove tomafrench/notestream --node http://127.0.0.1:8020/",
49 | "reset-local": "yarn codegen && yarn remove-local && yarn create-local && yarn deploy-local",
50 | "has:changed": "bash ../monorepo-scripts/ci/hasChanged.sh subgraph"
51 | },
52 | "config": {
53 | "commitizen": {
54 | "path": "./node_modules/cz-conventional-changelog"
55 | }
56 | },
57 | "dependencies": {
58 | "@graphprotocol/graph-ts": "^0.18.1"
59 | }
60 | }
61 |
--------------------------------------------------------------------------------
/packages/subgraph/schema.graphql:
--------------------------------------------------------------------------------
1 | ### Generic ###
2 |
3 | type Token @entity {
4 | id: ID!
5 | name: String
6 | decimals: Int!
7 | symbol: String
8 | # Only interested in tokens with a linked zkAsset
9 | zkAsset: ZkAsset!
10 | }
11 |
12 | type ZkAsset @entity {
13 | id: ID!
14 | name: String
15 | scalingFactor: BigInt!
16 | symbol: String
17 | # ZkAsset may be purely private
18 | linkedToken: Token
19 | }
20 |
21 | interface TransactionEvent {
22 | id: ID!
23 | block: Int!
24 | event: String!
25 | from: Bytes!
26 | stream: Stream!
27 | timestamp: BigInt!
28 | to: Bytes
29 | }
30 |
31 | ### NoteStream ###
32 |
33 | # The id is the stream's id
34 | type Cancellation implements TransactionEvent @entity {
35 | id: ID!
36 | block: Int!
37 | event: String!
38 | from: Bytes!
39 | stream: Stream!
40 | timestamp: BigInt!
41 | to: Bytes
42 | duration: BigInt!
43 | }
44 |
45 | type Withdrawal implements TransactionEvent @entity {
46 | id: ID!
47 | block: Int!
48 | event: String!
49 | from: Bytes!
50 | stream: Stream!
51 | timestamp: BigInt!
52 | to: Bytes
53 | duration: BigInt!
54 | }
55 |
56 | type Stream @entity {
57 | id: ID!
58 | cancellation: Cancellation
59 | lastWithdrawTime: BigInt!
60 | # Optional as cancelled streams don't have a note
61 | noteHash: Bytes
62 | recipient: Bytes!
63 | sender: Bytes!
64 | startTime: BigInt!
65 | stopTime: BigInt!
66 | timestamp: BigInt!
67 | # @derivedFrom makes it possible to map large sets of data to the same stream
68 | txs: [TransactionEvent!] @derivedFrom(field: "stream")
69 | withdrawals: [Withdrawal!] @derivedFrom(field: "stream")
70 | zkAsset: ZkAsset
71 | }
72 |
--------------------------------------------------------------------------------
/packages/subgraph/src/mappings/noteStream.ts:
--------------------------------------------------------------------------------
1 | import { Cancellation, Stream, Withdrawal } from '../types/schema';
2 | import {
3 | CreateStream as CreateStreamEvent,
4 | WithdrawFromStream as WithdrawFromStreamEvent,
5 | CancelStream as CancelStreamEvent,
6 | } from '../types/NoteStream/NoteStream';
7 | import { addZkAsset } from './zkAssets';
8 |
9 | export function handleCreateStream(event: CreateStreamEvent): void {
10 | /* Create adjacent but important object */
11 | addZkAsset(event.params.zkAsset.toHex());
12 | /* Create the stream object */
13 | const streamId = event.params.streamId.toString();
14 | const stream = new Stream(streamId);
15 | stream.lastWithdrawTime = event.params.startTime;
16 | stream.noteHash = event.params.noteHash;
17 | stream.recipient = event.params.recipient;
18 | stream.sender = event.params.sender;
19 | stream.startTime = event.params.startTime;
20 | stream.stopTime = event.params.stopTime;
21 | stream.timestamp = event.block.timestamp;
22 | stream.zkAsset = event.params.zkAsset.toHex();
23 | stream.save();
24 | }
25 |
26 | export function handleWithdrawFromStream(event: WithdrawFromStreamEvent): void {
27 | const streamId = event.params.streamId.toString();
28 | const stream = Stream.load(streamId);
29 | if (stream == null) {
30 | return;
31 | }
32 | stream.noteHash = event.params.noteHash;
33 | stream.lastWithdrawTime = stream.lastWithdrawTime.plus(
34 | event.params.withdrawDuration,
35 | );
36 | stream.save();
37 |
38 | const withdrawal = new Withdrawal(event.transaction.hash.toHex());
39 | withdrawal.block = event.block.number.toI32();
40 | withdrawal.event = 'WithdrawFromStream';
41 | withdrawal.from = event.transaction.from;
42 | withdrawal.stream = streamId;
43 | withdrawal.timestamp = event.block.timestamp;
44 | withdrawal.to = event.transaction.to;
45 | withdrawal.duration = event.params.withdrawDuration;
46 | withdrawal.save();
47 | }
48 |
49 | export function handleCancelStream(event: CancelStreamEvent): void {
50 | const streamId = event.params.streamId.toString();
51 | const stream = Stream.load(streamId);
52 | if (stream == null) {
53 | return;
54 | }
55 |
56 | const cancellation = new Cancellation(event.transaction.hash.toHex());
57 |
58 | cancellation.block = event.block.number.toI32();
59 | cancellation.event = 'CancelStream';
60 | cancellation.from = event.transaction.from;
61 | cancellation.stream = streamId;
62 | cancellation.timestamp = event.block.timestamp;
63 | cancellation.to = event.transaction.to;
64 | cancellation.duration = event.params.cancelDuration;
65 | cancellation.save();
66 |
67 | stream.cancellation = event.transaction.hash.toHex();
68 | stream.save();
69 | }
70 |
--------------------------------------------------------------------------------
/packages/subgraph/src/mappings/tokens.ts:
--------------------------------------------------------------------------------
1 | import { Token } from '../types/schema';
2 |
3 | export function addToken(address: string, zkAsset: string): void {
4 | let token = Token.load(address);
5 | if (token != null) {
6 | return;
7 | }
8 |
9 | /* Mainnet */
10 | token = new Token(address);
11 | token.zkAsset = zkAsset;
12 | /* Testnets */
13 | if (address == '0xc3dbf84abb494ce5199d5d4d815b10ec29529ff8') {
14 | token.name = 'TestnetDAI';
15 | token.decimals = 18;
16 | token.symbol = 'DAI';
17 | } else if (address == '0x1f9061b953bba0e36bf50f21876132dcf276fc6e') {
18 | token.name = 'ZEENUS';
19 | token.decimals = 0;
20 | token.symbol = 'ZEENUS';
21 | } else if (address == '0x022e292b44b5a146f2e8ee36ff44d3dd863c915c') {
22 | token.name = 'XEENUS';
23 | token.decimals = 18;
24 | token.symbol = 'XEENUS';
25 | } else {
26 | token.name = 'unknown';
27 | token.decimals = 0;
28 | token.symbol = 'unknown';
29 | }
30 |
31 | token.save();
32 | }
33 |
--------------------------------------------------------------------------------
/packages/subgraph/src/mappings/transactions.ts:
--------------------------------------------------------------------------------
1 | // import { ethereum } from '@graphprotocol/graph-ts';
2 |
3 | // import { Transaction } from '../types/schema';
4 |
5 | // export function addTransaction(
6 | // name: string,
7 | // event: ethereum.Event,
8 | // streamId: string,
9 | // ): void {
10 | // const transaction = new Transaction(event.transaction.hash.toHex());
11 | // transaction.event = name;
12 | // transaction.block = event.block.number.toI32();
13 | // transaction.from = event.transaction.from;
14 | // transaction.stream = streamId;
15 | // transaction.timestamp = event.block.timestamp;
16 | // transaction.to = event.transaction.to;
17 | // transaction.save();
18 | // }
19 |
--------------------------------------------------------------------------------
/packages/subgraph/src/mappings/zkAssets.ts:
--------------------------------------------------------------------------------
1 | import { json } from '@graphprotocol/graph-ts';
2 | import { ZkAsset } from '../types/schema';
3 | import { addToken } from './tokens';
4 |
5 | export function addZkAsset(address: string): void {
6 | let zkAsset = ZkAsset.load(address);
7 | if (zkAsset != null) {
8 | return;
9 | }
10 |
11 | /* Mainnet */
12 | zkAsset = new ZkAsset(address);
13 |
14 | /* Testnets */
15 | if (address == '0x9a9c00d7015f2708f30875e2d81f206bb5052e31') {
16 | zkAsset.name = 'zkTestnetDAI';
17 | zkAsset.scalingFactor = json.toBigInt('10000000000000000');
18 | zkAsset.symbol = 'zkDAI';
19 | zkAsset.linkedToken = '0xc3dbf84abb494ce5199d5d4d815b10ec29529ff8';
20 | addToken(zkAsset.linkedToken, '0x9a9c00d7015f2708f30875e2d81f206bb5052e31');
21 | } else if (address == '0xfd3cebb289b26ad63a389365187689fe21f204cd') {
22 | zkAsset.name = 'zkZEENUS';
23 | zkAsset.scalingFactor = json.toBigInt('1');
24 | zkAsset.symbol = 'zkZEENUS';
25 | zkAsset.linkedToken = '0x1f9061b953bba0e36bf50f21876132dcf276fc6e';
26 | addToken(zkAsset.linkedToken, '0xfd3cebb289b26ad63a389365187689fe21f204cd');
27 | } else if (address == '0x232d758910c5249f1ccc3cb774001da1a685de3f') {
28 | zkAsset.name = 'zkXEENUS';
29 | zkAsset.scalingFactor = json.toBigInt('50000000000000000');
30 | zkAsset.symbol = 'zkXEENUS';
31 | zkAsset.linkedToken = '0x022e292b44b5a146f2e8ee36ff44d3dd863c915c';
32 | addToken(zkAsset.linkedToken, '0x232d758910c5249f1ccc3cb774001da1a685de3f');
33 | } else {
34 | zkAsset.name = 'unknown';
35 | zkAsset.scalingFactor = json.toBigInt('10000000000000000');
36 | zkAsset.symbol = 'unknown';
37 | }
38 |
39 | zkAsset.save();
40 | }
41 |
--------------------------------------------------------------------------------
/packages/subgraph/subgraph.template.yaml:
--------------------------------------------------------------------------------
1 | specVersion: 0.0.2
2 | description: NoteStream is the Ethereum protocol for private real-time finance
3 | repository: https://github.com/TomAFrech/NoteStream/packages/subgraph
4 | schema:
5 | file: ./schema.graphql
6 | dataSources:
7 | - kind: ethereum/contract
8 | name: NoteStream
9 | network: {{networkName}}
10 | source:
11 | abi: NoteStream
12 | address: '{{contracts.NoteStream.address}}'
13 | startBlock: {{contracts.NoteStream.startBlock}}
14 | mapping:
15 | kind: ethereum/events
16 | apiVersion: 0.0.3
17 | abis:
18 | - name: NoteStream
19 | file: ./abis/NoteStream.json
20 | entities:
21 | - Cancellation
22 | - Stream
23 | - Transaction
24 | - Withdrawal
25 | - ZkAsset
26 | eventHandlers:
27 | - event: CreateStream(indexed uint256,indexed address,indexed address,address,bytes32,uint256,uint256)
28 | handler: handleCreateStream
29 | - event: WithdrawFromStream(indexed uint256,indexed address,indexed address,bytes32,uint256)
30 | handler: handleWithdrawFromStream
31 | - event: CancelStream(indexed uint256,indexed address,indexed address,uint256)
32 | handler: handleCancelStream
33 | file: ./src/mappings/noteStream.ts
34 | language: wasm/assemblyscript
--------------------------------------------------------------------------------
/packages/subgraph/templatify.js:
--------------------------------------------------------------------------------
1 | const Handlebars = require('handlebars');
2 | const fs = require('fs-extra');
3 | const path = require('path');
4 | const yaml = require('js-yaml');
5 |
6 | const { t } = require('typy');
7 |
8 | function getNetworkNameForSubgraph() {
9 | switch (process.env.SUBGRAPH) {
10 | case undefined:
11 | case 'tomafrench/notestream':
12 | return 'mainnet';
13 | case 'tomafrench/notestream-goerli':
14 | return 'goerli';
15 | case 'tomafrench/notestream-kovan':
16 | return 'kovan';
17 | case 'tomafrench/notestream-rinkeby':
18 | return 'rinkeby';
19 | case 'tomafrench/notestream-ropsten':
20 | return 'ropsten';
21 | case 'tomafrench/notestream-local':
22 | return 'local';
23 | default:
24 | return null;
25 | }
26 | }
27 |
28 | (async () => {
29 | const networksFilePath = path.join(__dirname, 'networks.yaml');
30 | const networks = yaml.load(
31 | await fs.readFile(networksFilePath, { encoding: 'utf-8' }),
32 | );
33 |
34 | const networkName = process.env.NETWORK_NAME || getNetworkNameForSubgraph();
35 | const network = t(networks, networkName).safeObject;
36 | if (t(network).isFalsy) {
37 | throw new Error(
38 | 'Please set either a "NETWORK_NAME" or a "SUBGRAPH" environment variable',
39 | );
40 | }
41 |
42 | const subgraphTemplateFilePath = path.join(
43 | __dirname,
44 | 'subgraph.template.yaml',
45 | );
46 | const source = await fs.readFile(subgraphTemplateFilePath, 'utf-8');
47 | const template = Handlebars.compile(source);
48 | const result = template(network);
49 | await fs.writeFile(path.join(__dirname, 'subgraph.yaml'), result);
50 |
51 | console.log('🎉 subgraph.yaml successfully generated');
52 | })();
53 |
--------------------------------------------------------------------------------
/packages/subgraph/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "alwaysStrict": true,
4 | "noImplicitAny": true,
5 | "noImplicitReturns": true,
6 | "noImplicitThis": true,
7 | "noEmitOnError": true,
8 | "strictNullChecks": true,
9 | "moduleResolution": "Node"
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/packages/subgraph/updateAddresses.js:
--------------------------------------------------------------------------------
1 | const fs = require('fs-extra');
2 | const path = require('path');
3 | const yaml = require('js-yaml');
4 |
5 | const { t } = require('typy');
6 |
7 | function getNetworkNameForSubgraph() {
8 | switch (process.env.SUBGRAPH) {
9 | case undefined:
10 | case 'tomafrench/notestream':
11 | return 'mainnet';
12 | case 'tomafrench/notestream-goerli':
13 | return 'goerli';
14 | case 'tomafrench/notestream-kovan':
15 | return 'kovan';
16 | case 'tomafrench/notestream-rinkeby':
17 | return 'rinkeby';
18 | case 'tomafrench/notestream-ropsten':
19 | return 'ropsten';
20 | case 'tomafrench/notestream-local':
21 | return 'local';
22 | default:
23 | return null;
24 | }
25 | }
26 |
27 | (async () => {
28 | const networkName = process.env.NETWORK_NAME || getNetworkNameForSubgraph();
29 | const addressesDirectory = path.join(
30 | __dirname,
31 | '../contract-artifacts/addresses/',
32 | );
33 | const addressesFilePath = path.join(
34 | addressesDirectory,
35 | `${networkName}.json`,
36 | );
37 | const addresses = JSON.parse(
38 | await fs.readFile(addressesFilePath, { encoding: 'utf-8' }),
39 | );
40 |
41 | const networksFilePath = path.join(__dirname, 'networks.yaml');
42 | const networks = yaml.load(
43 | await fs.readFile(networksFilePath, { encoding: 'utf-8' }),
44 | );
45 |
46 | const network = t(networks, networkName).safeObject;
47 | if (t(network).isFalsy) {
48 | throw new Error(
49 | 'Please set either a "NETWORK_NAME" or a "SUBGRAPH" environment variable',
50 | );
51 | }
52 |
53 | network.contracts.NoteStream.address = addresses.NoteStream;
54 | await fs.writeFile(networksFilePath, yaml.safeDump(networks));
55 |
56 | console.log('🎉 networks.yaml successfully updated');
57 | })();
58 |
--------------------------------------------------------------------------------