SK-27: Success screen for created / imported account (#41)

src/static/_locales/en/messages.json

@@ -113,9 +113,15 @@
     "message": "Next Step"
   },
   "view_CreateAccountSuccess_heading": {
-    "message": "Congratulations"
+    "message": "Congratulations!"
   },
-  "view_CreateAccountSuccess_message": {
-    "message": "You have successfully created a KILT-Wallet"
+  "view_CreateAccountSuccess_message_create": {
+    "message": "You have successfully created a KILT Wallet"
+  },
+  "view_CreateAccountSuccess_message_import": {
+    "message": "You have successfully imported your KILT Wallet"
+  },
+  "view_CreateAccountSuccess_CTA": {
+    "message": "See the wallet"
   }
 }

src/views/CreateAccountSuccess/CreateAccountSuccess.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta } from '@storybook/react';
+
+import { CreateAccountSuccess } from './CreateAccountSuccess';
+
+export default {
+  title: 'Views/CreateAccountSuccess',
+  component: CreateAccountSuccess,
+} as Meta;
+
+export function Create(): JSX.Element {
+  return <CreateAccountSuccess />;
+}
+
+export function Import(): JSX.Element {
+  return <CreateAccountSuccess type="import" />;
+}

src/views/CreateAccountSuccess/CreateAccountSuccess.test.tsx

@@ -2,8 +2,12 @@ import { CreateAccountSuccess } from './CreateAccountSuccess';
 import { render } from '../../testing';
 
 describe('CreateAccountSuccess', () => {
-  it('should render', async () => {
+  it('should render for create', async () => {
     const { container } = render(<CreateAccountSuccess />);
     expect(container).toMatchSnapshot();
   });
+  it('should render for import', async () => {
+    const { container } = render(<CreateAccountSuccess type="import" />);
+    expect(container).toMatchSnapshot();
+  });
 });

src/views/CreateAccountSuccess/CreateAccountSuccess.tsx

@@ -1,11 +1,22 @@
 import { browser } from 'webextension-polyfill-ts';
+import { Link } from 'react-router-dom';
 
-export function CreateAccountSuccess(): JSX.Element {
+interface Props {
+  type?: 'create' | 'import';
+}
+
+export function CreateAccountSuccess({ type = 'create' }: Props): JSX.Element {
   const t = browser.i18n.getMessage;
   return (
     <main>
       <h1>{t('view_CreateAccountSuccess_heading')}</h1>
-      <p>{t('view_CreateAccountSuccess_message')}</p>
+
+      <p>
+        {type === 'create' && t('view_CreateAccountSuccess_message_create')}
+        {type === 'import' && t('view_CreateAccountSuccess_message_import')}
+      </p>
+
+      <Link to="/">{t('view_CreateAccountSuccess_CTA')}</Link>
     </main>
   );
 }

src/views/CreateAccountSuccess/__snapshots__/CreateAccountSuccess.test.tsx.snap

@@ -1,14 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CreateAccountSuccess should render 1`] = `
+exports[`CreateAccountSuccess should render for create 1`] = `
 <div>
   <main>
     <h1>
-      Congratulations
+      Congratulations!
     </h1>
     <p>
-      You have successfully created a KILT-Wallet
+      You have successfully created a KILT Wallet
     </p>
+    <a
+      href="/"
+    >
+      See the wallet
+    </a>
+  </main>
+</div>
+`;
+
+exports[`CreateAccountSuccess should render for import 1`] = `
+<div>
+  <main>
+    <h1>
+      Congratulations!
+    </h1>
+    <p>
+      You have successfully imported your KILT Wallet
+    </p>
+    <a
+      href="/"
+    >
+      See the wallet
+    </a>
   </main>
 </div>
 `;