Merge pull request #8 from input-output-hk/feat/lw-10801-update-copy

feat: update nami migration copy [LW-10801]

src/manifest.json

@@ -1,9 +1,8 @@
 {
   "manifest_version": 3,
   "name": "Nami",
-  "version": "3.7.3",
-  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAoy3Y6s5Q72zsN6+sBJL8EBCyGL/USyXXjTJGIIV/3xfcrkoZ53I+o9B0Euo8yz2GXnBjm3+ZIC1YwN5ZPC/uQpPHyq8GLksu3VvDdupKMNIWXvMByLjF0pyD4YNdNueU4r3fWPPBsbvG98cmNbeZ1NmwV2Byad4PQtUMx76jSk6KHcp3qNTMEo8utY49EIPaC9wr/Fg9gaqI83SFKNoe2FeKrb1HXaTT366myKLupHXm7hoD7U87a2itNfR7kohBoO6RBlrTNmYuq65wYO1eY5h/4tCkZrztjTKjfMWbuVc0kjL8VFv2IR1ETV8dMDgaBKxWGpccaDzF2GJfYNjK2QIDAQAB",
-  "description": "A wallet to experience Cardano to the fullest",
+  "version": "3.8.5",
+  "description": "Maintained by IOG",
   "background": { "service_worker": "background.bundle.js" },
   "action": {
     "default_popup": "mainPopup.html",
@@ -37,6 +36,5 @@
   "content_security_policy": {
     "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; frame-src https://connect.trezor.io/;"
   },
-  "permissions": ["storage", "unlimitedStorage", "favicon"],
-  "key": "MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAoy3Y6s5Q72zsN6+sBJL8EBCyGL/USyXXjTJGIIV/3xfcrkoZ53I+o9B0Euo8yz2GXnBjm3+ZIC1YwN5ZPC/uQpPHyq8GLksu3VvDdupKMNIWXvMByLjF0pyD4YNdNueU4r3fWPPBsbvG98cmNbeZ1NmwV2Byad4PQtUMx76jSk6KHcp3qNTMEo8utY49EIPaC9wr/Fg9gaqI83SFKNoe2FeKrb1HXaTT366myKLupHXm7hoD7U87a2itNfR7kohBoO6RBlrTNmYuq65wYO1eY5h/4tCkZrztjTKjfMWbuVc0kjL8VFv2IR1ETV8dMDgaBKxWGpccaDzF2GJfYNjK2QIDAQAB"
+  "permissions": ["storage", "unlimitedStorage", "favicon"]
 }

src/ui/lace-migration/components/all-done/all-done.component.jsx

@@ -11,14 +11,18 @@ export const AllDone = ({ isLaceInstalled, onAction }) => {
     <Slide
       title="All done!"
       image={
-        <Box mb={'50px'} >
-          {colorMode === 'light' ? <DoneWhite width='98px' height='98px' /> : <DoneDark width='98px' height='98px' />}
+        <Box mb={'50px'}>
+          {colorMode === 'light' ? (
+            <DoneWhite width="98px" height="98px" />
+          ) : (
+            <DoneDark width="98px" height="98px" />
+          )}
         </Box>
       }
       description={[
-        'From this moment, please use',
-        'the Lace extension to access',
-        'your upgraded wallet',
+        'All good. Just use the Lace',
+        'extension to access your migrated',
+        'Nami Wallet from now on',
       ]}
       buttonText={isLaceInstalled ? 'Open Lace' : 'Download Lace'}
       buttonIcon={Arrow}

src/ui/lace-migration/components/all-done/all-done.stories.js

@@ -1,7 +1,7 @@
 import { AllDone } from './all-done.component';
 
 const meta = {
-  title: 'AllDone',
+  title: 'Nami Migration/Screens/AllDone',
   component: AllDone,
   parameters: {
     layout: 'centered',

src/ui/lace-migration/components/almost-there/almost-there.component.jsx

@@ -11,16 +11,20 @@ export const AlmostThere = ({ isLaceInstalled, onAction }) => {
   return (
     <Slide
       showTerms
-      title="Almost there..."
+      title={isLaceInstalled ? 'Almost there...' : 'Let’s begin...'}
       image={
-        <Box mb={"60px"}>
-          {colorMode === 'light' ? <PendingWhite width="98px" height="98px" /> : <PendingDark width="98px" height="98px" />}
+        <Box mb={'60px'}>
+          {colorMode === 'light' ? (
+            <PendingWhite width="98px" height="98px" />
+          ) : (
+            <PendingDark width="98px" height="98px" />
+          )}
         </Box>
       }
       description={
         isLaceInstalled
-          ? ['Please open Lace', 'extension to proceed']
-          : ['Please download Lace', 'extension to proceed']
+          ? ['Open the Lace extension', 'to finish the process']
+          : ['Download the Lace', 'extension to begin']
       }
       buttonText={isLaceInstalled ? 'Open Lace' : 'Download Lace'}
       buttonIcon={isLaceInstalled ? Arrow : Download}

src/ui/lace-migration/components/almost-there/almost-there.stories.js

@@ -1,7 +1,7 @@
 import { AlmostThere } from './almost-there.component';
 
 const meta = {
-  title: 'AlmostThere',
+  title: 'Nami Migration/Screens/AlmostThere',
   component: AlmostThere,
   parameters: {
     layout: 'centered',

src/ui/lace-migration/components/carousel/carousel.component.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Box, Button, Image, useColorModeValue } from '@chakra-ui/react';
+import { Box, Button, useColorModeValue } from '@chakra-ui/react';
 import { ReactComponent as Left } from '../../assets/chevron-left.svg';
 import { ReactComponent as Right } from '../../assets/chevron-right.svg';
 

src/ui/lace-migration/components/carousel/carousel.stories.jsx

@@ -1,22 +1,22 @@
 import React from 'react';
 import { Carousel } from './carousel.component';
-import { ItsTimetToUpgrade } from '../its-time-to-upgrade/its-time-to-upgrade.component';
-import { SeamlessUpgrade } from '../seamless-upgrade/seamless-upgrade.component';
-import { NewFeatures } from '../new-features/new-features.component';
+import { Slide1 } from './slides/Slide1.component';
+import { Slide2 } from './slides/Slide2.component';
+import { Slide3 } from './slides/Slide3.component';
 import { AlmostThere } from '../almost-there/almost-there.component';
 import { AllDone } from '../all-done/all-done.component';
 
 const meta = {
-  title: 'Carousel',
+  title: 'Nami Migration/Screens/Carousel',
   component: Carousel,
   parameters: {
     layout: 'centered',
   },
   args: {
     children: [
-      <ItsTimetToUpgrade key="1" onAction={() => {}} />,
-      <SeamlessUpgrade key="2" onAction={() => {}} />,
-      <NewFeatures key="3" onAction={() => {}} />,
+      <Slide1 key="1" onAction={() => {}} />,
+      <Slide2 key="2" onAction={() => {}} />,
+      <Slide3 key="3" onAction={() => {}} />,
       <AlmostThere isLaceInstalled={false} key="4" onAction={() => {}} />,
       <AllDone key="5" onAction={() => {}} />,
     ],

src/ui/lace-migration/components/carousel/slides/Slide1.component.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box } from '@chakra-ui/react';
+import { Slide } from '../../slide.component';
+import { ReactComponent as Arrow } from '../../../assets/arrow.svg';
+import { ReactComponent as BackpackImg } from '../../../assets/backpack.svg';
+
+export const Slide1 = ({ onAction }) => {
+  return (
+    <Slide
+      showTerms
+      title="It's time to migrate your wallet!"
+      image={
+        <Box mb={'20px'}>
+          <BackpackImg width="91px" height="126px" />
+        </Box>
+      }
+      description={[
+        'The Nami Wallet is now part of the',
+        'IOG family and integrated into Lace.',
+        'Click ‘Migrate your wallet‘',
+        'to begin the process',
+      ]}
+      buttonText="Migrate your wallet"
+      buttonIcon={Arrow}
+      onButtonClick={onAction}
+    />
+  );
+};

src/ui/lace-migration/components/new-features/new-features.stories.js → src/ui/lace-migration/components/carousel/slides/Slide1.stories.js

@@ -1,8 +1,8 @@
-import { NewFeatures } from './new-features.component';
+import { Slide1 } from './Slide1.component';
 
 const meta = {
-  title: 'NewFeatures',
-  component: NewFeatures,
+  title: 'Nami Migration/Screens/Carousel/Slide 1',
+  component: Slide1,
   parameters: {
     layout: 'centered',
   },

src/ui/lace-migration/components/carousel/slides/Slide2.component.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Slide } from '../../slide.component';
+import { ReactComponent as Arrow } from '../../../assets/arrow.svg';
+import { ReactComponent as SeamlessDark } from '../../../assets/grouped-dark-mode.svg';
+import { ReactComponent as SeamlessWhite } from '../../../assets/grouped-white-mode.svg';
+import { useColorMode, Box } from '@chakra-ui/react';
+
+export const Slide2 = ({ onAction }) => {
+  const { colorMode } = useColorMode();
+  return (
+    <Slide
+      showTerms
+      title="Same experience, better infrastructure"
+      image={
+        <Box mb={'40px'}>
+          {colorMode === 'light' ? (
+            <SeamlessWhite width="208px" height="102px" />
+          ) : (
+            <SeamlessDark width="208px" height="102px" />
+          )}
+        </Box>
+      }
+      description={[
+        'On the surface, Nami is the same.',
+        "But now, with Lace's advanced",
+        'technology supporting it',
+      ]}
+      buttonText="Migrate your wallet"
+      buttonIcon={Arrow}
+      onButtonClick={onAction}
+    />
+  );
+};

src/ui/lace-migration/components/seamless-upgrade/seamless-upgrade.stories.js → src/ui/lace-migration/components/carousel/slides/Slide2.stories.js

@@ -1,8 +1,8 @@
-import { SeamlessUpgrade } from './seamless-upgrade.component';
+import { Slide2 } from './Slide2.component';
 
 const meta = {
-  title: 'SeamlessUpgrade',
-  component: SeamlessUpgrade,
+  title: 'Nami Migration/Screens/Carousel/Slide 2',
+  component: Slide2,
   parameters: {
     layout: 'centered',
   },

src/ui/lace-migration/components/carousel/slides/Slide3.component.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Slide } from '../../slide.component';
+import { ReactComponent as Arrow } from '../../../assets/arrow.svg';
+import { Box } from '@chakra-ui/react';
+import { ReactComponent as FeaturesImg } from '../../../assets/features.svg';
+
+export const Slide3 = ({ onAction }) => {
+  return (
+    <Slide
+      showTerms
+      title="Seamless switch"
+      description={[
+        "Send all your wallets to Lace's new",
+        'Nami Mode with one single click!',
+      ]}
+      image={
+        <Box>
+          <FeaturesImg width="296px" height="172px" />
+        </Box>
+      }
+      buttonText="Migrate your wallet"
+      buttonIcon={Arrow}
+      onButtonClick={onAction}
+    />
+  );
+};

src/ui/lace-migration/components/its-time-to-upgrade/its-time-to-upgrade.stories.js → src/ui/lace-migration/components/carousel/slides/Slide3.stories.js

@@ -1,8 +1,8 @@
-import { ItsTimetToUpgrade } from './its-time-to-upgrade.component';
+import { Slide3 } from './Slide3.component';
 
 const meta = {
-  title: 'ItsTimetToUpgrade',
-  component: ItsTimetToUpgrade,
+  title: 'Nami Migration/Screens/Carousel/Slide 3',
+  component: Slide3,
   parameters: {
     layout: 'centered',
   },

src/ui/lace-migration/components/index.js

@@ -1,6 +1,6 @@
 export { AllDone } from './all-done/all-done.component';
 export { AlmostThere } from './almost-there/almost-there.component';
 export { Carousel } from './carousel/carousel.component';
-export { ItsTimetToUpgrade } from './its-time-to-upgrade/its-time-to-upgrade.component';
-export { NewFeatures } from './new-features/new-features.component';
+export { Slide1 } from './carousel/slides/Slide1.component';
+export { Slide3 } from './carousel/slides/Slide3.component';
 export { SeamlessUpgrade } from './seamless-upgrade/seamless-upgrade.component';

src/ui/lace-migration/components/migration-view/migration-view.component.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import { MigrationState } from '@xsy/nami-migration-tool/dist/migrator/migration-state.data';
 import { Carousel } from '../carousel/carousel.component';
-import { ItsTimetToUpgrade } from '../its-time-to-upgrade/its-time-to-upgrade.component';
-import { SeamlessUpgrade } from '../seamless-upgrade/seamless-upgrade.component';
-import { NewFeatures } from '../new-features/new-features.component';
+import { Slide1 } from '../carousel/slides/Slide1.component';
+import { Slide2 } from '../carousel/slides/Slide2.component';
+import { Slide3 } from '../carousel/slides/Slide3.component';
 import { AlmostThere } from '../almost-there/almost-there.component';
 import { AllDone } from '../all-done/all-done.component';
 import { NoWallet } from '../no-wallet/no-wallet.component';
@@ -20,45 +20,51 @@ export const MigrationView = ({
   onDownloadLaceClicked,
   onOpenLaceClicked,
   onNoWalletActionClick,
-  hasWallet
+  hasWallet,
 }) => {
   const bgColor = useColorModeValue('#FFF', '#1A202C');
 
   if (!hasWallet) {
-    return <div style={{ padding: '30px 40px', backgroundColor: bgColor }}>
-      <NoWallet
-        isLaceInstalled={isLaceInstalled}
-        onAction={onNoWalletActionClick}
-      />
-    </div>;
+    return (
+      <div style={{ padding: '30px 40px', backgroundColor: bgColor }}>
+        <NoWallet
+          isLaceInstalled={isLaceInstalled}
+          onAction={onNoWalletActionClick}
+        />
+      </div>
+    );
   }
 
   switch (migrationState) {
     case MigrationState.None:
       return (
         <div style={{ padding: '30px 0', backgroundColor: bgColor }}>
           <Carousel onSlideSwitched={onSlideSwitched}>
-            <ItsTimetToUpgrade key="1" onAction={onUpgradeWalletClicked} />
-            <SeamlessUpgrade key="2" onAction={onUpgradeWalletClicked} />
-            <NewFeatures key="3" onAction={onUpgradeWalletClicked} />
+            <Slide1 key="1" onAction={onUpgradeWalletClicked} />
+            <Slide2 key="2" onAction={onUpgradeWalletClicked} />
+            <Slide3 key="3" onAction={onUpgradeWalletClicked} />
           </Carousel>
         </div>
       );
 
     case MigrationState.InProgress:
-      if(!isLaceInstalled) {
+      if (!isLaceInstalled) {
         onWaitingForLaceScreenViewed?.();
-        return <div style={{ padding: '30px 40px', backgroundColor: bgColor }}>
-          <AlmostThere
-            isLaceInstalled={false}
-            onAction={onDownloadLaceClicked}
-          />
-        </div>;
+        return (
+          <div style={{ padding: '30px 40px', backgroundColor: bgColor }}>
+            <AlmostThere
+              isLaceInstalled={false}
+              onAction={onDownloadLaceClicked}
+            />
+          </div>
+        );
       } else {
         onOpenLaceScreenViewed?.();
-        return <div style={{ padding: '30px 40px', backgroundColor: bgColor }}>
-          <AlmostThere isLaceInstalled onAction={onOpenLaceClicked} />
-        </div>;
+        return (
+          <div style={{ padding: '30px 40px', backgroundColor: bgColor }}>
+            <AlmostThere isLaceInstalled onAction={onOpenLaceClicked} />
+          </div>
+        );
       }
 
     case MigrationState.Completed: