diff --git a/.eslintignore b/.eslintignore index c7a5f674a7..23fdd0c543 100755 --- a/.eslintignore +++ b/.eslintignore @@ -5,7 +5,7 @@ main.js logs node_modules translations -tests +./tests features/tests/e2e/documents/* mainnet-genesis-dryrun-with-stakeholders.json source/renderer/app/i18n/locales diff --git a/CHANGELOG.md b/CHANGELOG.md index eb74603c1f..2b5ed93062 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ Changelog ### Features +- Implemented "Newsfeed" feature ([PR 1570](https://github.com/input-output-hk/daedalus/pull/1570)) - Implemented wallet recovery phrase verification ([PR 1565](https://github.com/input-output-hk/daedalus/pull/1565)) - Removed select dropdown arrow ([PR 1550](https://github.com/input-output-hk/daedalus/pull/1550)) - Implemented automated and manual update flows unification ([PR 1491](https://github.com/input-output-hk/daedalus/pull/1491)) @@ -44,7 +45,7 @@ Changelog ### Specifications -- News feed ([PR 1569](https://github.com/input-output-hk/daedalus/pull/1569)) +- Newsfeed ([PR 1569](https://github.com/input-output-hk/daedalus/pull/1569)) ## 0.14.0 diff --git a/features/data-layer-migration.feature b/features/data-layer-migration.feature index 71b8491821..08d9f44a4f 100644 --- a/features/data-layer-migration.feature +++ b/features/data-layer-migration.feature @@ -15,6 +15,6 @@ Feature: Data Layer Migration | Wallet | | Then I should see the Data Layer Migration screen When I click the migration button - Then I should see the initial screen + Then I should see the main ui When I refresh the main window Then I should not see the Data Layer Migration screen diff --git a/features/news-feed.feature b/features/news-feed.feature deleted file mode 100644 index 92776ee5c8..0000000000 --- a/features/news-feed.feature +++ /dev/null @@ -1,81 +0,0 @@ -@wip -Feature: News feed - - News feed delivers important information to Daedalus users, like information about network failures, bugs and other - issues, information about upcoming and recent releases and so on. News are categorised in 4 types: - incident, alert, announcement and info. Incidents and alerts cover the whole user interface, - announcements and info are delivered in the news feed part of the user interface. - - Scenario: Bell icon is highlighted when there are unread news - - Given I have Daedalus running - And there are unread news - Then the bell icon is highlighted - - Scenario: Bell icon is not highlighted when there are no unread news - - Given I have Daedalus running - And there are no unread news - Then the bell icon is not highlighted - - Scenario: No news available - - Given I have Daedalus running - And there is no news - Then the bell icon is not highlighted - When I click on the bell icon - Then the news feed is opened - And the news feed contains "no news available" message - - Scenario: Only read news available - - Given I have Daedalus running - And there are 5 read news - When I click on the bell icon - Then the news feed is opened - And the news feed contains 5 read news - - Scenario: Displaying an incident - - Given I have Daedalus running - And there is an incident - Then the incident will cover the screen - - Scenario: Dismissing an alert - - Given I have Daedalus running - And there are unread alerts - Then the latest alert will cover the screen - When I dismiss the alert - Then the alert I have dismissed becomes read - - Scenario: Reading an announcement - - Given I have Daedalus running - And there is 1 unread announcement - When I click on the bell icon - Then the news feed is opened - And the news feed contains 1 unread announcement - When I click on the unread announcement to expand it - Then the announcement content is shown - And the announcement is marked as read - - Scenario: Reading an info - - Given I have Daedalus running - And there is 1 unread info - When I click on the bell icon - Then the news feed is opened - And the news feed contains 1 unread info - When I click on the unread info to expand it - Then the info content is shown - And the info is marked as read - And the bell icon is not highlighted - - Scenario: News unavailable - - Given I have Daedalus running - And news feed server is unreachable - When I click on the bell icon - Then the news feed is opened - And the news feed contains "news unavailable message" diff --git a/features/newsfeed.feature b/features/newsfeed.feature new file mode 100644 index 0000000000..9a110492ed --- /dev/null +++ b/features/newsfeed.feature @@ -0,0 +1,87 @@ +@e2e @newsfeed @noReload +Feature: Newsfeed + + Newsfeed delivers important information to Daedalus users, like information about network failures, bugs and other + issues, information about upcoming and recent releases and so on. News are categorised in 4 types: + incident, alert, announcement and info. Incidents and alerts cover the whole user interface, + announcements and info are delivered in the newsfeed part of the user interface. + + Background: + Given I have completed the basic setup + + @reconnectApp + Scenario: Newsfeed icon is visible on the connecting screen + Given im on the connecting screen + Then i should see the newsfeed icon + + @reconnectApp + Scenario: Newsfeed icon is visible on the syncing screen + Given im on the syncing screen + Then i should see the newsfeed icon + + Scenario: Newsfeed icon is visible in the main ui + Given I should see the main ui + Then i should see the newsfeed icon + + Scenario: Newsfeed icon is highlighted when there are unread infos + Given there are unread infos + Then the newsfeed icon is highlighted + + Scenario: Newsfeed icon is highlighted when there are unread announcements + Given there are unread announcements + Then the newsfeed icon is highlighted + + Scenario: Newsfeed icon is not highlighted when all infos have been read + Given there are read infos + Then the newsfeed icon is not highlighted + + Scenario: Open the newsfeed by clicking the newsfeed icon + Given I click on the newsfeed icon + Then the newsfeed is open + + Scenario: No news available in the feed + Given there is no news + When I open the newsfeed + Then the newsfeed is empty + + Scenario: Only read infos available in the feed + Given there are 2 read infos + When I open the newsfeed + Then the newsfeed contains 2 read infos + + Scenario: Displaying an incident + Given there is an incident + Then the incident will cover the screen + + Scenario: Dismissing an alert + Given there is 1 unread alert + When I dismiss the alert + Then the alert disappears + + Scenario: Opening and dismissing a read alert + Given there is 1 read alert + When I open the newsfeed + When I click on the alert in the newsfeed + Then the alert overlay opens + When I dismiss the alert + Then the alert disappears + + Scenario: Reading an announcement + Given there is 1 unread announcement + When I open the newsfeed + And I click on the unread announcement to expand it + Then the announcement content is shown + And the announcement is marked as read + + Scenario: Reading an info + Given there is 1 unread info + When I open the newsfeed + And I click on the unread info to expand it + Then the info content is shown + And the info is marked as read + And the newsfeed icon is not highlighted + + Scenario: News unavailable + Given the newsfeed server is unreachable + When I open the newsfeed + Then no news are available diff --git a/features/tests/e2e/documents/dummy-news.json b/features/tests/e2e/documents/dummy-news.json new file mode 100644 index 0000000000..3d0ca9df4d --- /dev/null +++ b/features/tests/e2e/documents/dummy-news.json @@ -0,0 +1,213 @@ +{ + "updatedAt": 1569324863299, + "items": [ + { + "title": { + "en-US": "Incident 1 in English", + "ja-JP": "Incident 1 in Japanese" + }, + "content": { + "en-US": "# h1 English incident content 1\nUt consequat semper viverra nam libero justo laoreet sit. Sagittis vitae et leo duis. Eget nullam non nisi est sit amet facilisis magna etiam. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Auctor neque vitae tempus quam pellentesque. Vel facilisis volutpat est velit egestas dui id ornare arcu.\n\n## h2 Heading\n\nConsequat mauris nunc congue nisi vitae suscipit. Dictum non consectetur a erat nam. Laoreet non curabitur gravida arcu ac tortor dignissim. Eu augue ut lectus arcu bibendum at. Facilisis gravida neque convallis a cras semper. Ut consequat semper viverra nam libero justo laoreet sit. Sagittis vitae et leo duis. Eget nullam non nisi est sit amet facilisis magna etiam. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Auctor neque vitae tempus quam pellentesque. Vel facilisis volutpat est velit egestas dui id ornare arcu. Nam aliquam sem et tortor consequat id porta nibh venenatis.\n\nViverra nam libero justo laoreet sit amet. Pharetra diam sit amet nisl. Quam viverra orci sagittis eu. Rhoncus dolor purus non enim. Posuere urna nec tincidunt praesent semper feugiat. Suspendisse in est ante in nibh mauris cursus. Sit amet consectetur adipiscing elit duis. Tortor id aliquet lectus proin nibh nisl condimentum id. At in tellus integer feugiat scelerisque. Maecenas sed enim ut sem viverra aliquet. Pellentesque pulvinar pellentesque habitant morbi. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Praesent tristique magna sit amet purus gravida. Diam volutpat commodo sed egestas egestas. Ut placerat orci nulla pellentesque dignissim enim. Ultrices in iaculis nunc sed augue lacus viverra. Etiam sit amet nisl purus.\n\n## Typographic replacements\n\nEnable typographer option to see result.\n\n(c) (C) (r) (R) (tm) (TM) (p) (P) +-\n\ntest.. test... test..... test?..... test!....\n\n!!!!!! ???? ,, -- ---\n\n\"Smartypants, double quotes\" and 'single quotes'\n\n\n## Emphasis\n\n**This is bold text**\n\n__This is bold text__\n\n*This is italic text*\n\n_This is italic text_\n\n## Lists\n\nUnordered\n\n+ Create a list by starting a line with `+`, `-`, or `*`\n+ Sub-lists are made by indenting 2 spaces:\n+ Very easy!\n\nOrdered\n\n1. Lorem ipsum dolor sit amet\n2. Consectetur adipiscing elit\n3. Integer molestie lorem at massa\n\n\n1. You can use sequential numbers...\n1. ...or keep all the numbers as `1.`\n\n## Links\n\n[link text](http://dev.nodeca.com)\n\n[link with title](http://nodeca.github.io/pica/demo/ \"title text!\")\n\nAutoconverted link https://github.com/nodeca/pica (enable linkify to see)\n\n### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)\n\n- 19^th^\n- H~2~O", + "ja-JP": "# h1 Japanese incident content 1\nUt consequat semper viverra nam libero justo laoreet sit. Sagittis vitae et leo duis. Eget nullam non nisi est sit amet facilisis magna etiam. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Auctor neque vitae tempus quam pellentesque. Vel facilisis volutpat est velit egestas dui id ornare arcu.\n\n## h2 Heading\n\nConsequat mauris nunc congue nisi vitae suscipit. Dictum non consectetur a erat nam. Laoreet non curabitur gravida arcu ac tortor dignissim. Eu augue ut lectus arcu bibendum at. Facilisis gravida neque convallis a cras semper. Ut consequat semper viverra nam libero justo laoreet sit. Sagittis vitae et leo duis. Eget nullam non nisi est sit amet facilisis magna etiam. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Auctor neque vitae tempus quam pellentesque. Vel facilisis volutpat est velit egestas dui id ornare arcu. Nam aliquam sem et tortor consequat id porta nibh venenatis.\n\nViverra nam libero justo laoreet sit amet. Pharetra diam sit amet nisl. Quam viverra orci sagittis eu. Rhoncus dolor purus non enim. Posuere urna nec tincidunt praesent semper feugiat. Suspendisse in est ante in nibh mauris cursus. Sit amet consectetur adipiscing elit duis. Tortor id aliquet lectus proin nibh nisl condimentum id. At in tellus integer feugiat scelerisque. Maecenas sed enim ut sem viverra aliquet. Pellentesque pulvinar pellentesque habitant morbi. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Praesent tristique magna sit amet purus gravida. Diam volutpat commodo sed egestas egestas. Ut placerat orci nulla pellentesque dignissim enim. Ultrices in iaculis nunc sed augue lacus viverra. Etiam sit amet nisl purus.\n\n## Typographic replacements\n\nEnable typographer option to see result.\n\n(c) (C) (r) (R) (tm) (TM) (p) (P) +-\n\ntest.. test... test..... test?..... test!....\n\n!!!!!! ???? ,, -- ---\n\n\"Smartypants, double quotes\" and 'single quotes'\n\n\n## Emphasis\n\n**This is bold text**\n\n__This is bold text__\n\n*This is italic text*\n\n_This is italic text_\n\n## Lists\n\nUnordered\n\n+ Create a list by starting a line with `+`, `-`, or `*`\n+ Sub-lists are made by indenting 2 spaces:\n+ Very easy!\n\nOrdered\n\n1. Lorem ipsum dolor sit amet\n2. Consectetur adipiscing elit\n3. Integer molestie lorem at massa\n\n\n1. You can use sequential numbers...\n1. ...or keep all the numbers as `1.`\n\n## Links\n\n[link text](http://dev.nodeca.com)\n\n[link with title](http://nodeca.github.io/pica/demo/ \"title text!\")\n\nAutoconverted link https://github.com/nodeca/pica (enable linkify to see)\n\n### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)\n\n- 19^th^\n- H~2~O" + }, + "target": { + "daedalusVersion": null, + "platforms":["darwin","win32","linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1569325866799, + "type": "incident" + }, + { + "title": { + "en-US": "Alert 1 in English", + "ja-JP": "Alert 1 in Japanese" + }, + "content": { + "en-US": "# h1 English alert content 1", + "ja-JP": "# h1 Japanese alert content 1" + }, + "target": { + "daedalusVersion": null, + "platforms":["darwin","win32","linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1569152525812, + "type": "alert" + }, + { + "title": { + "en-US": "Info 1 in English", + "ja-JP": "Info 1 in Japanese" + }, + "content": { + "en-US": "# h1 English info content 1\nUt consequat semper viverra nam libero justo laoreet sit.", + "ja-JP": "# h1 Japanese info content 1\nUt consequat semper viverra nam libero justo laoreet sit." + }, + "target": { + "daedalusVersion": "0.12.0 - 0.14.0", + "platforms": ["darwin", "win32", "linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1569324863299, + "type": "info" + }, + { + "title": { + "en-US": "Info 2 in English - a little bit longer title", + "ja-JP": "Info 2 in Japanese" + }, + "content": { + "en-US": "# h1 English info content 2\n", + "ja-JP": "# h1 Japanese info content 2\n." + }, + "target": { + "daedalusVersion": "0.12.0 - 0.14.0", + "platforms": ["darwin", "win32", "linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1568979341589, + "type": "info" + }, + { + "title": { + "en-US": "Linux news 1 in English", + "ja-JP": "Linux news 1 in Japanese" + }, + "content": { + "en-US": "# h1 English info content 3\nUt consequat semper viverra nam libero justo laoreet sit.", + "ja-JP": "# h1 Japanese info content 3\nUt consequat semper viverra nam libero justo laoreet sit." + }, + "target": { + "daedalusVersion": "0.12.0 - 0.14.0", + "platforms": ["linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1569152115002, + "type": "info" + }, + { + "title": { + "en-US": "Announcement 1 in English", + "ja-JP": "Announcement 1 in Japanese" + }, + "content": { + "en-US": "# h1 English announcement content 1\nUt consequat semper viverra nam libero justo laoreet sit.", + "ja-JP": "# h1 Japanese announcement content 1\nUt consequat semper viverra nam libero justo laoreet sit." + }, + "target": { + "daedalusVersion": "0.12.0 - 0.14.0", + "platforms": ["darwin", "win32", "linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1569065729169, + "type": "announcement" + }, + { + "title": { + "en-US": "Announcement 2 in English - a little bit longer title", + "ja-JP": "Announcement 2 in Japanese" + }, + "content": { + "en-US": "# h1 English announcement content 2\n", + "ja-JP": "# h1 Japanese announcement content 2\n." + }, + "target": { + "daedalusVersion": "0.12.0 - 0.14.0", + "platforms": ["darwin", "win32", "linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1569238489658, + "type": "announcement" + }, + { + "title": { + "en-US": "Windows announcement 1 in English", + "ja-JP": "Windows announcement 1 in Japanese" + }, + "content": { + "en-US": "# h1 English announcement content 3\nUt consequat semper viverra nam libero justo laoreet sit.", + "ja-JP": "# h1 Japanese announcement content 3\nUt consequat semper viverra nam libero justo laoreet sit." + }, + "target": { + "daedalusVersion": "0.12.0 - 0.14.0", + "platforms": ["linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1568892951736, + "type": "announcement" + } + ] +} diff --git a/features/tests/e2e/documents/paper_wallet_certificates/paper-wallet-certificate.pdf b/features/tests/e2e/documents/paper_wallet_certificates/paper-wallet-certificate.pdf index c53d116d87..77b10ac597 100644 Binary files a/features/tests/e2e/documents/paper_wallet_certificates/paper-wallet-certificate.pdf and b/features/tests/e2e/documents/paper_wallet_certificates/paper-wallet-certificate.pdf differ diff --git a/features/tests/e2e/helpers/language-selection-helpers.js b/features/tests/e2e/helpers/language-selection-helpers.js index cdb79b402f..bc53148a9d 100644 --- a/features/tests/e2e/helpers/language-selection-helpers.js +++ b/features/tests/e2e/helpers/language-selection-helpers.js @@ -6,7 +6,6 @@ const languageSelection = { waitForVisible: async (client, { isHidden } = {}) => client.waitForVisible(LANGUAGE_SELECTION_FORM, null, isHidden), ensureLanguageIsSelected: async (client, { language } = {}) => { - await languageSelection.waitForVisible(client); await i18n.setActiveLanguage(client, { language }); await languageSelection.waitForVisible(client, { isHidden: true }); }, diff --git a/features/tests/e2e/helpers/terms-of-use-helpers.js b/features/tests/e2e/helpers/terms-of-use-helpers.js index 966184861b..e387b7c923 100644 --- a/features/tests/e2e/helpers/terms-of-use-helpers.js +++ b/features/tests/e2e/helpers/terms-of-use-helpers.js @@ -4,7 +4,6 @@ const termsOfUse = { waitForVisible: async (client, { isHidden } = {}) => client.waitForVisible(TERMS_OF_USE_FORM, null, isHidden), acceptTerms: async client => { - await termsOfUse.waitForVisible(client); await client.execute(() => { daedalus.actions.profile.acceptTermsOfUse.trigger(); }); diff --git a/features/tests/e2e/setup/electron.js b/features/tests/e2e/setup/electron.js index 22c95c5898..70e53d00f4 100644 --- a/features/tests/e2e/setup/electron.js +++ b/features/tests/e2e/setup/electron.js @@ -69,13 +69,18 @@ const startApp = async () => { // and helpful than "this step timed out after 5 seconds" messages setDefaultTimeout(DEFAULT_TIMEOUT + 1000); +function getTagNames(testCase) { + return testCase.pickle.tags.map(t => t.name); +} + // Boot up the electron app before all features BeforeAll({ timeout: 5 * 60 * 1000 }, async () => { context.app = await startApp(); }); // Make the electron app accessible in each scenario context -Before({ timeout: DEFAULT_TIMEOUT * 2 }, async function() { +Before({ timeout: DEFAULT_TIMEOUT * 2 }, async function(testCase) { + const tags = getTagNames(testCase); this.app = context.app; this.client = context.app.client; this.browserWindow = context.app.browserWindow; @@ -108,7 +113,9 @@ Before({ timeout: DEFAULT_TIMEOUT * 2 }, async function() { }); // Load fresh root url with test environment for each test case - await refreshClient(this.client); + if (!tags.includes('@noReload')) { + await refreshClient(this.client); + } // Ensure that frontend is synced and ready before test case await this.client.executeAsync(done => { @@ -135,9 +142,9 @@ After({ tags: '@restartApp' }, async function() { // eslint-disable-next-line prefer-arrow-callback After({ tags: '@reconnectApp' }, async function() { await this.client.executeAsync(done => { - daedalus.api.ada - .setSubscriptionStatus(null) - .then(() => daedalus.stores.networkStatus._updateNetworkStatus()) + daedalus.api.ada.resetTestOverrides(); + daedalus.stores.networkStatus + ._updateNetworkStatus() .then(done) .catch(error => done(error)); }); @@ -162,10 +169,6 @@ AfterAll(async function() { await printMainProcessLogs(); } if (process.env.KEEP_APP_AFTER_TESTS === 'true') { - // eslint-disable-next-line no-console - console.log( - 'Keeping the app running since KEEP_APP_AFTER_TESTS env var is true' - ); return; } return context.app.stop(); diff --git a/features/tests/e2e/steps/app-steps.js b/features/tests/e2e/steps/app-steps.js index d43c718022..8015c1246d 100644 --- a/features/tests/e2e/steps/app-steps.js +++ b/features/tests/e2e/steps/app-steps.js @@ -12,6 +12,26 @@ Given(/^Daedalus is running$/, function() { expect(this.app.isRunning()).to.equal(true); }); +Given('im on the syncing screen', async function() { + this.client.executeAsync(done => { + // Simulate that syncing is necessary + const adaApi = daedalus.api.ada; + adaApi.setNetworkBlockHeight(10); + adaApi.setLocalBlockHeight(1); + daedalus.stores.networkStatus._updateNetworkStatus().then(done); + }); + await this.client.waitForVisible('.SyncingConnecting_is-syncing'); +}); + +Given('im on the connecting screen', async function() { + this.client.executeAsync(done => { + // Simulate that there is no connection to cardano node + daedalus.api.ada.setSubscriptionStatus({}); + daedalus.stores.networkStatus._updateNetworkStatus().then(done); + }); + await this.client.waitForVisible('.SyncingConnecting_is-connecting'); +}); + When(/^I refresh the main window$/, async function() { await refreshClient(this.client); }); @@ -37,3 +57,7 @@ Then(/^I should see the loading screen with "([^"]*)"$/, async function( text: message, }); }); + +Then(/^I should see the main ui/, function() { + return this.client.waitForVisible('.SidebarLayout_component'); +}); diff --git a/features/tests/e2e/steps/helper-steps.js b/features/tests/e2e/steps/helper-steps.js index 6d33b2cf53..d0141ace1a 100644 --- a/features/tests/e2e/steps/helper-steps.js +++ b/features/tests/e2e/steps/helper-steps.js @@ -1,4 +1,4 @@ -import { When, Then } from 'cucumber'; +import { When } from 'cucumber'; import { generateScreenshotFilePath, saveScreenshot, @@ -10,10 +10,6 @@ When(/^I freeze$/, { timeout: oneHour }, callback => { setTimeout(callback, oneHour); }); -Then(/^I should see the initial screen$/, function() { - return this.client.waitForVisible('.SidebarLayout_component'); -}); - When(/^I take a screenshot named "([^"]*)"$/, async function(testName) { const file = generateScreenshotFilePath(testName); await saveScreenshot(this, file); @@ -44,9 +40,9 @@ When(/^I trigger the apply-update endpoint$/, async function() { When(/^I set next update version to "([^"]*)"$/, async function( applicationVersion ) { - await this.client.executeAsync((applicationVersion, done) => { + await this.client.executeAsync((version, done) => { daedalus.api.ada - .setNextUpdate(parseInt(applicationVersion)) + .setNextUpdate(parseInt(version, 10)) .then(done) .catch(e => { throw e; diff --git a/features/tests/e2e/steps/newsfeed-steps.js b/features/tests/e2e/steps/newsfeed-steps.js new file mode 100644 index 0000000000..6385d25d58 --- /dev/null +++ b/features/tests/e2e/steps/newsfeed-steps.js @@ -0,0 +1,227 @@ +import { expect } from 'chai'; +import { get } from 'lodash'; +import { Before, Given, When, Then } from 'cucumber'; +import moment from 'moment'; + +import newsDummyJson from '../documents/dummy-news.json'; +import { + expectTextInSelector, + getVisibleElementsCountForSelector, +} from '../helpers/shared-helpers'; + +async function prepareFakeNews(context, fakeNews, preparation, ...args) { + // Run custom preparation logic + await context.client.executeAsync(preparation, fakeNews, ...args); + // Extract the computed newsfeed data from the store + const newsData = await context.client.executeAsync(done => { + const { newsFeed } = daedalus.stores; + // Refresh the newsfeed request & store + newsFeed.getNews().then(() => { + const d = newsFeed.newsFeedData; + done({ + all: d.all, + read: d.read, + unread: d.unread, + alerts: d.alerts, + infos: d.infos, + announcements: d.announcements, + incident: d.incident, + }); + }); + }); + if (newsData.value) { + // Provide the newsfeed data from the store to the other steps + context.news = newsData.value; + } +} + +async function prepareNewsOfType( + context, + type, + count = null, + markAsRead = false +) { + const items = newsDummyJson.items + .filter(i => i.type === type) + .slice(0, count); + const newsFeed = { + updatedAt: Date.now(), + items, + }; + await prepareFakeNews( + context, + newsFeed, + (news, isRead, done) => { + const { api } = daedalus; + api.ada.setFakeNewsFeedJsonForTesting(news); + if (isRead) { + api.localStorage.markNewsAsRead(news.items.map(i => i.date)).then(done); + } else { + done(); + } + }, + markAsRead + ); +} + +function setNewsFeedIsOpen(client, flag) { + return client.execute(desiredState => { + if (daedalus.stores.app.newsFeedIsOpen !== desiredState) { + daedalus.actions.app.toggleNewsFeed.trigger(); + } + }, flag); +} + +// Reset the fake news +function resetTestNews(client) { + return client.executeAsync(done => { + daedalus.api.ada.setFakeNewsFeedJsonForTesting({ + updatedAt: Date.now(), + items: [], + }); + daedalus.stores.newsFeed.getNews().then(done); + }); +} + +// SCENARIO HOOKS + +Before({ tags: '@newsfeed' }, async function() { + setNewsFeedIsOpen(this.client, false); + resetTestNews(this.client); +}); + +// GIVEN STEPS + +Given(/^there (?:are|is)\s?(\d+)? (read|unread) (\w+?)s?$/, async function( + count, + read, + newsType +) { + await prepareNewsOfType( + this, + newsType, + parseInt(count || 2, 10), + read === 'read' + ); +}); + +Given('there is no news', async function() { + await prepareFakeNews(this, newsDummyJson, (news, done) => { + daedalus.api.ada.setFakeNewsFeedJsonForTesting({ + updatedAt: Date.now(), + items: [], + }); + done(); + }); +}); + +Given('there is an incident', async function() { + await prepareFakeNews(this, newsDummyJson, (news, done) => { + const incident = news.items.find(i => i.type === 'incident'); + daedalus.api.ada.setFakeNewsFeedJsonForTesting({ + updatedAt: Date.now(), + items: [incident], + }); + done(); + }); +}); + +Given('the newsfeed server is unreachable', async function() { + this.client.executeAsync(done => { + daedalus.api.ada.setFakeNewsFeedJsonForTesting(null); + daedalus.stores.newsFeed.getNews().then(done); + }); + this.news = []; +}); + +Given('the latest alert will cover the screen', async function() { + const latestAlert = this.news.alerts.unread[0]; + await expectTextInSelector(this.client, { + selector: '.AlertsOverlay_date', + text: moment(latestAlert.date).format('YYYY-MM-DD'), + }); +}); + +When('I click on the newsfeed icon', async function() { + await this.waitAndClick('.NewsFeedIcon_component'); +}); + +When('I open the newsfeed', async function() { + await setNewsFeedIsOpen(this.client, true); +}); + +When('I dismiss the alert', async function() { + this.dismissedAlert = get(this.news, ['alerts', 'unread', 0]); + await this.waitAndClick('.AlertsOverlay_closeButton'); +}); + +When(/^I click on the unread (\w+?) to expand it$/, async function(type) { + setNewsFeedIsOpen(this.client, true); + await this.waitAndClick(`.NewsItem_${type}`); +}); + +When('I click on the alert in the newsfeed', async function() { + await this.waitAndClick('.NewsItem_alert.NewsItem_isRead'); +}); + +Then('i should see the newsfeed icon', async function() { + await this.client.waitForVisible('.NewsFeedIcon_component'); +}); + +Then('the newsfeed icon is highlighted', async function() { + await this.client.waitForVisible('.NewsFeedIcon_withDot'); +}); + +Then('the newsfeed icon is not highlighted', async function() { + await this.client.waitForVisible('.NewsFeedIcon_withDot', null, true); +}); + +Then('the newsfeed is open', async function() { + await this.client.waitForVisible('.NewsFeed_component'); +}); + +Then('the newsfeed is empty', async function() { + setNewsFeedIsOpen(this.client, true); + await this.client.waitForVisible('.NewsFeed_newsFeedEmpty'); +}); + +Then('no news are available', async function() { + setNewsFeedIsOpen(this.client, true); + await this.client.waitForVisible('.NewsFeed_newsFeedNoFetch'); +}); + +Then('the incident will cover the screen', async function() { + await this.client.waitForVisible('.IncidentOverlay_component'); +}); + +Then('the alert disappears', async function() { + await this.client.waitForVisible('.AlertsOverlay_component', null, true); +}); + +Then('the alert overlay opens', async function() { + await this.client.waitForVisible('.AlertsOverlay_component'); +}); + +Then(/^the newsfeed contains (\d+) read (\w+?)s$/, async function( + expectedReadNewsCount, + newsType +) { + setNewsFeedIsOpen(this.client, true); + const readNewsCount = await getVisibleElementsCountForSelector( + this.client, + `.NewsItem_${newsType}.NewsItem_isRead` + ); + expect(readNewsCount).to.equal(expectedReadNewsCount); +}); + +Then(/^the (\w+?) content is shown$/, async function(type) { + setNewsFeedIsOpen(this.client, true); + await this.client.waitForVisible( + `.NewsItem_${type} .NewsItem_newsItemContentContainer` + ); +}); + +Then(/^the (\w+?) is marked as read$/, async function(type) { + setNewsFeedIsOpen(this.client, true); + await this.client.waitForVisible(`.NewsItem_${type}.NewsItem_isRead`); +}); diff --git a/features/tests/e2e/steps/node-update-notification-steps.js b/features/tests/e2e/steps/node-update-notification-steps.js index 46872cc3f8..45fb725191 100644 --- a/features/tests/e2e/steps/node-update-notification-steps.js +++ b/features/tests/e2e/steps/node-update-notification-steps.js @@ -1,4 +1,4 @@ -import { Given, When, Then } from 'cucumber'; +import { When, Then } from 'cucumber'; import { expect } from 'chai'; import { environment } from '../../../../source/main/environment'; import { getVisibleTextsForSelector } from '../helpers/shared-helpers'; @@ -38,7 +38,7 @@ When(/^I set next application version to "([^"]*)"$/, async function( applicationVersion ) { await this.client.execute(version => { - daedalus.api.ada.setApplicationVersion(parseInt(version)); + daedalus.api.ada.setApplicationVersion(parseInt(version, 10)); }, applicationVersion); }); diff --git a/features/tests/e2e/steps/wallet-recovery-phrase-verification-steps.js b/features/tests/e2e/steps/wallet-recovery-phrase-verification-steps.js index b155263adb..df2fb49dd6 100644 --- a/features/tests/e2e/steps/wallet-recovery-phrase-verification-steps.js +++ b/features/tests/e2e/steps/wallet-recovery-phrase-verification-steps.js @@ -1,10 +1,4 @@ import { Given, When, Then } from 'cucumber'; -import { expect } from 'chai'; -import { navigateTo } from '../helpers/route-helpers'; -import { - waitUntilWaletNamesEqual, - getNameOfActiveWalletInSidebar, -} from '../helpers/wallets-helpers'; const SETTINGS_PAGE_STATUS_SELECTOR = '.WalletRecoveryPhrase_validationStatus'; const SETTINGS_PAGE_BUTTON_SELECTOR = `${SETTINGS_PAGE_STATUS_SELECTOR} .WalletRecoveryPhrase_validationStatusButton`; @@ -39,7 +33,7 @@ Then( 'I should see a {string} recovery phrase veryfication feature', async function(status) { const statusClassname = `${SETTINGS_PAGE_STATUS_SELECTOR}${status}`; - return await this.client.waitForVisible(statusClassname); + return this.client.waitForVisible(statusClassname); } ); @@ -54,11 +48,11 @@ When(/^I click the checkbox and Continue button$/, function() { When(/^I enter the recovery phrase mnemonics correctly$/, async function() { const recoveryPhrase = this.mnemonics[walletName].slice(); - await this.client.executeAsync((recoveryPhrase, done) => { + await this.client.executeAsync((phrase, done) => { const { checkRecoveryPhrase } = daedalus.actions.walletBackup; checkRecoveryPhrase.once(done); checkRecoveryPhrase.trigger({ - recoveryPhrase, + recoveryPhrase: phrase, }); }, recoveryPhrase); }); @@ -66,11 +60,11 @@ When(/^I enter the recovery phrase mnemonics correctly$/, async function() { When(/^I enter the recovery phrase mnemonics incorrectly$/, async function() { const incorrectRecoveryPhrase = [...this.mnemonics[walletName]]; incorrectRecoveryPhrase[0] = 'wrong'; - await this.client.executeAsync((recoveryPhrase, done) => { + await this.client.executeAsync((phrase, done) => { const { checkRecoveryPhrase } = daedalus.actions.walletBackup; checkRecoveryPhrase.once(done); checkRecoveryPhrase.trigger({ - recoveryPhrase, + recoveryPhrase: phrase, }); }, incorrectRecoveryPhrase); }); diff --git a/features/tests/e2e/steps/wallets-utxos-steps.js b/features/tests/e2e/steps/wallets-utxos-steps.js index e43bc45188..e72488dd9a 100644 --- a/features/tests/e2e/steps/wallets-utxos-steps.js +++ b/features/tests/e2e/steps/wallets-utxos-steps.js @@ -1,6 +1,5 @@ import { Then } from 'cucumber'; import { expect } from 'chai'; -import { BigNumber } from 'bignumber.js'; import { getVisibleTextsForSelector } from '../helpers/shared-helpers'; import { getWalletUtxosTotalAmount } from '../../../../source/renderer/app/utils/utxoUtils'; diff --git a/features/tests/unit/setup/utxo-helpers.js b/features/tests/unit/setup/utxo-helpers.js index 72ceaa1d67..477ef2f6a0 100644 --- a/features/tests/unit/setup/utxo-helpers.js +++ b/features/tests/unit/setup/utxo-helpers.js @@ -1,5 +1,5 @@ export const getHistogramFromTable = data => { - let histogram = {}; + const histogram = {}; data.hashes().forEach(({ walletAmount, walletUtxosAmount }) => { histogram[walletAmount] = walletUtxosAmount; }); diff --git a/features/tests/unit/steps/generate-filename-with-timestamp-steps.js b/features/tests/unit/steps/generate-filename-with-timestamp-steps.js index 2c047c14cb..b1ba200d24 100644 --- a/features/tests/unit/steps/generate-filename-with-timestamp-steps.js +++ b/features/tests/unit/steps/generate-filename-with-timestamp-steps.js @@ -1,4 +1,4 @@ -import { Given, When, Then } from 'cucumber'; +import { Given, Then } from 'cucumber'; import { expect } from 'chai'; import { pickBy, identity } from 'lodash'; import { diff --git a/features/tests/unit/steps/mnemonics-steps.js b/features/tests/unit/steps/mnemonics-steps.js index 7b9ce92033..e81c01c2dd 100644 --- a/features/tests/unit/steps/mnemonics-steps.js +++ b/features/tests/unit/steps/mnemonics-steps.js @@ -1,5 +1,4 @@ -import { Given, When, Then } from 'cucumber'; -import { expect } from 'chai'; +import { Given, Then } from 'cucumber'; import { range } from 'lodash'; import { generateAccountMnemonics } from '../../../../source/renderer/app/api/utils/mnemonics'; import { isValidMnemonic } from '../../../../source/common/crypto/decrypt'; @@ -28,15 +27,17 @@ Given( 'I generate and validate an unbound number of wallet recovery mnemonics', function() { let numberOfTestsExecuted = 0; - while (true) { + let generated = true; + while (generated) { const mnemonic = generateAccountMnemonics().join(' '); if (!isValidWalletRecoveryPhrase(mnemonic)) { + generated = false; throw new Error(`"${mnemonic}" is not valid`); } numberOfTestsExecuted++; process.stdout.clearLine(); process.stdout.cursorTo(0); - process.stdout.write(numberOfTestsExecuted + ' mnemonics validated.'); + process.stdout.write(`${numberOfTestsExecuted} mnemonics validated.`); } } ); diff --git a/features/tests/unit/steps/spending-password-validation-steps.js b/features/tests/unit/steps/spending-password-validation-steps.js index 2a5bbf32e2..e34bc6a772 100644 --- a/features/tests/unit/steps/spending-password-validation-steps.js +++ b/features/tests/unit/steps/spending-password-validation-steps.js @@ -1,7 +1,8 @@ -import { Given, When, Then } from 'cucumber'; +import { Given, Then } from 'cucumber'; import { expect } from 'chai'; import { isValidSpendingPassword } from '../../../../source/renderer/app/utils/validations'; +/* eslint-disable no-unused-expressions */ Given('I use the spending password {string}', function(password) { this.context.spendingPassword = password; }); diff --git a/features/tests/unit/steps/utxos-chart-steps.js b/features/tests/unit/steps/utxos-chart-steps.js index 240f2d93a9..a7a93147ef 100644 --- a/features/tests/unit/steps/utxos-chart-steps.js +++ b/features/tests/unit/steps/utxos-chart-steps.js @@ -1,6 +1,5 @@ -import { Given, When, Then } from 'cucumber'; +import { Given, Then } from 'cucumber'; import { expect } from 'chai'; -import { isValidSpendingPassword } from '../../../../source/renderer/app/utils/validations'; import { formattedAmountToLovelace, formattedLovelaceToAmount, @@ -12,6 +11,7 @@ import { } from '../../../../source/renderer/app/utils/utxoUtils'; import { getHistogramFromTable } from '../setup/utxo-helpers'; +/* eslint-disable no-unused-expressions */ Given('the `getUtxoChartData` function receives the following props:', function( data ) { @@ -55,10 +55,10 @@ Then( const walletAmountThreshold = formattedAmountToLovelace( String(walletAmount) ); - const { histogram, utxoChartData, sortedHistogram } = this.context; + const { utxoChartData, sortedHistogram } = this.context; const expectedAggregatedUtxosAmount = sortedHistogram.reduce( - (sum, [walletAmount, walletUtxosAmount]) => { - if (walletAmount >= walletAmountThreshold) + (sum, [amount, walletUtxosAmount]) => { + if (amount >= walletAmountThreshold) sum += parseInt(walletUtxosAmount, 10); return sum; }, @@ -94,7 +94,7 @@ Then('the response should have type {string}', function(type) { if (type === 'array') { return expect(Array.isArray(response)).to.be.true; } - expect(typeof response).to.equal(type); + return expect(typeof response).to.equal(type); }); Then('wallet amounts less than {int} should not be modified', function(amount) { diff --git a/features/wallet-settings-recovery-phrase-verification.feature b/features/wallet-settings-recovery-phrase-verification.feature index 5d1b7f9816..e327ad01bf 100644 --- a/features/wallet-settings-recovery-phrase-verification.feature +++ b/features/wallet-settings-recovery-phrase-verification.feature @@ -1,4 +1,4 @@ -@e2e +@e2e @watch Feature: Wallet Settings - Recovery Phrase Verification Background: @@ -29,4 +29,3 @@ Feature: Wallet Settings - Recovery Phrase Verification Then I should see the error dialog When I click the close button Then I should not see any dialog - diff --git a/gulpfile.js b/gulpfile.js index e7a7537808..3ceec80513 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -63,8 +63,10 @@ const buildRendererWatch = () => done => rendererInputSource() .pipe( webpackStream(rendererWebpackWatchConfig, webpack, () => { - // Reload app everytime after renderer script has been re-compiled - electronServer.reload(); + if (electronServer) { + // Reload app everytime after renderer script has been re-compiled + electronServer.reload(); + } done(); }) ) diff --git a/package.json b/package.json index 0ba4e664be..5e9ffa4c4b 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "test:unit:unbound": "yarn cucumber --require 'features/tests/unit/**/*.js' --tags '@unbound and not @skip and not @wip'", "test:e2e": "yarn cucumber --require 'features/tests/e2e/**/*.js' --tags '@e2e and not @skip and not @wip'", "test:e2e:watch": "gulp test:e2e:watch", + "test:e2e:watch:once": "KEEP_APP_AFTER_TESTS=true yarn test:e2e --tags '@e2e and @watch'", "cucumber": "cross-env NODE_ENV=test cucumber-js --require-module @babel/register -f node_modules/cucumber-pretty --format-options '{\"snippetInterface\": \"async-await\"}'", "debug": "gulp debug", "package": "gulp build && cross-env NODE_ENV=production node -r @babel/register -r @babel/polyfill scripts/package.js", @@ -169,6 +170,7 @@ "qr-image": "3.2.0", "qrcode.react": "0.8.0", "react": "16.6.3", + "react-animate-height": "2.0.15", "react-copy-to-clipboard": "5.0.1", "react-custom-scrollbars": "4.2.1", "react-dom": "16.6.3", @@ -185,6 +187,7 @@ "route-parser": "0.0.5", "rust-cardano-crypto": "0.2.0", "safe-buffer": "5.1.1", + "semver": "6.3.0", "source-map-support": "0.5.9", "spectron-fake-dialog": "0.0.1", "split-file": "2.1.0", diff --git a/source/renderer/app/App.js b/source/renderer/app/App.js index 924a5b4260..a463279881 100755 --- a/source/renderer/app/App.js +++ b/source/renderer/app/App.js @@ -15,9 +15,11 @@ import DaedalusDiagnosticsDialog from './containers/status/DaedalusDiagnosticsDi import BlockConsolidationStatusDialog from './containers/status/BlockConsolidationStatusDialog'; import GenericNotificationContainer from './containers/notifications/GenericNotificationContainer'; import AutomaticUpdateNotificationDialog from './containers/notifications/AutomaticUpdateNotificationDialog'; +import NewsOverlayContainer from './containers/news/NewsOverlayContainer'; import { DIALOGS } from '../../common/ipc/constants'; import type { StoresMap } from './stores/index'; import type { ActionsMap } from './actions/index'; +import NewsFeedContainer from './containers/news/NewsFeedContainer'; @observer export default class App extends Component<{ @@ -31,15 +33,35 @@ export default class App extends Component<{ } render() { const { stores, actions, history } = this.props; - const { app, nodeUpdate } = stores; - const { showNextUpdate } = nodeUpdate; - const { isActiveDialog } = app; + const { app, nodeUpdate, networkStatus } = stores; + const { + showNextUpdate, + isNewAppVersionAvailable, + isUpdatePostponed, + isUpdateAvailable, + } = nodeUpdate; + const { isActiveDialog, isSetupPage } = app; + const { isNodeStopping, isNodeStopped } = networkStatus; const locale = stores.profile.currentLocale; const mobxDevTools = global.environment.mobxDevTools ? : null; const { currentTheme } = stores.profile; const themeVars = require(`./themes/daedalus/${currentTheme}.js`).default; const { ABOUT, BLOCK_CONSOLIDATION, DAEDALUS_DIAGNOSTICS } = DIALOGS; + const isManualUpdateAvailable = + isNewAppVersionAvailable && + !isNodeStopping && + !isNodeStopped && + !isUpdatePostponed && + !isUpdateAvailable; + + const canShowNews = + !isSetupPage && // Active page is not "Language Selection" or "Terms of Use" + !showNextUpdate && // Autmatic update not available + !isManualUpdateAvailable && // Manual update not available + !isNodeStopping && // Daedalus is not shutting down + !isNodeStopped; // Daedalus is not shutting down + return ( @@ -65,6 +87,10 @@ export default class App extends Component<{ , ] )} + {canShowNews && [ + , + , + ]} diff --git a/source/renderer/app/actions/app-actions.js b/source/renderer/app/actions/app-actions.js index 73d2f29179..91b6258084 100644 --- a/source/renderer/app/actions/app-actions.js +++ b/source/renderer/app/actions/app-actions.js @@ -8,6 +8,7 @@ export default class AppActions { getGpuStatus: Action = new Action(); initAppEnvironment: Action = new Action(); setNotificationVisibility: Action = new Action(); + toggleNewsFeed: Action = new Action(); // About dialog actions closeAboutDialog: Action = new Action(); diff --git a/source/renderer/app/api/api.js b/source/renderer/app/api/api.js index 06d34de5ba..e9b9ca2fb1 100644 --- a/source/renderer/app/api/api.js +++ b/source/renderer/app/api/api.js @@ -47,6 +47,9 @@ import { updateWallet } from './wallets/requests/updateWallet'; import { getWalletUtxos } from './wallets/requests/getWalletUtxos'; import { getWalletIdAndBalance } from './wallets/requests/getWalletIdAndBalance'; +// News requests +import { getNews } from './news/requests/getNews'; + // utility functions import { awaitUpdateChannel, @@ -135,6 +138,9 @@ import type { GetWalletIdAndBalanceResponse, } from './wallets/types'; +// News Types +import type { GetNewsResponse } from './news/types'; + // Common errors import { GenericApiError, @@ -161,6 +167,8 @@ import { } from './transactions/errors'; import type { FaultInjectionIpcRequest } from '../../../common/types/cardano-node.types'; import { TlsCertificateNotValidError } from './nodes/errors'; +import { getSHA256HexForString } from './utils/hashing'; +import { getNewsHash } from './news/requests/getNewsHash'; export default class AdaApi { config: RequestConfig; @@ -1040,6 +1048,42 @@ export default class AdaApi { } }; + getNews = async (): Promise => { + Logger.debug('AdaApi::getNews called'); + + // Fetch news json + let rawNews: string; + let news: GetNewsResponse; + try { + rawNews = await getNews(); + news = JSON.parse(rawNews); + } catch (error) { + Logger.error('AdaApi::getNews error', { error }); + throw new Error('Unable to fetch news'); + } + + // Fetch news verification hash + let newsHash: string; + let expectedNewsHash: string; + try { + newsHash = await getSHA256HexForString(rawNews); + expectedNewsHash = await getNewsHash(news.updatedAt); + } catch (error) { + Logger.error('AdaApi::getNews (hash) error', { error }); + throw new Error('Unable to fetch news hash'); + } + + if (newsHash !== expectedNewsHash) { + throw new Error('Newsfeed could not be verified'); + } + + Logger.debug('AdaApi::getNews success', { + updatedAt: news.updatedAt, + items: news.items.length, + }); + return news; + }; + setCardanoNodeFault = async (fault: FaultInjectionIpcRequest) => { await cardanoFaultInjectionChannel.send(fault); }; @@ -1054,6 +1098,10 @@ export default class AdaApi { setLatestAppVersion: Function; setApplicationVersion: Function; setFaultyNodeSettingsApi: boolean; + resetTestOverrides: Function; + + // Newsfeed testing utility + setFakeNewsFeedJsonForTesting: (fakeNewsfeedJson: GetNewsResponse) => void; } // ========== TRANSFORM SERVER DATA INTO FRONTEND MODELS ========= diff --git a/source/renderer/app/api/news/requests/getNews.js b/source/renderer/app/api/news/requests/getNews.js new file mode 100644 index 0000000000..444a5259f8 --- /dev/null +++ b/source/renderer/app/api/news/requests/getNews.js @@ -0,0 +1,19 @@ +// @flow +import { externalRequest } from '../../utils/externalRequest'; +import { getNewsURL } from '../../../utils/network'; + +const { network } = global.environment; +const hostname = getNewsURL(network); +const path = '/newsfeed'; +const filename = `newsfeed_${network}.json`; + +export const getNews = (): Promise => + externalRequest( + { + hostname, + path: `${path}/${filename}`, + method: 'GET', + protocol: 'https', + }, + true + ); diff --git a/source/renderer/app/api/news/requests/getNewsHash.js b/source/renderer/app/api/news/requests/getNewsHash.js new file mode 100644 index 0000000000..522b3b4c4f --- /dev/null +++ b/source/renderer/app/api/news/requests/getNewsHash.js @@ -0,0 +1,18 @@ +// @flow +import { externalRequest } from '../../utils/externalRequest'; +import { getNewsHashURL } from '../../../utils/network'; + +const { network } = global.environment; +const hostname = getNewsHashURL(network); +const path = `/newsfeed-verification/${network}`; + +export const getNewsHash = (timestamp: number): Promise => + externalRequest( + { + hostname, + path: `${path}/${timestamp}.txt`, + method: 'GET', + protocol: 'https', + }, + true + ); diff --git a/source/renderer/app/api/news/types.js b/source/renderer/app/api/news/types.js new file mode 100644 index 0000000000..da878a5f55 --- /dev/null +++ b/source/renderer/app/api/news/types.js @@ -0,0 +1,41 @@ +// @flow + +export type NewsTranslations = { + 'en-US': string, + 'ja-JP': string, +}; + +export type NewsAction = { + label: NewsTranslations, + url?: NewsTranslations, + route?: string, +}; + +export type NewsTarget = { + daedalusVersion: ?string, + platform: string, +}; + +export type NewsType = 'incident' | 'alert' | 'announcement' | 'info'; + +export type NewsTimestamp = number; + +export type NewsItem = { + title: NewsTranslations, + content: NewsTranslations, + target: NewsTarget, + action: NewsAction, + date: NewsTimestamp, + type: NewsType, +}; + +export type GetNewsResponse = { + updatedAt: number, + items: Array, +}; + +export type GetReadNewsResponse = { + readNewsItems: NewsTimestamp[], +}; + +export type MarkNewsAsReadResponse = Array; diff --git a/source/renderer/app/api/utils/externalRequest.js b/source/renderer/app/api/utils/externalRequest.js index 63d9562d79..700214c29f 100644 --- a/source/renderer/app/api/utils/externalRequest.js +++ b/source/renderer/app/api/utils/externalRequest.js @@ -14,7 +14,10 @@ export type HttpOptions = { }, }; -export const externalRequest = (httpOptions: HttpOptions): Promise => +export const externalRequest = ( + httpOptions: HttpOptions, + raw: boolean = false +): Promise => new Promise((resolve, reject) => { if (!ALLOWED_EXTERNAL_HOSTNAMES.includes(httpOptions.hostname)) { return reject(new Error('Hostname not allowed')); @@ -33,8 +36,7 @@ export const externalRequest = (httpOptions: HttpOptions): Promise => response.on('error', error => reject(error)); response.on('end', () => { try { - const parsedBody = JSON.parse(body); - resolve(parsedBody); + resolve(raw ? body : JSON.parse(body)); } catch (error) { // Handle internal server errors (e.g. HTTP 500 - 'Something went wrong') reject(new Error(error)); diff --git a/source/renderer/app/api/utils/hashing.js b/source/renderer/app/api/utils/hashing.js new file mode 100644 index 0000000000..0d3f3e914d --- /dev/null +++ b/source/renderer/app/api/utils/hashing.js @@ -0,0 +1,9 @@ +// @flow + +// From: https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest +export const getSHA256HexForString = async (str: string): Promise => { + const data = new TextEncoder().encode(str); + const hashBuffer = await window.crypto.subtle.digest('SHA-256', data); + const hashArray = Array.from(new Uint8Array(hashBuffer)); + return hashArray.map(b => b.toString(16).padStart(2, '0')).join(''); +}; diff --git a/source/renderer/app/api/utils/localStorage.js b/source/renderer/app/api/utils/localStorage.js index 7687d22ed7..107122df1c 100644 --- a/source/renderer/app/api/utils/localStorage.js +++ b/source/renderer/app/api/utils/localStorage.js @@ -2,6 +2,9 @@ /* eslint-disable consistent-return */ +import { includes } from 'lodash'; +import type { NewsTimestamp } from '../news/types'; + const store = global.electronStore; export type WalletLocalData = { @@ -19,6 +22,7 @@ type StorageKeys = { TERMS_OF_USE_ACCEPTANCE: string, THEME: string, DATA_LAYER_MIGRATION_ACCEPTANCE: string, + READ_NEWS: string, WALLETS: string, }; @@ -36,6 +40,7 @@ export default class LocalStorageApi { TERMS_OF_USE_ACCEPTANCE: `${NETWORK}-TERMS-OF-USE-ACCEPTANCE`, THEME: `${NETWORK}-THEME`, DATA_LAYER_MIGRATION_ACCEPTANCE: `${NETWORK}-DATA-LAYER-MIGRATION-ACCEPTANCE`, + READ_NEWS: `${NETWORK}-READ_NEWS`, WALLETS: `${NETWORK}-WALLETS`, }; } @@ -222,10 +227,50 @@ export default class LocalStorageApi { } }); + getReadNews = (): Promise => + new Promise((resolve, reject) => { + try { + const readNews = store.get(this.storageKeys.READ_NEWS); + if (!readNews) return resolve([]); + resolve(readNews); + } catch (error) { + return reject(error); + } + }); + + markNewsAsRead = ( + newsTimestamps: NewsTimestamp[] + ): Promise => + new Promise((resolve, reject) => { + try { + const readNews = store.get(this.storageKeys.READ_NEWS) || []; + + if (!includes(readNews, newsTimestamps[0])) { + store.set( + this.storageKeys.READ_NEWS, + readNews.concat(newsTimestamps) + ); + } + + resolve(readNews); + } catch (error) { + return reject(error); + } + }); + + unsetReadNews = (): Promise => + new Promise(resolve => { + try { + store.delete(this.storageKeys.READ_NEWS); + resolve(); + } catch (error) {} // eslint-disable-line + }); + reset = async () => { await this.unsetUserLocale(); await this.unsetTermsOfUseAcceptance(); await this.unsetUserTheme(); await this.unsetDataLayerMigrationAcceptance(); + await this.unsetReadNews(); }; } diff --git a/source/renderer/app/api/utils/patchAdaApi.js b/source/renderer/app/api/utils/patchAdaApi.js index 16cf9f5dcc..c5f6e77e3d 100644 --- a/source/renderer/app/api/utils/patchAdaApi.js +++ b/source/renderer/app/api/utils/patchAdaApi.js @@ -15,6 +15,7 @@ import type { GetNodeSettingsResponse, GetLatestAppVersionResponse, } from '../nodes/types'; +import type { GetNewsResponse } from '../news/types'; let LATEST_APP_VERSION = null; let LOCAL_TIME_DIFFERENCE = 0; @@ -23,6 +24,7 @@ let NETWORK_BLOCK_HEIGHT = null; let NEXT_ADA_UPDATE = null; let SUBSCRIPTION_STATUS = null; let APPLICATION_VERSION = null; +let FAKE_NEWSFEED_JSON: ?GetNewsResponse; export default (api: AdaApi) => { api.getLocalTimeDifference = async () => @@ -185,4 +187,28 @@ export default (api: AdaApi) => { api.setNetworkBlockHeight = async (height: number) => { NETWORK_BLOCK_HEIGHT = height; }; + + api.setFakeNewsFeedJsonForTesting = (fakeNewsfeedJson: ?GetNewsResponse) => { + FAKE_NEWSFEED_JSON = fakeNewsfeedJson; + }; + + api.getNews = (): Promise => { + return new Promise((resolve, reject) => { + if (!FAKE_NEWSFEED_JSON) { + reject(new Error('Unable to fetch news')); + } else { + resolve(FAKE_NEWSFEED_JSON); + } + }); + }; + + api.resetTestOverrides = () => { + LATEST_APP_VERSION = null; + LOCAL_TIME_DIFFERENCE = 0; + LOCAL_BLOCK_HEIGHT = null; + NETWORK_BLOCK_HEIGHT = null; + NEXT_ADA_UPDATE = null; + SUBSCRIPTION_STATUS = null; + APPLICATION_VERSION = null; + }; }; diff --git a/source/renderer/app/assets/images/top-bar/news-feed-icon.inline.svg b/source/renderer/app/assets/images/top-bar/news-feed-icon.inline.svg new file mode 100644 index 0000000000..de6253833d --- /dev/null +++ b/source/renderer/app/assets/images/top-bar/news-feed-icon.inline.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.js b/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.js index 5eda8cbecc..a4d70b4791 100644 --- a/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.js +++ b/source/renderer/app/components/loading/syncing-connecting/SyncingConnecting.js @@ -10,6 +10,7 @@ import { CardanoNodeStates } from '../../../../../common/types/cardano-node.type import styles from './SyncingConnecting.scss'; import type { CardanoNodeState } from '../../../../../common/types/cardano-node.types'; import { REPORT_ISSUE_TIME_TRIGGER } from '../../../config/timingConfig'; +import NewsFeedIcon from '../../widgets/NewsFeedIcon'; let connectingInterval = null; let syncingInterval = null; @@ -35,6 +36,7 @@ type Props = { syncPercentage: number, hasLoadedCurrentLocale: boolean, hasLoadedCurrentTheme: boolean, + hasUnreadNews: boolean, isCheckingSystemTime: boolean, isNodeResponding: boolean, isNodeSubscribed: boolean, @@ -44,10 +46,12 @@ type Props = { isNewAppVersionLoading: boolean, isNewAppVersionLoaded: boolean, disableDownloadLogs: boolean, + showNewsFeedIcon: boolean, onIssueClick: Function, onDownloadLogs: Function, onGetAvailableVersions: Function, onStatusIconClick: Function, + onToggleNewsFeedIconClick: Function, }; @observer @@ -196,6 +200,7 @@ export default class SyncingConnecting extends Component { isSyncing, hasLoadedCurrentLocale, hasLoadedCurrentTheme, + hasUnreadNews, onIssueClick, onDownloadLogs, disableDownloadLogs, @@ -210,6 +215,8 @@ export default class SyncingConnecting extends Component { isNodeStopped, syncPercentage, onStatusIconClick, + onToggleNewsFeedIconClick, + showNewsFeedIcon, } = this.props; const componentStyles = classNames([ @@ -219,6 +226,11 @@ export default class SyncingConnecting extends Component { isSyncing ? styles['is-syncing'] : null, ]); + const newsFeedIconStyles = classNames([ + isConnecting ? 'connectingScreen' : null, + isSyncing || isSynced ? 'syncingScreen' : null, + ]); + return (
{this.showReportIssue && ( @@ -231,6 +243,13 @@ export default class SyncingConnecting extends Component { isSyncing={isSyncing} /> )} + {showNewsFeedIcon && ( + + )} , + onCloseOpenAlert: Function, + onMarkNewsAsRead: Function, + onOpenExternalLink: Function, + allAlertsCount: number, + hideCounter?: boolean, +}; + +@observer +export default class AlertsOverlay extends Component { + constructor(props: Props) { + super(props); + this.state = { + showOverlay: true, + }; + } + + localizedDateFormat: 'MM/DD/YYYY'; + + componentWillMount() { + this.localizedDateFormat = moment.localeData().longDateFormat('L'); + } + + contentClickHandler(event: SyntheticMouseEvent) { + const linkUrl = get(event, ['target', 'href']); + if (linkUrl) { + event.preventDefault(); + this.props.onOpenExternalLink(linkUrl); + } + } + + onClose = () => { + const { alerts } = this.props; + if (alerts.length <= 1) { + this.props.onMarkNewsAsRead(alerts[0].date); + this.props.onCloseOpenAlert(); + this.setState({ showOverlay: false }); + return; + } + this.props.onMarkNewsAsRead(alerts[0].date); + }; + + renderAction = (action: Object) => { + if (action && action.url) { + return ( + + ); + } + return null; + }; + + renderCounter = (alerts: Array) => { + const { allAlertsCount, hideCounter } = this.props; + if (!hideCounter) { + return ( + + {allAlertsCount - alerts.length + 1} / {allAlertsCount} + + ); + } + return null; + }; + + render() { + const { showOverlay } = this.state; + const { alerts } = this.props; + const [alert] = alerts; + const { content, date, action, title } = alert; + return ( + showOverlay && ( +
+ + {this.renderCounter(alerts)} +

{title}

+ + {moment(date).format(this.localizedDateFormat)} + +
+ +
+ {this.renderAction(action)} +
+ ) + ); + } +} diff --git a/source/renderer/app/components/news/AlertsOverlay.scss b/source/renderer/app/components/news/AlertsOverlay.scss new file mode 100644 index 0000000000..f7aa09469e --- /dev/null +++ b/source/renderer/app/components/news/AlertsOverlay.scss @@ -0,0 +1,187 @@ +.actionBtn { + background-color: rgba(45, 45, 45, 0.1); + border: 1px solid #2d2d2d; + border-radius: 5px; + box-sizing: border-box; + color: #2d2d2d; + font-family: var(--font-medium); + font-size: 14px; + font-weight: 500; + line-height: 1.36; + margin-bottom: 22.5px; + min-height: 50px; + width: 360px; + svg { + height: 13px; + margin: -1px 5px; + width: 13px; + + g { + path { + stroke: #2d2d2d; + } + } + } + &:hover { + background-color: #2d2d2d; + color: #fff; + cursor: pointer; + svg { + g { + path { + stroke: #fff; + } + } + } + } +} + +.closeButton { + cursor: pointer; + display: flex; + justify-content: flex-end; + position: fixed; + right: 10px; + top: 10px; + z-index: 4; + + span { + border-radius: 50%; + height: 44px; + width: 44px; + + &:hover { + background-color: rgba(0, 0, 0, 0.16); + border-radius: 50%; + } + } + + svg { + height: 12px; + margin-top: 16px; + width: 12px; + + polygon { + fill: #2d2d2d; + } + path { + stroke: #2d2d2d; + } + } +} + +.component { + align-items: center; + background-color: rgba(255, 185, 35, 0.98); + color: #2d2d2d; + display: flex; + flex-direction: column; + font-family: var(--font-regular); + height: 100vh; + justify-content: center; + position: fixed; + top: 0px; + width: 100vw; + z-index: 20; +} + +.content { + background-color: rgba(45, 45, 45, 0.1); + font-size: 16px; + line-height: 1.2; + margin-bottom: 30px; + max-height: 464px; + max-width: 600px; + min-width: 600px; + opacity: 0.8; + overflow-y: scroll; + padding: 12px 20px; + word-break: break-word; + &::-webkit-scrollbar-thumb { + background-color: rgba(45, 45, 45, 0.3); + min-height: 60px; + outline: none; + width: 4px; + + &:hover { + background-color: rgba(45, 45, 45, 0.5); + } + } + + h1, + h2 { + font-family: var(--font-medium); + margin-bottom: 6px; + } + + h1 { + font-size: 18px; + } + + h2 { + font-size: 16px; + } + + * + h2 { + margin-top: 16px; + } + + ol, + ul { + list-style: disc; + margin-left: 20px; + } + + ol { + list-style-type: decimal; + } + + p, + li { + color: rgba(45, 45, 45, 0.7); + font-family: var(--font-regular); + font-size: 14px; + line-height: 1.5; + margin-bottom: 6px; + + strong { + color: rgba(45, 45, 45, 1); + font-weight: 500; + } + } + + a { + border-bottom: 1px solid #2d2d2d; + color: #2d2d2d; + text-decoration: none; + } + + em { + font-style: italic; + } +} + +.counter { + color: #2d2d2d; + font-family: var(--font-medium); + font-size: 14px; + font-weight: 500; + position: fixed; + right: 74px; + top: 24.5px; +} + +.date { + font-family: var(--font-medium); + font-size: 14px; + line-height: 1.43; + margin-bottom: 16px; + opacity: 0.5; +} + +.title { + font-size: 20px; + line-height: 1.2; + margin-bottom: 0; + margin-top: 22.5px; +} diff --git a/source/renderer/app/components/news/IncidentOverlay.js b/source/renderer/app/components/news/IncidentOverlay.js new file mode 100644 index 0000000000..a4e997b2b4 --- /dev/null +++ b/source/renderer/app/components/news/IncidentOverlay.js @@ -0,0 +1,68 @@ +// @flow +import React, { Component } from 'react'; +import moment from 'moment'; +import { observer } from 'mobx-react'; +import { get } from 'lodash'; +import ReactMarkdown from 'react-markdown'; +import SVGInline from 'react-svg-inline'; +import News from '../../domains/News'; +import externalLinkIcon from '../../assets/images/link-ic.inline.svg'; +import styles from './IncidentOverlay.scss'; + +type Props = { + incident: News.News, + onOpenExternalLink: Function, +}; + +@observer +export default class IncidentOverlay extends Component { + localizedDateFormat: 'MM/DD/YYYY'; + + componentWillMount() { + this.localizedDateFormat = moment.localeData().longDateFormat('L'); + } + + contentClickHandler(event: SyntheticMouseEvent) { + const linkUrl = get(event, ['target', 'href']); + if (linkUrl) { + event.preventDefault(); + this.props.onOpenExternalLink(linkUrl); + } + } + + renderAction = (action: Object) => { + if (action && action.url) { + return ( + + ); + } + return null; + }; + + render() { + const { incident } = this.props; + const { content, date, action, title } = incident; + return ( +
+

{title}

+ + {moment(date).format(this.localizedDateFormat)} + +
+ +
+ {this.renderAction(action)} +
+ ); + } +} diff --git a/source/renderer/app/components/news/IncidentOverlay.scss b/source/renderer/app/components/news/IncidentOverlay.scss new file mode 100644 index 0000000000..8493e12b62 --- /dev/null +++ b/source/renderer/app/components/news/IncidentOverlay.scss @@ -0,0 +1,143 @@ +.actionBtn { + background-color: rgba(0, 0, 0, 0.1); + border: 1px solid #fafbfc; + border-radius: 5px; + box-sizing: border-box; + color: #fafbfc; + font-family: var(--font-medium); + font-size: 14px; + font-weight: 500; + line-height: 1.36; + margin-bottom: 22.5px; + min-height: 50px; + width: 360px; + svg { + height: 13px; + margin: -1px 5px; + width: 13px; + + g { + path { + stroke: #fafbfc; + } + } + } + + &:hover { + background-color: #fafbfc; + color: #ab1700; + cursor: pointer; + svg { + g { + path { + stroke: #ab1700; + } + } + } + } +} + +.component { + align-items: center; + background-color: rgba(171, 23, 0, 0.98); + color: #fafbfc; + display: flex; + flex-direction: column; + font-family: var(--font-regular); + height: 100vh; + justify-content: center; + position: fixed; + top: 0px; + width: 100vw; + z-index: 20; +} + +.content { + background-color: rgba(0, 0, 0, 0.1); + font-size: 16px; + line-height: 1.2; + margin-bottom: 30px; + max-height: 464px; + max-width: 600px; + min-width: 600px; + opacity: 0.8; + overflow-y: scroll; + padding: 12px 20px; + word-break: break-word; + &::-webkit-scrollbar-thumb { + background-color: rgba(250, 251, 252, 0.3); + outline: none; + width: 4px; + + &:hover { + background-color: rgba(250, 251, 252, 0.5); + } + } + + h1, + h2 { + font-family: var(--font-medium); + margin-bottom: 6px; + } + + h1 { + font-size: 18px; + } + + h2 { + font-size: 16px; + } + + * + h2 { + margin-top: 16px; + } + + ol, + ul { + list-style: disc; + margin-left: 20px; + } + + ol { + list-style-type: decimal; + } + + p, + li { + color: rgba(250, 251, 252, 0.7); + font-family: var(--font-regular); + font-size: 14px; + line-height: 1.5; + margin-bottom: 6px; + + strong { + color: rgba(250, 251, 252, 1); + font-weight: 500; + } + } + + a { + border-bottom: 1px solid #fafbfc; + color: #fafbfc; + text-decoration: none; + } + + em { + font-style: italic; + } +} + +.date { + font-family: var(--font-medium); + font-size: 14px; + line-height: 1.43; + margin-bottom: 16px; + opacity: 0.5; +} + +.title { + font-size: 20px; + line-height: 1.2; + margin-bottom: 0; + margin-top: 22.5px; +} diff --git a/source/renderer/app/components/news/NewsFeed.js b/source/renderer/app/components/news/NewsFeed.js new file mode 100644 index 0000000000..91e28877f1 --- /dev/null +++ b/source/renderer/app/components/news/NewsFeed.js @@ -0,0 +1,176 @@ +// @flow +import React, { Component } from 'react'; +import { observer } from 'mobx-react'; +import { defineMessages, intlShape } from 'react-intl'; +import classNames from 'classnames'; +import SVGInline from 'react-svg-inline'; +import { get } from 'lodash'; +import closeCrossThin from '../../assets/images/close-cross-thin.inline.svg'; +import styles from './NewsFeed.scss'; +import News from '../../domains/News'; +import NewsItem from './NewsItem'; +import LoadingSpinner from '../widgets/LoadingSpinner'; + +const messages = defineMessages({ + newsFeedEmpty: { + id: 'news.newsfeed.empty', + defaultMessage: 'Newsfeed is empty', + description: 'Newsfeed is empty', + }, + newsFeedNoFetch: { + id: 'news.newsfeed.noFetch', + defaultMessage: 'Trying to fetch the newsfeed...', + description: 'Trying to fetch the newsfeed...', + }, + newsFeedTitle: { + id: 'news.newsfeed.title', + defaultMessage: 'Newsfeed', + description: 'Newsfeed', + }, +}); + +type Props = { + onClose: Function, + onOpenAlert?: Function, + news?: News.NewsCollection, + isNewsFeedOpen: boolean, + onMarkNewsAsRead: Function, + openWithoutTransition?: boolean, + isLoadingNews: boolean, + onOpenExternalLink: Function, + onGoToRoute: Function, +}; + +type State = { + hasShadow: boolean, +}; + +const SCROLLABLE_DOM_ELEMENT_SELECTOR = '.NewsFeed_newsFeedList'; + +@observer +export default class NewsFeed extends Component { + static defaultProps = { + onClose: null, + openWithoutTransition: false, + }; + + static contextTypes = { + intl: intlShape.isRequired, + }; + + state = { + hasShadow: false, + }; + + scrollableDomElement: ?HTMLElement = null; + + componentDidMount() { + this.scrollableDomElement = document.querySelector( + SCROLLABLE_DOM_ELEMENT_SELECTOR + ); + if (!(this.scrollableDomElement instanceof HTMLElement)) return; + this.scrollableDomElement.addEventListener('scroll', this.handleOnScroll); + } + + componentWillUnmount() { + if (this.scrollableDomElement) { + this.scrollableDomElement.removeEventListener( + 'scroll', + this.handleOnScroll + ); + } + } + + handleOnScroll = () => { + const { hasShadow: currentHasShadow } = this.state; + + if (this.scrollableDomElement) { + const { scrollTop } = this.scrollableDomElement; + const hasShadow = scrollTop > 3; + if (currentHasShadow !== hasShadow) { + this.setState({ + hasShadow, + }); + } + } + }; + + render() { + const { intl } = this.context; + const { + news, + isNewsFeedOpen, + isLoadingNews, + onClose, + onOpenAlert, + onMarkNewsAsRead, + onOpenExternalLink, + openWithoutTransition, + onGoToRoute, + } = this.props; + const { hasShadow } = this.state; + + const totalNewsItems = get(news, 'all', []).length; + const totalUnreadNewsItems = get(news, 'unread', []).length; + const componentClasses = classNames([ + styles.component, + isNewsFeedOpen ? styles.show : null, + openWithoutTransition ? styles.noTransition : null, + ]); + + const newsFeedHeaderStyles = classNames([ + styles.newsFeedHeader, + hasShadow ? styles.hasShadow : null, + ]); + + return ( +
+
+

+ {intl.formatMessage(messages.newsFeedTitle)} + {totalUnreadNewsItems > 0 && ( + + {totalUnreadNewsItems} + + )} +

+ +
+
+ {news && totalNewsItems > 0 && ( +
+ {news.all.map(newsItem => ( + + ))} +
+ )} + {news && totalNewsItems === 0 && !isLoadingNews && ( +
+

+ {intl.formatMessage(messages.newsFeedEmpty)} +

+
+ )} + {(!news || totalNewsItems === 0) && isLoadingNews && ( +
+

+ {intl.formatMessage(messages.newsFeedNoFetch)} +

+ +
+ )} +
+
+ ); + } +} diff --git a/source/renderer/app/components/news/NewsFeed.scss b/source/renderer/app/components/news/NewsFeed.scss new file mode 100644 index 0000000000..df96521366 --- /dev/null +++ b/source/renderer/app/components/news/NewsFeed.scss @@ -0,0 +1,133 @@ +.component { + background: var(--theme-news-feed-background-color); + box-shadow: var(--theme-news-feed-box-shadow-color); + display: flex; + flex-direction: column; + height: 100%; + margin-right: -480px; + overflow: hidden; + position: fixed; + right: 0; + top: 0; + transition: margin-right 400ms ease; + width: 460px; + z-index: 20; + + &.noTransition { + transition: none; + } + + .newsFeedHeader { + align-items: center; + background: var(--theme-news-feed-header-background-color); + box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2); + display: flex; + flex-shrink: 0; + height: 84px; + justify-content: space-between; + padding: 30px 30px 30px 40px; + position: relative; + transition: box-shadow 0.15s ease-in; + width: 100%; + z-index: 1; + + &.hasShadow { + box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); + } + + .newsFeedTitle { + color: var(--theme-news-feed-header-title-color); + display: inline-block; + font-family: var(--font-regular); + font-size: 18px; + line-height: 1.33; + margin-top: 3px; + position: relative; + } + + .newsFeedBadge { + background-color: var(--theme-news-feed-badge-background-color); + border-radius: 10px; + color: var(--theme-news-feed-badge-text-color); + display: inline-block; + font-size: 11px; + font-weight: bold; + left: 100%; + line-height: 16px; + margin: 3px 8px; + min-width: 17px; + padding: 0 5px 1px; + position: absolute; + text-align: center; + top: 0; + } + + .newsFeedCloseBtn { + cursor: pointer; + + span { + border-radius: 50%; + padding: 15.5px 16px; + + &:hover { + background-color: var( + --theme-news-feed-icon-close-hover-background-color + ); + } + } + + svg { + height: 12px; + position: relative; + top: 2px; + width: 12px; + + & > g { + stroke: var(--theme-news-feed-icon-close-button-color); + } + } + } + } + + .newsFeedList { + background: var(--theme-news-feed-background-color); + height: calc(100% - 84px); + overflow-x: hidden; + overflow-y: overlay; + padding: 20px; + + &::-webkit-scrollbar-track { + margin: 13px 0; + } + + .newsFeedEmptyContainer, + .newsFeedNoFetchContainer { + align-items: center; + display: flex; + flex-direction: column; + height: 100%; + justify-content: center; + + .newsFeedEmpty, + .newsFeedNoFetch { + color: var(--theme-news-feed-no-fetch-color); + font-family: var(--font-regular); + font-size: 14px; + font-weight: 300; + line-height: 1.36; + margin: 20px 0; + opacity: 0.7; + text-align: center; + } + } + + .newsFeedItemsContainer { + font-family: var(--font-regular); + overflow: hidden; + } + } + + &.show { + margin-right: 0; + } +} diff --git a/source/renderer/app/components/news/NewsItem.js b/source/renderer/app/components/news/NewsItem.js new file mode 100644 index 0000000000..05256cac96 --- /dev/null +++ b/source/renderer/app/components/news/NewsItem.js @@ -0,0 +1,171 @@ +// @flow +import React, { Component } from 'react'; +import { observer } from 'mobx-react'; +import classNames from 'classnames'; +import ReactMarkdown from 'react-markdown'; +import moment from 'moment'; +import { get } from 'lodash'; +import SVGInline from 'react-svg-inline'; +import AnimateHeight from 'react-animate-height'; +import News, { NewsTypes } from '../../domains/News'; +import externalLinkIcon from '../../assets/images/link-ic.inline.svg'; +import styles from './NewsItem.scss'; + +type Props = { + newsItem: News.News, + onMarkNewsAsRead: Function, + onOpenExternalLink: Function, + onOpenAlert?: Function, + onGoToRoute: Function, + expandWithoutTransition?: boolean, + isNewsFeedOpen: boolean, +}; + +type State = { + newsItemExpanded: boolean, + newsItemCollapsible: boolean, +}; + +@observer +export default class NewsItem extends Component { + static defaultProps = { + onNewsItemActionClick: null, + expandWithoutTransition: false, + }; + + localizedDateFormat: 'MM/DD/YYYY'; + + state = { + newsItemExpanded: false, + newsItemCollapsible: true, + }; + + componentWillReceiveProps(nextProps: Props) { + const { newsItemExpanded } = this.state; + if ( + this.props.isNewsFeedOpen && + !nextProps.isNewsFeedOpen && + newsItemExpanded + ) { + this.setState({ newsItemExpanded: false }); + } + } + + componentWillMount() { + this.localizedDateFormat = moment.localeData().longDateFormat('L'); + } + + newsItemClickHandler(event: SyntheticMouseEvent) { + const linkUrl = get(event, ['target', 'href']); + if (linkUrl) { + event.preventDefault(); + this.props.onOpenExternalLink(linkUrl); + } else { + const { type, date } = this.props.newsItem; + const { newsItemCollapsible } = this.state; + if (type === NewsTypes.INFO || type === NewsTypes.ANNOUNCEMENT) { + if (newsItemCollapsible) { + this.setState(prevState => ({ + newsItemExpanded: !prevState.newsItemExpanded, + })); + } else { + this.setState({ newsItemCollapsible: true }); + } + } + if (NewsTypes.ALERT && this.props.onOpenAlert) { + this.props.onOpenAlert(date); + } + this.props.onMarkNewsAsRead(date); + } + } + + newsItemButtonClickHandler(event: SyntheticMouseEvent) { + event.preventDefault(); + event.stopPropagation(); + const { onOpenExternalLink, newsItem, onGoToRoute } = this.props; + const { url, route } = newsItem.action; + + if (url) { + onOpenExternalLink(url, event); + } else if (route) { + onGoToRoute(route); + } + } + + generateTitleWithBadge = (title: string, isRead: boolean) => { + const wordsArray = title.split(' '); + const lastWordIndex = wordsArray.length - 1; + const lastWord = wordsArray[lastWordIndex]; + + // Remove last word from array + wordsArray.splice(lastWordIndex, 1); + // Join words without last one + const firstSentencePart = wordsArray.join(' '); + + return ( +

+ {firstSentencePart ? `${firstSentencePart} ` : null} + + {lastWord}  + {!isRead && } + +

+ ); + }; + + render() { + const { newsItem, expandWithoutTransition } = this.props; + const componentClasses = classNames([ + styles.component, + newsItem.type ? styles[newsItem.type] : null, + this.state.newsItemExpanded ? styles.expanded : null, + newsItem.read ? styles.isRead : null, + ]); + const { route } = newsItem.action; + const title = this.generateTitleWithBadge(newsItem.title, newsItem.read); + + return ( +
+ {title} +
+ {moment(newsItem.date).format(this.localizedDateFormat)} +
+
+ +
+ +
+ + +
+
+ ); + } +} diff --git a/source/renderer/app/components/news/NewsItem.scss b/source/renderer/app/components/news/NewsItem.scss new file mode 100644 index 0000000000..9729dfab49 --- /dev/null +++ b/source/renderer/app/components/news/NewsItem.scss @@ -0,0 +1,159 @@ +.component, +.isRead, +.info { + background-color: var(--theme-news-item-info-background-color); + border-radius: 5px; + cursor: pointer; + padding: 20px; + position: relative; + width: 100%; + word-break: break-word; + + & + .component { + margin-top: 10px; + } + + &.isRead { + opacity: 0.5; + } + + &.alert { + background-color: var(--theme-news-item-alert-background-color); + } + + &.announcement { + background-color: var(--theme-news-item-announcement-background-color); + } + + .newsItemTitle { + color: var(--theme-news-item-title-color); + font-family: var(--font-regular); + font-size: 16px; + line-height: 1.33; + margin-bottom: 2px; + + .lastWordWrapper { + display: inline-block; + word-break: break-all; + + .newsItemBadge { + background-color: var(--theme-news-item-badge-color); + border-radius: 12.5px; + display: inline-block; + height: 8px; + margin: 3px 8px 3px 4px; + width: 8px; + } + } + } + + .newsItemDate { + color: var(--theme-news-item-title-color); + font-family: var(--font-light); + font-size: 14px; + font-weight: 300; + line-height: 1.36; + opacity: 0.7; + } + + .newsItemContentContainer { + color: var(--theme-news-item-title-color); + line-height: 1.36; + margin-top: 6px; + opacity: 0.7; + + h1, + h2 { + font-family: var(--font-medium); + margin-bottom: 3px; + } + + h1 { + font-size: 16px; + } + + h2 { + font-size: 15px; + } + + * + h2 { + margin-top: 8px; + } + + ol, + ul { + list-style: disc; + margin-left: 20px; + } + + ol { + list-style-type: decimal; + } + + p, + li { + font-family: var(--font-regular); + font-size: 14px; + margin-bottom: 3px; + + strong { + font-weight: 500; + } + } + + a { + color: var(--theme-news-item-content-link-color); + text-decoration: underline; + } + + em { + font-style: italic; + } + } + + .newsItemActionBtn { + background-color: var(--theme-news-item-action-button-background-color); + border: solid 1px var(--theme-news-item-action-button-border-color); + border-radius: 2px; + color: var(--theme-news-item-action-button-color); + cursor: pointer; + font-family: var(--font-regular); + font-size: 14px; + font-weight: 500; + line-height: 20px; + margin: 20px 0 0 0; + padding: 5px 10px; + text-align: center; + width: 100%; + + svg { + height: 13px; + margin: -1px 5px; + width: 13px; + + g { + path { + stroke: var(--theme-news-item-action-button-color); + } + } + } + + &:hover { + background-color: var( + --theme-news-item-action-button-background-color-hover + ); + color: var(--theme-news-item-action-button-color-hover); + + svg { + g { + path { + stroke: var(--theme-news-item-action-button-color-hover); + } + } + } + } + } + &.expanded { + opacity: 1; + } +} diff --git a/source/renderer/app/components/wallet/layouts/WalletWithNavigation.scss b/source/renderer/app/components/wallet/layouts/WalletWithNavigation.scss index c8e1cf7302..c78c217222 100644 --- a/source/renderer/app/components/wallet/layouts/WalletWithNavigation.scss +++ b/source/renderer/app/components/wallet/layouts/WalletWithNavigation.scss @@ -13,7 +13,7 @@ .page { height: calc(100% - 50px); - overflow: auto; + overflow: overlay; position: relative; } diff --git a/source/renderer/app/components/widgets/LoadingSpinner.js b/source/renderer/app/components/widgets/LoadingSpinner.js index baea9b2d7a..0d530970e1 100644 --- a/source/renderer/app/components/widgets/LoadingSpinner.js +++ b/source/renderer/app/components/widgets/LoadingSpinner.js @@ -8,22 +8,26 @@ import styles from './LoadingSpinner.scss'; type Props = { big?: boolean, + medium?: boolean, }; export default class LoadingSpinner extends Component { static defaultProps = { big: false, + medium: false, }; root: ?HTMLElement; render() { - const { big } = this.props; + const { big, medium } = this.props; const icon = big ? spinnerIconBig : spinnerIconSmall; const componentClasses = classnames([ styles.component, - big ? styles.big : styles.small, + big ? styles.big : null, + medium ? styles.medium : null, + !big && !medium ? styles.small : null, ]); return ( diff --git a/source/renderer/app/components/widgets/LoadingSpinner.scss b/source/renderer/app/components/widgets/LoadingSpinner.scss index 878794d1dc..3a79f95ec4 100644 --- a/source/renderer/app/components/widgets/LoadingSpinner.scss +++ b/source/renderer/app/components/widgets/LoadingSpinner.scss @@ -6,6 +6,16 @@ width: 44px; } + &.medium { + height: 24px; + margin: 0; + width: 24px; + + .icon svg path { + fill: var(--theme-loading-spinner-medium-color); + } + } + &.small { height: 30px; width: 30px; diff --git a/source/renderer/app/components/widgets/NewsFeedIcon.js b/source/renderer/app/components/widgets/NewsFeedIcon.js new file mode 100644 index 0000000000..2e00282597 --- /dev/null +++ b/source/renderer/app/components/widgets/NewsFeedIcon.js @@ -0,0 +1,28 @@ +// @flow +import React, { Component } from 'react'; +import SVGInline from 'react-svg-inline'; +import classNames from 'classnames'; +import newsFeedIcon from '../../assets/images/top-bar/news-feed-icon.inline.svg'; +import styles from './NewsFeedIcon.scss'; + +type Props = { + onNewsFeedIconClick: Function, + newsFeedIconClass?: string, + showDot: boolean, +}; + +export default class NewsFeedIcon extends Component { + render() { + const { onNewsFeedIconClick, newsFeedIconClass, showDot } = this.props; + const componentClasses = classNames([ + styles.component, + showDot ? styles.withDot : null, + newsFeedIconClass, + ]); + return ( + + ); + } +} diff --git a/source/renderer/app/components/widgets/NewsFeedIcon.scss b/source/renderer/app/components/widgets/NewsFeedIcon.scss new file mode 100644 index 0000000000..fe9be17d71 --- /dev/null +++ b/source/renderer/app/components/widgets/NewsFeedIcon.scss @@ -0,0 +1,57 @@ +.component { + position: absolute; + right: 29px; + top: 20px; + + &.withDot::after { + background: var(--theme-news-feed-icon-dot-background-color); + border-radius: 12.5px; + content: ''; + display: block; + height: 8px; + pointer-events: none; + position: absolute; + right: 7px; + top: 7px; + width: 8px; + } +} + +.icon { + border-radius: 50%; + cursor: pointer; + display: block; + height: 44px; + position: relative; + width: 44px; + + svg { + height: 22px; + left: 11px; + position: absolute; + top: 10px; + width: 22px; + + path { + stroke: var(--theme-news-feed-icon-color); + } + } + + &:hover { + background-color: var(--theme-news-feed-icon-toggle-hover-background-color); + } +} + +:global { + .connectingScreen { + span svg path { + stroke: var(--theme-news-feed-icon-color-connecting-screen); + } + } + + .syncingScreen { + span svg path { + stroke: var(--theme-news-feed-icon-color-syncing-screen); + } + } +} diff --git a/source/renderer/app/components/widgets/NodeSyncStatusIcon.js b/source/renderer/app/components/widgets/NodeSyncStatusIcon.js index 6c573350dd..c1bac8511f 100644 --- a/source/renderer/app/components/widgets/NodeSyncStatusIcon.js +++ b/source/renderer/app/components/widgets/NodeSyncStatusIcon.js @@ -21,7 +21,6 @@ type Props = { +isSynced: boolean, +syncPercentage: number, }, - isMainnet: boolean, }; export default class NodeSyncStatusIcon extends Component { @@ -30,14 +29,13 @@ export default class NodeSyncStatusIcon extends Component { }; render() { - const { networkStatus, isMainnet } = this.props; + const { networkStatus } = this.props; const { isSynced, syncPercentage } = networkStatus; const { intl } = this.context; const statusIcon = isSynced ? syncedIcon : spinnerIcon; const componentClasses = classNames([ styles.component, isSynced ? styles.synced : styles.syncing, - isMainnet && styles.mainnet, ]); return ( diff --git a/source/renderer/app/components/widgets/NodeSyncStatusIcon.scss b/source/renderer/app/components/widgets/NodeSyncStatusIcon.scss index b09dac8acd..95dfb82be0 100644 --- a/source/renderer/app/components/widgets/NodeSyncStatusIcon.scss +++ b/source/renderer/app/components/widgets/NodeSyncStatusIcon.scss @@ -1,24 +1,12 @@ .component { overflow: visible; position: absolute; - right: 12px; + right: 100px; &:hover { .info { opacity: 1; } } - &.mainnet { - right: 40px; - .icon { - svg { - height: 22px; - width: 22px; - path { - fill: var(--theme-node-sync-icon-color); - } - } - } - } } .icon { @@ -26,6 +14,9 @@ svg { height: 22px; width: 22px; + path { + fill: var(--theme-node-sync-icon-color); + } } } @@ -50,6 +41,7 @@ font-size: 14px; opacity: 0; padding: 10px; + pointer-events: none; position: absolute; right: 0; text-align: right; diff --git a/source/renderer/app/components/widgets/WalletTestEnvironmentLabel.scss b/source/renderer/app/components/widgets/WalletTestEnvironmentLabel.scss index 633f826042..292ae9e52b 100644 --- a/source/renderer/app/components/widgets/WalletTestEnvironmentLabel.scss +++ b/source/renderer/app/components/widgets/WalletTestEnvironmentLabel.scss @@ -1,22 +1,13 @@ .component { background-color: var(--theme-test-environment-label-background-color); - box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.38); + border-radius: 0 0 0 2px; color: var(--theme-test-environment-label-text-color); font-family: var(--font-regular); - font-size: 14px; - height: 34px; - line-height: 1.21; - padding: 8px 50px 0 0; + font-size: 10px; + justify-content: center; + line-height: 12px; + padding: 3px 6px 4px; position: absolute; right: 0; - &::before { - background: url('../../assets/images/top-bar/sticker.svg') 0 0 no-repeat; - background-size: auto 100%; - content: ''; - height: 42px; - position: absolute; - right: 100%; - top: -3px; - width: 27.5px; - } + top: 0; } diff --git a/source/renderer/app/config/news.dummy.json b/source/renderer/app/config/news.dummy.json new file mode 100644 index 0000000000..f19505e52c --- /dev/null +++ b/source/renderer/app/config/news.dummy.json @@ -0,0 +1,161 @@ +{ + "updatedAt": 1569324863299, + "items": [ + { + "title": { + "en-US": "Info 1 in English", + "ja-JP": "Info 1 in Japanese" + }, + "content": { + "en-US": "# h1 English info content 1\nUt consequat semper viverra nam libero justo laoreet sit.", + "ja-JP": "# h1 Japanese info content 1\nUt consequat semper viverra nam libero justo laoreet sit." + }, + "target": { + "daedalusVersion": "0.12.0 - 0.14.0", + "platforms": ["darwin", "win32", "linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1569324863299, + "type": "info" + }, + { + "title": { + "en-US": "Info 2 in English - a little bit longer title", + "ja-JP": "Info 2 in Japanese" + }, + "content": { + "en-US": "# h1 English info content 2\n", + "ja-JP": "# h1 Japanese info content 2\n." + }, + "target": { + "daedalusVersion": "0.12.0 - 0.14.0", + "platforms": ["darwin", "win32", "linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1568979341589, + "type": "info" + }, + { + "title": { + "en-US": "Linux news 1 in English", + "ja-JP": "Linux news 1 in Japanese" + }, + "content": { + "en-US": "# h1 English info content 3\nUt consequat semper viverra nam libero justo laoreet sit.", + "ja-JP": "# h1 Japanese info content 3\nUt consequat semper viverra nam libero justo laoreet sit." + }, + "target": { + "daedalusVersion": "0.12.0 - 0.14.0", + "platforms": ["linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1569152115002, + "type": "info" + }, + { + "title": { + "en-US": "Announcement 1 in English", + "ja-JP": "Announcement 1 in Japanese" + }, + "content": { + "en-US": "# h1 English announcement content 1\nUt consequat semper viverra nam libero justo laoreet sit.", + "ja-JP": "# h1 Japanese announcement content 1\nUt consequat semper viverra nam libero justo laoreet sit." + }, + "target": { + "daedalusVersion": "0.12.0 - 0.14.0", + "platforms": ["darwin", "win32", "linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1569065729169, + "type": "announcement" + }, + { + "title": { + "en-US": "Announcement 2 in English - a little bit longer title", + "ja-JP": "Announcement 2 in Japanese" + }, + "content": { + "en-US": "# h1 English announcement content 2\n", + "ja-JP": "# h1 Japanese announcement content 2\n." + }, + "target": { + "daedalusVersion": "0.12.0 - 0.14.0", + "platforms": ["darwin", "win32", "linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1569238489658, + "type": "announcement" + }, + { + "title": { + "en-US": "Windows announcement 1 in English", + "ja-JP": "Windows announcement 1 in Japanese" + }, + "content": { + "en-US": "# h1 English announcement content 3\nUt consequat semper viverra nam libero justo laoreet sit.", + "ja-JP": "# h1 Japanese announcement content 3\nUt consequat semper viverra nam libero justo laoreet sit." + }, + "target": { + "daedalusVersion": "0.12.0 - 0.14.0", + "platforms": ["linux"] + }, + "action": { + "label": { + "en-US": "Visit en-US", + "ja-JP": "Visit ja-JP" + }, + "url": { + "en-US": "https://iohk.zendesk.com/hc/en-us/articles/", + "ja-JP": "https://iohk.zendesk.com/hc/ja/articles/" + } + }, + "date": 1568892951736, + "type": "announcement" + } + ] +} diff --git a/source/renderer/app/config/timingConfig.js b/source/renderer/app/config/timingConfig.js index d17f8367d5..318fe8d93b 100644 --- a/source/renderer/app/config/timingConfig.js +++ b/source/renderer/app/config/timingConfig.js @@ -21,4 +21,7 @@ export const BLOCK_CONSOLIDATION_API_REQUEST_INTERVAL = 30 * 1000; // 30 seconds export const WALLET_UTXO_API_REQUEST_INTERVAL = 5 * 1000; // 5 seconds | unit: milliseconds export const STAKE_POOL_TOOLTIP_HOVER_WAIT = 700; // 700 milliseconds | unit: milliseconds export const COPY_STATE_DIRECTORY_PATH_NOTIFICATION_DURATION = 10; // unit: seconds +export const NEWS_POLL_INTERVAL = 30 * 60 * 1000; // 30 minutes | unit: milliseconds +export const NEWS_POLL_INTERVAL_ON_ERROR = 1 * 60 * 1000; // 1 minute | unit: milliseconds +export const NEWS_POLL_INTERVAL_ON_INCIDENT = 10 * 60 * 1000; // 10 minutes | unit: milliseconds /* eslint-disable max-len */ diff --git a/source/renderer/app/config/urlsConfig.js b/source/renderer/app/config/urlsConfig.js index 283d7c4da8..b59819416e 100644 --- a/source/renderer/app/config/urlsConfig.js +++ b/source/renderer/app/config/urlsConfig.js @@ -14,6 +14,16 @@ export const TESTNET_LATEST_VERSION_INFO_URL = 'updates-cardano-testnet.s3.amazonaws.com'; export const STAGING_LATEST_VERSION_INFO_URL = 'update-awstest.iohkdev.io'; +export const DEVELOPMENT_NEWS_URL = 'daedalus.io'; +export const MAINNET_NEWS_URL = 'daedalus.io'; +export const TESTNET_NEWS_URL = 'daedalus.io'; +export const STAGING_NEWS_URL = 'daedalus.io'; + +export const DEVELOPMENT_NEWS_HASH_URL = 'daedaluswallet.io'; +export const MAINNET_NEWS_HASH_URL = 'daedaluswallet.io'; +export const TESTNET_NEWS_HASH_URL = 'daedaluswallet.io'; +export const STAGING_NEWS_HASH_URL = 'daedaluswallet.io'; + export const ALLOWED_EXTERNAL_HOSTNAMES = [ MAINNET_EXPLORER_URL, STAGING_EXPLORER_URL, @@ -21,4 +31,12 @@ export const ALLOWED_EXTERNAL_HOSTNAMES = [ MAINNET_LATEST_VERSION_INFO_URL, TESTNET_LATEST_VERSION_INFO_URL, STAGING_LATEST_VERSION_INFO_URL, + DEVELOPMENT_NEWS_URL, + MAINNET_NEWS_URL, + TESTNET_NEWS_URL, + STAGING_NEWS_URL, + DEVELOPMENT_NEWS_HASH_URL, + MAINNET_NEWS_HASH_URL, + TESTNET_NEWS_HASH_URL, + STAGING_NEWS_HASH_URL, ]; diff --git a/source/renderer/app/containers/TopBarContainer.js b/source/renderer/app/containers/TopBarContainer.js index e58008cdb0..25a2a6c5a2 100644 --- a/source/renderer/app/containers/TopBarContainer.js +++ b/source/renderer/app/containers/TopBarContainer.js @@ -3,6 +3,7 @@ import React, { Component } from 'react'; import { observer, inject } from 'mobx-react'; import TopBar from '../components/layout/TopBar'; import NodeSyncStatusIcon from '../components/widgets/NodeSyncStatusIcon'; +import NewsFeedIcon from '../components/widgets/NewsFeedIcon'; import WalletTestEnvironmentLabel from '../components/widgets/WalletTestEnvironmentLabel'; import type { InjectedProps } from '../types/injectedPropsType'; import menuIconOpened from '../assets/images/menu-opened-ic.inline.svg'; @@ -19,7 +20,7 @@ export default class TopBarContainer extends Component { render() { const { actions, stores } = this.props; - const { sidebar, app, networkStatus, wallets } = stores; + const { sidebar, app, networkStatus, wallets, newsFeed } = stores; const { active, isWalletRoute, hasAnyWallets } = wallets; const { currentRoute, @@ -40,6 +41,9 @@ export default class TopBarContainer extends Component { ) : null; + const { unread } = newsFeed.newsFeedData; + const hasUnreadNews = unread.length > 0; + return ( { activeWallet={activeWallet} > {testnetLabel} - + ); diff --git a/source/renderer/app/containers/loading/SyncingConnectingPage.js b/source/renderer/app/containers/loading/SyncingConnectingPage.js index 8736d3c935..9a21a6267e 100644 --- a/source/renderer/app/containers/loading/SyncingConnectingPage.js +++ b/source/renderer/app/containers/loading/SyncingConnectingPage.js @@ -36,6 +36,9 @@ export default class LoadingSyncingConnectingPage extends Component { isNewAppVersionLoaded, } = stores.nodeUpdate; const { hasLoadedCurrentLocale, hasLoadedCurrentTheme } = stores.profile; + const { toggleNewsFeed } = this.props.actions.app; + const { unread } = stores.newsFeed.newsFeedData; + const hasUnreadNews = unread.length > 0; return ( { isNotEnoughDiskSpace={isNotEnoughDiskSpace} isTlsCertInvalid={isTlsCertInvalid} syncPercentage={syncPercentage} + hasUnreadNews={hasUnreadNews} hasLoadedCurrentLocale={hasLoadedCurrentLocale} hasLoadedCurrentTheme={hasLoadedCurrentTheme} isCheckingSystemTime={forceCheckTimeDifferenceRequest.isExecuting} @@ -64,7 +68,9 @@ export default class LoadingSyncingConnectingPage extends Component { onGetAvailableVersions={this.handleGetAvailableVersions} onStatusIconClick={this.openDaedalusDiagnosticsDialog} onDownloadLogs={this.handleDownloadLogs} + onToggleNewsFeedIconClick={toggleNewsFeed.trigger} disableDownloadLogs={stores.app.isDownloadNotificationVisible} + showNewsFeedIcon={!isNodeStopping && !isNodeStopped} /> ); } diff --git a/source/renderer/app/containers/news/NewsFeedContainer.js b/source/renderer/app/containers/news/NewsFeedContainer.js new file mode 100644 index 0000000000..96984b3c40 --- /dev/null +++ b/source/renderer/app/containers/news/NewsFeedContainer.js @@ -0,0 +1,43 @@ +// @flow +import React, { Component } from 'react'; +import { inject, observer } from 'mobx-react'; +import NewsFeed from '../../components/news/NewsFeed'; +import type { InjectedProps } from '../../types/injectedPropsType'; + +@inject('stores', 'actions') +@observer +export default class NewsFeedContainer extends Component { + static defaultProps = { actions: null, stores: null }; + + handleMarkNewsAsRead = (newsTimestamps: number) => { + const { stores } = this.props; + const { markNewsAsRead } = stores.newsFeed; + markNewsAsRead([newsTimestamps]); + }; + + handleGoToRoute = (route: string) => { + const { actions } = this.props; + actions.router.goToRoute.trigger({ route }); + }; + + render() { + const { stores, actions } = this.props; + const { newsFeedData, isLoadingNews } = stores.newsFeed; + const { toggleNewsFeed } = actions.app; + const { openExternalLink, newsFeedIsOpen } = stores.app; + + return ( + + ); + } +} diff --git a/source/renderer/app/containers/news/NewsOverlayContainer.js b/source/renderer/app/containers/news/NewsOverlayContainer.js new file mode 100644 index 0000000000..895ccf280d --- /dev/null +++ b/source/renderer/app/containers/news/NewsOverlayContainer.js @@ -0,0 +1,62 @@ +// @flow +import React, { Component } from 'react'; +import { inject, observer } from 'mobx-react'; +import AlertsOverlay from '../../components/news/AlertsOverlay'; +import IncidentOverlay from '../../components/news/IncidentOverlay'; +import type { InjectedProps } from '../../types/injectedPropsType'; + +@inject('stores', 'actions') +@observer +export default class NewsOverlayContainer extends Component { + static defaultProps = { actions: null, stores: null }; + + render() { + const { app, newsFeed } = this.props.stores; + const { openExternalLink } = app; + const { + closeOpenedAlert, + markNewsAsRead, + newsFeedData, + openedAlert, + } = newsFeed; + const { incident, alerts } = newsFeedData; + const unreadAlerts = alerts.unread; + const allAlertsCount = alerts.all ? alerts.all.length : 0; + + const alertToOpen = []; + if (openedAlert) { + alertToOpen.push(openedAlert); + } + + if (incident) + return ( + + ); + if (unreadAlerts.length > 0) + return ( + + ); + if (alertToOpen.length > 0) { + return ( + + ); + } + return null; + } +} diff --git a/source/renderer/app/domains/News.js b/source/renderer/app/domains/News.js new file mode 100644 index 0000000000..d2d08beb8f --- /dev/null +++ b/source/renderer/app/domains/News.js @@ -0,0 +1,150 @@ +// @flow +import { observable, computed, runInAction } from 'mobx'; +import { get, filter, orderBy, includes } from 'lodash'; +import semver from 'semver'; +import type { NewsTarget, NewsType } from '../api/news/types'; + +export type NewsAction = { + label: string, + url?: string, + route?: string, +}; + +export const NewsTypes: { + INCIDENT: NewsType, + ALERT: NewsType, + ANNOUNCEMENT: NewsType, + INFO: NewsType, +} = { + INCIDENT: 'incident', + ALERT: 'alert', + ANNOUNCEMENT: 'announcement', + INFO: 'info', +}; + +export type NewsTypesStateType = { + all: Array, + unread: Array, + read: Array, +}; + +const { version, platform } = global.environment; + +class News { + @observable title: string; + @observable content: string; + @observable target: NewsTarget; + @observable action: NewsAction; + @observable date: number; + @observable type: NewsType; + @observable read: boolean; + + constructor(data: { + title: string, + content: string, + target: NewsTarget, + action: NewsAction, + date: number, + type: NewsType, + read: boolean, + }) { + Object.assign(this, data); + } +} + +class NewsCollection { + @observable all: Array = []; + + constructor(data: Array) { + // Filter news by palatform and versions + const filteredNews = filter(data, newsItem => { + const availableTargetVersionRange = get( + newsItem, + ['target', 'daedalusVersion'], + null + ); + const targetPlatforms = get(newsItem, ['target', 'platforms']); + return ( + (!availableTargetVersionRange || + (availableTargetVersionRange && + semver.satisfies(version, availableTargetVersionRange))) && + (platform === 'browser' || includes(targetPlatforms, platform)) + ); + }); + const orderedNews = orderBy(filteredNews, 'date', 'desc'); + runInAction(() => { + this.all = orderedNews; + }); + } + + @computed get incident(): ?News { + const incidents = filter( + this.all, + item => item.type === NewsTypes.INCIDENT + ); + const lastIncidentIndex = + incidents.length > 0 ? incidents.length - 1 : null; + + if (lastIncidentIndex !== null) { + return incidents[lastIncidentIndex]; + } + return null; + } + + @computed get alerts(): NewsTypesStateType { + const alerts = filter(this.all, item => item.type === NewsTypes.ALERT); + // Order alerts from newest to oldest + const orderedAlerts = orderBy(alerts, 'date', 'asc'); + + const obj = new NewsCollection(orderedAlerts); + return { + all: obj.all, + unread: obj.unread, + read: obj.read, + }; + } + + @computed get announcements(): NewsTypesStateType { + const announcements = filter( + this.all, + item => item.type === NewsTypes.ANNOUNCEMENT && !item.read + ); + const obj = new NewsCollection(announcements); + return { + all: obj.all, + unread: obj.unread, + read: obj.read, + }; + } + + @computed get infos(): NewsTypesStateType { + const infos = filter( + this.all, + item => item.type === NewsTypes.INFO && !item.read + ); + + const obj = new NewsCollection(infos); + return { + all: obj.all, + unread: obj.unread, + read: obj.read, + }; + } + + @computed get unread(): Array { + const unread = filter(this.all, item => !item.read); + // Order unread from newest to oldest + return orderBy(unread, 'date', 'asc'); + } + + @computed get read(): Array { + const read = filter(this.all, item => item.read); + // Order read from newest to oldest + return orderBy(read, 'date', 'asc'); + } +} + +export default { + News, + NewsCollection, +}; diff --git a/source/renderer/app/i18n/locales/de-DE.json b/source/renderer/app/i18n/locales/de-DE.json index 70e90b10b6..2e8944b89d 100644 --- a/source/renderer/app/i18n/locales/de-DE.json +++ b/source/renderer/app/i18n/locales/de-DE.json @@ -161,6 +161,9 @@ "manualUpdate.description1": "!!!You are experiencing network connection issues, and you are not running the latest Daedalus version. Automatic updates are unavailable while Daedalus is not connected to Cardano network.", "manualUpdate.description2": "!!!You are currently running {currentAppVersion} version of Daedalus, and {availableAppVersion} version is available. Please manually update to that version since it may resolve your connecting issues.", "manualUpdate.title": "!!!Software update is available", + "news.newsfeed.empty": "!!!Newsfeed is empty", + "news.newsfeed.noFetch": "!!!Trying to fetch the newsfeed...", + "news.newsfeed.title": "!!!Newsfeed", "noDiskSpace.error.overlayContent": "!!!There is not enough disk space left on your device.
Daedalus requires at least {diskSpaceRequired} to operate. Please free up some disk space to continue.", "noDiskSpace.error.overlayTitle": "!!!Not enough disk space", "paper.wallet.create.certificate.completion.dialog.addressCopiedLabel": "!!!copied", diff --git a/source/renderer/app/i18n/locales/defaultMessages.json b/source/renderer/app/i18n/locales/defaultMessages.json index 1cab4bc44e..04a2b1d6cc 100644 --- a/source/renderer/app/i18n/locales/defaultMessages.json +++ b/source/renderer/app/i18n/locales/defaultMessages.json @@ -1122,6 +1122,53 @@ ], "path": "source/renderer/app/components/loading/system-time-error/SystemTimeError.json" }, + { + "descriptors": [ + { + "defaultMessage": "Newsfeed is empty", + "description": "Newsfeed is empty", + "end": { + "column": 3, + "line": 19 + }, + "file": "source/renderer/app/components/news/NewsFeed.js", + "id": "news.newsfeed.empty", + "start": { + "column": 17, + "line": 15 + } + }, + { + "defaultMessage": "Trying to fetch the newsfeed...", + "description": "Trying to fetch the newsfeed...", + "end": { + "column": 3, + "line": 24 + }, + "file": "source/renderer/app/components/news/NewsFeed.js", + "id": "news.newsfeed.noFetch", + "start": { + "column": 19, + "line": 20 + } + }, + { + "defaultMessage": "Newsfeed", + "description": "Newsfeed", + "end": { + "column": 3, + "line": 29 + }, + "file": "source/renderer/app/components/news/NewsFeed.js", + "id": "news.newsfeed.title", + "start": { + "column": 17, + "line": 25 + } + } + ], + "path": "source/renderer/app/components/news/NewsFeed.json" + }, { "descriptors": [ { diff --git a/source/renderer/app/i18n/locales/en-US.json b/source/renderer/app/i18n/locales/en-US.json index afa6a51096..e4d6cc6415 100644 --- a/source/renderer/app/i18n/locales/en-US.json +++ b/source/renderer/app/i18n/locales/en-US.json @@ -161,6 +161,9 @@ "manualUpdate.description1": "You are experiencing network connection issues, and you are not running the latest Daedalus version. Automatic updates are unavailable while Daedalus is not connected to Cardano network.", "manualUpdate.description2": "You are currently running {currentAppVersion} version of Daedalus, and {availableAppVersion} version is available. Please manually update to that version since it may resolve your connecting issues.", "manualUpdate.title": "Software update is available", + "news.newsfeed.empty": "Newsfeed is empty", + "news.newsfeed.noFetch": "Trying to fetch the newsfeed...", + "news.newsfeed.title": "Newsfeed", "noDiskSpace.error.overlayContent": "Daedalus requires at least {diskSpaceRequired} of hard drive space to operate. Your computer is missing {diskSpaceMissing} of available space. Please delete some files to increase available hard drive space to continue using Daedalus.

It is recommended to have at least 15% of hard drive space available ({diskSpaceRecommended} in your case) for normal and stable operation of the operating system and installed programs. We strongly recommend that you free up at least that amount of space from your hard drive.", "noDiskSpace.error.overlayTitle": "Daedalus requires more hard drive space", "paper.wallet.create.certificate.completion.dialog.addressCopiedLabel": "copied", diff --git a/source/renderer/app/i18n/locales/hr-HR.json b/source/renderer/app/i18n/locales/hr-HR.json index aa17fad81f..5add67dc11 100644 --- a/source/renderer/app/i18n/locales/hr-HR.json +++ b/source/renderer/app/i18n/locales/hr-HR.json @@ -161,6 +161,9 @@ "manualUpdate.description1": "!!!You are experiencing network connection issues, and you are not running the latest Daedalus version. Automatic updates are unavailable while Daedalus is not connected to Cardano network.", "manualUpdate.description2": "!!!You are currently running {currentAppVersion} version of Daedalus, and {availableAppVersion} version is available. Please manually update to that version since it may resolve your connecting issues.", "manualUpdate.title": "!!!Software update is available", + "news.newsfeed.empty": "!!!Newsfeed is empty", + "news.newsfeed.noFetch": "!!!Trying to fetch the newsfeed...", + "news.newsfeed.title": "!!!Newsfeed", "noDiskSpace.error.overlayContent": "!!!There is not enough disk space left on your device.
Daedalus requires at least {diskSpaceRequired} to operate. Please free up some disk space to continue.", "noDiskSpace.error.overlayTitle": "!!!Not enough disk space", "paper.wallet.create.certificate.completion.dialog.addressCopiedLabel": "!!!copied", diff --git a/source/renderer/app/i18n/locales/ja-JP.json b/source/renderer/app/i18n/locales/ja-JP.json index 0b92b7cb78..c90fd6334f 100644 --- a/source/renderer/app/i18n/locales/ja-JP.json +++ b/source/renderer/app/i18n/locales/ja-JP.json @@ -161,6 +161,9 @@ "manualUpdate.description1": "ネットワークへの接続に不具合があり、Daedalusウォレットの最新バージョンが実行されていません。DaedalusがCardanoネットワークに接続されていない間、自動更新は実行できません。", "manualUpdate.description2": "ご使用のDaedalusはバージョン{currentAppVersion}です。現在{availableAppVersion}をご利用いただけます。手動で最新版に更新すると、接続の不具合を解消できる場合があります。", "manualUpdate.title": "ソフトウェアが更新できます", + "news.newsfeed.empty": "ニュースフィードは空です", + "news.newsfeed.noFetch": "ニュースフィードを読み込んでいます…", + "news.newsfeed.title": "ニュースフィード", "noDiskSpace.error.overlayContent": "ダイダロスを動作させるには、ハードディスクに少なくとも{diskSpaceRequired}の空き容量が必要です。お使いのコンピュータは、空き容量が{diskSpaceMissing}不足しています。ダイダロスのご利用を続けるためには、ファイルをいくつか削除して空き容量を増やしてください。

オペレーティングシステムとインストール済みプログラムを正常かつ安定した状態で動作させるには、ハードディスクに少なくとも15％（お使いのコンピュータの場合は{diskSpaceRecommended}）の空き容量が必要です。ハードディスクに少なくともこの程度の空き容量を確保することを強くお勧めします。", "noDiskSpace.error.overlayTitle": "ダイダロスを動作させるには、ハードディスクの空き容量が足りません", "paper.wallet.create.certificate.completion.dialog.addressCopiedLabel": "コピーされました", diff --git a/source/renderer/app/i18n/locales/ko-KR.json b/source/renderer/app/i18n/locales/ko-KR.json index ef48e0800d..2121e47441 100644 --- a/source/renderer/app/i18n/locales/ko-KR.json +++ b/source/renderer/app/i18n/locales/ko-KR.json @@ -161,6 +161,9 @@ "manualUpdate.description1": "!!!You are experiencing network connection issues, and you are not running the latest Daedalus version. Automatic updates are unavailable while Daedalus is not connected to Cardano network.", "manualUpdate.description2": "!!!You are currently running {currentAppVersion} version of Daedalus, and {availableAppVersion} version is available. Please manually update to that version since it may resolve your connecting issues.", "manualUpdate.title": "!!!Software update is available", + "news.newsfeed.empty": "!!!Newsfeed is empty", + "news.newsfeed.noFetch": "!!!Trying to fetch the newsfeed...", + "news.newsfeed.title": "!!!Newsfeed", "noDiskSpace.error.overlayContent": "!!!There is not enough disk space left on your device.
Daedalus requires at least {diskSpaceRequired} to operate. Please free up some disk space to continue.", "noDiskSpace.error.overlayTitle": "!!!Not enough disk space", "paper.wallet.create.certificate.completion.dialog.addressCopiedLabel": "!!!copied", diff --git a/source/renderer/app/i18n/locales/zh-CN.json b/source/renderer/app/i18n/locales/zh-CN.json index 3b1eb63a04..841dc90a8d 100644 --- a/source/renderer/app/i18n/locales/zh-CN.json +++ b/source/renderer/app/i18n/locales/zh-CN.json @@ -161,6 +161,9 @@ "manualUpdate.description1": "!!!You are experiencing network connection issues, and you are not running the latest Daedalus version. Automatic updates are unavailable while Daedalus is not connected to Cardano network.", "manualUpdate.description2": "!!!You are currently running {currentAppVersion} version of Daedalus, and {availableAppVersion} version is available. Please manually update to that version since it may resolve your connecting issues.", "manualUpdate.title": "!!!Software update is available", + "news.newsfeed.empty": "!!!Newsfeed is empty", + "news.newsfeed.noFetch": "!!!Trying to fetch the newsfeed...", + "news.newsfeed.title": "!!!Newsfeed", "noDiskSpace.error.overlayContent": "!!!There is not enough disk space left on your device.
Daedalus requires at least {diskSpaceRequired} to operate. Please free up some disk space to continue.", "noDiskSpace.error.overlayTitle": "!!!Not enough disk space", "paper.wallet.create.certificate.completion.dialog.addressCopiedLabel": "!!!copied", diff --git a/source/renderer/app/stores/AppStore.js b/source/renderer/app/stores/AppStore.js index 252fdd61c6..2b08abc365 100644 --- a/source/renderer/app/stores/AppStore.js +++ b/source/renderer/app/stores/AppStore.js @@ -22,6 +22,7 @@ export default class AppStore extends Store { @observable numberOfEpochsConsolidated: number = 0; @observable previousRoute: string = ROUTES.ROOT; @observable activeDialog: ApplicationDialog = null; + @observable newsFeedIsOpen: boolean = false; setup() { this.actions.router.goToRoute.listen(this._updateRouteLocation); @@ -55,6 +56,9 @@ export default class AppStore extends Store { this.actions.app.setNotificationVisibility.listen( this._setDownloadNotification ); + + this.actions.app.toggleNewsFeed.listen(this._toggleNewsFeed); + toggleUiPartChannel.onReceive(this.toggleUiPart); showUiPartChannel.onReceive(this.showUiPart); } @@ -76,6 +80,10 @@ export default class AppStore extends Store { return this.activeDialog === dialog; }; + @action _toggleNewsFeed = () => { + this.newsFeedIsOpen = !this.newsFeedIsOpen; + }; + /** * Toggles the dialog specified by the constant string identifier. */ diff --git a/source/renderer/app/stores/NewsFeedStore.js b/source/renderer/app/stores/NewsFeedStore.js new file mode 100644 index 0000000000..cac103f616 --- /dev/null +++ b/source/renderer/app/stores/NewsFeedStore.js @@ -0,0 +1,193 @@ +// @flow +import { observable, action, runInAction, computed } from 'mobx'; +import { map, get, find } from 'lodash'; +import Store from './lib/Store'; +import Request from './lib/LocalizedRequest'; +import { + NEWS_POLL_INTERVAL, + NEWS_POLL_INTERVAL_ON_ERROR, + NEWS_POLL_INTERVAL_ON_INCIDENT, +} from '../config/timingConfig'; +import News, { NewsTypes } from '../domains/News'; +import type { + GetNewsResponse, + GetReadNewsResponse, + NewsItem, + NewsTimestamp, + MarkNewsAsReadResponse, +} from '../api/news/types'; + +const { isTest } = global.environment; + +export default class NewsFeedStore extends Store { + @observable rawNews: ?Array = null; + @observable newsUpdatedAt: ?Date = null; + @observable fetchingNewsFailed = false; + @observable getNewsRequest: Request = new Request( + this.api.ada.getNews + ); + @observable getReadNewsRequest: Request = new Request( + this.api.localStorage.getReadNews + ); + @observable + markNewsAsReadRequest: Request = new Request( + this.api.localStorage.markNewsAsRead + ); + @observable openedAlert: ?News.News = null; + + pollingNewsIntervalId: ?IntervalID = null; + pollingNewsOnErrorIntervalId: ?IntervalID = null; + pollingNewsOnIncidentIntervalId: ?IntervalID = null; + + setup() { + // Fetch news on app start + this.getNews(); + if (!isTest) { + // Refetch news every 30 mins + this.pollingNewsIntervalId = setInterval( + this.getNews, + NEWS_POLL_INTERVAL + ); + } + } + + @action getNews = async () => { + let rawNews; + try { + rawNews = await this.getNewsRequest.execute().promise; + const hasIncident = find( + rawNews.items, + news => news.type === NewsTypes.INCIDENT + ); + + // Reset "getNews" fast polling interval if set and set regular polling interval + if (!isTest && this.pollingNewsOnErrorIntervalId) { + // Reset fast error interval + clearInterval(this.pollingNewsOnErrorIntervalId); + this.pollingNewsOnErrorIntervalId = null; + + if (!hasIncident) { + // set 30 min time interval if NO incidents + this.pollingNewsIntervalId = setInterval( + this.getNews, + NEWS_POLL_INTERVAL + ); + } + } + + // If incident occured, reset regular interval and set faster incident interval + if (hasIncident && !this.pollingNewsOnIncidentIntervalId) { + // Clear regular interval if set + if (this.pollingNewsIntervalId) { + clearInterval(this.pollingNewsIntervalId); + this.pollingNewsIntervalId = null; + } + + // Set 10 min time interval and + this.pollingNewsOnIncidentIntervalId = setInterval( + this.getNews, + NEWS_POLL_INTERVAL_ON_INCIDENT + ); + } + + // If no incidents and incident poller interval active, reset interval and set regular one + if (!hasIncident && this.pollingNewsOnIncidentIntervalId) { + // Clear regulat interval + if (this.pollingNewsOnIncidentIntervalId) { + clearInterval(this.pollingNewsOnIncidentIntervalId); + this.pollingNewsOnIncidentIntervalId = null; + } + + // Set 30 min time interval + this.pollingNewsIntervalId = setInterval( + this.getNews, + NEWS_POLL_INTERVAL + ); + } + + this._setFetchingNewsFailed(false); + } catch (error) { + // Decrease "getNews" fetching timer in case we got an error and there are no initial news set in store + if (!isTest && !this.rawNews) { + // Reset all regular intervals + if (this.pollingNewsIntervalId) { + clearInterval(this.pollingNewsIntervalId); + this.pollingNewsIntervalId = null; + } + if (this.pollingNewsOnIncidentIntervalId) { + clearInterval(this.pollingNewsOnIncidentIntervalId); + this.pollingNewsOnIncidentIntervalId = null; + } + + // Set fast ERROR interval + if (!this.pollingNewsOnErrorIntervalId) { + this.pollingNewsOnErrorIntervalId = setInterval( + this.getNews, + NEWS_POLL_INTERVAL_ON_ERROR + ); + } + } + this._setFetchingNewsFailed(true); + } + + await this.getReadNewsRequest.execute(); + + if (rawNews) { + runInAction('set news data', () => { + this.rawNews = get(rawNews, 'items', []); + this.newsUpdatedAt = get(rawNews, 'updatedAt', null); + }); + } + }; + + @action markNewsAsRead = async newsTimestamps => { + // Set news timestamp to LC + await this.markNewsAsReadRequest.execute(newsTimestamps); + // Get all read news to force @computed change + await this.getReadNewsRequest.execute(); + }; + + @action openAlert = (newsTimestamp: NewsTimestamp) => { + if (this.getNewsRequest.wasExecuted) { + const alertToOpen = this.newsFeedData.alerts.all.find( + newsItem => newsItem.date === newsTimestamp + ); + if (alertToOpen) { + this.openedAlert = alertToOpen; + } + } + }; + + @action closeOpenedAlert = () => { + this.openedAlert = null; + }; + + @action _setFetchingNewsFailed = (fetchingNewsFailed: boolean) => { + this.fetchingNewsFailed = fetchingNewsFailed; + }; + + @computed get newsFeedData(): News.NewsCollection { + const { currentLocale } = this.stores.profile; + const readNews = this.getReadNewsRequest.result; + let news = []; + if (this.getNewsRequest.wasExecuted) { + news = map(this.rawNews, item => ({ + ...item, + title: item.title[currentLocale], + content: item.content[currentLocale], + action: { + ...item.action, + label: item.action.label[currentLocale], + url: get(item, ['action', 'url', currentLocale]), + }, + read: readNews.includes(item.date), + })); + } + + return new News.NewsCollection(news); + } + + @computed get isLoadingNews() { + return this.fetchingNewsFailed || !this.rawNews; + } +} diff --git a/source/renderer/app/stores/index.js b/source/renderer/app/stores/index.js index ab2791e54c..366a26b82c 100644 --- a/source/renderer/app/stores/index.js +++ b/source/renderer/app/stores/index.js @@ -5,6 +5,7 @@ import AddressesStore from './AddressesStore'; import AppStore from './AppStore'; import BlockConsolidationStore from './BlockConsolidationStore'; import NetworkStatusStore from './NetworkStatusStore'; +import NewsFeedStore from './NewsFeedStore'; import NodeUpdateStore from './NodeUpdateStore'; import ProfileStore from './ProfileStore'; import SidebarStore from './SidebarStore'; @@ -22,6 +23,7 @@ export const storeClasses = { app: AppStore, blockConsolidation: BlockConsolidationStore, networkStatus: NetworkStatusStore, + newsFeed: NewsFeedStore, nodeUpdate: NodeUpdateStore, profile: ProfileStore, sidebar: SidebarStore, @@ -40,6 +42,7 @@ export type StoresMap = { app: AppStore, blockConsolidation: BlockConsolidationStore, networkStatus: NetworkStatusStore, + newsFeed: NewsFeedStore, nodeUpdate: NodeUpdateStore, profile: ProfileStore, router: Object, @@ -80,6 +83,7 @@ export default action( app: createStoreInstanceOf(AppStore), blockConsolidation: createStoreInstanceOf(BlockConsolidationStore), networkStatus: createStoreInstanceOf(NetworkStatusStore), + newsFeed: createStoreInstanceOf(NewsFeedStore), nodeUpdate: createStoreInstanceOf(NodeUpdateStore), profile: createStoreInstanceOf(ProfileStore), router, diff --git a/source/renderer/app/themes/daedalus/cardano.js b/source/renderer/app/themes/daedalus/cardano.js index 001d2a8615..f61d6ac33c 100644 --- a/source/renderer/app/themes/daedalus/cardano.js +++ b/source/renderer/app/themes/daedalus/cardano.js @@ -296,8 +296,9 @@ export const CARDANO_THEME_OUTPUT = { '--theme-loading-status-icons-off-color': '#ea4c5b', '--theme-loading-status-icons-unloaded-loading-color': '#fafbfc', '--theme-loading-status-icons-unloaded-syncing-color': '#5e6066', - '--theme-loading-status-icons-tooltip-color': '#5E6066', + '--theme-loading-status-icons-tooltip-color': '#5e6066', '--theme-loading-spinner-color': '#5e6066', + '--theme-loading-spinner-medium-color': '#fff', }, manualUpdate: { '--theme-manual-update-overlay-background-color': 'rgba(32, 34, 37, 0.96)', @@ -355,6 +356,37 @@ export const CARDANO_THEME_OUTPUT = { '--theme-network-window-button-background-color-active': 'rgba(250, 251, 252, 0.8)', }, + newsFeed: { + '--theme-news-feed-background-color': '#34383d', + '--theme-news-feed-badge-background-color': '#ea4c5b', + '--theme-news-feed-badge-text-color': '#ffffff', + '--theme-news-feed-box-shadow-color': '-5px 0 20px 0 rgba(0, 0, 0, 0.25)', + '--theme-news-feed-header-background-color': '#202225', + '--theme-news-feed-header-title-color': '#fafbfc', + '--theme-news-feed-icon-close-button-color': '#fff', + '--theme-news-feed-icon-close-hover-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-icon-color': '#ffffff', + '--theme-news-feed-icon-color-connecting-screen': '#ffffff', + '--theme-news-feed-icon-color-syncing-screen': '#5e6066', + '--theme-news-feed-icon-dot-background-color': '#ea4c5b', + '--theme-news-feed-icon-toggle-hover-background-color': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-no-fetch-color': '#fafbfc', + }, + newsItem: { + '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-item-action-button-background-color-hover': '#ffffff', + '--theme-news-item-action-button-border-color': '#ffffff', + '--theme-news-item-action-button-color': '#ffffff', + '--theme-news-item-action-button-color-hover': '#202225', + '--theme-news-item-alert-background-color': 'rgba(242, 162, 24, 0.5)', + '--theme-news-item-announcement-background-color': + 'rgba(31, 193, 195, 0.2)', + '--theme-news-item-badge-color': '#ea4c5b', + '--theme-news-item-content-link-color': '#ffffff', + '--theme-news-item-info-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-item-title-color': '#ffffff', + }, nodeUpdate: { '--theme-node-update-background-color': '#efefef', '--theme-node-update-title-color': '#5e6066', @@ -564,8 +596,8 @@ export const CARDANO_THEME_OUTPUT = { '--rp-tooltip-text-color': '#fafbfc', }, scrollbar: { - '--theme-scrollbar-thumb-background': 'rgba(200, 204, 206, 0.3)', - '--theme-scrollbar-thumb-background-hover': 'rgba(200, 204, 206, 0.5)', + '--theme-scrollbar-thumb-background': 'rgba(94, 96, 102, 0.3)', + '--theme-scrollbar-thumb-background-hover': 'rgba(94, 96, 102, 0.5)', }, sendConfirmation: { '--theme-send-confirmation-dialog-send-values-color': '#ea4c5b', @@ -707,7 +739,7 @@ export const CARDANO_THEME_OUTPUT = { }, topBar: { '--theme-topbar-background-color': '#202225', - '--theme-topbar-layout-body-background-color': '#ebeff2', + '--theme-topbar-layout-body-background-color': '#efefef', '--theme-topbar-wallet-name-color': '#fafbfc', '--theme-topbar-wallet-info-color': '#fafbfc', '--theme-topbar-logo-color': 'rgb(250, 251, 252)', diff --git a/source/renderer/app/themes/daedalus/dark-blue.js b/source/renderer/app/themes/daedalus/dark-blue.js index 8a0589862a..3b80c0fa62 100644 --- a/source/renderer/app/themes/daedalus/dark-blue.js +++ b/source/renderer/app/themes/daedalus/dark-blue.js @@ -300,6 +300,7 @@ export const DARK_BLUE_THEME_OUTPUT = { '--theme-loading-status-icons-unloaded-syncing-color': '#fafbfc', '--theme-loading-status-icons-tooltip-color': '#4b5a68', '--theme-loading-spinner-color': '#e9f4fe', + '--theme-loading-spinner-medium-color': '#e9f4fe', }, manualUpdate: { '--theme-manual-update-overlay-background-color': 'rgba(38, 51, 69, 0.96)', @@ -357,6 +358,37 @@ export const DARK_BLUE_THEME_OUTPUT = { '--theme-network-window-button-background-color-active': 'rgba(250, 251, 252, 0.8)', }, + newsFeed: { + '--theme-news-feed-background-color': '#263345', + '--theme-news-feed-badge-background-color': '#ea4c5b', + '--theme-news-feed-badge-text-color': '#e9f4fe', + '--theme-news-feed-box-shadow-color': '-5px 0 20px 0 rgba(0, 0, 0, 0.25)', + '--theme-news-feed-header-background-color': '#1b2430', + '--theme-news-feed-header-title-color': '#fafbfc', + '--theme-news-feed-icon-close-button-color': '#fff', + '--theme-news-feed-icon-close-hover-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-icon-color': '#e9f4fe', + '--theme-news-feed-icon-color-connecting-screen': '#e9f4fe', + '--theme-news-feed-icon-color-syncing-screen': '#e9f4fe', + '--theme-news-feed-icon-dot-background-color': '#ea4c5b', + '--theme-news-feed-icon-toggle-hover-background-color': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-no-fetch-color': '#fafbfc', + }, + newsItem: { + '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-item-action-button-background-color-hover': '#fafbfc', + '--theme-news-item-action-button-border-color': '#fafbfc', + '--theme-news-item-action-button-color': '#fafbfc', + '--theme-news-item-action-button-color-hover': '#263345', + '--theme-news-item-alert-background-color': 'rgba(242, 162, 24, 0.5)', + '--theme-news-item-announcement-background-color': + 'rgba(31, 193, 195, 0.2)', + '--theme-news-item-badge-color': '#ea4c5b', + '--theme-news-item-content-link-color': '#fafbfc', + '--theme-news-item-info-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-item-title-color': '#fafbfc', + }, nodeUpdate: { '--theme-node-update-background-color': '#536370', '--theme-node-update-title-color': '#e9f4fe', diff --git a/source/renderer/app/themes/daedalus/dark-cardano.js b/source/renderer/app/themes/daedalus/dark-cardano.js index 18a83aa579..f523359733 100644 --- a/source/renderer/app/themes/daedalus/dark-cardano.js +++ b/source/renderer/app/themes/daedalus/dark-cardano.js @@ -289,6 +289,7 @@ export const DARK_CARDANO_THEME_OUTPUT = { '--theme-loading-status-icons-unloaded-syncing-color': '#ffffff', '--theme-loading-status-icons-tooltip-color': '#56576b', '--theme-loading-spinner-color': '#ffffff', + '--theme-loading-spinner-medium-color': '#ffffff', }, manualUpdate: { '--theme-manual-update-overlay-background-color': '#36374df5', @@ -340,6 +341,37 @@ export const DARK_CARDANO_THEME_OUTPUT = { '--theme-network-window-button-background-color-hover': '#afafb899', '--theme-network-window-button-background-color-active': '#afafb8cc', }, + newsFeed: { + '--theme-news-feed-background-color': '#2a2b3c', + '--theme-news-feed-badge-background-color': '#ea4c5b', + '--theme-news-feed-badge-text-color': '#ffffff', + '--theme-news-feed-box-shadow-color': '-5px 0 20px 0 rgba(0, 0, 0, 0.25)', + '--theme-news-feed-header-background-color': '#20212e', + '--theme-news-feed-header-title-color': '#fafbfc', + '--theme-news-feed-icon-close-button-color': '#ffffff', + '--theme-news-feed-icon-close-hover-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-icon-color': '#ffffff', + '--theme-news-feed-icon-color-connecting-screen': '#ffffff', + '--theme-news-feed-icon-color-syncing-screen': '#ffffff', + '--theme-news-feed-icon-dot-background-color': '#ea4c5b', + '--theme-news-feed-icon-toggle-hover-background-color': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-no-fetch-color': '#fafbfc', + }, + newsItem: { + '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-item-action-button-background-color-hover': '#ffffff', + '--theme-news-item-action-button-border-color': '#ffffff', + '--theme-news-item-action-button-color': '#ffffff', + '--theme-news-item-action-button-color-hover': '#2a2b3c', + '--theme-news-item-alert-background-color': 'rgba(242, 162, 24, 0.5)', + '--theme-news-item-announcement-background-color': + 'rgba(31, 193, 195, 0.2)', + '--theme-news-item-badge-color': '#ea4c5b', + '--theme-news-item-content-link-color': '#ffffff', + '--theme-news-item-info-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-item-title-color': '#ffffff', + }, nodeUpdate: { '--theme-node-update-background-color': '#121326', '--theme-node-update-title-color': '#ffffff', @@ -695,7 +727,7 @@ export const DARK_CARDANO_THEME_OUTPUT = { }, topBar: { '--theme-topbar-background-color': '#2a2b3c', - '--theme-topbar-layout-body-background-color': '#36374d', + '--theme-topbar-layout-body-background-color': '#121326', '--theme-topbar-wallet-name-color': '#ffffff', '--theme-topbar-wallet-info-color': '#ffffff', '--theme-topbar-logo-color': '#ffffff', diff --git a/source/renderer/app/themes/daedalus/light-blue.js b/source/renderer/app/themes/daedalus/light-blue.js index 9bfd6edebc..8f0e0be4be 100644 --- a/source/renderer/app/themes/daedalus/light-blue.js +++ b/source/renderer/app/themes/daedalus/light-blue.js @@ -296,6 +296,7 @@ export const LIGHT_BLUE_THEME_OUTPUT = { '--theme-loading-status-icons-unloaded-syncing-color': '#5e6066', '--theme-loading-status-icons-tooltip-color': '#062148', '--theme-loading-spinner-color': '#5e6066', + '--theme-loading-spinner-medium-color': '#fafbfc', }, manualUpdate: { '--theme-manual-update-overlay-background-color': 'rgba(36, 62, 98, 0.96)', @@ -352,6 +353,37 @@ export const LIGHT_BLUE_THEME_OUTPUT = { '--theme-network-window-button-background-color-active': 'rgba(250, 251, 252, 0.8)', }, + newsFeed: { + '--theme-news-feed-background-color': '#233856', + '--theme-news-feed-badge-background-color': '#ea4c5b', + '--theme-news-feed-badge-text-color': '#fafbfc', + '--theme-news-feed-box-shadow-color': '-5px 0 20px 0 rgba(0, 0, 0, 0.25)', + '--theme-news-feed-header-background-color': '#1e304a', + '--theme-news-feed-header-title-color': '#fafbfc', + '--theme-news-feed-icon-close-button-color': '#fff', + '--theme-news-feed-icon-close-hover-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-icon-color': '#fafbfc', + '--theme-news-feed-icon-color-connecting-screen': '#fafbfc', + '--theme-news-feed-icon-color-syncing-screen': '#5e6066', + '--theme-news-feed-icon-dot-background-color': '#ea4c5b', + '--theme-news-feed-icon-toggle-hover-background-color': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-no-fetch-color': '#fafbfc', + }, + newsItem: { + '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-item-action-button-background-color-hover': '#fafbfc', + '--theme-news-item-action-button-border-color': '#fafbfc', + '--theme-news-item-action-button-color': '#fafbfc', + '--theme-news-item-action-button-color-hover': '#243e62', + '--theme-news-item-alert-background-color': 'rgba(242, 162, 24, 0.5)', + '--theme-news-item-announcement-background-color': + 'rgba(31, 193, 195, 0.2)', + '--theme-news-item-badge-color': '#ea4c5b', + '--theme-news-item-content-link-color': '#fafbfc', + '--theme-news-item-info-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-item-title-color': '#fafbfc', + }, nodeUpdate: { '--theme-node-update-background-color': '#ebeff2', '--theme-node-update-title-color': '#5e6066', @@ -561,8 +593,8 @@ export const LIGHT_BLUE_THEME_OUTPUT = { '--rp-tooltip-text-color': '#fafbfc', }, scrollbar: { - '--theme-scrollbar-thumb-background': 'rgba(200, 204, 206, 0.3)', - '--theme-scrollbar-thumb-background-hover': 'rgba(200, 204, 206, 0.5)', + '--theme-scrollbar-thumb-background': 'rgba(94, 96, 102, 0.3)', + '--theme-scrollbar-thumb-background-hover': 'rgba(94, 96, 102, 0.5)', }, sendConfirmation: { '--theme-send-confirmation-dialog-send-values-color': '#ea4c5b', diff --git a/source/renderer/app/themes/daedalus/white.js b/source/renderer/app/themes/daedalus/white.js index 36222c940d..c7ab57083d 100644 --- a/source/renderer/app/themes/daedalus/white.js +++ b/source/renderer/app/themes/daedalus/white.js @@ -283,6 +283,7 @@ export const WHITE_THEME_OUTPUT = { '--theme-loading-status-icons-unloaded-syncing-color': '#2d2d2d', '--theme-loading-status-icons-tooltip-color': '#2d2d2d', '--theme-loading-spinner-color': '#2d2d2d', + '--theme-loading-spinner-medium-color': '#2d2d2d', }, manualUpdate: { '--theme-manual-update-overlay-background-color': '#fffffff5', @@ -337,6 +338,39 @@ export const WHITE_THEME_OUTPUT = { '--theme-network-window-button-background-color-active': 'rgba(94, 96, 102, 0.8)', }, + newsFeed: { + '--theme-news-feed-background-color': '#f4f4f4', + '--theme-news-feed-badge-background-color': '#ea4c5b', + '--theme-news-feed-badge-text-color': '#ffffff', + '--theme-news-feed-box-shadow-color': '-5px 0 20px 0 rgba(0, 0, 0, 0.08)', + '--theme-news-feed-header-background-color': '#e9e9e9', + '--theme-news-feed-header-title-color': '#2d2d2d', + '--theme-news-feed-icon-close-button-color': '#2d2d2d', + '--theme-news-feed-icon-close-hover-background-color': + 'rgba(41, 181, 149, 0.1)', + '--theme-news-feed-icon-color': '#2d2d2d', + '--theme-news-feed-icon-color-connecting-screen': '#2d2d2d', + '--theme-news-feed-icon-color-syncing-screen': '#2d2d2d', + '--theme-news-feed-icon-dot-background-color': '#ea4c5b', + '--theme-news-feed-icon-toggle-hover-background-color': + 'rgba(41, 181, 149, 0.1)', + '--theme-news-feed-no-fetch-color': '#2d2d2d', + }, + newsItem: { + '--theme-news-item-action-button-background-color': + 'rgba(41, 181, 149, 0.1)', + '--theme-news-item-action-button-background-color-hover': '#29b595', + '--theme-news-item-action-button-border-color': '#29b595', + '--theme-news-item-action-button-color': '#29b595', + '--theme-news-item-action-button-color-hover': '#ffffff', + '--theme-news-item-alert-background-color': 'rgba(242, 162, 24, 0.5)', + '--theme-news-item-announcement-background-color': + 'rgba(31, 193, 195, 0.2)', + '--theme-news-item-badge-color': '#ea4c5b', + '--theme-news-item-content-link-color': '#2d2d2d', + '--theme-news-item-info-background-color': 'rgba(0, 0, 0, 0.05)', + '--theme-news-item-title-color': '#2d2d2d', + }, nodeUpdate: { '--theme-node-update-background-color': '#f9f9f9', '--theme-node-update-title-color': '#2d2d2d', @@ -688,7 +722,7 @@ export const WHITE_THEME_OUTPUT = { }, topBar: { '--theme-topbar-background-color': '#ffffff', - '--theme-topbar-layout-body-background-color': '#ffffff', + '--theme-topbar-layout-body-background-color': '#f9f9f9', '--theme-topbar-wallet-name-color': '#2d2d2d', '--theme-topbar-wallet-info-color': '#2d2d2d', '--theme-topbar-logo-color': '#2d2d2d', diff --git a/source/renderer/app/themes/daedalus/yellow.js b/source/renderer/app/themes/daedalus/yellow.js index 99f275c9a9..594846fc36 100644 --- a/source/renderer/app/themes/daedalus/yellow.js +++ b/source/renderer/app/themes/daedalus/yellow.js @@ -287,6 +287,7 @@ export const YELLOW_THEME_OUTPUT = { '--theme-loading-status-icons-unloaded-syncing-color': '#2d2d2d', '--theme-loading-status-icons-tooltip-color': '#2d2d2d', '--theme-loading-spinner-color': '#2d2d2d', + '--theme-loading-spinner-medium-color': '#2d2d2d', }, manualUpdate: { '--theme-manual-update-overlay-background-color': @@ -343,6 +344,37 @@ export const YELLOW_THEME_OUTPUT = { '--theme-network-window-button-background-color-active': 'rgba(45, 45, 45, 0.8)', }, + newsFeed: { + '--theme-news-feed-background-color': '#ffb923', + '--theme-news-feed-badge-background-color': '#ea4c5b', + '--theme-news-feed-badge-text-color': '#ffffff', + '--theme-news-feed-box-shadow-color': '-5px 0 20px 0 rgba(0, 0, 0, 0.25)', + '--theme-news-feed-header-background-color': '#eda70e', + '--theme-news-feed-header-title-color': '#2d2d2d', + '--theme-news-feed-icon-close-button-color': '#2d2d2d', + '--theme-news-feed-icon-close-hover-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-icon-color': '#2d2d2d', + '--theme-news-feed-icon-color-connecting-screen': '#2d2d2d', + '--theme-news-feed-icon-color-syncing-screen': '#2d2d2d', + '--theme-news-feed-icon-dot-background-color': '#be0b0b', + '--theme-news-feed-icon-toggle-hover-background-color': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-no-fetch-color': '#fafbfc', + }, + newsItem: { + '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-item-action-button-background-color-hover': '#2d2d2d', + '--theme-news-item-action-button-border-color': '#2d2d2d', + '--theme-news-item-action-button-color': '#2d2d2d', + '--theme-news-item-action-button-color-hover': '#ffffff', + '--theme-news-item-alert-background-color': 'rgba(249, 128, 10, 0.5)', + '--theme-news-item-announcement-background-color': + 'rgba(31, 193, 195, 0.3)', + '--theme-news-item-badge-color': '#ea4c5b', + '--theme-news-item-content-link-color': '#2d2d2d', + '--theme-news-item-info-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-item-title-color': '#2d2d2d', + }, nodeUpdate: { '--theme-node-update-background-color': '#f8f3ed', '--theme-node-update-title-color': '#2d2d2d', @@ -696,7 +728,7 @@ export const YELLOW_THEME_OUTPUT = { }, topBar: { '--theme-topbar-background-color': '#ffb923', - '--theme-topbar-layout-body-background-color': '#fdcd68', + '--theme-topbar-layout-body-background-color': '#f8f3ed', '--theme-topbar-wallet-name-color': '#2d2d2d', '--theme-topbar-wallet-info-color': '#2d2d2d', '--theme-topbar-logo-color': '#2d2d2d', diff --git a/source/renderer/app/themes/utils/createTheme.js b/source/renderer/app/themes/utils/createTheme.js index 56c23d4883..95a95daea9 100644 --- a/source/renderer/app/themes/utils/createTheme.js +++ b/source/renderer/app/themes/utils/createTheme.js @@ -640,6 +640,7 @@ export const createDaedalusComponentsTheme = ( '--theme-loading-status-icons-unloaded-syncing-color': `${text.primary}`, '--theme-loading-status-icons-tooltip-color': `${text.primary}`, '--theme-loading-spinner-color': `${text.primary}`, + '--theme-loading-spinner-medium-color': '#fff', }, manualUpdate: { '--theme-manual-update-overlay-background-color': `${chroma( @@ -724,6 +725,38 @@ export const createDaedalusComponentsTheme = ( background.secondary.lightest ).alpha(0.8)}`, }, + newsFeed: { + '--theme-news-feed-background-color': '#233856', + '--theme-news-feed-badge-background-color': '#ea4c5b', + '--theme-news-feed-badge-text-color': '#ffffff', + '--theme-news-feed-box-shadow-color': '-5px 0 20px 0 rgba(0, 0, 0, 0.25)', + '--theme-news-feed-header-background-color': '#1e304a', + '--theme-news-feed-header-title-color': '#fafbfc', + '--theme-news-feed-icon-close-button-color': '#fff', + '--theme-news-feed-icon-close-hover-background-color': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-icon-color': '#fafbfc', + '--theme-news-feed-icon-color-connecting-screen': '#fafbfc', + '--theme-news-feed-icon-color-syncing-screen': '#5e6066', + '--theme-news-feed-icon-dot-background-color': '#ea4c5b', + '--theme-news-feed-icon-toggle-hover-background-color': + 'rgba(0, 0, 0, 0.1)', + '--theme-news-feed-no-fetch-color': '#fafbfc', + }, + newsItem: { + '--theme-news-item-action-button-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-item-action-button-background-color-hover': '#29b595', + '--theme-news-item-action-button-border-color': '#fafbfc', + '--theme-news-item-action-button-color': '#fafbfc', + '--theme-news-item-action-button-color-hover': '#ffffff', + '--theme-news-item-alert-background-color': 'rgba(242, 162, 24, 0.5)', + '--theme-news-item-announcement-background-color': + 'rgba(234, 76, 91, 0.25)', + '--theme-news-item-badge-color': '#ea4c5b', + '--theme-news-item-content-link-color': '#fafbfc', + '--theme-news-item-info-background-color': 'rgba(0, 0, 0, 0.1)', + '--theme-news-item-title-color': '#fafbfc', + }, nodeUpdate: { '--theme-node-update-background-color': `${background.primary.regular}`, '--theme-node-update-title-color': `${text.primary}`, diff --git a/source/renderer/app/utils/network.js b/source/renderer/app/utils/network.js index 5d71f86c38..da19588e28 100644 --- a/source/renderer/app/utils/network.js +++ b/source/renderer/app/utils/network.js @@ -9,6 +9,14 @@ import { MAINNET_LATEST_VERSION_INFO_URL, STAGING_LATEST_VERSION_INFO_URL, TESTNET_LATEST_VERSION_INFO_URL, + MAINNET_NEWS_URL, + TESTNET_NEWS_URL, + STAGING_NEWS_URL, + DEVELOPMENT_NEWS_URL, + MAINNET_NEWS_HASH_URL, + STAGING_NEWS_HASH_URL, + TESTNET_NEWS_HASH_URL, + DEVELOPMENT_NEWS_HASH_URL, } from '../config/urlsConfig'; import { MAINNET, @@ -72,3 +80,39 @@ export const getLatestVersionInfoUrl = (network: string): string => { } return latestVersionInfoUrl; }; + +export const getNewsURL = (network: string): string => { + // sets default to mainnet in case env.NETWORK is undefined + let newsUrl = MAINNET_NEWS_URL; + if (network === MAINNET) { + newsUrl = MAINNET_NEWS_URL; + } + if (network === STAGING) { + newsUrl = STAGING_NEWS_URL; + } + if (network === TESTNET) { + newsUrl = TESTNET_NEWS_URL; + } + if (network === DEVELOPMENT) { + newsUrl = DEVELOPMENT_NEWS_URL; + } + return newsUrl; +}; + +export const getNewsHashURL = (network: string): string => { + // sets default to mainnet in case env.NETWORK is undefined + let newsUrl = MAINNET_NEWS_HASH_URL; + if (network === MAINNET) { + newsUrl = MAINNET_NEWS_HASH_URL; + } + if (network === STAGING) { + newsUrl = STAGING_NEWS_HASH_URL; + } + if (network === TESTNET) { + newsUrl = TESTNET_NEWS_HASH_URL; + } + if (network === DEVELOPMENT) { + newsUrl = DEVELOPMENT_NEWS_HASH_URL; + } + return newsUrl; +}; diff --git a/storybook/stories/Loading-SyncingConnecting.stories.js b/storybook/stories/Loading-SyncingConnecting.stories.js index 70551d4d71..be6ae66f2b 100644 --- a/storybook/stories/Loading-SyncingConnecting.stories.js +++ b/storybook/stories/Loading-SyncingConnecting.stories.js @@ -9,6 +9,10 @@ import { CardanoNodeStates } from '../../source/common/types/cardano-node.types' export const DefaultSyncingConnectingStory = () => ( ( onGetAvailableVersions={action('onGetAvailableVersions')} onStatusIconClick={linkTo('Diagnostics', () => 'default')} disableDownloadLogs={boolean('disableDownloadLogs', true)} + showNewsFeedIcon /> ); export const ConnectivityIssuesSyncingConnectingStory = () => ( ( onGetAvailableVersions={action('onGetAvailableVersions')} onStatusIconClick={linkTo('Diagnostics', () => 'default')} disableDownloadLogs={boolean('disableDownloadLogs', false)} + showNewsFeedIcon /> ); export const SyncIssuesSyncingConnectingStory = () => ( ( onGetAvailableVersions={action('onGetAvailableVersions')} onStatusIconClick={linkTo('Diagnostics', () => 'default')} disableDownloadLogs={boolean('disableDownloadLogs', false)} + showNewsFeedIcon /> ); diff --git a/storybook/stories/TopBar.stories.js b/storybook/stories/TopBar.stories.js index c300457cc2..d7d571460b 100644 --- a/storybook/stories/TopBar.stories.js +++ b/storybook/stories/TopBar.stories.js @@ -1,6 +1,7 @@ // @flow import React from 'react'; import { storiesOf } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; import StoryDecorator from './support/StoryDecorator'; import SidebarLayout from '../../source/renderer/app/components/layout/SidebarLayout'; import TopBar from '../../source/renderer/app/components/layout/TopBar'; @@ -8,6 +9,7 @@ import NodeSyncStatusIcon from '../../source/renderer/app/components/widgets/Nod import WalletTestEnvironmentLabel from '../../source/renderer/app/components/widgets/WalletTestEnvironmentLabel'; import { formattedWalletAmount } from '../../source/renderer/app/utils/formatters'; import menuIconClosed from '../../source/renderer/app/assets/images/menu-ic.inline.svg'; +import NewsFeedIcon from '../../source/renderer/app/components/widgets/NewsFeedIcon'; const topBarTestEnv = ( + ); @@ -43,6 +49,10 @@ const topBarProductionEnv = ( isProduction isMainnet /> + ); diff --git a/storybook/stories/index.js b/storybook/stories/index.js index a17b21a1b1..9282694543 100644 --- a/storybook/stories/index.js +++ b/storybook/stories/index.js @@ -35,3 +35,8 @@ import './Widgets.stories'; // Notifications import './Notifications.stories'; + +// Newsfeed +import './news/NewsFeed.stories'; +import './news/IncidentOverlay.stories'; +import './news/AlertsOverlay.stories'; diff --git a/storybook/stories/news/AlertsOverlay.stories.js b/storybook/stories/news/AlertsOverlay.stories.js new file mode 100644 index 0000000000..38d263c6ef --- /dev/null +++ b/storybook/stories/news/AlertsOverlay.stories.js @@ -0,0 +1,59 @@ +// @flow +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import StoryDecorator from '../support/StoryDecorator'; +import AlertsOverlay from '../../../source/renderer/app/components/news/AlertsOverlay'; + +storiesOf('NewsFeed', module) + .addDecorator(story => ( + + {story([ + { + alerts: [ + { + action: { + label: 'Read More', + url: 'https://www.daedalus.io', + }, + content: + '# h1 Heading\nUt consequat semper viverra nam libero justo laoreet sit. Sagittis vitae et leo duis. Eget nullam non nisi est sit amet facilisis magna etiam. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Auctor neque vitae tempus quam pellentesque. Vel facilisis volutpat est velit egestas dui id ornare arcu.\n\n## h2 Heading\n\nConsequat mauris nunc congue nisi vitae suscipit. Dictum non consectetur a erat nam. Laoreet non curabitur gravida arcu ac tortor dignissim. Eu augue ut lectus arcu bibendum at. Facilisis gravida neque convallis a cras semper. Ut consequat semper viverra nam libero justo laoreet sit. Sagittis vitae et leo duis. Eget nullam non nisi est sit amet facilisis magna etiam. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Auctor neque vitae tempus quam pellentesque. Vel facilisis volutpat est velit egestas dui id ornare arcu. Nam aliquam sem et tortor consequat id porta nibh venenatis.\n\nViverra nam libero justo laoreet sit amet. Pharetra diam sit amet nisl. Quam viverra orci sagittis eu. Rhoncus dolor purus non enim. Posuere urna nec tincidunt praesent semper feugiat. Suspendisse in est ante in nibh mauris cursus. Sit amet consectetur adipiscing elit duis. Tortor id aliquet lectus proin nibh nisl condimentum id. At in tellus integer feugiat scelerisque. Maecenas sed enim ut sem viverra aliquet. Pellentesque pulvinar pellentesque habitant morbi. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Praesent tristique magna sit amet purus gravida. Diam volutpat commodo sed egestas egestas. Ut placerat orci nulla pellentesque dignissim enim. Ultrices in iaculis nunc sed augue lacus viverra. Etiam sit amet nisl purus.\n\n## Typographic replacements\n\nEnable typographer option to see result.\n\n(c) (C) (r) (R) (tm) (TM) (p) (P) +-\n\ntest.. test... test..... test?..... test!....\n\n!!!!!! ???? ,, -- ---\n\n"Smartypants, double quotes" and \'single quotes\'\n\n## Emphasis\n\n**This is bold text**\n\n__This is bold text__\n\n*This is italic text*\n\n_This is italic text_\n\n## Lists\n\nUnordered\n\n+ Create a list by starting a line with +, -, or *\n+ Sub-lists are made by indenting 2 spaces:\n+ Very easy!\n\nOrdered\n\n1. Lorem ipsum dolor sit amet\n2. Consectetur adipiscing elit\n3. Integer molestie lorem at massa\n\n\n1. You can use sequential numbers...\n1. ...or keep all the numbers as `1.`\n\n## Links\n\n[link text](http://dev.nodeca.com)\n\n[link with title](http://nodeca.github.io/pica/demo/ "title text!")\n\nAutoconverted link https://github.com/nodeca/pica (enable linkify to see)\n\n### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)\n\n- 19^th^\n- H~2~O\n', + date: Date.now(), + id: '123', + target: { + daedalus: 'v0.13', + platform: 'macOS', + platformVersion: '10.14.6', + }, + title: 'Failure Alert', + }, + { + action: { + label: 'Read More', + url: 'https://www.daedalus.io', + }, + content: + '# h1 Heading\nUt consequat semper viverra nam libero justo laoreet sit. Sagittis vitae et leo duis. Eget nullam non nisi est sit amet facilisis magna etiam. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Auctor neque vitae tempus quam pellentesque. Vel facilisis volutpat est velit egestas dui id ornare arcu.\n\n## h2 Heading\n\nConsequat mauris nunc congue nisi vitae suscipit. Dictum non consectetur a erat nam. Laoreet non curabitur gravida arcu ac tortor dignissim. Eu augue ut lectus arcu bibendum at. Facilisis gravida neque convallis a cras semper. Ut consequat semper viverra nam libero justo laoreet sit. Sagittis vitae et leo duis. Eget nullam non nisi est sit amet facilisis magna etiam. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Auctor neque vitae tempus quam pellentesque. Vel facilisis volutpat est velit egestas dui id ornare arcu. Nam aliquam sem et tortor consequat id porta nibh venenatis.\n\nViverra nam libero justo laoreet sit amet. Pharetra diam sit amet nisl. Quam viverra orci sagittis eu. Rhoncus dolor purus non enim. Posuere urna nec tincidunt praesent semper feugiat. Suspendisse in est ante in nibh mauris cursus. Sit amet consectetur adipiscing elit duis. Tortor id aliquet lectus proin nibh nisl condimentum id. At in tellus integer feugiat scelerisque. Maecenas sed enim ut sem viverra aliquet. Pellentesque pulvinar pellentesque habitant morbi. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Praesent tristique magna sit amet purus gravida. Diam volutpat commodo sed egestas egestas. Ut placerat orci nulla pellentesque dignissim enim. Ultrices in iaculis nunc sed augue lacus viverra. Etiam sit amet nisl purus.\n\n## Typographic replacements\n\nEnable typographer option to see result.\n\n(c) (C) (r) (R) (tm) (TM) (p) (P) +-\n\ntest.. test... test..... test?..... test!....\n\n!!!!!! ???? ,, -- ---\n\n"Smartypants, double quotes" and \'single quotes\'\n\n## Emphasis\n\n**This is bold text**\n\n__This is bold text__\n\n*This is italic text*\n\n_This is italic text_\n\n## Lists\n\nUnordered\n\n+ Create a list by starting a line with +, -, or *\n+ Sub-lists are made by indenting 2 spaces:\n+ Very easy!\n\nOrdered\n\n1. Lorem ipsum dolor sit amet\n2. Consectetur adipiscing elit\n3. Integer molestie lorem at massa\n\n\n1. You can use sequential numbers...\n1. ...or keep all the numbers as `1.`\n\n## Links\n\n[link text](http://dev.nodeca.com)\n\n[link with title](http://nodeca.github.io/pica/demo/ "title text!")\n\nAutoconverted link https://github.com/nodeca/pica (enable linkify to see)\n\n### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)\n\n- 19^th^\n- H~2~O\n', + date: Date.now(), + id: '1234', + target: { + daedalus: 'v0.13', + platform: 'macOS', + platformVersion: '10.14.6', + }, + title: 'Node Bug Alert', + }, + ], + }, + ])} + + )) + .add('Alerts Overlay', props => ( + {}} + onMarkNewsAsRead={action('onMarkNewsAsRead')} + onOpenExternalLink={() => {}} + /> + )); diff --git a/storybook/stories/news/IncidentOverlay.stories.js b/storybook/stories/news/IncidentOverlay.stories.js new file mode 100644 index 0000000000..b3b9a3d864 --- /dev/null +++ b/storybook/stories/news/IncidentOverlay.stories.js @@ -0,0 +1,29 @@ +// @flow +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import StoryDecorator from '../support/StoryDecorator'; +import IncidentOverlay from '../../../source/renderer/app/components/news/IncidentOverlay'; + +storiesOf('NewsFeed', module) + .addDecorator(story => ( + + {story({ + action: { + label: 'Read More', + url: 'https://www.daedalus.io', + }, + content: + '# h1 Heading\nUt consequat semper viverra nam libero justo laoreet sit. Sagittis vitae et leo duis. Eget nullam non nisi est sit amet facilisis magna etiam. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Auctor neque vitae tempus quam pellentesque. Vel facilisis volutpat est velit egestas dui id ornare arcu.\n\n## h2 Heading\n\nConsequat mauris nunc congue nisi vitae suscipit. Dictum non consectetur a erat nam. Laoreet non curabitur gravida arcu ac tortor dignissim. Eu augue ut lectus arcu bibendum at. Facilisis gravida neque convallis a cras semper. Ut consequat semper viverra nam libero justo laoreet sit. Sagittis vitae et leo duis. Eget nullam non nisi est sit amet facilisis magna etiam. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Auctor neque vitae tempus quam pellentesque. Vel facilisis volutpat est velit egestas dui id ornare arcu. Nam aliquam sem et tortor consequat id porta nibh venenatis.\n\nViverra nam libero justo laoreet sit amet. Pharetra diam sit amet nisl. Quam viverra orci sagittis eu. Rhoncus dolor purus non enim. Posuere urna nec tincidunt praesent semper feugiat. Suspendisse in est ante in nibh mauris cursus. Sit amet consectetur adipiscing elit duis. Tortor id aliquet lectus proin nibh nisl condimentum id. At in tellus integer feugiat scelerisque. Maecenas sed enim ut sem viverra aliquet. Pellentesque pulvinar pellentesque habitant morbi. Ultrices neque ornare aenean euismod elementum nisi quis eleifend. Praesent tristique magna sit amet purus gravida. Diam volutpat commodo sed egestas egestas. Ut placerat orci nulla pellentesque dignissim enim. Ultrices in iaculis nunc sed augue lacus viverra. Etiam sit amet nisl purus.\n\n## Typographic replacements\n\nEnable typographer option to see result.\n\n(c) (C) (r) (R) (tm) (TM) (p) (P) +-\n\ntest.. test... test..... test?..... test!....\n\n!!!!!! ???? ,, -- ---\n\n"Smartypants, double quotes" and \'single quotes\'\n\n## Emphasis\n\n**This is bold text**\n\n__This is bold text__\n\n*This is italic text*\n\n_This is italic text_\n\n## Lists\n\nUnordered\n\n+ Create a list by starting a line with +, -, or *\n+ Sub-lists are made by indenting 2 spaces:\n+ Very easy!\n\nOrdered\n\n1. Lorem ipsum dolor sit amet\n2. Consectetur adipiscing elit\n3. Integer molestie lorem at massa\n\n\n1. You can use sequential numbers...\n1. ...or keep all the numbers as `1.`\n\n## Links\n\n[link text](http://dev.nodeca.com)\n\n[link with title](http://nodeca.github.io/pica/demo/ "title text!")\n\nAutoconverted link https://github.com/nodeca/pica (enable linkify to see)\n\n### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)\n\n- 19^th^\n- H~2~O\n', + date: Date.now(), + target: { + daedalus: 'v0.13', + platform: 'macOS', + platformVersion: '10.14.6', + }, + title: 'Lazarus Incident', + })} + + )) + .add('Incident Overlay', props => ( + {}} /> + )); diff --git a/storybook/stories/news/NewsFeed.stories.js b/storybook/stories/news/NewsFeed.stories.js new file mode 100644 index 0000000000..2575fd87cf --- /dev/null +++ b/storybook/stories/news/NewsFeed.stories.js @@ -0,0 +1,184 @@ +// @flow +// eslint-disable-file no-unused-vars +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { action } from '@storybook/addon-actions'; +import { boolean } from '@storybook/addon-knobs'; +import StoryDecorator from '../support/StoryDecorator'; +import NewsFeed from '../../../source/renderer/app/components/news/NewsFeed'; +import News from '../../../source/renderer/app/domains/News'; + +const news = [ + new News.News({ + title: 'Some title 1 in English', + content: 'Some title 1 in English', + target: { daedalusVersion: null, platform: 'darwin' }, + action: { + label: 'Visit en-US', + url: 'https://iohk.zendesk.com/hc/en-us/articles/', + }, + date: 1568650464961, + type: 'incident', + read: false, + }), + new News.News({ + title: 'Some title 2 in English', + content: 'Some title 2 in English', + target: { daedalusVersion: null, platform: 'win32' }, + action: { + label: 'Visit en-US', + url: 'https://iohk.zendesk.com/hc/en-us/articles/', + }, + date: 1568736864962, + type: 'incident', + read: false, + }), + new News.News({ + title: 'Some title 3 in English', + content: 'Some title 3 in English', + target: { daedalusVersion: null, platform: 'linux' }, + action: { label: 'Check en-US', route: '/wallets' }, + date: 1568823264963, + type: 'alert', + read: false, + }), + new News.News({ + title: 'Some title 4 in English', + content: 'Some title 4 in English', + target: { daedalusVersion: null, platform: 'darwin' }, + action: { + label: 'Visit en-US', + url: 'https://iohk.zendesk.com/hc/en-us/articles/', + }, + date: 1568909664963, + type: 'alert', + read: false, + }), + new News.News({ + title: 'Some title 5 in English', + content: 'Some title 5 in English', + target: { daedalusVersion: null, platform: 'darwin' }, + action: { label: 'Check en-US', route: '/settings' }, + date: 1568996064964, + type: 'announcement', + read: false, + }), + new News.News({ + title: 'Some title 6 in English', + content: 'Some title 6 in English', + target: { daedalusVersion: null, platform: 'win32' }, + action: { + label: 'Visit en-US', + url: 'https://iohk.zendesk.com/hc/en-us/articles/', + }, + date: 1569082464964, + type: 'announcement', + read: false, + }), + new News.News({ + title: 'Some title 7 in English', + content: 'Some title 7 in English', + target: { daedalusVersion: null, platform: 'darwin' }, + action: { label: 'Check en-US', route: '/settings' }, + date: 1569168864965, + type: 'info', + read: false, + }), + new News.News({ + title: 'Some title 8 in English', + content: 'Some title 8 in English', + target: { daedalusVersion: null, platform: 'linux' }, + action: { + label: 'Visit en-US', + url: 'https://iohk.zendesk.com/hc/en-us/articles/', + }, + date: 1569255264965, + type: 'info', + read: false, + }), + new News.News({ + title: 'Some title 9 in English', + content: 'Some title 9 in English', + target: { daedalusVersion: null, platform: 'darwin' }, + action: { + label: 'Visit https://markdown-it.github.io/', + url: 'https://markdown-it.github.io/', + }, + date: 1569255294965, + type: 'alert', + read: false, + }), +]; + +const newsCollection = new News.NewsCollection(news); + +storiesOf('NewsFeed', module) + .addDecorator(story => ( + {story(newsCollection)} + )) + + // ====== Stories ====== + + .add('NewsFeed - no news items fetched from server', () => ( +
+ {}} + onOpenAlert={() => {}} + /> +
+ )) + + .add('NewsFeed - newsfeed empty', () => ( +
+ {}} + onOpenAlert={() => {}} + /> +
+ )) + + .add('NewsFeed - loading', () => ( +
+ {}} + onOpenAlert={() => {}} + /> +
+ )) + + .add('NewsFeed', () => ( +
+ {}} + onOpenAlert={() => {}} + /> +
+ )); diff --git a/storybook/stories/support/StoryLayout.js b/storybook/stories/support/StoryLayout.js index cf268151a6..68ecd31306 100644 --- a/storybook/stories/support/StoryLayout.js +++ b/storybook/stories/support/StoryLayout.js @@ -11,6 +11,7 @@ import { CATEGORIES_BY_NAME } from '../../../source/renderer/app/config/sidebarC import { formattedWalletAmount } from '../../../source/renderer/app/utils/formatters'; import NodeSyncStatusIcon from '../../../source/renderer/app/components/widgets/NodeSyncStatusIcon'; import Wallet from '../../../source/renderer/app/domains/Wallet.js'; +import NewsFeedIcon from '../../../source/renderer/app/components/widgets/NewsFeedIcon'; import type { SidebarMenus } from '../../../source/renderer/app/components/sidebar/Sidebar'; import type { SidebarWalletType } from '../../../source/renderer/app/types/sidebarTypes'; // import type { Wallet } from '../../../source/renderer/app/domains/WalletTransaction'; @@ -190,6 +191,10 @@ export default class StoryLayout extends Component { isProduction isMainnet /> + ); } diff --git a/yarn.lock b/yarn.lock index 77dea6e7ac..ea01cd2e29 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10683,6 +10683,13 @@ rcedit@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/rcedit/-/rcedit-1.1.2.tgz#7a28edf981953f75b5f3e5d4cbc1f9ffa0abbc78" +react-animate-height@2.0.15: + version "2.0.15" + resolved "https://registry.yarnpkg.com/react-animate-height/-/react-animate-height-2.0.15.tgz#155f42e1ab0befe785b36b3e76233230172c1857" + dependencies: + classnames "^2.2.5" + prop-types "^15.6.1" + react-clientside-effect@^1.2.0: version "1.2.2" resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837" @@ -11791,14 +11798,14 @@ semver-greatest-satisfied-range@^1.1.0: version "5.7.0" resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.0.tgz#790a7cf6fea5459bac96110b29b60412dc8ff96b" +semver@6.3.0, semver@^6.0.0, semver@^6.1.1: + version "6.3.0" + resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" + semver@^4.1.0: version "4.3.6" resolved "https://registry.yarnpkg.com/semver/-/semver-4.3.6.tgz#300bc6e0e86374f7ba61068b5b1ecd57fc6532da" -semver@^6.0.0, semver@^6.1.1: - version "6.3.0" - resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d" - semver@~5.3.0: version "5.3.0" resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f"