"],
18 | "js": ["contentScript.bundle.js"],
19 | "run_at": "document_start"
20 | },
21 | {
22 | "matches": ["*://connect.trezor.io/*/popup.html*"],
23 | "js": ["trezorContentScript.bundle.js"],
24 | "all_frames": true
25 | }
26 | ],
27 | "web_accessible_resources": [
28 | {
29 | "resources": [
30 | "icon-128.png",
31 | "icon-34.png",
32 | "injected.bundle.js",
33 | "internalPopup.html"
34 | ],
35 | "matches": ["http://*/*", "https://*/*", "file://*/*"]
36 | }
37 | ],
38 | "content_security_policy": {
39 | "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; frame-src https://connect.trezor.io/;"
40 | },
41 | "permissions": ["storage", "unlimitedStorage", "favicon"]
42 | }
43 |
--------------------------------------------------------------------------------
/src/migrations/versions/1.0.0.js:
--------------------------------------------------------------------------------
1 | const migration = {
2 | version: '1.0.0',
3 | up: (pwd) => {
4 | // Upgrade logic here
5 | },
6 | down: (pwd) => {
7 | // Downgrade logic here
8 | },
9 | info: [
10 | {
11 | title: 'Feature #1',
12 | detail: 'This new feature allow the user to see the Feature #1',
13 | },
14 | { title: 'Bug fix: Feature #2', detail: null },
15 | {
16 | title: 'Feature #3',
17 | detail: 'Allow to send feature #3 assets to multiple addresses',
18 | },
19 | { title: 'Feature #2', detail: null },
20 | {
21 | title: 'Feature #3 - Suspendisse eget nibh',
22 | detail:
23 | 'Donec consectetur enim in urna consectetur fringilla rhoncus mattis quam.',
24 | },
25 | ],
26 | pwdRequired: true,
27 | };
28 |
29 | export default migration;
30 |
--------------------------------------------------------------------------------
/src/migrations/versions/1.1.5.js:
--------------------------------------------------------------------------------
1 | import { NETWORK_ID, STORAGE } from '../../config/config';
2 | import {
3 | decryptWithPassword,
4 | getStorage,
5 | setStorage,
6 | } from '../../api/extension/index';
7 | import { initTx } from '../../api/extension/wallet';
8 | import Loader from '../../api/loader';
9 | import { assetsToValue } from '../../api/util';
10 |
11 | const harden = (num) => {
12 | return 0x80000000 + num;
13 | };
14 |
15 | const migration = {
16 | version: '1.1.5',
17 | up: async (pwd) => {
18 | await Loader.load();
19 | const protocolParameters = await initTx();
20 | const networks = Object.keys(NETWORK_ID);
21 | const storage = await getStorage(STORAGE.accounts);
22 | const accounts = Object.keys(storage);
23 |
24 | // add minAda
25 | for (let i = 0; i < accounts.length; i++) {
26 | for (let j = 0; j < networks.length; j++) {
27 | if (storage[accounts[i]][networks[j]]) {
28 | const currentAccountNetwork = storage[accounts[i]][networks[j]];
29 | let assets = currentAccountNetwork.assets;
30 | if (assets.length > 0) {
31 | const amount = await assetsToValue(assets);
32 | currentAccountNetwork.minAda = Loader.Cardano.min_ada_required(
33 | amount,
34 | BigInt(protocolParameters.minUtxo)
35 | ).toString();
36 | } else {
37 | currentAccountNetwork.minAda = 0;
38 | }
39 | }
40 | }
41 | }
42 |
43 | //add public key
44 | const encryptedKey = await getStorage(STORAGE.encryptedKey);
45 | const decryptedKey = await decryptWithPassword(pwd, encryptedKey);
46 | let privateKey = Loader.Cardano.Bip32PrivateKey.from_raw_bytes(
47 | Buffer.from(decryptedKey, 'hex')
48 | );
49 |
50 | Object.keys(storage).forEach(async (index) => {
51 | const account = storage[index];
52 | account.publicKey = Buffer.from(
53 | privateKey
54 | .derive(harden(1852))
55 | .derive(harden(1815))
56 | .derive(harden(parseInt(account.index)))
57 | .to_public()
58 | .as_bytes()
59 | ).toString('hex');
60 | });
61 |
62 | privateKey.free();
63 | privateKey = null;
64 |
65 | await setStorage({ [STORAGE.accounts]: storage });
66 | },
67 | down: async (pwd) => {
68 | const networks = Object.keys(NETWORK_ID);
69 | let storage = await getStorage(STORAGE.accounts);
70 | const accounts = Object.keys(storage);
71 |
72 | for (let i = 0; i < accounts.length; i++) {
73 | for (let j = 0; j < networks.length; j++) {
74 | if (
75 | storage[accounts[i]][networks[j]] &&
76 | storage[accounts[i]][networks[j]].minAda
77 | ) {
78 | delete storage[accounts[i]][networks[j]].minAda;
79 | }
80 | }
81 | }
82 | await setStorage({ [STORAGE.accounts]: storage });
83 | },
84 | info: [
85 | {
86 | title: 'Show only spendable Ada',
87 | detail:
88 | 'In previous version, the wallet was showing the complete Ada balance. This lead the user to think that all Ada were available for spending. Native Assets (ie: NFT) require a small amount of Ada to be locked with them at all time. Locked Ada are now hidden.',
89 | },
90 | {
91 | title: 'Bug fix: Inconsistent Balance',
92 | detail:
93 | 'Balance was reported many times to be out of sync. The wallet now tries to fetch the balance until it succeeds.',
94 | },
95 | {
96 | title: 'Bug fix: CoinSelection',
97 | detail:
98 | 'The underlying algorithm managing UTxO set was behaving inconsistently, making it impossible to send out certain asset amounts.',
99 | },
100 | ],
101 | pwdRequired: true,
102 | };
103 |
104 | export default migration;
105 |
--------------------------------------------------------------------------------
/src/migrations/versions/1.1.7.js:
--------------------------------------------------------------------------------
1 | const migration = {
2 | version: '1.1.7',
3 | up: async () => {},
4 | down: async () => {},
5 | info: [
6 | {
7 | title: 'Bug fix: Inconsistent Balance',
8 | detail:
9 | 'Balance was reported many times to be out of sync, even with the latest fix. The logic to decide whether an update is needed or not has been reworked.',
10 | },
11 | {
12 | title: 'Bug fix: Coin Selection',
13 | detail:
14 | 'The Coin Selection algorithm failed calculating properly requirements for some UTxO set, thus making impossible to send amount within a certain range.',
15 | },
16 | {
17 | title: 'Bug fix: Blank Screen',
18 | detail:
19 | 'A blank screen was reported a few times. The causing issue was being able to press the Confirm button multiple times.',
20 | },
21 | ],
22 | pwdRequired: false,
23 | };
24 |
25 | export default migration;
26 |
--------------------------------------------------------------------------------
/src/migrations/versions/2.0.0.js:
--------------------------------------------------------------------------------
1 | const migration = {
2 | version: '2.0.0',
3 | up: async () => {},
4 | down: async () => {},
5 | info: [
6 | {
7 | title: 'Added collateral',
8 | detail:
9 | 'A new option "Collateral" was added to the menu. You can enable it in order to interact with smart contracts.',
10 | },
11 | {
12 | title: 'Bug fix: ADA input amount',
13 | detail:
14 | 'Input box is highlighted in red correctly again, when amount is below minimum or above account balance.',
15 | },
16 | {
17 | title: 'Bug fix: Coin selection',
18 | detail: 'Fixed bug, where small amounts could not be sent.',
19 | },
20 | ],
21 | pwdRequired: false,
22 | };
23 |
24 | export default migration;
25 |
--------------------------------------------------------------------------------
/src/migrations/versions/2.1.0.js:
--------------------------------------------------------------------------------
1 | const migration = {
2 | version: '2.1.0',
3 | up: async () => {},
4 | down: async () => {},
5 | info: [
6 | {
7 | title: 'Bug fix: Collateral',
8 | detail:
9 | 'Fixed issue with setting collateral amount, where user had to try it multiple times.',
10 | },
11 | {
12 | title: 'Enhancement: Mempool checking',
13 | detail:
14 | 'Checking now if the mempool is full and letting the user know if he needs to resubmit the transaction.',
15 | },
16 | {
17 | title: 'Enhancement: Coin selection',
18 | detail: 'Allowing now to send a lot of small UTxOs.',
19 | },
20 | {
21 | title: 'Enhancement: Addresses',
22 | detail:
23 | 'Preventing users from sending to a contract address. Improved checking, if the user interacts with a contract under the sign screen.',
24 | },
25 | ],
26 | pwdRequired: false,
27 | };
28 |
29 | export default migration;
30 |
--------------------------------------------------------------------------------
/src/migrations/versions/2.2.0.js:
--------------------------------------------------------------------------------
1 | const migration = {
2 | version: '2.2.0',
3 | up: async () => {},
4 | down: async () => {},
5 | info: [
6 | {
7 | title: 'HW support',
8 | detail:
9 | 'Nami has now full hardware wallet support for Ledger and Trezor.',
10 | },
11 | ],
12 | pwdRequired: false,
13 | };
14 |
15 | export default migration;
16 |
--------------------------------------------------------------------------------
/src/migrations/versions/2.3.0.js:
--------------------------------------------------------------------------------
1 | import { getStorage, setStorage } from '../../api/extension';
2 | import { NETWORK_ID, STORAGE } from '../../config/config';
3 |
4 | const migration = {
5 | version: '2.3.0',
6 | up: async () => {
7 | const accounts = await getStorage(STORAGE.accounts);
8 | Object.keys(accounts).forEach((accountIndex) => {
9 | accounts[accountIndex][NETWORK_ID.mainnet].forceUpdate = true;
10 | accounts[accountIndex][NETWORK_ID.testnet].forceUpdate = true;
11 | });
12 | await setStorage({ [STORAGE.accounts]: accounts });
13 | },
14 | down: async () => {},
15 | info: [
16 | {
17 | title: 'Seperated assets view',
18 | detail: 'Nami now separates collectibles/NFTs and normal assets (FTs)',
19 | },
20 | {
21 | title: 'Improved Coin selection',
22 | },
23 | {
24 | title: 'Small bug fixing',
25 | },
26 | {
27 | title: 'Customizable avatar for account',
28 | },
29 | ],
30 | pwdRequired: false,
31 | };
32 |
33 | export default migration;
34 |
--------------------------------------------------------------------------------
/src/migrations/versions/2.3.2.js:
--------------------------------------------------------------------------------
1 | const migration = {
2 | version: '2.3.2',
3 | up: async () => {},
4 | down: async () => {},
5 | info: [
6 | {
7 | title: 'Deregistration of stake keys',
8 | },
9 | {
10 | title: 'Improved Inputs',
11 | detail: 'Number inputs are automatically formatted now.',
12 | },
13 | ],
14 | pwdRequired: false,
15 | };
16 |
17 | export default migration;
18 |
--------------------------------------------------------------------------------
/src/migrations/versions/2.3.3.js:
--------------------------------------------------------------------------------
1 | import { NETWORK_ID, STORAGE } from '../../config/config';
2 | import { getStorage, setStorage } from '../../api/extension/index';
3 | import Loader from '../../api/loader';
4 |
5 | const migration = {
6 | version: '2.3.3',
7 | up: async (pwd) => {
8 | await Loader.load();
9 | const networks = Object.keys(NETWORK_ID);
10 | const storage = await getStorage(STORAGE.accounts);
11 | const accounts = Object.keys(storage);
12 |
13 | for (let i = 0; i < accounts.length; i++) {
14 | for (let j = 0; j < networks.length; j++) {
15 | if (storage[accounts[i]][networks[j]]) {
16 | const currentAccount = storage[accounts[i]];
17 | const network = networks[j];
18 | const currentAccountNetwork = currentAccount[network];
19 | const paymentKeyHash = Loader.Cardano.Ed25519KeyHash.from_raw_bytes(
20 | Buffer.from(currentAccount.paymentKeyHash, 'hex')
21 | );
22 | const stakeKeyHash = Loader.Cardano.Ed25519KeyHash.from_raw_bytes(
23 | Buffer.from(currentAccount.stakeKeyHash, 'hex')
24 | );
25 | const paymentAddr = Loader.Cardano.BaseAddress.new(
26 | network === NETWORK_ID.mainnet
27 | ? Loader.Cardano.NetworkInfo.mainnet().network_id()
28 | : Loader.Cardano.NetworkInfo.testnet().network_id(),
29 | Loader.Cardano.Credential.new_pub_key(paymentKeyHash),
30 | Loader.Cardano.Credential.new_pub_key(stakeKeyHash)
31 | )
32 | .to_address()
33 | .to_bech32();
34 |
35 | const rewardAddr = Loader.Cardano.RewardAddress.new(
36 | network === NETWORK_ID.mainnet
37 | ? Loader.Cardano.NetworkInfo.mainnet().network_id()
38 | : Loader.Cardano.NetworkInfo.testnet().network_id(),
39 | Loader.Cardano.Credential.new_pub_key(stakeKeyHash)
40 | )
41 | .to_address()
42 | .to_bech32();
43 |
44 | currentAccountNetwork.paymentAddr = paymentAddr;
45 | currentAccountNetwork.rewardAddr = rewardAddr;
46 | }
47 | }
48 | }
49 |
50 | await setStorage({ [STORAGE.accounts]: storage });
51 | },
52 | down: async (pwd) => {
53 | const networks = Object.keys(NETWORK_ID);
54 | const storage = await getStorage(STORAGE.accounts);
55 | const accounts = Object.keys(storage);
56 |
57 | for (let i = 0; i < accounts.length; i++) {
58 | for (let j = 0; j < networks.length; j++) {
59 | if (storage[accounts[i]][networks[j]]) {
60 | const currentAccount = storage[accounts[i]];
61 | const network = networks[j];
62 | const currentAccountNetwork = currentAccount[network];
63 |
64 | delete currentAccountNetwork.paymentAddr;
65 | delete currentAccountNetwork.rewardAddr;
66 | }
67 | }
68 | }
69 |
70 | await setStorage({ [STORAGE.accounts]: storage });
71 | },
72 | info: [
73 | { title: 'Improved Coin selection' },
74 | { title: 'Collateral bug fixing' },
75 | ],
76 | pwdRequired: false,
77 | };
78 |
79 | export default migration;
80 |
--------------------------------------------------------------------------------
/src/migrations/versions/3.0.0.js:
--------------------------------------------------------------------------------
1 | const migration = {
2 | version: '3.0.0',
3 | up: async () => {},
4 | down: async () => {},
5 | info: [
6 | {
7 | title: '$handle support',
8 | detail:
9 | '$handle address resolution is now supported under the send screen.',
10 | },
11 | {
12 | title: 'NFT as avatar',
13 | detail: 'You can now use your NFT/collectible as avatar in each account.',
14 | },
15 | {
16 | title: 'Wallet creation in separate tab',
17 | detail:
18 | 'The wallet creation and importing section is now under a seperate tab.',
19 | },
20 | ],
21 | pwdRequired: false,
22 | };
23 |
24 | export default migration;
25 |
--------------------------------------------------------------------------------
/src/migrations/versions/3.0.2.js:
--------------------------------------------------------------------------------
1 | const migration = {
2 | version: '3.0.2',
3 | up: async () => {},
4 | down: async () => {},
5 | info: [
6 | {
7 | title: 'Sending screen reworked',
8 | detail:
9 | 'Little UX and layout redesign. There is now a confirmation screen when clicking on send. An optional message can also be appended now to the transaction (CIP-0020).',
10 | },
11 | {
12 | title: 'Milkomeda support',
13 | detail:
14 | 'Assets can now be moved to the Milkomeda sidechain. This functionality is available under the send screen (only testnet for now).',
15 | },
16 | {
17 | title: 'ADA as asset',
18 | detail: 'ADA is shown now under assets on the main screen.',
19 | },
20 | ],
21 | pwdRequired: false,
22 | };
23 |
24 | export default migration;
25 |
--------------------------------------------------------------------------------
/src/migrations/versions/3.3.0.js:
--------------------------------------------------------------------------------
1 | import { NETWORK_ID, STORAGE } from '../../config/config';
2 | import { getStorage, setStorage } from '../../api/extension/index';
3 | import Loader from '../../api/loader';
4 | import { initTx } from '../../api/extension/wallet';
5 | import { assetsToValue } from '../../api/util';
6 |
7 | const migration = {
8 | version: '3.3.0',
9 | up: async (pwd) => {
10 | const networkDefault = {
11 | lovelace: null,
12 | minAda: 0,
13 | assets: [],
14 | history: { confirmed: [], details: {} },
15 | };
16 |
17 | await Loader.load();
18 | const storage = await getStorage(STORAGE.accounts);
19 | const accounts = Object.keys(storage);
20 | const networks = Object.keys(NETWORK_ID);
21 | const protocolParameters = await initTx();
22 |
23 | for (let i = 0; i < accounts.length; i++) {
24 | const currentAccount = storage[accounts[i]];
25 | const paymentKeyHash = Loader.Cardano.Ed25519KeyHash.from_raw_bytes(
26 | Buffer.from(currentAccount.paymentKeyHash, 'hex')
27 | );
28 | const paymentKeyHashBech32 = paymentKeyHash.to_bech32('addr_vkh');
29 | currentAccount.paymentKeyHashBech32 = paymentKeyHashBech32;
30 |
31 | currentAccount[NETWORK_ID.preview] = {
32 | ...networkDefault,
33 | paymentAddr: currentAccount[NETWORK_ID.testnet].paymentAddr,
34 | rewardAddr: currentAccount[NETWORK_ID.testnet].rewardAddr,
35 | };
36 |
37 | currentAccount[NETWORK_ID.preprod] = {
38 | ...networkDefault,
39 | paymentAddr: currentAccount[NETWORK_ID.testnet].paymentAddr,
40 | rewardAddr: currentAccount[NETWORK_ID.testnet].rewardAddr,
41 | };
42 | }
43 |
44 | // add minAda
45 | for (let i = 0; i < accounts.length; i++) {
46 | for (let j = 0; j < networks.length; j++) {
47 | if (storage[accounts[i]][networks[j]]) {
48 | const currentAccountNetwork = storage[accounts[i]][networks[j]];
49 | let assets = currentAccountNetwork.assets;
50 | if (assets.length > 0) {
51 | const amount = await assetsToValue(assets);
52 | const checkOutput = Loader.Cardano.TransactionOutput.new(
53 | Loader.Cardano.Address.from_bech32(
54 | currentAccountNetwork.paymentAddr
55 | ),
56 | amount
57 | );
58 | currentAccountNetwork.minAda = Loader.Cardano.min_ada_required(
59 | checkOutput,
60 | BigInt(
61 | // protocolParameters.coinsPerUtxoWord
62 | (4310).toString() // We hardcode this, since we don't know if Blockfrost switches PP quickly during the epoch transition
63 | )
64 | ).toString();
65 | } else {
66 | currentAccountNetwork.minAda = 0;
67 | }
68 | }
69 | }
70 | }
71 |
72 | await setStorage({ [STORAGE.accounts]: storage });
73 | },
74 | down: async (pwd) => {
75 | const storage = await getStorage(STORAGE.accounts);
76 | const accounts = Object.keys(storage);
77 |
78 | for (let i = 0; i < accounts.length; i++) {
79 | const currentAccount = storage[accounts[i]];
80 | delete currentAccount.paymentKeyHashBech32;
81 |
82 | delete currentAccount[NETWORK_ID.preview];
83 | delete currentAccount[NETWORK_ID.preprod];
84 | }
85 |
86 | await setStorage({ [STORAGE.accounts]: storage });
87 | },
88 | info: [
89 | { title: 'Support: Vasil era' },
90 | {
91 | title: 'Support: Mangled addresses',
92 | detail:
93 | 'Nami keeps track now of all addresses with the same payment credential.',
94 | },
95 | { title: 'Support: Preview and Preprod network' },
96 | { title: 'Bug fixing' },
97 | ],
98 | pwdRequired: false,
99 | };
100 |
101 | export default migration;
102 |
--------------------------------------------------------------------------------
/src/pages/Content/index.js:
--------------------------------------------------------------------------------
1 | import { Messaging } from '../../api/messaging';
2 |
3 | const injectScript = () => {
4 | const script = document.createElement('script');
5 | script.async = false;
6 | script.src = chrome.runtime.getURL('injected.bundle.js');
7 | script.onload = function () {
8 | this.remove();
9 | };
10 | (document.head || document.documentElement).appendChild(script);
11 | };
12 |
13 | async function shouldInject() {
14 | // do not inject since the migration is not dismissible anymore
15 | return false
16 | }
17 |
18 | if (await shouldInject()) {
19 | injectScript();
20 | Messaging.createProxyController();
21 | }
22 |
--------------------------------------------------------------------------------
/src/pages/Content/injected.js:
--------------------------------------------------------------------------------
1 | import {
2 | enable,
3 | getAddress,
4 | getBalance,
5 | getCollateral,
6 | getNetworkId,
7 | getRewardAddress,
8 | getUtxos,
9 | isEnabled,
10 | off,
11 | on,
12 | signData,
13 | signDataCIP30,
14 | signTx,
15 | submitTx,
16 | } from '../../api/webpage';
17 | import { EVENT } from '../../config/config';
18 |
19 | //dApp connector API follows https://github.com/cardano-foundation/CIPs/pull/88
20 |
21 | const logDeprecated = () => {
22 | console.warn(
23 | 'This Nami API implementation is deprecated soon. Please follow the API under the window.cardano.nami namespace. For more information check out CIP-30: https://github.com/cardano-foundation/CIPs/tree/master/CIP-0030'
24 | );
25 | return true;
26 | };
27 |
28 | //Initial version (deprecated soon)
29 | window.cardano = {
30 | ...(window.cardano || {}),
31 | enable: () => logDeprecated() && enable(),
32 | isEnabled: () => logDeprecated() && isEnabled(),
33 | getBalance: () => logDeprecated() && getBalance(),
34 | signData: (address, payload) => logDeprecated() && signData(address, payload),
35 | signTx: (tx, partialSign) => logDeprecated() && signTx(tx, partialSign),
36 | submitTx: (tx) => logDeprecated() && submitTx(tx),
37 | getUtxos: (amount, paginate) => logDeprecated() && getUtxos(amount, paginate),
38 | getCollateral: () => logDeprecated() && getCollateral(),
39 | getUsedAddresses: async () => logDeprecated() && [await getAddress()],
40 | getUnusedAddresses: async () => logDeprecated() && [],
41 | getChangeAddress: () => logDeprecated() && getAddress(),
42 | getRewardAddress: () => logDeprecated() && getRewardAddress(),
43 | getNetworkId: () => logDeprecated() && getNetworkId(),
44 | onAccountChange: (callback) =>
45 | logDeprecated() && on(EVENT.accountChange, callback),
46 | onNetworkChange: (callback) =>
47 | logDeprecated() && on(EVENT.networkChange, callback),
48 | off,
49 | _events: {},
50 | };
51 |
52 | // // CIP-30
53 |
54 | window.cardano = {
55 | ...(window.cardano || {}),
56 | nami: {
57 | enable: async () => {
58 | if (await enable()) {
59 | return {
60 | getBalance: () => getBalance(),
61 | signData: (address, payload) => signDataCIP30(address, payload),
62 | signTx: (tx, partialSign) => signTx(tx, partialSign),
63 | submitTx: (tx) => submitTx(tx),
64 | getUtxos: (amount, paginate) => getUtxos(amount, paginate),
65 | getUsedAddresses: async () => [await getAddress()],
66 | getUnusedAddresses: async () => [],
67 | getChangeAddress: () => getAddress(),
68 | getRewardAddresses: async () => [await getRewardAddress()],
69 | getNetworkId: () => getNetworkId(),
70 | experimental: {
71 | on: (eventName, callback) => on(eventName, callback),
72 | off: (eventName, callback) => off(eventName, callback),
73 | getCollateral: () => getCollateral(),
74 | },
75 | };
76 | }
77 | },
78 | isEnabled: () => isEnabled(),
79 | apiVersion: '0.1.0',
80 | name: 'Nami',
81 | icon: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 486.17 499.86'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23349ea3;%7D%3C/style%3E%3C/defs%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath id='path16' class='cls-1' d='M73.87,52.15,62.11,40.07A23.93,23.93,0,0,1,41.9,61.87L54,73.09,486.17,476ZM102.4,168.93V409.47a23.76,23.76,0,0,1,32.13-2.14V245.94L395,499.86h44.87Zm303.36-55.58a23.84,23.84,0,0,1-16.64-6.68v162.8L133.46,15.57H84L421.28,345.79V107.6A23.72,23.72,0,0,1,405.76,113.35Z'/%3E%3Cpath id='path18' class='cls-1' d='M38.27,0A38.25,38.25,0,1,0,76.49,38.27v0A38.28,38.28,0,0,0,38.27,0ZM41.9,61.8a22,22,0,0,1-3.63.28A23.94,23.94,0,1,1,62.18,38.13V40A23.94,23.94,0,0,1,41.9,61.8Z'/%3E%3Cpath id='path20' class='cls-1' d='M405.76,51.2a38.24,38.24,0,0,0,0,76.46,37.57,37.57,0,0,0,15.52-3.3A38.22,38.22,0,0,0,405.76,51.2Zm15.52,56.4a23.91,23.91,0,1,1,8.39-18.18A23.91,23.91,0,0,1,421.28,107.6Z'/%3E%3Cpath id='path22' class='cls-1' d='M134.58,390.81A38.25,38.25,0,1,0,157.92,426a38.24,38.24,0,0,0-23.34-35.22Zm-15,59.13A23.91,23.91,0,1,1,143.54,426a23.9,23.9,0,0,1-23.94,23.91Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E",
82 | _events: {},
83 | },
84 | };
85 |
--------------------------------------------------------------------------------
/src/pages/Content/trezorContentScript.js:
--------------------------------------------------------------------------------
1 | // Communicate from background script to popup
2 | let port = chrome.runtime.connect({ name: 'trezor-connect' });
3 | port.onMessage.addListener((message) => {
4 | window.postMessage(message, window.location.origin);
5 | });
6 | port.onDisconnect.addListener(() => {
7 | // eslint-disable-next-line unicorn/no-null
8 | port = null;
9 | });
10 |
11 | // communicate from popup to background script
12 | window.addEventListener('message', (event) => {
13 | if (port && event.source === window && event.data) {
14 | port.postMessage({ data: event.data });
15 | }
16 | });
17 |
--------------------------------------------------------------------------------
/src/pages/Popup/internalPopup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Nami
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/pages/Popup/mainPopup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Nami
6 |
12 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/src/pages/Tab/createWalletTab.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Nami - Create Wallet
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/pages/Tab/hwTab.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Nami - Connect HW
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/pages/Tab/trezorTx.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Nami - Sign Trezor transaction
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/test/unit/api/extension/index.test.js:
--------------------------------------------------------------------------------
1 | import {
2 | getStorage,
3 | encryptWithPassword,
4 | decryptWithPassword,
5 | createWallet,
6 | switchAccount,
7 | createAccount,
8 | setWhitelisted,
9 | getWhitelisted,
10 | getNetwork,
11 | setNetwork,
12 | getCurrentAccount,
13 | } from '../../../../api/extension';
14 | import Loader from '../../../../api/loader';
15 | import { ERROR, NODE, STORAGE } from '../../../../config/config';
16 |
17 | beforeAll(async () => {
18 | const seed =
19 | 'midnight draft salt dirt woman tragic cause immense dad later jaguar finger nerve nerve sign job erase citizen cube neglect token bracket orient narrow';
20 | const name = 'Wallet 1';
21 | const password = 'password123';
22 | await Loader.load();
23 | await createWallet(name, seed, password);
24 | });
25 |
26 | test('storage initialized correctly', async () => {
27 | const store = await getStorage();
28 | expect(store).toHaveProperty(STORAGE.accounts);
29 | expect(store).toHaveProperty(STORAGE.currency);
30 | expect(store).toHaveProperty(STORAGE.encryptedKey);
31 | expect(store).toHaveProperty(STORAGE.currentAccount);
32 | expect(store).toHaveProperty(STORAGE.network);
33 | expect(Object.keys(store).length).toBe(5);
34 | });
35 |
36 | test('should have whitelist', async () => {
37 | await setWhitelisted('https://namiwallet.io');
38 | const store = await getStorage();
39 | expect(store).toHaveProperty(STORAGE.whitelisted);
40 | const whitelisted = await getWhitelisted();
41 | expect(whitelisted).toEqual(['https://namiwallet.io']);
42 | expect(Object.keys(store).length).toBe(6);
43 | });
44 |
45 | test('account structure is correct', async () => {
46 | const store = await getStorage();
47 | const account = store.accounts[store.currentAccount];
48 | expect(account).toHaveProperty('avatar');
49 | expect(account).toHaveProperty('name');
50 | expect(account).toHaveProperty('index');
51 | expect(account).toHaveProperty('paymentKeyHash');
52 | expect(account).toHaveProperty('stakeKeyHash');
53 | expect(account).toHaveProperty('mainnet');
54 | expect(account).toHaveProperty('testnet');
55 | expect(account.mainnet).toHaveProperty('lovelace');
56 | expect(account.mainnet).toHaveProperty('assets');
57 | expect(account.mainnet).toHaveProperty('history');
58 | expect(account.mainnet.history).toHaveProperty('confirmed');
59 | expect(account.mainnet.history).toHaveProperty('details');
60 | });
61 |
62 | test('current account should be 0', async () => {
63 | const currentAccount = await getStorage('currentAccount');
64 | expect(currentAccount).toBe(0);
65 | });
66 |
67 | test('current account should be 1', async () => {
68 | const name = 'Wallet 2';
69 | const password = 'password123';
70 | await createAccount(name, password);
71 | await switchAccount(1);
72 | const currentAccount = await getStorage('currentAccount');
73 | expect(currentAccount).toBe(1);
74 | });
75 |
76 | test('expect error because of wrong password', async () => {
77 | const name = 'Wallet 3';
78 | const password = 'password456';
79 | expect.assertions(1);
80 | try {
81 | const index = await createAccount(name, password);
82 | await switchAccount(index);
83 | } catch (e) {
84 | expect(e).toBe(ERROR.wrongPassword);
85 | }
86 | });
87 |
88 | test('expect mainnet', async () => {
89 | const network = await getNetwork();
90 | expect(network.id).toBe('mainnet');
91 | });
92 |
93 | test('expect testnet address', async () => {
94 | await setNetwork({ id: 'testnet', node: NODE.testnet });
95 | const account = await getCurrentAccount();
96 | expect(account.paymentAddr).toContain('addr_');
97 | });
98 |
99 | test('should encrypt/decrypt root key correctly', async () => {
100 | const rootKey = Loader.Cardano.Bip32PrivateKey.generate_ed25519_bip32();
101 | const password = 'test123';
102 | const rootKeyBytes = rootKey.to_raw_key().to_raw_bytes();
103 | const encryptedKey = await encryptWithPassword(password, rootKeyBytes);
104 | expect(Buffer.from(rootKeyBytes, 'hex').toString('hex')).not.toBe(
105 | encryptedKey
106 | );
107 | const decryptedKey = await decryptWithPassword(password, encryptedKey);
108 | expect(Buffer.from(rootKeyBytes, 'hex').toString('hex')).toBe(decryptedKey);
109 | });
110 |
--------------------------------------------------------------------------------
/src/test/unit/api/util.test.js:
--------------------------------------------------------------------------------
1 | import {
2 | assetsToValue,
3 | convertMetadataPropToString,
4 | linkToSrc,
5 | valueToAssets,
6 | } from '../../../api/util';
7 | import Loader from '../../../api/loader';
8 | import provider from '../../../config/provider';
9 |
10 | beforeAll(() => {
11 | Loader.load();
12 | });
13 |
14 | test('expect correct assets to value conversion', async () => {
15 | const assetId = '2a286ad895d091f2b3d168a6091ad2627d30a72761a5bc36eef0074074657374313233';
16 | const policyId = assetId.slice(0, 56);
17 | const assetName = assetId.slice(56);
18 | const assets = [
19 | { unit: 'lovelace', quantity: '1000000' },
20 | {
21 | unit: assetId,
22 | quantity: '10',
23 | },
24 | ];
25 | const value = await assetsToValue(assets);
26 |
27 | expect(value.coin()).toBe(1000000n);
28 | const multiAsset = value.multi_asset();
29 | expect(multiAsset.keys().len()).toBe(1);
30 | const scriptHash = multiAsset.keys().get(0);
31 | expect(scriptHash.to_hex()).toBe(policyId);
32 | const assetsMap = multiAsset.get_assets(scriptHash);
33 | expect(assetsMap.len()).toBe(1);
34 | const cmlAssetName = assetsMap.keys().get(0);
35 | expect(cmlAssetName.to_hex()).toBe(assetName);
36 | expect(assetsMap.get(cmlAssetName)).toBe(10n)
37 | });
38 |
39 | test('expect correct value to assets conversion', async () => {
40 | const multiAsset = Loader.Cardano.MultiAsset.new();
41 | const value = Loader.Cardano.Value.new(
42 | BigInt('1000000'), multiAsset
43 | );
44 | const assetsSet = Loader.Cardano.MapAssetNameToCoin.new();
45 | assetsSet.insert(
46 | Loader.Cardano.AssetName.from_raw_bytes(Buffer.from('74657374313233', 'hex')),
47 | BigInt('10')
48 | );
49 | multiAsset.insert_assets(
50 | Loader.Cardano.ScriptHash.from_raw_bytes(
51 | Buffer.from(
52 | '2a286ad895d091f2b3d168a6091ad2627d30a72761a5bc36eef00740',
53 | 'hex'
54 | )
55 | ),
56 | assetsSet
57 | );
58 | const assets = await valueToAssets(value);
59 | const testAssets = [
60 | { unit: 'lovelace', quantity: '1000000' },
61 | {
62 | unit: '2a286ad895d091f2b3d168a6091ad2627d30a72761a5bc36eef0074074657374313233',
63 | quantity: '10',
64 | },
65 | ];
66 | assets.forEach((asset, i) => {
67 | const testAsset = testAssets[i];
68 | expect(asset.unit).toEqual(testAsset.unit);
69 | expect(asset.quantity).toEqual(testAsset.quantity);
70 | });
71 | });
72 |
73 | describe('test linkToSrc', () => {
74 | test('expect right source from ipfs link', () => {
75 | const testLink = 'ipfs://QmVSameQt9i37hdrLwMSfoAg1aVKrjtBtuDHeQTgyVhUXC';
76 | const testLink1 =
77 | 'ipfs://ipfs/QmVSameQt9i37hdrLwMSfoAg1aVKrjtBtuDHeQTgyVhUXC';
78 | const httpsLink = linkToSrc(testLink);
79 | const httpsLink1 = linkToSrc(testLink1);
80 | expect(httpsLink).toEqual(
81 | provider.api.ipfs + '/' + 'QmVSameQt9i37hdrLwMSfoAg1aVKrjtBtuDHeQTgyVhUXC'
82 | );
83 | expect(httpsLink1).toEqual(
84 | provider.api.ipfs + '/' + 'QmVSameQt9i37hdrLwMSfoAg1aVKrjtBtuDHeQTgyVhUXC'
85 | );
86 | });
87 | test('expect right source from https', () => {
88 | const testLink =
89 | 'https://ipfs.io/ipfs/QmVSameQt9i37hdrLwMSfoAg1aVKrjtBtuDHeQTgyVhUXC';
90 | const httpsLink = linkToSrc(testLink);
91 | expect(httpsLink).toEqual(testLink);
92 | });
93 | test('expect no source', () => {
94 | const testLink = 'invalid src';
95 | const httpsLink = linkToSrc(testLink);
96 | expect(httpsLink).toBe(null);
97 | });
98 | test('expect data uri for png', () => {
99 | const testLink = 'YWJj';
100 | const httpsLink = linkToSrc(testLink, true);
101 | expect(httpsLink).toBe('data:image/png;base64,YWJj');
102 | });
103 | test('expect data uri', () => {
104 | const link =
105 | 'data:image/png;base64,iVB\
106 | ORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEU\
107 | AAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8\
108 | yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAEl\
109 | FTkSuQmCC';
110 | const testLink = linkToSrc(link);
111 | expect(testLink).toEqual(link);
112 | });
113 | test('expect correct array to string conversion', () => {
114 | const normalString = 'metadatateststring';
115 | const array = ['meta', 'data', 'teststring'];
116 |
117 | const convertedString = convertMetadataPropToString(normalString);
118 | const convertedArray = convertMetadataPropToString(array);
119 | expect(convertedArray).toEqual(normalString);
120 | expect(convertedArray).toEqual(convertedString);
121 | });
122 | });
123 |
--------------------------------------------------------------------------------
/src/test/unit/api/webpage/eventRegistration.test.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @jest-environment jsdom
3 | */
4 |
5 | import { on, off } from '../../../../api/webpage/eventRegistration';
6 | import { TARGET } from '../../../../config/config';
7 |
8 | describe('webpage/eventRegistring', () => {
9 | const makeEvent = (eventType, detail) =>
10 | new CustomEvent(`${TARGET}${eventType}`, { detail });
11 |
12 | describe('on', () => {
13 | beforeEach(() => {
14 | window.cardano = {
15 | nami: {
16 | _events: {},
17 | },
18 | };
19 | });
20 |
21 | test('invokes the callback when a the target event is triggered', () => {
22 | const eventType = 'mock-event';
23 | const mockPayload = 'mock-payload';
24 | const event = makeEvent(eventType, mockPayload);
25 | const mockFn = jest.fn();
26 |
27 | on(eventType, mockFn);
28 |
29 | window.dispatchEvent(event);
30 |
31 | expect(mockFn).toHaveBeenCalledTimes(1);
32 | expect(mockFn).toHaveBeenCalledWith(mockPayload);
33 | });
34 |
35 | test('does not invoke the callback when a different event is triggered', () => {
36 | const mockFn = jest.fn();
37 |
38 | on('event-A', mockFn);
39 |
40 | const mockPayload = 'mock-payload';
41 | const event = makeEvent('event-B', mockPayload);
42 |
43 | window.dispatchEvent(event);
44 |
45 | expect(mockFn).not.toHaveBeenCalled();
46 | });
47 | });
48 |
49 | describe('of', () => {
50 | const mockEventType = 'mock-event';
51 | const mockCallback = jest.fn();
52 | const mockHandler = jest.fn().mockImplementation(() => mockCallback());
53 |
54 | beforeEach(() => {
55 | jest.resetAllMocks();
56 |
57 | window.cardano = {
58 | nami: {
59 | _events: {
60 | [mockEventType]: [[mockCallback, mockHandler]],
61 | },
62 | },
63 | };
64 | });
65 |
66 | test('clean out matching callbacks fom the given event', () => {
67 | off(mockEventType, mockCallback);
68 |
69 | expect(window.cardano.nami._events).toEqual({
70 | [mockEventType]: [],
71 | });
72 | });
73 |
74 | test('stops the given callback from being invoked when cleaned out', () => {
75 | off(mockEventType, mockCallback);
76 |
77 | const event = makeEvent(mockEventType);
78 |
79 | window.dispatchEvent(event);
80 |
81 | expect(mockCallback).not.toHaveBeenCalled();
82 | });
83 |
84 | test('does not stop other callbacks from being invoked after cleaned one out', () => {
85 | const mockFn = jest.fn();
86 |
87 | on('event-A', mockFn);
88 |
89 | off('mockEventType', mockCallback);
90 |
91 | const event = makeEvent('event-A');
92 |
93 | window.dispatchEvent(event);
94 |
95 | expect(mockFn).toHaveBeenCalledTimes(1);
96 | });
97 | });
98 | });
99 |
--------------------------------------------------------------------------------
/src/test/unit/migrations/migration.test.js:
--------------------------------------------------------------------------------
1 | import {
2 | getStorage,
3 | setStorage,
4 | createWallet,
5 | createAccount,
6 | } from '../../../api/extension';
7 | import Loader from '../../../api/loader';
8 | import { STORAGE } from '../../../config/config';
9 |
10 | const harden = (num) => {
11 | return 0x80000000 + num;
12 | };
13 |
14 | beforeAll(async () => {
15 | const seed =
16 | 'midnight draft salt dirt woman tragic cause immense dad later jaguar finger nerve nerve sign job erase citizen cube neglect token bracket orient narrow';
17 | const name = 'Wallet 1';
18 | const password = 'password123';
19 | await Loader.load();
20 | await createWallet(name, seed, password);
21 | await createAccount('Wallet 2', password);
22 | await createAccount('Wallet 3', password);
23 | let accounts = await getStorage(STORAGE.accounts);
24 | for (const accountIndex in accounts) {
25 | const account = accounts[accountIndex];
26 | account.mainnet = {
27 | ...account.mainnet,
28 | lovelace: Math.floor(Math.random() * 10000000).toString(),
29 | assets: [
30 | {
31 | unit: '0996b4e1e1fef04e29d9ea3c4282e011ddb1263513c7bd2ddac2fff9012',
32 | quantity: Math.floor(Math.random() * 1000).toString(),
33 | },
34 | ],
35 | };
36 | //test account function from 1.1.4 without minAda
37 | delete account.mainnet.minAda;
38 | delete account.testnet.minAda;
39 | }
40 | await setStorage({ [STORAGE.accounts]: accounts });
41 | });
42 |
43 | describe('no migration', () => {
44 | test('no migration', () => {});
45 | });
46 |
--------------------------------------------------------------------------------
/src/ui/app.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Routes, Route, useLocation } from 'react-router-dom';
3 | import { useNavigate } from 'react-router-dom';
4 | import { AnalyticsConsentModal } from '../features/analytics/ui/AnalyticsConsentModal';
5 | import { Box, Spinner } from '@chakra-ui/react';
6 | import Welcome from './app/pages/welcome';
7 | import Wallet from './app/pages/wallet';
8 | import { getAccounts } from '../api/extension';
9 | import Settings from './app/pages/settings';
10 | import Send from './app/pages/send';
11 | import { useStoreActions, useStoreState } from 'easy-peasy';
12 | import { useAnalyticsContext } from '../features/analytics/provider';
13 | import { TermsAndPrivacyProvider } from '../features/terms-and-privacy';
14 |
15 | export const App = () => {
16 | const route = useStoreState((state) => state.globalModel.routeStore.route);
17 | const setRoute = useStoreActions(
18 | (actions) => actions.globalModel.routeStore.setRoute
19 | );
20 | const navigate = useNavigate();
21 | const location = useLocation();
22 | const [isLoading, setIsLoading] = React.useState(true);
23 | const [analytics, setAnalyticsConsent] = useAnalyticsContext();
24 | const init = async () => {
25 | const hasWallet = await getAccounts();
26 | if (hasWallet) {
27 | navigate('/wallet');
28 | // Set route from localStorage if available
29 | if (route && route !== '/wallet') {
30 | route
31 | .slice(1)
32 | .split('/')
33 | .reduce((acc, r) => {
34 | const fullRoute = acc + `/${r}`;
35 | navigate(fullRoute);
36 | return fullRoute;
37 | }, '');
38 | }
39 | } else {
40 | navigate('/welcome');
41 | }
42 | setIsLoading(false);
43 | };
44 |
45 | React.useEffect(() => {
46 | init();
47 | }, []);
48 |
49 | React.useEffect(() => {
50 | if (!isLoading) {
51 | setRoute(location.pathname);
52 | }
53 | }, [location, isLoading, setRoute]);
54 |
55 | return isLoading ? (
56 |
63 |
64 |
65 | ) : (
66 |
67 |
68 |
72 |
73 |
74 | }
75 | />
76 | } />
77 | } />
78 | } />
79 |
80 |
84 |
138 | {partialResult?.map((option) => {
139 | return (
140 | selectOptionFromList(option)}
147 | >
148 |
149 | {renderCheckIcon(option)}
150 | {option.label}
151 |
152 |
153 | );
154 | })}
155 | {!partialResult?.length && allowCreation && (
156 | createOption()}
163 | >
164 |
165 | {renderCreateIcon()}
166 | {createText}
167 |
168 |
169 | )}
170 | {!partialResult?.length && !allowCreation && (
171 |
172 | {notFoundText}
173 |
174 | )}
175 |
176 | )}
177 |
178 | );
179 | };
180 |
181 | Autocomplete.defaultProps = {
182 | notFoundText: 'Not found',
183 | allowCreation: true,
184 | createText: 'Create option',
185 | };
186 |
187 | export default Autocomplete;
188 |
--------------------------------------------------------------------------------
/src/ui/app/components/avatarLoader.jsx:
--------------------------------------------------------------------------------
1 | import { Box, Image } from '@chakra-ui/react';
2 | import React from 'react';
3 | import { avatarToImage } from '../../../api/extension';
4 |
5 | const AvatarLoader = ({ avatar, width, smallRobot }) => {
6 | const [loaded, setLoaded] = React.useState('');
7 |
8 | const fetchAvatar = async () => {
9 | if (!avatar || avatar === loaded) return;
10 | setLoaded(Number(avatar) ? avatarToImage(avatar) : avatar);
11 | };
12 |
13 | React.useEffect(() => {
14 | fetchAvatar();
15 | }, [avatar]);
16 | return (
17 |
26 | );
27 | };
28 |
29 | export default AvatarLoader;
30 |
--------------------------------------------------------------------------------
/src/ui/app/components/collectible.jsx:
--------------------------------------------------------------------------------
1 | import {
2 | Box,
3 | Avatar,
4 | Image,
5 | Skeleton,
6 | useColorModeValue,
7 | } from '@chakra-ui/react';
8 | import React from 'react';
9 | import './styles.css';
10 | import { getAsset } from '../../../api/extension';
11 | import { useCaptureEvent } from '../../../features/analytics/hooks';
12 | import { Events } from '../../../features/analytics/events';
13 |
14 | const useIsMounted = () => {
15 | const isMounted = React.useRef(false);
16 | React.useEffect(() => {
17 | isMounted.current = true;
18 | return () => (isMounted.current = false);
19 | }, []);
20 | return isMounted;
21 | };
22 |
23 | const Collectible = React.forwardRef(({ asset }, ref) => {
24 | const capture = useCaptureEvent();
25 | const isMounted = useIsMounted();
26 | const [token, setToken] = React.useState(null);
27 | const background = useColorModeValue('gray.300', 'white');
28 | const [showInfo, setShowInfo] = React.useState(false);
29 |
30 | const fetchMetadata = async () => {
31 | const detailedConstructedAsset = await getAsset(asset.unit);
32 | const detailedAsset = {
33 | ...detailedConstructedAsset,
34 | quantity: asset.quantity,
35 | fingerprint: asset.fingerprint ?? detailedConstructedAsset.fingerprint,
36 | };
37 | if (!isMounted.current) return;
38 | setToken(detailedAsset);
39 | };
40 |
41 | React.useEffect(() => {
42 | fetchMetadata();
43 | }, [asset]);
44 |
45 | return (
46 | <>
47 | {
49 | capture(Events.NFTsImageClick);
50 | token && ref.current.openModal(token);
51 | }}
52 | position="relative"
53 | display="flex"
54 | alignItems="center"
55 | justifyContent="center"
56 | flexDirection="column"
57 | width="160px"
58 | height="160px"
59 | overflow="hidden"
60 | rounded="3xl"
61 | background={background}
62 | border="solid 1px"
63 | borderColor={background}
64 | onMouseEnter={() => setShowInfo(true)}
65 | onMouseLeave={() => setShowInfo(false)}
66 | cursor="pointer"
67 | userSelect="none"
68 | >
69 |
76 | {!token ? (
77 |
78 | ) : (
79 |
86 | ) : (
87 |
88 | )
89 | }
90 | />
91 | )}
92 |
93 | {token && (
94 |
104 |
115 |
124 | {token.displayName}
125 |
126 |
133 | x {token.quantity}
134 |
135 |
136 |
137 | )}
138 |
139 |
140 | );
141 | });
142 |
143 | const Fallback = ({ name }) => {
144 | const [timedOut, setTimedOut] = React.useState(false);
145 | const isMounted = useIsMounted();
146 | React.useEffect(() => {
147 | setTimeout(() => isMounted.current && setTimedOut(true), 30000);
148 | }, []);
149 | if (timedOut) return ;
150 | return ;
151 | };
152 |
153 | export default Collectible;
154 |
--------------------------------------------------------------------------------
/src/ui/app/components/copy.jsx:
--------------------------------------------------------------------------------
1 | import { Box, Tooltip } from '@chakra-ui/react';
2 | import React from 'react';
3 |
4 | const Copy = ({ label, copy, onClick, ...props }) => {
5 | const [copied, setCopied] = React.useState(false);
6 | return (
7 |
8 | {
11 | if (onClick) onClick();
12 | navigator.clipboard.writeText(copy);
13 | setCopied(true);
14 | setTimeout(() => setCopied(false), 800);
15 | }}
16 | >
17 | {props.children}
18 |
19 |
20 | );
21 | };
22 |
23 | export default Copy;
24 |
--------------------------------------------------------------------------------
/src/ui/app/components/historyViewer.jsx:
--------------------------------------------------------------------------------
1 | import { Box, Text, Spinner, Accordion, Button } from '@chakra-ui/react';
2 | import { ChevronDownIcon } from '@chakra-ui/icons';
3 | import React from 'react';
4 | import { File } from 'react-kawaii';
5 | import {
6 | getTransactions,
7 | setTransactions,
8 | setTxDetail,
9 | } from '../../../api/extension';
10 | import Transaction from './transaction';
11 | import { useCaptureEvent } from '../../../features/analytics/hooks';
12 | import { Events } from '../../../features/analytics/events';
13 |
14 | const BATCH = 5;
15 |
16 | let slice = [];
17 |
18 | let txObject = {};
19 |
20 | const HistoryViewer = ({ history, network, currentAddr, addresses }) => {
21 | const capture = useCaptureEvent();
22 | const [historySlice, setHistorySlice] = React.useState(null);
23 | const [page, setPage] = React.useState(1);
24 | const [final, setFinal] = React.useState(false);
25 | const [loadNext, setLoadNext] = React.useState(false);
26 | const getTxs = async () => {
27 | if (!history) {
28 | slice = [];
29 | setHistorySlice(null);
30 | setPage(1);
31 | setFinal(false);
32 | return;
33 | }
34 | await new Promise((res, rej) => setTimeout(() => res(), 10));
35 | slice = slice.concat(
36 | history.confirmed.slice((page - 1) * BATCH, page * BATCH)
37 | );
38 |
39 | if (slice.length < page * BATCH) {
40 | const txs = await getTransactions(page, BATCH);
41 |
42 | if (txs.length <= 0) {
43 | setFinal(true);
44 | } else {
45 | slice = Array.from(new Set(slice.concat(txs.map((tx) => tx.txHash))));
46 | await setTransactions(slice);
47 | }
48 | }
49 | if (slice.length < page * BATCH) setFinal(true);
50 | setHistorySlice(slice);
51 | };
52 |
53 | React.useEffect(() => {
54 | getTxs();
55 | }, [history, page]);
56 |
57 | React.useEffect(() => {
58 | const storeTx = setInterval(() => {
59 | if (Object.keys(txObject).length <= 0) return;
60 | setTimeout(() => setTxDetail(txObject));
61 | }, 1000);
62 | return () => {
63 | slice = [];
64 | setHistorySlice(null);
65 | setPage(1);
66 | setFinal(false);
67 | clearInterval(storeTx);
68 | };
69 | }, []);
70 |
71 | React.useEffect(() => {
72 | if (!historySlice) return;
73 | if (historySlice.length >= (page - 1) * BATCH) setLoadNext(false);
74 | }, [historySlice]);
75 |
76 | return (
77 |
78 | {!(history && historySlice) ? (
79 |
80 | ) : historySlice.length <= 0 ? (
81 |
89 |
90 |
91 |
92 | No History
93 |
94 |
95 | ) : (
96 | <>
97 | {
101 | capture(Events.ActivityActivityActivityRowClick);
102 | }}
103 | >
104 | {historySlice.map((txHash, index) => {
105 | if (!history.details[txHash]) history.details[txHash] = {};
106 |
107 | return (
108 | {
110 | txObject[txHash] = txDetail;
111 | }}
112 | key={index}
113 | txHash={txHash}
114 | detail={history.details[txHash]}
115 | currentAddr={currentAddr}
116 | addresses={addresses}
117 | network={network}
118 | />
119 | );
120 | })}
121 |
122 | {final ? (
123 |
130 | ... nothing more
131 |
132 | ) : (
133 |
134 |
149 |
150 | )}
151 |
152 | )}
153 |
154 | );
155 | };
156 |
157 | const HistorySpinner = () => (
158 |
159 |
160 |
161 | );
162 |
163 | export default HistoryViewer;
164 |
--------------------------------------------------------------------------------
/src/ui/app/components/qrCode.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import QRCodeStyling from 'qr-code-styling';
3 | import Ada from '../../../assets/img/ada.png';
4 | import { useColorModeValue } from '@chakra-ui/react';
5 |
6 | const qrCode = new QRCodeStyling({
7 | width: 150,
8 | height: 150,
9 | image: Ada,
10 | dotsOptions: {
11 | color: '#319795',
12 | type: 'dots',
13 | },
14 | cornersSquareOptions: { type: 'extra-rounded', color: '#DD6B20' },
15 | imageOptions: {
16 | crossOrigin: 'anonymous',
17 | margin: 8,
18 | },
19 | });
20 |
21 | const QrCode = ({ value }) => {
22 | const ref = React.useRef(null);
23 | const bgColor = useColorModeValue('white', '#2D3748');
24 | const contentColor = useColorModeValue(
25 | { corner: '#DD6B20', dots: '#319795' },
26 | { corner: '#FBD38D', dots: '#81E6D9' }
27 | );
28 |
29 | React.useEffect(() => {
30 | qrCode.append(ref.current);
31 | }, []);
32 |
33 | React.useEffect(() => {
34 | qrCode.update({
35 | data: value,
36 | backgroundOptions: {
37 | color: bgColor,
38 | },
39 | dotsOptions: {
40 | color: contentColor.dots,
41 | },
42 | cornersSquareOptions: { color: contentColor.corner },
43 | });
44 | }, [value, bgColor]);
45 |
46 | return ;
47 | };
48 |
49 | export default QrCode;
50 |
--------------------------------------------------------------------------------
/src/ui/app/components/scrollbar.jsx:
--------------------------------------------------------------------------------
1 | export { Scrollbars } from 'react-custom-scrollbars-2';
2 |
--------------------------------------------------------------------------------
/src/ui/app/components/styles.css:
--------------------------------------------------------------------------------
1 | .lineClamp {
2 | display: -webkit-box;
3 | -webkit-line-clamp: 2;
4 | -webkit-box-orient: vertical;
5 | }
6 |
7 | .lineClamp3 {
8 | display: -webkit-box;
9 | -webkit-line-clamp: 3;
10 | -webkit-box-orient: vertical;
11 | }
12 |
13 | body::-webkit-scrollbar {
14 | display: none;
15 | }
16 |
--------------------------------------------------------------------------------
/src/ui/app/components/trezorWidget.jsx:
--------------------------------------------------------------------------------
1 | import { CloseIcon } from '@chakra-ui/icons';
2 | import { Box, Modal, ModalContent, ModalOverlay, useDisclosure } from '@chakra-ui/react';
3 | import React from 'react';
4 |
5 | const TrezorWidget = React.forwardRef((props, ref) => {
6 | const { isOpen, onOpen, onClose } = useDisclosure();
7 | React.useImperativeHandle(ref, () => ({
8 | openModal() {
9 | onOpen();
10 | },
11 | closeModal() {
12 | onClose();
13 | },
14 | }));
15 | return (
16 |
22 |
23 |
32 |
40 |
49 |
50 |
56 |
57 |
58 |
59 |
60 | );
61 | });
62 |
63 | export default TrezorWidget;
64 |
--------------------------------------------------------------------------------
/src/ui/app/components/unitDisplay.jsx:
--------------------------------------------------------------------------------
1 | import { Box } from '@chakra-ui/react';
2 | import React from 'react';
3 | import { displayUnit } from '../../../api/extension';
4 |
5 | const hideZero = (str) =>
6 | str[str.length - 1] == 0 ? hideZero(str.slice(0, -1)) : str;
7 |
8 | const UnitDisplay = ({ quantity, decimals, symbol, hide, ...props }) => {
9 | const num = displayUnit(quantity, decimals)
10 | .toLocaleString('en-EN', { minimumFractionDigits: decimals })
11 | .split('.')[0];
12 | const subNum = displayUnit(quantity, decimals)
13 | .toLocaleString('en-EN', { minimumFractionDigits: decimals })
14 | .split('.')[1];
15 | return (
16 |
17 | {quantity || quantity === 0 ? (
18 | <>
19 | {num}
20 | {(hide && hideZero(subNum).length <= 0) || decimals == 0 ? '' : '.'}
21 |
22 | {hide ? hideZero(subNum) : subNum}
23 | {' '}
24 |
25 | ) : (
26 | '... '
27 | )}
28 | {symbol}
29 |
30 | );
31 | };
32 |
33 | export default UnitDisplay;
34 |
--------------------------------------------------------------------------------
/src/ui/app/pages/enable.jsx:
--------------------------------------------------------------------------------
1 | import { CheckIcon } from '@chakra-ui/icons';
2 | import { Box, Button, Text, Image, useColorModeValue } from '@chakra-ui/react';
3 | import React from 'react';
4 | import { setWhitelisted } from '../../../api/extension';
5 | import { APIError } from '../../../config/config';
6 |
7 | import Account from '../components/account';
8 | import { useCaptureEvent } from '../../../features/analytics/hooks';
9 | import { Events } from '../../../features/analytics/events';
10 |
11 | const Enable = ({ request, controller }) => {
12 | const capture = useCaptureEvent();
13 | const background = useColorModeValue('gray.100', 'gray.700');
14 | return (
15 |
22 |
23 |
24 |
30 |
39 |
45 |
46 |
47 | {request.origin.split('//')[1]}
48 |
49 | This app would like to:
50 |
51 |
59 |
60 | {' '}
61 | View your balance and addresses
62 |
63 |
64 |
65 | {' '}
66 | Request approval for transactions
67 |
68 |
69 |
70 | Only connect with sites you trust
71 |
72 |
80 |
91 |
92 |
105 |
106 |
107 | );
108 | };
109 |
110 | export default Enable;
111 |
--------------------------------------------------------------------------------
/src/ui/app/pages/noWallet.jsx:
--------------------------------------------------------------------------------
1 | import { Box, Text, Image, useColorModeValue } from '@chakra-ui/react';
2 | import React from 'react';
3 | import { Backpack } from 'react-kawaii';
4 |
5 | import BannerWhite from '../../../assets/img/bannerWhite.svg';
6 | import BannerBlack from '../../../assets/img/bannerBlack.svg';
7 |
8 | const NoWallet = () => {
9 | const Banner = useColorModeValue(BannerBlack, BannerWhite);
10 | return (
11 |
20 |
21 |
22 |
23 |
24 |
25 |
26 | No Wallet
27 |
28 |
29 |
30 | Open the panel at the top right in order to create a wallet.
31 |
32 |
33 |
34 | );
35 | };
36 |
37 | export default NoWallet;
38 |
--------------------------------------------------------------------------------
/src/ui/app/tabs/trezorTx.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { TAB } from '../../../config/config';
3 | import Main from '../../index';
4 | import { BrowserRouter as Router } from 'react-router-dom';
5 | import { createRoot } from 'react-dom/client';
6 | import { Box, useColorModeValue, Image, useToast } from '@chakra-ui/react';
7 | import { AnalyticsProvider } from '../../../features/analytics/provider';
8 | import { EventTracker } from '../../../features/analytics/event-tracker';
9 | import { ExtensionViews } from '../../../features/analytics/types';
10 |
11 | // assets
12 | import LogoOriginal from '../../../assets/img/logo.svg';
13 | import LogoWhite from '../../../assets/img/logoWhite.svg';
14 | import { getCurrentAccount, indexToHw, initHW } from '../../../api/extension';
15 | import { signAndSubmitHW } from '../../../api/extension/wallet';
16 | import Loader from '../../../api/loader';
17 | import { useStoreActions } from 'easy-peasy';
18 |
19 | const App = () => {
20 | const Logo = useColorModeValue(LogoOriginal, LogoWhite);
21 | const backgroundColor = useColorModeValue('gray.200', 'inherit');
22 | const toast = useToast();
23 |
24 | const setRoute = useStoreActions(
25 | (actions) => actions.globalModel.routeStore.setRoute
26 | );
27 | const resetSend = useStoreActions(
28 | (actions) => actions.globalModel.sendStore.reset
29 | );
30 |
31 | const init = async () => {
32 | await Loader.load();
33 |
34 | const account = await getCurrentAccount();
35 | const params = new URLSearchParams(window.location.search);
36 | const tx = params.get('tx');
37 | const hw = indexToHw(account.index);
38 |
39 | const txDes = Loader.Cardano.Transaction.from_cbor_bytes(Buffer.from(tx, 'hex'));
40 | await initHW({ device: hw.device, id: hw.id });
41 | try {
42 | await signAndSubmitHW(txDes, {
43 | keyHashes: [account.paymentKeyHash],
44 | account,
45 | hw,
46 | });
47 | toast({
48 | title: 'Transaction submitted',
49 | status: 'success',
50 | duration: 3000,
51 | });
52 | } catch (_e) {
53 | toast({
54 | title: 'Transaction failed',
55 | status: 'error',
56 | duration: 3000,
57 | });
58 | }
59 | resetSend();
60 | setRoute('/wallet');
61 | setTimeout(() => window.close(), 3000);
62 | };
63 |
64 | React.useEffect(() => init(), []);
65 |
66 | return (
67 |
76 | {/* Logo */}
77 |
78 |
79 |
80 |
81 |
87 | Waiting for Trezor...
88 |
89 |
90 | );
91 | };
92 |
93 | const root = createRoot(window.document.querySelector(`#${TAB.trezorTx}`));
94 | root.render(
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 | );
104 |
105 | if (module.hot) module.hot.accept();
106 |
--------------------------------------------------------------------------------
/src/ui/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { POPUP, POPUP_WINDOW, TAB } from '../config/config';
3 | import { Scrollbars } from './app/components/scrollbar';
4 | import './app/components/styles.css';
5 | import Theme from './theme';
6 | import StoreProvider from './store';
7 | import { Box, IconButton } from '@chakra-ui/react';
8 | import { ChevronUpIcon } from '@chakra-ui/icons';
9 |
10 | const isMain = window.document.querySelector(`#${POPUP.main}`);
11 | const isTab = window.document.querySelector(`#${TAB.hw}`);
12 |
13 | const Main = ({ children }) => {
14 | const [scroll, setScroll] = React.useState({ el: null, y: 0 });
15 |
16 | React.useEffect(() => {
17 | window.document.body.addEventListener(
18 | 'keydown',
19 | (e) => e.key === 'Escape' && e.preventDefault()
20 | );
21 | // Windows is somehow not opening the popup with the right size. Dynamically changing it, fixes it for now:
22 | if (navigator.userAgent.indexOf('Win') != -1 && !isMain && !isTab) {
23 | const width =
24 | POPUP_WINDOW.width + (window.outerWidth - window.innerWidth);
25 | const height =
26 | POPUP_WINDOW.height + (window.outerHeight - window.innerHeight);
27 | window.resizeTo(width, height);
28 | }
29 | }, []);
30 | return (
31 |
35 |
36 |
37 | {
42 | setScroll({ el: e.target, y: e.target.scrollTop });
43 | }}
44 | >
45 | {children}
46 | {scroll.y > 1200 && (
47 | {
49 | scroll.el.scrollTo({ behavior: 'smooth', top: 0 });
50 | }}
51 | position="fixed"
52 | bottom="15px"
53 | right="15px"
54 | size="sm"
55 | rounded="xl"
56 | colorScheme="teal"
57 | opacity={0.85}
58 | icon={}
59 | >
60 | )}
61 |
62 |
63 |
64 |
65 | );
66 | };
67 |
68 | export default Main;
69 |
--------------------------------------------------------------------------------
/src/ui/indexInternal.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * indexInternal is the entry point for the popup windows (e.g. data signing, tx signing)
3 | */
4 |
5 | import { Box, Spinner } from '@chakra-ui/react';
6 | import React from 'react';
7 | import { createRoot } from 'react-dom/client';
8 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
9 | import { useNavigate } from 'react-router-dom';
10 | import { getAccounts } from '../api/extension';
11 | import { Messaging } from '../api/messaging';
12 | import { AnalyticsProvider } from '../features/analytics/provider';
13 | import { EventTracker } from '../features/analytics/event-tracker';
14 | import { ExtensionViews } from '../features/analytics/types';
15 |
16 | import { METHOD, POPUP } from '../config/config';
17 | import Enable from './app/pages/enable';
18 | import NoWallet from './app/pages/noWallet';
19 | import SignData from './app/pages/signData';
20 | import SignTx from './app/pages/signTx';
21 | import Main from './index';
22 |
23 | const App = () => {
24 | const controller = Messaging.createInternalController();
25 | const navigate = useNavigate();
26 | const [request, setRequest] = React.useState(null);
27 |
28 | const init = async () => {
29 | const request = await controller.requestData();
30 | const hasWallet = await getAccounts();
31 | setRequest(request);
32 | if (!hasWallet) navigate('/noWallet');
33 | else if (request.method === METHOD.enable) navigate('/enable');
34 | else if (request.method === METHOD.signData) navigate('/signData');
35 | else if (request.method === METHOD.signTx) navigate('/signTx');
36 | };
37 |
38 | React.useEffect(() => {
39 | init();
40 | }, []);
41 |
42 | return !request ? (
43 |
50 |
51 |
52 | ) : (
53 |
54 |
55 | }
58 | />
59 | }
62 | />
63 | }
66 | />
67 | } />
68 |
69 |
70 | );
71 | };
72 |
73 | const root = createRoot(window.document.querySelector(`#${POPUP.internal}`));
74 | root.render(
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 | );
84 |
85 | if (module.hot) module.hot.accept();
86 |
--------------------------------------------------------------------------------
/src/ui/indexMain.jsx:
--------------------------------------------------------------------------------
1 | /**
2 | * indexMain is the entry point for the extension panel you open at the top right in the browser
3 | */
4 | import React from 'react';
5 | import { createRoot } from 'react-dom/client';
6 | import { POPUP } from '../config/config';
7 | import { EventTracker } from '../features/analytics/event-tracker';
8 | import { ExtensionViews } from '../features/analytics/types';
9 | import { AppWithMigration } from './lace-migration/components/migration.component';
10 | import Theme from './theme';
11 | import { BrowserRouter as Router } from 'react-router-dom';
12 | import Main from './index';
13 | import { AnalyticsProvider } from '../features/analytics/provider';
14 |
15 | const root = createRoot(window.document.querySelector(`#${POPUP.main}`));
16 | root.render(
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | );
28 |
29 | if (module.hot) module.hot.accept();
30 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/assets/arrow.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/assets/checkmark.svg:
--------------------------------------------------------------------------------
1 |
5 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/assets/chevron-left.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/assets/chevron-right.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/assets/clock.svg:
--------------------------------------------------------------------------------
1 |
6 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/assets/download.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/all-done/all-done.component.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useColorMode, Box } from '@chakra-ui/react';
3 | import { Slide } from '../slide.component';
4 | import { ReactComponent as Arrow } from '../../assets/arrow.svg';
5 | import { ReactComponent as DoneDark } from '../../assets/done-dark.svg';
6 | import { ReactComponent as DoneWhite } from '../../assets/done-white.svg';
7 |
8 | export const AllDone = ({ isLaceInstalled, onAction }) => {
9 | const { colorMode } = useColorMode();
10 | return (
11 |
15 | {colorMode === 'light' ? (
16 |
17 | ) : (
18 |
19 | )}
20 |
21 | }
22 | description="Your Nami wallet is now part of the Lace family."
23 | buttonText={isLaceInstalled ? 'Open Lace' : 'Download Lace'}
24 | buttonIcon={Arrow}
25 | onButtonClick={onAction}
26 | />
27 | );
28 | };
29 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/all-done/all-done.stories.js:
--------------------------------------------------------------------------------
1 | import { AllDone } from './all-done.component';
2 |
3 | const meta = {
4 | title: 'Nami Migration/Screens/AllDone',
5 | component: AllDone,
6 | parameters: {
7 | layout: 'centered',
8 | },
9 | args: {
10 | onAction: () => {},
11 | },
12 | };
13 |
14 | export default meta;
15 |
16 | export const Primary = {};
17 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/almost-there/almost-there.component.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { useColorMode, Box } from '@chakra-ui/react';
3 | import { Slide } from '../slide.component';
4 | import { ReactComponent as Download } from '../../assets/download.svg';
5 | import { ReactComponent as Arrow } from '../../assets/arrow.svg';
6 | import { ReactComponent as PendingDark } from '../../assets/pending-dark-mode.svg';
7 | import { ReactComponent as PendingWhite } from '../../assets/pending-white-mode.svg';
8 | import { useCaptureEvent } from '../../../../features/analytics/hooks';
9 | import { Events } from '../../../../features/analytics/events';
10 |
11 | export const AlmostThere = ({
12 | isLaceInstalled,
13 | onAction,
14 | isDismissable,
15 | dismissibleSeconds,
16 | }) => {
17 | const { colorMode } = useColorMode();
18 | const captureEvent = useCaptureEvent();
19 | return (
20 |
27 | {colorMode === 'light' ? (
28 |
29 | ) : (
30 |
31 | )}
32 |
33 | }
34 | description={
35 | isLaceInstalled
36 | ? 'Your Nami wallet is now part of the Lace family.'
37 | : 'Download the Lace extension to begin.'
38 | }
39 | buttonText={isLaceInstalled ? 'Open Lace' : 'Download Lace'}
40 | buttonIcon={isLaceInstalled ? Arrow : Download}
41 | onButtonClick={async () => {
42 | await captureEvent(Events.NamiMigrationOpenLaceOrOpenChromeStore);
43 | onAction();
44 | }}
45 | isDismissable={isDismissable}
46 | buttonOrientation="column"
47 | dismissibleSeconds={dismissibleSeconds}
48 | onDismiss={() => captureEvent(Events.NamiMigrationDismissedInProgress)}
49 | />
50 | );
51 | };
52 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/almost-there/almost-there.stories.js:
--------------------------------------------------------------------------------
1 | import { AlmostThere } from './almost-there.component';
2 |
3 | const meta = {
4 | title: 'Nami Migration/Screens/AlmostThere',
5 | component: AlmostThere,
6 | parameters: {
7 | layout: 'centered',
8 | },
9 | args: {
10 | isLaceInstalled: true,
11 | onAction: () => {},
12 | },
13 | };
14 |
15 | export default meta;
16 |
17 | export const Primary = {};
18 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/carousel/carousel.component.jsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from 'react';
2 | import { Box, Button, useColorModeValue, Flex } from '@chakra-ui/react';
3 | import { ReactComponent as Left } from '../../assets/chevron-left.svg';
4 | import { ReactComponent as Right } from '../../assets/chevron-right.svg';
5 | const CarouselButton = ({ children, ...rest }) => (
6 |
20 | );
21 |
22 | export const Carousel = ({ children, onSlideSwitched }) => {
23 | const [currentIndex, setCurrentIndex] = useState(0);
24 |
25 | const prevSlide = () => {
26 | setCurrentIndex((prevIndex) => {
27 | const nextIndex = prevIndex === 0 ? children.length - 1 : prevIndex - 1;
28 | onSlideSwitched?.(nextIndex);
29 | return nextIndex;
30 | });
31 | };
32 |
33 | const nextSlide = () => {
34 | setCurrentIndex((prevIndex) => {
35 | const nextIndex = prevIndex === children.length - 1 ? 0 : prevIndex + 1;
36 | onSlideSwitched?.(nextIndex);
37 | return nextIndex;
38 | });
39 | };
40 |
41 | return (
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 | {children[currentIndex]}
50 |
51 |
52 |
53 |
54 |
55 |
56 | );
57 | };
58 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/carousel/carousel.stories.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Carousel } from './carousel.component';
3 | import { Slide1 } from './slides/Slide1.component';
4 | import { Slide2 } from './slides/Slide2.component';
5 | import { Slide3 } from './slides/Slide3.component';
6 | import { AlmostThere } from '../almost-there/almost-there.component';
7 | import { AllDone } from '../all-done/all-done.component';
8 |
9 | const meta = {
10 | title: 'Nami Migration/Screens/Carousel',
11 | component: Carousel,
12 | parameters: {
13 | layout: 'centered',
14 | },
15 | args: {
16 | children: [
17 | {}} />,
18 | {}} />,
19 | {}} />,
20 | {}} />,
21 | {}} />,
22 | ],
23 | },
24 | };
25 |
26 | export default meta;
27 |
28 | export const Primary = {};
29 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/carousel/slides/Slide1.component.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Box } from '@chakra-ui/react';
3 | import { Slide } from '../../slide.component';
4 | import { ReactComponent as Arrow } from '../../../assets/arrow.svg';
5 | import { ReactComponent as BackpackImg } from '../../../assets/backpack.svg';
6 | import { useCaptureEvent } from '../../../../../features/analytics/hooks';
7 | import { Events } from '../../../../../features/analytics/events';
8 |
9 | export const Slide1 = ({ onAction, isDismissable, dismissibleSeconds }) => {
10 | const captureEvent = useCaptureEvent();
11 | return (
12 |
17 |
18 |
19 | }
20 | description="The Nami Wallet is now integrated into Lace. Click 'Upgrade your wallet' to begin the process."
21 | buttonText="Upgrade your wallet"
22 | buttonIcon={Arrow}
23 | onButtonClick={async () => await onAction()}
24 | isDismissable={isDismissable}
25 | dismissibleSeconds={dismissibleSeconds}
26 | buttonOrientation={isDismissable ? 'column' : 'row'}
27 | onDismiss={async () =>
28 | captureEvent(Events.NamiMigrationDismissedNotStarted)
29 | }
30 | />
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/carousel/slides/Slide1.stories.js:
--------------------------------------------------------------------------------
1 | import { Slide1 } from './Slide1.component';
2 |
3 | const meta = {
4 | title: 'Nami Migration/Screens/Carousel/Slide 1',
5 | component: Slide1,
6 | parameters: {
7 | layout: 'centered',
8 | },
9 | args: {
10 | onAction: () => {},
11 | isDismissable: true,
12 | },
13 | };
14 |
15 | export default meta;
16 |
17 | export const Primary = {};
18 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/carousel/slides/Slide2.component.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Slide } from '../../slide.component';
3 | import { ReactComponent as Arrow } from '../../../assets/arrow.svg';
4 | import { ReactComponent as SeamlessDark } from '../../../assets/grouped-dark-mode.svg';
5 | import { ReactComponent as SeamlessWhite } from '../../../assets/grouped-white-mode.svg';
6 | import { useColorMode, Box } from '@chakra-ui/react';
7 | import { useCaptureEvent } from '../../../../../features/analytics/hooks';
8 | import { Events } from '../../../../../features/analytics/events';
9 |
10 | export const Slide2 = ({ onAction, isDismissable, dismissibleSeconds }) => {
11 | const { colorMode } = useColorMode();
12 | const captureEvent = useCaptureEvent();
13 | return (
14 |
19 | {colorMode === 'light' ? (
20 |
21 | ) : (
22 |
23 | )}
24 |
25 | }
26 | description="On the surface, Nami is the same. But now, with Lace's advanced technology supporting it."
27 | buttonText="Upgrade your wallet"
28 | buttonIcon={Arrow}
29 | onButtonClick={onAction}
30 | isDismissable={isDismissable}
31 | dismissibleSeconds={dismissibleSeconds}
32 | buttonOrientation={isDismissable ? 'column' : 'row'}
33 | onDismiss={async () =>
34 | captureEvent(Events.NamiMigrationDismissedNotStarted)
35 | }
36 | />
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/carousel/slides/Slide2.stories.js:
--------------------------------------------------------------------------------
1 | import { Slide2 } from './Slide2.component';
2 |
3 | const meta = {
4 | title: 'Nami Migration/Screens/Carousel/Slide 2',
5 | component: Slide2,
6 | parameters: {
7 | layout: 'centered',
8 | },
9 | args: {
10 | onAction: () => {},
11 | },
12 | };
13 |
14 | export default meta;
15 |
16 | export const Primary = {};
17 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/carousel/slides/Slide3.component.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Slide } from '../../slide.component';
3 | import { ReactComponent as Arrow } from '../../../assets/arrow.svg';
4 | import { Box } from '@chakra-ui/react';
5 | import { ReactComponent as FeaturesImg } from '../../../assets/features.svg';
6 | import { useCaptureEvent } from '../../../../../features/analytics/hooks';
7 | import { Events } from '../../../../../features/analytics/events';
8 |
9 | export const Slide3 = ({ onAction, isDismissable, dismissibleSeconds }) => {
10 | const captureEvent = useCaptureEvent();
11 | return (
12 |
18 |
19 |
20 | }
21 | buttonText="Upgrade your wallet"
22 | buttonIcon={Arrow}
23 | onButtonClick={onAction}
24 | isDismissable={isDismissable}
25 | dismissibleSeconds={dismissibleSeconds}
26 | buttonOrientation={isDismissable ? 'column' : 'row'}
27 | onDismiss={async () =>
28 | captureEvent(Events.NamiMigrationDismissedNotStarted)
29 | }
30 | />
31 | );
32 | };
33 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/carousel/slides/Slide3.stories.js:
--------------------------------------------------------------------------------
1 | import { Slide3 } from './Slide3.component';
2 |
3 | const meta = {
4 | title: 'Nami Migration/Screens/Carousel/Slide 3',
5 | component: Slide3,
6 | parameters: {
7 | layout: 'centered',
8 | },
9 | args: {
10 | onAction: () => {},
11 | },
12 | };
13 |
14 | export default meta;
15 |
16 | export const Primary = {};
17 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/dismiss-btn.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Button, Flex, useColorModeValue } from '@chakra-ui/react';
3 | import { Text } from './text.component';
4 | import { dismissMigration } from '../../../api/migration-tool/cross-extension-messaging/nami-migration-client.extension';
5 | import { ReactComponent as PendingDark } from '../assets/clock.svg';
6 |
7 | export const DismissBtn = ({
8 | dismissableIntervalSeconds,
9 | hasIcon,
10 | onDismiss,
11 | }) => {
12 | const futureDate = new Date();
13 | const futureTime = futureDate.setTime(
14 | futureDate.getTime() + dismissableIntervalSeconds * 1000
15 | );
16 | const textColor = useColorModeValue('#6F7786', '#FFFFFF');
17 | const Icon = !!hasIcon && ;
18 |
19 | return (
20 |
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/get-color.js:
--------------------------------------------------------------------------------
1 | const primary = {
2 | default: '#3D3B39',
3 | _dark: '#FFFFFF',
4 | };
5 |
6 | const secondary = { default: '#FFFFFF', _dark: '#3D3B39' };
7 |
8 | export const getColor = (color = 'primary', colorMode) => {
9 | const isLight = colorMode === 'light';
10 | switch (color) {
11 | case 'secondary':
12 | return isLight ? secondary.default : secondary._dark;
13 | case 'primary':
14 | return isLight ? primary.default : primary._dark;
15 | default:
16 | return color;
17 | }
18 | };
19 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/index.js:
--------------------------------------------------------------------------------
1 | export { AllDone } from './all-done/all-done.component';
2 | export { AlmostThere } from './almost-there/almost-there.component';
3 | export { Carousel } from './carousel/carousel.component';
4 | export { Slide1 } from './carousel/slides/Slide1.component';
5 | export { Slide3 } from './carousel/slides/Slide3.component';
6 | export { SeamlessUpgrade } from './seamless-upgrade/seamless-upgrade.component';
7 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/migration-view/migration-view.stories.js:
--------------------------------------------------------------------------------
1 | import { MigrationView } from './migration-view.component';
2 |
3 | export default {
4 | title: 'Nami Migration/State Flow',
5 | component: MigrationView,
6 | parameters: {
7 | layout: 'centered',
8 | actions: { argTypesRegex: '^on.*' },
9 | },
10 | };
11 |
12 | export const None = {
13 | args: {
14 | migrationState: 'none',
15 | hasWallet: true,
16 | },
17 | };
18 |
19 | export const WaitingForLace = {
20 | args: {
21 | migrationState: 'in-progress',
22 | isLaceInstalled: false,
23 | hasWallet: true,
24 | },
25 | };
26 |
27 | export const InProgress = {
28 | args: {
29 | migrationState: 'in-progress',
30 | isLaceInstalled: true,
31 | hasWallet: true,
32 | },
33 | };
34 |
35 | export const Completed = {
36 | args: {
37 | migrationState: 'completed',
38 | isLaceInstalled: true,
39 | hasWallet: true,
40 | },
41 | };
42 |
43 | export const NoWallet = {
44 | args: {
45 | migrationState: 'none',
46 | hasWallet: false,
47 | },
48 | };
49 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/no-wallet/no-wallet.component.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Slide } from '../slide.component';
3 | import { ReactComponent as LaceIcon } from '../../assets/lace-icon.svg';
4 | import { ReactComponent as BackpackImg } from '../../assets/backpack.svg';
5 | import { Box } from '@chakra-ui/react';
6 | import { useCaptureEvent } from '../../../../features/analytics/hooks';
7 | import { Events } from '../../../../features/analytics/events';
8 |
9 | export const NoWallet = ({ onAction, isDismissable, dismissibleSeconds }) => {
10 | const captureEvent = useCaptureEvent();
11 |
12 | return (
13 |
17 |
18 |
19 | }
20 | description="To create or import a wallet, proceed using the Lace extension."
21 | buttonText="Get started with Lace"
22 | buttonIcon={LaceIcon}
23 | onButtonClick={onAction}
24 | isDismissable={isDismissable}
25 | buttonOrientation={isDismissable ? 'column' : 'row'}
26 | dismissibleSeconds={dismissibleSeconds}
27 | showTerms={false}
28 | showFindOutMore
29 | onDismiss={async () =>
30 | captureEvent(Events.NamiMigrationDismissedNoWallet)
31 | }
32 | />
33 | );
34 | };
35 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/no-wallet/no-wallet.stories.js:
--------------------------------------------------------------------------------
1 | import { NoWallet } from './no-wallet.component';
2 |
3 | const meta = {
4 | title: 'Nami Migration/Screens/NoWallet',
5 | component: NoWallet,
6 | parameters: {
7 | layout: 'centered',
8 | },
9 | args: {
10 | isLaceInstalled: true,
11 | onAction: () => {},
12 | },
13 | };
14 |
15 | export default meta;
16 |
17 | export const Primary = {};
18 |
--------------------------------------------------------------------------------
/src/ui/lace-migration/components/text.component.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Text as ChakraText, useColorMode } from '@chakra-ui/react';
3 | import { getColor } from './get-color';
4 |
5 | export const Text = ({ children, color, ...rest }) => {
6 | const { colorMode } = useColorMode();
7 | return (
8 |
9 | {children}
10 |
11 | );
12 | };
13 |
--------------------------------------------------------------------------------
/src/ui/theme.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ChakraProvider, extendTheme } from '@chakra-ui/react';
3 | import './app/components/styles.css';
4 | import '@fontsource/ubuntu/latin.css';
5 |
6 | const colorMode = localStorage['chakra-ui-color-mode'];
7 |
8 | const inputSizes = {
9 | sm: {
10 | borderRadius: 'lg',
11 | },
12 | md: {
13 | borderRadius: 'lg',
14 | },
15 | };
16 |
17 | const Input = {
18 | sizes: {
19 | sm: {
20 | field: inputSizes.sm,
21 | addon: inputSizes.sm,
22 | },
23 | md: {
24 | field: inputSizes.md,
25 | addon: inputSizes.md,
26 | },
27 | },
28 | defaultProps: {
29 | focusBorderColor: 'teal.500',
30 | },
31 | };
32 |
33 | const Checkbox = {
34 | defaultProps: {
35 | colorScheme: 'teal',
36 | },
37 | };
38 |
39 | const Select = {
40 | defaultProps: {
41 | focusBorderColor: 'teal.500',
42 | },
43 | };
44 |
45 | const Button = {
46 | baseStyle: {
47 | borderRadius: 'lg',
48 | },
49 | };
50 |
51 | const Switch = {
52 | baseStyle: {
53 | track: {
54 | _focus: {
55 | boxShadow: 'none',
56 | },
57 | },
58 | },
59 | defaultProps: {
60 | colorScheme: 'teal',
61 | },
62 | };
63 |
64 | const theme = extendTheme({
65 | components: {
66 | Checkbox,
67 | Input,
68 | Select,
69 | Button,
70 | Switch,
71 | },
72 | config: {
73 | useSystemColorMode: colorMode ? false : true,
74 | },
75 | styles: {
76 | global: {
77 | body: {
78 | // width: POPUP_WINDOW.width + 'px',
79 | // height: POPUP_WINDOW.height + 'px',
80 | overflow: 'hidden',
81 | },
82 | },
83 | },
84 | fonts: {
85 | body: 'Ubuntu, sans-serif',
86 | },
87 | });
88 |
89 | const Theme = ({ children }) => {
90 | return {children};
91 | };
92 |
93 | export default Theme;
94 |
--------------------------------------------------------------------------------
/src/wasm/cardano_message_signing/.gitignore:
--------------------------------------------------------------------------------
1 | target/
--------------------------------------------------------------------------------
/src/wasm/cardano_message_signing/Cargo.toml:
--------------------------------------------------------------------------------
1 | [package]
2 | name = "cardano-message-signing"
3 | version = "1.0.1"
4 | edition = "2018"
5 | authors = ["EMURGO"]
6 |
7 | [lib]
8 | crate-type = ["cdylib", "rlib"]
9 |
10 | [dependencies]
11 | base64-url = "1.4.8"
12 | byteorder = "1.4.3"
13 | cbor_event = "2.1.3"
14 | cryptoxide = "0.3.2"
15 | #curve25519-dalek = { "path" = "curve25519-dalek" }
16 | linked-hash-map = "0.5.3"
17 | hex = "0.4.0"
18 | pruefung = "0.2.1"
19 |
20 | # non-wasm
21 | [target.'cfg(not(all(target_arch = "wasm32", not(target_os = "emscripten"))))'.dependencies]
22 | noop_proc_macro = "0.3.0"
23 |
24 | # wasm
25 | [target.'cfg(all(target_arch = "wasm32", not(target_os = "emscripten")))'.dependencies]
26 | wasm-bindgen = { version = "0.2.84", features=["serde-serialize"] }
27 |
28 | [profile.release]
29 | # Tell `rustc` to optimize for small code size.
30 | codegen-units = 1
31 | opt-level = "s"
32 | incremental = true
33 | lto = true
34 |
--------------------------------------------------------------------------------
/src/wasm/cardano_message_signing/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 EMURGO
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/wasm/cardano_message_signing/cardano_message_signing_bg.wasm:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/input-output-hk/nami/e52e0bdb02eb1ec224db26f48b0192685a30f99e/src/wasm/cardano_message_signing/cardano_message_signing_bg.wasm
--------------------------------------------------------------------------------
/src/wasm/cardano_message_signing/src/crypto.rs:
--------------------------------------------------------------------------------
1 | //use curve25519_dalek::FieldElement;
2 |
3 | // pub fn get_ed25519_x(xpub: &ed25519_bip32::XPub) -> Option<()> {
4 |
5 | // // let compressed_y = CompressedEdwardsY::from_slice(&bytes[..]);
6 | // // let edwards_point = compressed_y.decompress()?;
7 | // // let proj_point = edwards_point.to_projective();
8 | // //let Y = FieldElement::from_bytes(bytes);
9 | // None
10 | // }
11 |
12 | use cryptoxide::blake2b::Blake2b;
13 | use pruefung::fnv::fnv32::Fnv32a;
14 |
15 | pub (crate) fn blake2b224(data: &[u8]) -> [u8; 28] {
16 | let mut out = [0; 28];
17 | Blake2b::blake2b(&mut out, data, &[]);
18 | out
19 | }
20 |
21 | pub (crate) fn fnv32a(data: &[u8]) -> u32 {
22 | use core::hash::Hasher;
23 | let mut hasher = Fnv32a::default();
24 | hasher.write(data);
25 | hasher.finish() as u32
26 | }
27 |
28 | // #[cfg(test)]
29 | // mod tests {
30 | // use super::*;
31 |
32 | // #[test]
33 | // fn x_coord() {
34 | // let pub_bytes = [
35 | // 0xd7, 0x5a, 0x98, 0x01, 0x82, 0xb1, 0x0a, 0xb7, 0xd5, 0x4b, 0xfe, 0xd3, 0xc9, 0x64, 0x07, 0x3a,
36 | // 0x0e, 0xe1, 0x72, 0xf3, 0xda, 0xa6, 0x23, 0x25, 0xaf, 0x02, 0x1a, 0x68, 0xf7, 0x07, 0x51, 0x1a
37 | // ];
38 | // let compr_y = curve25519_dalek::edwards::CompressedEdwardsY::from_slice(&pub_bytes[..]);
39 | // let x_computed = compr_y.compute_x_as_bytes().unwrap();
40 | // let x_expected = base64_url::decode("11qYAYKxCrfVS_7TyWQHOg7hcvPapiMlrwIaaPcHURo").unwrap();
41 | // println!("pub_bytes = {:?}", pub_bytes);
42 | // println!("x_expected = {:?}", x_expected);
43 | // println!("x_computed = {:?}", x_computed);
44 | // assert_eq!(pub_bytes, x_expected.as_ref());
45 | // }
46 | // }
--------------------------------------------------------------------------------
/src/wasm/cardano_message_signing/src/tests.rs:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/input-output-hk/nami/e52e0bdb02eb1ec224db26f48b0192685a30f99e/src/wasm/cardano_message_signing/src/tests.rs
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "@tsconfig/node20/tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "./build/",
5 | "sourceMap": true,
6 | "noImplicitAny": true,
7 | "module": "commonjs",
8 | "target": "es5",
9 | "jsx": "react",
10 | "allowJs": true,
11 | "moduleResolution": "node"
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/utils/build.js:
--------------------------------------------------------------------------------
1 | // Do this as the first thing so that any code reading it knows the right env.
2 | process.env.BABEL_ENV = 'production';
3 | process.env.NODE_ENV = 'production';
4 | process.env.ASSET_PATH = '/';
5 |
6 | var webpack = require('webpack'),
7 | config = require('../webpack.config');
8 |
9 | delete config.chromeExtensionBoilerplate;
10 |
11 | config.mode = 'production';
12 |
13 | webpack(config, function (err, stats) {
14 | if (stats.hasErrors()) {
15 | console.log(
16 | stats.toString({
17 | colors: true,
18 | })
19 | );
20 | }
21 |
22 | if (err) {
23 | throw err;
24 | }
25 | });
26 |
--------------------------------------------------------------------------------
/utils/env.js:
--------------------------------------------------------------------------------
1 | // tiny wrapper with default env vars
2 | module.exports = {
3 | NODE_ENV: process.env.NODE_ENV || 'development',
4 | PORT: process.env.PORT || 3000,
5 | };
6 |
--------------------------------------------------------------------------------
/utils/webserver.js:
--------------------------------------------------------------------------------
1 | // Do this as the first thing so that any code reading it knows the right env.
2 | process.env.BABEL_ENV = 'development';
3 | process.env.NODE_ENV = 'development';
4 | process.env.ASSET_PATH = '/';
5 |
6 | var ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
7 | var WebpackDevServer = require('webpack-dev-server'),
8 | webpack = require('webpack'),
9 | config = require('../webpack.config'),
10 | env = require('./env'),
11 | path = require('path');
12 |
13 | var options = config.chromeExtensionBoilerplate || {};
14 | var excludeEntriesToHotReload = options.notHotReload || [];
15 |
16 | for (var entryName in config.entry) {
17 | if (excludeEntriesToHotReload.indexOf(entryName) === -1) {
18 | config.entry[entryName] = [
19 | 'webpack-dev-server/client?http://localhost:' + env.PORT,
20 | 'webpack/hot/dev-server',
21 | ].concat(config.entry[entryName]);
22 | }
23 | }
24 |
25 | config.plugins = [
26 | new webpack.HotModuleReplacementPlugin(),
27 | new ReactRefreshWebpackPlugin(),
28 | ].concat(config.plugins || []);
29 |
30 | delete config.chromeExtensionBoilerplate;
31 |
32 | var compiler = webpack(config);
33 |
34 | var server = new WebpackDevServer(compiler, {
35 | https: false,
36 | hot: true,
37 | client: {
38 | overlay: false,
39 | },
40 | devMiddleware: {
41 | publicPath: `http://localhost:${env.PORT}/`,
42 | writeToDisk: true,
43 | },
44 | liveReload: false,
45 | port: env.PORT,
46 | static: {
47 | directory: path.join(__dirname, '../build'),
48 | },
49 | headers: {
50 | 'Access-Control-Allow-Origin': '*',
51 | },
52 | allowedHosts: 'all',
53 | });
54 |
55 | if (process.env.NODE_ENV === 'development' && module.hot) {
56 | module.hot.accept();
57 | }
58 |
59 | server.listen(env.PORT);
60 |
--------------------------------------------------------------------------------