added identity key above the conversation box

background.html

@@ -65,19 +65,24 @@
         </div>
       </div>
     </div>
-    <div class='conversation-stack'>
-      <div class='conversation placeholder'>
-        <div class='conversation-header'></div>
-        <div class='container'>
-          <div class='content'>
-            <img src='images/icon_128.png' />
-            <h3>{{ welcomeToSignal }}</h3>
-            <p>{{ selectAContact }}</p>
+    <div class='identityKeyWrapper'>
+      Your identity key: <span class='identityKey'>{{ identityKey }}</span>
+    </div>
+    <div class='underneathIdentityWrapper'>
+      <div class='conversation-stack'>
+        <div class='conversation placeholder'>
+          <div class='conversation-header'></div>
+          <div class='container'>
+            <div class='content'>
+              <img src='images/icon_128.png' />
+              <h3>{{ welcomeToSignal }}</h3>
+              <p>{{ selectAContact }}</p>
+            </div>
           </div>
         </div>
       </div>
+      <div class='lightbox-container'></div>
     </div>
-    <div class='lightbox-container'></div>
   </script>
   <script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
     <button class='text module-scroll-down__button {{ buttonClass }}' alt='{{ moreBelow }}'>

js/views/inbox_view.js

@@ -162,11 +162,15 @@
         this.$el.addClass('expired');
       }
     },
-    render_attributes: {
-      welcomeToSignal: i18n('welcomeToSignal'),
-      selectAContact: i18n('selectAContact'),
-      searchForPeopleOrGroups: i18n('searchForPeopleOrGroups'),
-      settings: i18n('settings'),
+    render_attributes() {
+      const identityKey = textsecure.storage.get('identityKey').pubKey;
+      return {
+        welcomeToSignal: i18n('welcomeToSignal'),
+        selectAContact: i18n('selectAContact'),
+        searchForPeopleOrGroups: i18n('searchForPeopleOrGroups'),
+        settings: i18n('settings'),
+        identityKey: StringView.bytesToBase64(new Uint8Array(identityKey))
+      };
     },
     events: {
       click: 'onClick',

stylesheets/_index.scss

@@ -71,6 +71,26 @@
   }
 }
 
+.identityKeyWrapper {
+  background-color: $color-black-008-no-tranparency;
+  text-align: center;
+  height: 50px;
+  line-height: 50px;
+  white-space: nowrap;
+}
+
+.identityKey {
+  font-weight: bold;
+}
+
+.underneathIdentityWrapper {
+  position: absolute;
+  top: 50px;
+  bottom: 0;
+  left: 300px;
+  right: 0;
+}
+
 .conversation-stack {
   .conversation {
     display: none;