Display no websites connected

packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.js

@@ -2,17 +2,72 @@
 import { Component } from 'react';
 import type { Node } from 'react';
 import { observer } from 'mobx-react';
+import type { WhitelistEntry, PublicDeriverCache } from '../../../../chrome/extension/ergo-connector/types'
+import styles from './ConnectedWebsitesPage.scss'
+import NoItemsFoundImg from '../../../assets/images/dapp-connector/no-websites-connected.inline.svg'
+import { intlShape, defineMessages } from 'react-intl';
+import type { $npm$ReactIntl$IntlFormat } from 'react-intl';
+import { connectorMessages } from '../../../i18n/global-messages';
 
 type Props = {|
-    +onCreate: void => void,
-    +onRestore: void => void,
-    +onHardwareConnect: void => void,
+    +whitelistEntries: ?Array<WhitelistEntry>,
+    +activeSites: Array<string>,
+    +wallets: ?Array<PublicDeriverCache>,
+    +onRemoveWallet: ?string => void,
+    +getTokenInfo: $ReadOnly<Inexact<TokenLookupKey>> => $ReadOnly<TokenRow>,
+    +shouldHideBalance: boolean,
 |};
 
+const messages = defineMessages({
+    connectedWallets: {
+      id: 'connector.connect.connectedWallets',
+      defaultMessage: '!!!Connected Wallets',
+    },
+    noWebsitesConnected: {
+      id: 'connector.connect.noWebsitesConnected',
+      defaultMessage: `!!!You don't have any websites connected yet`,
+    },
+});
+
 @observer
 export default class ConnectedWebsitesPage extends Component<Props> {
+    static contextTypes: {| intl: $npm$ReactIntl$IntlFormat |} = {
+        intl: intlShape.isRequired,
+    };
 
     render(): Node {
-        return <h1>Connected websites</h1>
+        const { intl } = this.context;
+        const genNoResult = () => (
+          <div className={styles.noItems}>
+            <NoItemsFoundImg />
+            <h3>{intl.formatMessage(messages.noWebsitesConnected)} </h3>
+            <p>{intl.formatMessage(connectorMessages.messageReadOnly)}</p>
+          </div>
+          );
+
+        if (this.props.whitelistEntries == null || this.props.wallets == null) {
+           return genNoResult();
+        }
+        const { whitelistEntries, wallets } = this.props;
+        if (whitelistEntries.length === 0) {
+          return genNoResult();
+        }
+        return (
+          <div>
+            <div className={styles.walletList}>
+              {whitelistEntries.map(({ url, publicDeriverId }) => {
+                const wallet = wallets.find(
+                cacheEntry => cacheEntry.publicDeriver.getPublicDeriverId() === publicDeriverId
+                );
+                // note: store should make sure that deleted wallets got removed from the whitelist
+                // but this is just a precaution
+                if (wallet == null) return null;
+                return (
+                  <h1>{url}.{publicDeriverId}</h1>
+                );
+              })}
+            </div>
+          </div>
+        )
     }
 }

packages/yoroi-extension/app/components/dapp-connector/ConnectedWebsites/ConnectedWebsitesPage.scss

@@ -0,0 +1,10 @@
+.component {
+    height: 100%;
+    width: 100%;
+
+    .noItems {
+        background-color: greenyellow;
+        width: 100%;
+        height: 100%;
+    }
+}

packages/yoroi-extension/app/components/dapp-connector/Layout/DappConnectorNavbar.js

@@ -1,6 +1,7 @@
-//@flow 
+// @flow
 import { Component } from 'react';
 import { observer } from 'mobx-react';
+import styles from './DappConnectorNavbar.scss'
 
 type Props = {|
 
@@ -10,6 +11,10 @@ type Props = {|
 export default class DappConnectorNavbar extends Component<Props> {
 
     render() {
-        return <h1>Dapp Connector!!</h1>
+        return (
+          <div className={styles.component}>
+            <h1 className={styles.header}>Dapp connector</h1>
+          </div>
+        )
     }
 }

packages/yoroi-extension/app/components/dapp-connector/Layout/DappConnectorNavbar.scss

@@ -0,0 +1,14 @@
+.component {
+    background-color: #FFFFFF;
+    box-shadow: 0 2px 5px 3px rgba(0, 0, 0, 0.06);
+
+    .header {
+        color: #38393D;
+        font-family: Rubik;
+        font-size: 20px;
+        font-weight: 500;
+        letter-spacing: 0;
+        line-height: 28px;
+        padding: 32px 40px;
+    }
+}

packages/yoroi-extension/app/containers/dapp-connector/ConnectedWebsitesContainer.js

@@ -72,7 +72,7 @@ class MyWalletsPage extends Component<AllProps> {
     if (isSuccess) {
       componentToRender =  (
         <ConnectedWebsitesPage
-          whitelistEntries={this.generated.stores.connector.currentConnectorWhitelist}
+          whitelistEntries={[] || this.generated.stores.connector.currentConnectorWhitelist}
           wallets={wallets}
           onRemoveWallet={this.onRemoveWallet}
           activeSites={this.generated.stores.connector.activeSites.sites}