123 |
124 |
145 |
150 | )}
151 |
152 |
153 |
154 | );
155 | };
156 |
157 | export type AppProps = {
158 | config: Map3InitConfig;
159 | onClose: () => void;
160 | };
161 |
162 | export default App;
163 |
--------------------------------------------------------------------------------
/src/App.withAddressAndNetwork.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import { AppProps } from './App';
4 | import ErrorWrapper from './components/ErrorWrapper';
5 | import LoadingWrapper from './components/LoadingWrapper';
6 | import {
7 | Organization,
8 | useGetAssetByAddressAndNetworkCodeQuery,
9 | useGetNetworksQuery,
10 | } from './generated/apollo-gql';
11 | import { Store } from './providers/Store';
12 | import Map3SdkSteps from './steps';
13 |
14 | const AppWithAddressAndNetwork: React.FC<
15 | AppProps & { plan: Organization['plan'] }
16 | > = ({ config, onClose, plan }) => {
17 | const { data, error, loading, refetch } = useGetNetworksQuery();
18 | const { selection } = config.options || {};
19 | const { address, networkCode } = selection || {};
20 | const {
21 | data: assetData,
22 | error: assetError,
23 | loading: assetLoading,
24 | refetch: assetRefetch,
25 | } = useGetAssetByAddressAndNetworkCodeQuery({
26 | fetchPolicy: 'no-cache',
27 | variables: { address, networkCode },
28 | });
29 |
30 | if (loading || assetLoading) return
17 | {children}
18 |
19 | );
20 |
--------------------------------------------------------------------------------
/src/components/CountdownTimer/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useContext, useEffect, useState } from 'react';
2 |
3 | import { Context } from '../../providers/Store';
4 |
5 | const circumference = Math.PI * 20;
6 |
7 | const CountdownTimer: React.FC
14 |
26 | {stacktrace ? (
27 |
15 | {' '}
16 |
18 | {header}
17 |
19 | {description} Please{' '}
20 |
21 | click here
22 | {' '}
23 | to retry.
24 |
25 |
28 |
33 | ) : null}
34 | View the raw error:
{' '} 29 |
30 | {stacktrace}
31 |
32 |
10 | {children}
11 |
12 | );
13 | };
14 |
15 | type Props = {
16 | className?: string;
17 | role?: AriaRole;
18 | };
19 |
20 | export default InnerWrapper;
21 |
--------------------------------------------------------------------------------
/src/components/ListItem/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { PropsWithChildren } from 'react';
2 |
3 | import InnerWrapper from '../InnerWrapper';
4 |
5 | const ListItem: React.FC<
6 | PropsWithChildren
9 |
16 | );
17 | };
18 |
19 | type Props = {
20 | message?: string;
21 | };
22 |
23 | export default LoadingWrapper;
24 |
--------------------------------------------------------------------------------
/src/components/MethodIcon/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import BinanceLogo from 'url:../../assets/binance-pay-logo.png';
3 | import CoinbaseWalletLogo from 'url:../../assets/coinbase.png';
4 | import MetaMaskLogo from 'url:../../assets/metamask.png';
5 |
6 | import { PaymentMethod } from '../../generated/apollo-gql';
7 |
8 | const MethodIcon: React.FC
10 |
15 |
11 |
12 |
13 | {message || t('copy.loading')}
14 |
6 |
12 |
13 | );
14 | };
15 |
16 | type Props = {
17 | progress: number;
18 | };
19 |
20 | export default ProgressBar;
21 |
--------------------------------------------------------------------------------
/src/components/StepTitle/index.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import CountdownTimer from '../CountdownTimer';
4 |
5 | const StepTitle: React.FC
11 | {props.value}
13 | );
14 | };
15 |
16 | type Props = {
17 | testId?: string;
18 | value: string;
19 | };
20 |
21 | export default StepTitle;
22 |
--------------------------------------------------------------------------------
/src/components/confirmations/BridgeQuoteConfirmation/index.tsx:
--------------------------------------------------------------------------------
1 | import { motion } from 'framer-motion';
2 | import React, { useContext } from 'react';
3 | import { useTranslation } from 'react-i18next';
4 |
5 | import { ISO_4217_TO_SYMBOL } from '../../../constants/iso4217';
6 | import { Context } from '../../../providers/Store';
7 | import { DECIMAL_FALLBACK } from '../../../steps/EnterAmount';
8 |
9 | const BridgeQuoteConfirmation: React.FC setIsConfirming(false)}
32 | onDragEnd={() => setIsConfirming(false)}
33 | >
34 |
35 |
36 |
37 |
46 | {bridgeQuote.estimate?.gasCostsUsd &&
47 | bridgeQuote.estimate.gasCostsUsd > 1 && (
48 | {t('copy.amount_to_pay')}:
38 |
39 | {Number(amount).toFixed(
40 | Math.min(6, state.asset?.decimals || DECIMAL_FALLBACK)
41 | )}{' '}
42 | {state.asset?.symbol} ({ISO_4217_TO_SYMBOL['USD']}
43 | {bridgeQuote.estimate?.fromAmountUsd?.toFixed(2)})
44 |
45 |
49 |
58 | )}
59 | {bridgeQuote.estimate?.amountToReceive &&
60 | Number(bridgeQuote.estimate.fromAmountUsd) -
61 | Number(bridgeQuote.estimate.toAmountUsd) >
62 | 0 ? (
63 | {t('copy.gas_cost')}:
50 |
51 | <>
52 | {Number(bridgeQuote.estimate?.gasCosts)?.toFixed(6)}{' '}
53 | {state.network?.symbol} ({ISO_4217_TO_SYMBOL['USD']}
54 | {bridgeQuote.estimate?.gasCostsUsd?.toFixed(2)})
55 |
56 |
57 |
64 |
77 | ) : null}
78 | {bridgeQuote.estimate?.amountToReceive ? (
79 | Bridge Fee:
65 |
66 | {(
67 | Number(amount) - Number(bridgeQuote.estimate.amountToReceive)
68 | ).toFixed(6)}{' '}
69 | {state.asset?.symbol} ({ISO_4217_TO_SYMBOL['USD']}
70 | {(
71 | Number(bridgeQuote.estimate.fromAmountUsd) -
72 | Number(bridgeQuote.estimate.toAmountUsd)
73 | )?.toFixed(2)}
74 | )
75 |
76 |
80 |
87 | ) : null}
88 | {t('copy.receive_amount')}:
81 |
82 | {Number(bridgeQuote.estimate.amountToReceive).toFixed(6)}{' '}
83 | {state.asset?.symbol} ({ISO_4217_TO_SYMBOL['USD']}
84 | {bridgeQuote.estimate.toAmountUsd?.toFixed(2)})
85 |
86 |
34 |
35 | {isConfirming && state.bridgeQuote && (
36 |
47 |
66 |
67 | );
68 | };
69 |
70 | type Props = EvmMethodProviderProps;
71 |
72 | export default WalletConnect;
73 |
--------------------------------------------------------------------------------
/src/components/methods/WindowEthereum/index.tsx:
--------------------------------------------------------------------------------
1 | import { Button } from '@map3xyz/components';
2 | import { ethers } from 'ethers';
3 | import { AnimatePresence } from 'framer-motion';
4 | import {
5 | forwardRef,
6 | useContext,
7 | useEffect,
8 | useImperativeHandle,
9 | useRef,
10 | } from 'react';
11 |
12 | import useOnClickOutside from '../../../hooks/useOnClickOutside';
13 | import { Context } from '../../../providers/Store';
14 | import {
15 | DECIMAL_FALLBACK,
16 | DOWNLOAD_EXTENSION,
17 | SubmitHandler,
18 | } from '../../../steps/EnterAmount';
19 | import BridgeQuoteConfirmation from '../../confirmations/BridgeQuoteConfirmation';
20 | import MethodIcon from '../../MethodIcon';
21 | import { EvmMethodProviderProps } from '../types';
22 |
23 | const WindowEthereum = forwardRef
129 |
130 | {isConfirming && state.bridgeQuote && (
131 |
142 |
161 |
162 | );
163 | }
164 | );
165 |
166 | type Props = EvmMethodProviderProps;
167 |
168 | export default WindowEthereum;
169 |
--------------------------------------------------------------------------------
/src/components/methods/types.ts:
--------------------------------------------------------------------------------
1 | export type EvmMethodProviderProps = {
2 | amount: string;
3 | disabled: boolean;
4 | isConfirming: boolean;
5 | loading?: boolean;
6 | setFormError: React.Dispatch
10 |
43 |
47 |
48 | );
49 |
--------------------------------------------------------------------------------
/src/steps/AssetSelection/AssetSelection.test.tsx:
--------------------------------------------------------------------------------
1 | import { MockedProvider } from '@apollo/client/testing';
2 | import { fireEvent, render as RTLRender } from '@testing-library/react';
3 |
4 | import { mockConfig } from '~/jest/__mocks__/mockConfig';
5 | import { render, screen } from '~/jest/test-utils';
6 |
7 | import App from '../../App';
8 |
9 | describe('Asset Selection', () => {
10 | it('renders', async () => {
11 | render(
120 |
121 |
128 |
129 | {loading &&
185 |
186 | );
187 | };
188 |
189 | type Props = {};
190 |
191 | export default BinancePay;
192 |
--------------------------------------------------------------------------------
/src/steps/ConfirmRequiredAmount/ConfirmRequiredAmount.test.tsx:
--------------------------------------------------------------------------------
1 | import { mockConfig } from '~/jest/__mocks__/mockConfig';
2 | import { fireEvent, render, screen } from '~/jest/test-utils';
3 |
4 | import App from '../../App';
5 | import ConfirmRequiredAmount from '.';
6 |
7 | describe('ConfirmRequiredAmount', () => {
8 | describe('render major amount if minor amount is required', () => {
9 | beforeEach(async () => {
10 | render(
11 | 125 | {t('title.pay_via_binance')} 126 |
127 |
132 |
141 |
148 | )}
149 |
183 | )}
184 |
133 | {t('copy.scan_binance_qr_code')}
134 |
135 | {isPolling && (
136 |
150 |
171 |
172 |
177 |
180 |
181 |
182 |
23 |
31 |
51 |
120 |
121 | );
122 | };
123 |
124 | type Props = {};
125 |
126 | export default ConfirmRequiredAmount;
127 |
--------------------------------------------------------------------------------
/src/steps/History/HistoryContactUs/index.tsx:
--------------------------------------------------------------------------------
1 | import { Badge, Button, Input, Radio, Textarea } from '@map3xyz/components';
2 | import { motion } from 'framer-motion';
3 | import React, { useContext, useState } from 'react';
4 |
5 | import InnerWrapper from '../../../components/InnerWrapper';
6 | import { Context } from '../../../providers/Store';
7 |
8 | const HistoryContactUs: React.FC
24 |
25 |
27 |
28 |
30 |
32 | 🎯
33 |
50 | {t('title.attention')}
34 |
35 | exactly {{amount}} {{symbol}} on the {{network}} or your payment may be
41 | delayed, returned or lost."
42 | values={{
43 | amount: state.requiredAmountMajor,
44 | network: state.network?.networkName,
45 | symbol: state.asset?.symbol,
46 | }}
47 | />
48 |
49 |
77 |
133 | );
134 | };
135 |
136 | type Props = {};
137 |
138 | export default NetworkSelection;
139 |
--------------------------------------------------------------------------------
/src/steps/PaymentMethod/PaymentMethod.test.tsx:
--------------------------------------------------------------------------------
1 | import { generateTestingUtils } from 'eth-testing';
2 | import * as reactDeviceDetect from 'react-device-detect';
3 | import { act } from 'react-dom/test-utils';
4 |
5 | import { mockConfig } from '~/jest/__mocks__/mockConfig';
6 | import { fireEvent, render, screen } from '~/jest/test-utils';
7 |
8 | import App from '../../App';
9 | import PaymentMethod from '.';
10 |
11 | describe('Payment Selection', () => {
12 | beforeEach(() => {
13 | render(
14 |
78 |
79 |
84 |
86 |
87 |
132 |
88 | {data?.mappedNetworksForAssetByOrg?.map((network) =>
89 | network ? (
90 | {
93 | if (network.bridged && destinationNetwork) {
94 | dispatch({
95 | payload: destinationNetwork,
96 | type: 'SET_DESTINATION_NETWORK',
97 | });
98 | }
99 | dispatch({ payload: network, type: 'SET_NETWORK' });
100 | dispatch({ payload: Steps.PaymentMethod, type: 'SET_STEP' });
101 | }}
102 | role="button"
103 | >
104 |
128 | ) : null
129 | )}
130 |
131 |
105 |
116 |
106 |
114 | {network.networkName}
115 |
117 | {network.bridged ? (
118 | // @ts-ignore
119 | {t('copy.bridged')}
120 | ) : null}
121 | {state.network?.networkName === network.networkName ? (
122 |
123 | ) : (
124 |
125 | )}
126 |
127 |
22 |
36 | ) : null}
37 | {state.bridgeQuote?.estimate?.gasCosts ? (
38 |
23 | {t('copy.amount_to_pay')}
24 |
25 |
26 |
35 |
39 |
52 | ) : null}
53 | {state.bridgeQuote?.estimate?.amountToReceive ? (
54 |
40 | {t('copy.gas_cost')}
41 |
42 |
43 |
51 |
55 |
68 | ) : null}
69 | {state.bridgeQuote?.id ? (
70 |
56 | {t('copy.receive_amount')}
57 |
58 |
59 |
67 |
71 |
78 | ) : null}
79 | {state.bridgeTransaction?.destinationChainTxId ? (
80 |
72 | Order ID
73 |
74 |
75 |
77 |
81 |
91 | ) : null}
92 |
93 | );
94 | };
95 |
96 | type Props = {};
97 |
98 | export default BridgeQuoteTransactionDetails;
99 |
--------------------------------------------------------------------------------
/src/steps/Result/Result.test.tsx:
--------------------------------------------------------------------------------
1 | import { generateTestingUtils } from 'eth-testing';
2 | import { ethers } from 'ethers';
3 |
4 | import { mockConfig } from '~/jest/__mocks__/mockConfig';
5 | import { web3Mock } from '~/jest/__mocks__/web3Mock';
6 | import { act, fireEvent, render, screen } from '~/jest/test-utils';
7 |
8 | import App from '../../App';
9 | import * as useWeb3Mock from '../../hooks/useWeb3';
10 | import Result from '.';
11 |
12 | jest.mock('ethers', () => {
13 | const originalModule = jest.requireActual('ethers');
14 | return {
15 | ...originalModule,
16 | ethers: {
17 | ...originalModule.ethers,
18 | Contract: jest.fn(() => {
19 | return {
20 | balanceOf: jest.fn(),
21 | estimateGas: {
22 | transfer: jest.fn(() => {
23 | return ethers.BigNumber.from(21_000);
24 | }),
25 | },
26 | };
27 | }),
28 | },
29 | };
30 | });
31 |
32 | describe('Result', () => {
33 | const web3MockSpy = jest.spyOn(useWeb3Mock, 'useWeb3');
34 |
35 | const getBalanceMock = jest.fn().mockImplementation(() => ({
36 | assetBalance: ethers.BigNumber.from('100000000'),
37 | chainBalance: ethers.BigNumber.from('20000000000000000000'),
38 | }));
39 |
40 | const onSuccessMock = jest.fn();
41 | const onFailureMock = jest.fn();
42 | beforeEach(() => {
43 | render(
44 |
82 | Destination Chain Tx ID
83 |
84 |
85 |
90 |
12 | Amount
13 |
14 |
15 |
17 | {state.tx.response?.from ? (
18 | <>
19 |
20 | From
21 |
22 |
28 | To
29 |
30 |
36 | Hash
37 |
38 |
53 |
60 | {loadingCurrentChain ? (
61 |
100 |
101 |
121 |
122 | );
123 | };
124 |
125 | type Props = {};
126 |
127 | export default SwitchChain;
128 |
--------------------------------------------------------------------------------
/src/styles/globals.scss:
--------------------------------------------------------------------------------
1 | .map3 {
2 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
3 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
4 | sans-serif;
5 | -webkit-font-smoothing: antialiased;
6 | -moz-osx-font-smoothing: grayscale;
7 |
8 | input::-webkit-outer-spin-button,
9 | input::-webkit-inner-spin-button {
10 | -webkit-appearance: none;
11 | margin: 0;
12 | }
13 |
14 | @media (min-width: 640px) {
15 | .sm\:text-xs {
16 | font-size: .75rem !important;
17 | line-height: 1rem !important;
18 | }
19 |
20 | .sm\:text-sm {
21 | font-size: .875rem !important;
22 | line-height: 1.25rem !important;
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/src/styles/scrollbars.scss:
--------------------------------------------------------------------------------
1 | /* Variables */
2 | :root {
3 | --scrollbar-size: .375rem;
4 | --scrollbar-minlength: 1.5rem;
5 | /* Minimum length of scrollbar thumb (width of horizontal, height of vertical) */
6 | --scrollbar-ff-width: thin;
7 | /* FF-only accepts auto, thin, none */
8 | --scrollbar-track-color: transparent;
9 | --scrollbar-color: rgba(0, 0, 0, .2);
10 | --scrollbar-color-hover: rgba(0, 0, 0, .3);
11 | --scrollbar-color-active: rgb(0, 0, 0);
12 | }
13 |
14 | /* Use .map3-layout-scrollbar-obtrusive to only use overflow if scrollbars don’t overlay */
15 | .scrollbar-test,
16 | .layout-cell {
17 | overscroll-behavior: contain;
18 | overflow-y: auto;
19 | -webkit-overflow-scrolling: touch;
20 | -ms-overflow-style: -ms-autohiding-scrollbar;
21 | scrollbar-width: var(--scrollbar-ff-width);
22 | }
23 |
24 | /* This class controls what elements have the new fancy scrollbar CSS */
25 | .layout-scrollbar {
26 | overflow-y: overlay;
27 | scrollbar-color: var(--scrollbar-color) var(--scrollbar-track-color);
28 | }
29 |
30 | /* Only apply height/width to ::-webkit-scrollbar if is obtrusive */
31 | .map3-layout-scrollbar-obtrusive .layout-scrollbar::-webkit-scrollbar {
32 | height: var(--scrollbar-size);
33 | width: var(--scrollbar-size);
34 | }
35 |
36 | .layout-scrollbar::-webkit-scrollbar-track {
37 | background: var(--scrollbar-track-color);
38 | }
39 |
40 | .layout-scrollbar::-webkit-scrollbar-thumb {
41 | background: var(--scrollbar-color);
42 | border-radius: 3px;
43 | }
44 |
45 | .layout-scrollbar::-webkit-scrollbar-thumb:hover {
46 | background: var(--scrollbar-color-hover);
47 | }
48 |
49 | .layout-scrollbar::-webkit-scrollbar-thumb:active {
50 | background: var(--scrollbar-color-active);
51 | }
52 |
53 | .scrollbar-test::-webkit-scrollbar-thumb:vertical,
54 | .layout-scrollbar::-webkit-scrollbar-thumb:vertical {
55 | min-height: var(--scrollbar-minlength);
56 | }
57 |
58 | .scrollbar-test::-webkit-scrollbar-thumb:horizontal,
59 | .layout-scrollbar::-webkit-scrollbar-thumb:horizontal {
60 | min-width: var(--scrollbar-minlength);
61 | }
62 |
63 | .dark {
64 | --scrollbar-color: rgba(255, 255, 255, .2);
65 | --scrollbar-color-hover: rgba(255, 255, 255, .3);
66 | --scrollbar-color-active: rgb(255, 255, 255, .5);
67 | }
68 |
69 | .rainbow-road {
70 | --scrollbar-track-color: linear-gradient(
71 | 0deg,
72 | rgba(255, 0, 0, 1) 0%,
73 | rgba(255, 154, 0, 1) 10%,
74 | rgba(208, 222, 33, 1) 20%,
75 | rgba(79, 220, 74, 1) 30%,
76 | rgba(63, 218, 216, 1) 40%,
77 | rgba(47, 201, 226, 1) 50%,
78 | rgba(28, 127, 238, 1) 60%,
79 | rgba(95, 21, 242, 1) 70%,
80 | rgba(186, 12, 248, 1) 80%,
81 | rgba(251, 7, 217, 1) 90%,
82 | rgba(255, 0, 0, 1) 100%
83 | );
84 | .rainbow-background {
85 | background: linear-gradient(
86 | 90deg,
87 | rgba(255, 0, 0, 1) 0%,
88 | rgba(255, 154, 0, 1) 10%,
89 | rgba(208, 222, 33, 1) 20%,
90 | rgba(79, 220, 74, 1) 30%,
91 | rgba(63, 218, 216, 1) 40%,
92 | rgba(47, 201, 226, 1) 50%,
93 | rgba(28, 127, 238, 1) 60%,
94 | rgba(95, 21, 242, 1) 70%,
95 | rgba(186, 12, 248, 1) 80%,
96 | rgba(251, 7, 217, 1) 90%,
97 | rgba(255, 0, 0, 1) 100%
98 | );
99 | }
100 | --scrollbar-color: transparent;
101 | .layout-scrollbar {
102 | overflow-y: overlay;
103 | scrollbar-color: initial;
104 | }
105 |
106 | .layout-scrollbar::-webkit-scrollbar-thumb {
107 | background: transparent; /* opacity: 0; should do the thing either */
108 | box-shadow: 0px 0px 0px 100000vh rgb(0 0 0 / var(--tw-bg-opacity));
109 | }
110 |
111 | &.dark {
112 | .layout-scrollbar::-webkit-scrollbar-thumb {
113 | box-shadow: 0px 0px 0px 100000vh var(--bg-primary-900);
114 | }
115 | }
116 | }
--------------------------------------------------------------------------------
/src/styles/supabase.scss:
--------------------------------------------------------------------------------
1 | .map3-accent {
2 | .sbui-btn-default {
3 | background: var(--accent-color) !important;
4 | color: var(--primary-color-900) !important;
5 | text-shadow: none !important;
6 | }
7 |
8 | }
9 |
10 | .dark {
11 | .map3 {
12 | .sbui-modal {
13 | background: var(--primary-color-900) !important;
14 | }
15 | }
16 | }
17 |
18 | .map3 {
19 | .sbui-modal {
20 | background: white !important;
21 | }
22 |
23 | .sbui-modal-content {
24 | padding: 0 !important;
25 | height: 100%;
26 | width: 100%;
27 | }
28 |
29 | .sbui-modal-content>.sbui-space-row {
30 | height: 100%;
31 | }
32 |
33 | .sbui-modal-content>.sbui-space-row>.sbui-space-col {
34 | height: 100%;
35 | }
36 |
37 | .w-full.sbui-modal--tiny {
38 | max-width: 100% !important;
39 | }
40 |
41 | .h-full .sbui-modal-content > .sbui-space-row {
42 | height: inherit !important;
43 | }
44 |
45 | .h-full .sbui-modal-content > .sbui-space-row > .sbui-space-col {
46 | height: inherit !important;
47 | }
48 |
49 | @media screen and (min-width: 640px) {
50 | .sbui-modal-content>.sbui-space-row {
51 | height: initial;
52 | }
53 |
54 | .sbui-modal-content>.sbui-space-row>.sbui-space-col {
55 | height: initial;
56 | }
57 | }
58 |
59 | .sbui-space-y-4> :not([hidden])~ :not([hidden]) {
60 | margin: 0 !important;
61 | }
62 |
63 | .sbui-modal-footer {
64 | display: none !important;
65 | }
66 | }
--------------------------------------------------------------------------------
/src/types/index.d.ts:
--------------------------------------------------------------------------------
1 | export {};
2 |
3 | declare global {
4 | interface Window {
5 | ethereum: any;
6 | isMap3Hosted: boolean;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/src/types/supabase.ts:
--------------------------------------------------------------------------------
1 | type WatchAddressPayload = {
2 | commit_timestamp: string; // '2023-01-13T15:36:49Z';
3 | errors: null;
4 | eventType: 'UPDATE';
5 | new: {
6 | address: string; // '0x165CD37b4C644C2921454429E7F9358d18A45e14';
7 | asset_id: string; // '38975bff-987f-4a06-b488-c75177e06914';
8 | block_height: number;
9 | confirmations_to_watch: number;
10 | created: string; // '2023-01-13T15:36:11.086';
11 | id: string; // '650b5833-1a98-4d30-bbfd-922c077bb400';
12 | memo: null;
13 | network_code: string; // 'goerli';
14 | organization_id: string; // '01d53f71-e299-4521-a45b-6a8909d3c0d5';
15 | state: 'confirming' | 'pending' | 'confirmed';
16 | subscribed: true;
17 | tx_amount: string; // '5000000000000';
18 | tx_block_hash: string; // '0x1705f2930e2de09d0394f76b946b067115f14e8144bb3e3f077be618fd11436e';
19 | tx_block_height: number;
20 | tx_confirmations: number;
21 | tx_data: string; // '0x';
22 | tx_detected_at: string; // '2023-01-13T15:36:27.722';
23 | tx_formatted_amount: string; // '0.005';
24 | tx_id: string; // '0x1fc77a32a90a7f885c5141692ecf7d89a963ea8db0abd5a9debb00fb473b948f';
25 | updated: string; // '2023-01-13T15:36:49.281';
26 | user_id: string; // 'preview-user-id';
27 | };
28 | old: {
29 | id: '650b5833-1a98-4d30-bbfd-922c077bb400';
30 | };
31 | schema: 'public';
32 | table: 'watched_address';
33 | };
34 |
35 | type WatchBridgeTransactionPayload = {
36 | commit_timestamp: string; // '2023-01-13T15:36:49Z';
37 | errors: null;
38 | eventType: 'UPDATE';
39 | new: {
40 | state: 'quoted' | 'subscribed' | 'failed' | 'completed';
41 | };
42 | old: {
43 | id: '650b5833-1a98-4d30-bbfd-922c077bb400';
44 | };
45 | schema: 'public';
46 | table: 'watched_address';
47 | };
48 |
--------------------------------------------------------------------------------
/src/types/walletConnect.ts:
--------------------------------------------------------------------------------
1 | type WalletConnectAppType = {
2 | android: string;
3 | browser: string;
4 | ios: string;
5 | linux: string;
6 | mac: string;
7 | windows: string;
8 | };
9 |
10 | type WalletConnectImageURLType = {
11 | lg: string;
12 | md: string;
13 | sm: string;
14 | };
15 |
16 | type WalletConnectPlatformType = {
17 | native: string;
18 | universal: string;
19 | };
20 |
21 | type WalletConnectMetadataColorsType = {
22 | primary: string;
23 | secondary: string;
24 | };
25 |
26 | type WalletConnectMetadataType = {
27 | colors: WalletConnectMetadataColorsType;
28 | shortName: string;
29 | };
30 |
31 | export type WalletConnectWallet = {
32 | app: WalletConnectAppType;
33 | app_type: string;
34 | chains: string[];
35 | description: string;
36 | desktop: WalletConnectPlatformType;
37 | homepage: string;
38 | id: string;
39 | image_id: string;
40 | image_url: WalletConnectImageURLType;
41 | metadata: WalletConnectMetadataType;
42 | mobile: WalletConnectPlatformType;
43 | name: string;
44 | sdks: string[];
45 | versions: string[];
46 | };
47 |
--------------------------------------------------------------------------------
/src/utils/abis/erc20.ts:
--------------------------------------------------------------------------------
1 | export const erc20Abi = [
2 | // Read-Only Functions
3 | 'function balanceOf(address owner) view returns (uint256)',
4 | 'function allowance(address owner, address spender) view returns (uint256)',
5 |
6 | // Authenticated Functions
7 | 'function transfer(address to, uint256 amount) returns (bool)',
8 | 'function approve(address spender, uint256 amount) returns (bool)',
9 |
10 | // Events
11 | 'event Transfer(address indexed from, address indexed to, uint amount)',
12 | ];
13 |
--------------------------------------------------------------------------------
/src/utils/debounce.ts:
--------------------------------------------------------------------------------
1 | export const debounce = (func: any, duration: number) => {
2 | let timeout: any;
3 | // @ts-ignore
4 | return function (...args) {
5 | const effect = () => {
6 | timeout = null;
7 | // @ts-ignore
8 | return func.apply(this, args);
9 | };
10 | clearTimeout(timeout);
11 | timeout = setTimeout(effect, duration);
12 | };
13 | };
14 |
--------------------------------------------------------------------------------
/src/utils/iso8601.ts:
--------------------------------------------------------------------------------
1 | export const iso8601ToDate = (iso8601: string, offset?: number) => {
2 | const tzoffset = (offset || new Date(iso8601).getTimezoneOffset()) * 60000;
3 | const localISODate = new Date(new Date(iso8601).getTime() - tzoffset);
4 |
5 | return localISODate;
6 | };
7 |
8 | export const iso8601ToString = (iso8601: string, offset?: number) => {
9 | const date = iso8601ToDate(iso8601, offset);
10 | return date.toLocaleString();
11 | };
12 |
--------------------------------------------------------------------------------
/src/utils/parseJwt.ts:
--------------------------------------------------------------------------------
1 | export const parseJwt = (token: string) =>
2 | JSON.parse(Buffer.from(token.split('.')[1], 'base64').toString());
3 |
--------------------------------------------------------------------------------
/src/utils/supabase.ts:
--------------------------------------------------------------------------------
1 | import { createClient, RealtimeChannel } from '@supabase/supabase-js';
2 |
3 | const supabase = createClient(
4 | process.env.SUPABASE_URL || '',
5 | process.env.SUPABASE_ANON_KEY || '',
6 | {
7 | realtime: {
8 | params: {
9 | eventsPerSecond: 10,
10 | },
11 | },
12 | }
13 | );
14 |
15 | interface WatchChannelCallbackFn {
16 | (payload: any): void;
17 | }
18 |
19 | export function listenToWatchedAddress(
20 | watchedAddressId: string,
21 | callback: WatchChannelCallbackFn
22 | ): RealtimeChannel {
23 | return supabase
24 | .channel('watched_address_changes')
25 | .on(
26 | 'postgres_changes',
27 | {
28 | event: 'UPDATE',
29 | filter: `id=eq.${watchedAddressId}`,
30 | schema: 'public',
31 | table: 'watched_address',
32 | },
33 | callback
34 | )
35 | .subscribe();
36 | }
37 |
38 | export function listenToBridgeTransaction(
39 | bridgeTransactionId: string,
40 | callback: WatchChannelCallbackFn
41 | ): RealtimeChannel {
42 | return supabase
43 | .channel('bridge_transaction_changes')
44 | .on(
45 | 'postgres_changes',
46 | {
47 | event: 'UPDATE',
48 | filter: `id=eq.${bridgeTransactionId}`,
49 | schema: 'public',
50 | table: 'bridge_transaction',
51 | },
52 | callback
53 | )
54 | .subscribe();
55 | }
56 |
--------------------------------------------------------------------------------
/src/utils/toHex.ts:
--------------------------------------------------------------------------------
1 | export const toHex = (value: number) => {
2 | if (
3 | typeof value === 'string' &&
4 | ((value as unknown) as string).startsWith('0x')
5 | ) {
6 | return value;
7 | }
8 |
9 | return '0x' + value.toString(16);
10 | };
11 |
--------------------------------------------------------------------------------
/src/utils/transactions/evm/index.test.ts:
--------------------------------------------------------------------------------
1 | import { buildTx } from './index';
2 |
3 | describe('EVM transactions', () => {
4 | describe('buildTx', () => {
5 | it('builds a transaction', () => {
6 | const result = buildTx({
7 | address: '0x123',
8 | amount: '1',
9 | assetContract: null,
10 | decimals: 18,
11 | from: '0x456',
12 | memo: '0x678',
13 | });
14 | expect(result).toEqual({
15 | data: '0x678',
16 | from: '0x456',
17 | to: '0x123',
18 | value: '0x0de0b6b3a7640000',
19 | });
20 | });
21 | it('builds erc20 transaction', () => {
22 | const result = buildTx({
23 | address: '0x2791bca1f2de4661ed88a30c99a7a9449aa84174',
24 | amount: '1',
25 | assetContract: '0xabc',
26 | decimals: 18,
27 | from: '0x456',
28 | memo: '0x678',
29 | });
30 | expect(result).toEqual({
31 | data: '0xa9059cbb0000000000000000000000002791bca1f2de4661ed88a30c99a7a9449aa841740000000000000000000000000000000000000000000000000de0b6b3a7640000678',
32 | from: '0x456',
33 | to: '0xabc',
34 | value: '0x0',
35 | });
36 | });
37 | });
38 | });
39 |
--------------------------------------------------------------------------------
/src/utils/transactions/evm/index.ts:
--------------------------------------------------------------------------------
1 | import { ethers } from 'ethers';
2 |
3 | import { erc20Abi } from '../../abis/erc20';
4 |
5 | export type PrebuiltTx = {
6 | data: string;
7 | from: string;
8 | to: string;
9 | value: string;
10 | };
11 |
12 | export type FinalTx = PrebuiltTx & {
13 | gas: string;
14 | gasPrice?: string;
15 | maxFeePerGas?: string;
16 | maxPriorityFeePerGas?: string;
17 | };
18 |
19 | export const buildTx = (params: {
20 | address: string;
21 | amount: string;
22 | assetContract?: string | null;
23 | decimals: number;
24 | from: string;
25 | memo?: string | null;
26 | }): PrebuiltTx => {
27 | const { address, amount, assetContract, decimals, from, memo } = params;
28 | const txParams = {
29 | data: memo || '0x',
30 | from,
31 | to: address,
32 | value: ethers.utils.parseEther(amount).toHexString(),
33 | };
34 |
35 | if (assetContract) {
36 | txParams.data =
37 | new ethers.utils.Interface(erc20Abi).encodeFunctionData('transfer', [
38 | address,
39 | ethers.utils.parseUnits(amount, decimals).toString(),
40 | ]) + (typeof memo === 'string' ? (memo as string).replace('0x', '') : '');
41 |
42 | txParams.to = assetContract;
43 | txParams.value = '0x0';
44 | }
45 |
46 | return txParams;
47 | };
48 |
--------------------------------------------------------------------------------
/src/utils/transactions/index.ts:
--------------------------------------------------------------------------------
1 | import * as evm from './evm';
2 |
3 | export { evm };
4 |
--------------------------------------------------------------------------------
/src/utils/utils.test.ts:
--------------------------------------------------------------------------------
1 | import { iso8601ToString } from './iso8601';
2 | import { toHex } from './toHex';
3 |
4 | describe('toHex', () => {
5 | it('should convert a number to hex', () => {
6 | expect(toHex(0)).toEqual('0x0');
7 | expect(toHex(1)).toEqual('0x1');
8 | expect(toHex(10)).toEqual('0xa');
9 | expect(toHex(15)).toEqual('0xf');
10 | expect(toHex(16)).toEqual('0x10');
11 | expect(toHex(255)).toEqual('0xff');
12 | expect(toHex(256)).toEqual('0x100');
13 | expect(toHex(21_000)).toEqual('0x5208');
14 | expect(toHex(1_000_000)).toEqual('0xf4240');
15 | // @ts-expect-error
16 | expect(toHex('0x199563048')).toEqual('0x199563048');
17 | });
18 | });
19 |
20 | describe('iso8601', () => {
21 | expect(iso8601ToString('2023-03-07T22:33:50.6', 300)).toBe(
22 | '3/7/2023, 5:33:50 PM'
23 | );
24 | });
25 |
--------------------------------------------------------------------------------
/src/utils/wait.tsx:
--------------------------------------------------------------------------------
1 | export const wait = (n: number) =>
2 | new Promise((resolve) => setTimeout(resolve, n));
3 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | './src/**/*.{html,tsx}',
5 | 'node_modules/@map3xyz/components/dist/esm/components/**/*.{html,js}',
6 | ],
7 | darkMode: 'class',
8 | plugins: [],
9 | theme: {
10 | extend: {
11 | colors: {
12 | accent: 'var(--accent-color)',
13 | 'accent-light': 'var(--accent-color-light)',
14 | primary: {
15 | 100: 'var(--primary-color-100)',
16 | 200: 'var(--primary-color-200)',
17 | 400: 'var(--primary-color-400)',
18 | 500: 'var(--primary-color-500)',
19 | 700: 'var(--primary-color-700)',
20 | 800: 'var(--primary-color-800)',
21 | 900: 'var(--primary-color-900)',
22 | },
23 | },
24 | fontSize: {
25 | xxs: '.625rem',
26 | },
27 | },
28 | },
29 | };
30 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "include": ["src", "src/custom.d.ts"],
3 | "exclude": ["dist", "node_modules"],
4 | "compilerOptions": {
5 | "esModuleInterop": true,
6 | "declaration": true,
7 | "forceConsistentCasingInFileNames": true,
8 | "jsx": "react-jsx",
9 | "importHelpers": true,
10 | "lib": ["dom", "esnext"],
11 | "module": "esnext",
12 | "moduleResolution": "node",
13 | "noFallthroughCasesInSwitch": true,
14 | "noImplicitReturns": true,
15 | "noUnusedLocals": true,
16 | "noUnusedParameters": true,
17 | "outDir": "./dist/esm",
18 | "resolveJsonModule": true,
19 | "rootDir": ".",
20 | "skipLibCheck": true,
21 | "sourceMap": true,
22 | "strict": true,
23 | "paths": {
24 | "~/jest/*": ["./jest/*"]
25 | },
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
54 |
55 |
57 |
59 |
64 |
98 | ) : null}
99 |
65 |
79 |
66 | Current Network
67 |
68 |
76 | {currentChain.networkByChainId?.name}
77 |
78 |
80 |
81 |
82 |
83 |
97 |
84 | Switch to
85 |
86 |
94 | {state.network?.networkName}
95 |
96 |
102 |
103 | {formError ? (
104 |
105 | {formError}
106 |
107 | ) : null}
108 |
109 |
110 |
120 |