From babf9932addc4519070fe5ea027fa26cba5bb844 Mon Sep 17 00:00:00 2001
From: Bastien Lopez <bastien.lopez40@gmail.com>
Date: Mon, 14 Oct 2024 23:22:11 +0200
Subject: [PATCH] dispatch wallet screen

---
 docs/wallet/main-wallet-screens.md            | 72 -------------------
 docs/wallet/wallet-screen/display-screen.md   | 22 ++++++
 .../wallet-screen/settings-menu-screen.md     | 24 +++++++
 docs/wallet/wallet-screen/wallet-screen.md    | 26 +++++++
 sidebars.ts                                   | 10 ++-
 5 files changed, 81 insertions(+), 73 deletions(-)
 delete mode 100644 docs/wallet/main-wallet-screens.md
 create mode 100644 docs/wallet/wallet-screen/display-screen.md
 create mode 100644 docs/wallet/wallet-screen/settings-menu-screen.md
 create mode 100644 docs/wallet/wallet-screen/wallet-screen.md

diff --git a/docs/wallet/main-wallet-screens.md b/docs/wallet/main-wallet-screens.md
deleted file mode 100644
index 5fbb864..0000000
--- a/docs/wallet/main-wallet-screens.md
+++ /dev/null
@@ -1,72 +0,0 @@
-# Main Wallet Screens
-
-Updated the 14th of October 2024.
-
-<!-- First image on the left, text on the right -->
-<div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
-  <div style={{ flex: 1 }}>
-    <img src="/img/ssi_screen/altme_wallet.png" alt="Altme Wallet Main Screen" style={{ width: '66%', marginRight: '20px' }} />
-  </div>
-  <div style={{ flex: 1 }}>
-    <p>This is the main screen of the wallet where all verifiable credentials stored in the wallet are displayed.</p>
-    <ol>
-      <li>My Wallet: to access the main screen of the wallet (this screen) with all verifiable credentials represented as cards.</li>
-      <li>Discover: to access the issuer marketplace of the wallet to get all the issuer links.</li>
-      <li>Scan button.</li>
-      <li>Buy coins: to access the <a href="https://wert.io">wert.io</a> exchange services to buy tokens and cryptos.</li>
-      <li>Chat: to access the chat screen and send/receive messages as text and images from company support.</li>
-      <li>Verifiable credentials stored in the wallet.</li>
-      <li>Add cards: to access the issuer marketplace.</li>
-      <li>Cards: This screen.</li>
-      <li>NFT: to access the list of NFTs of the active crypto account.</li>
-      <li>Coins: to access the list of cryptos and tokens of the active crypto account.</li>
-      <li>Settings: to access the settings menu.</li>
-      <li>Active crypto account: to access the list of crypto accounts.</li>
-      <li>Notifications: to access the notification screen to read messages sent by support to all users.</li>
-    </ol>
-  </div>
-</div>
-<br />
-
-<!-- Second image on the right, text on the left -->
-<div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px', flexDirection: 'row-reverse' }}>
-  <div style={{ flex: 1 }}>
-    <img src="/img/ssi_screen/talao_discover.png" alt="Talao Discover Screen" style={{ width: '66%', marginLeft: '20px' }} />
-  </div>
-  <div style={{ flex: 1 }}>
-    <p>This is the Discover screen of the wallet to access issuers.</p>
-    <ol>
-      <li>My Wallet: to access the main screen of the wallet with all verifiable credentials represented as cards.</li>
-      <li>Discover: to access the issuer marketplace of the wallet to get all the issuer links.</li>
-      <li>Scan: to open the wallet scanner.</li>
-      <li>Buy coins: to access the <a href="https://wert.io">wert.io</a> exchange services to buy tokens and cryptos.</li>
-      <li>Settings: to access the settings menu.</li>
-      <li>Issuer links.</li>
-      <li>Active crypto account: to access the list of crypto accounts.</li>
-    </ol>
-    <p>The issuer links depend on the configuration of the wallet.</p>
-  </div>
-</div>
-<br />
-
-<!-- Third image on the left, text on the right -->
-<div style={{ display: 'flex', alignItems: 'center' }}>
-  <div style={{ flex: 1 }}>
-    <img src="/img/ssi_screen/talao_settings.png" alt="Talao Settings Screen" style={{ width: '66%', marginRight: '20px' }} />
-  </div>
-  <div style={{ flex: 1 }}>
-    <p>This is the Settings menu of the wallet.</p>
-    <ol>
-      <li>Wallet Profiles: allows you to select one of the embedded ecosystem profiles.</li>
-      <li>Wallet Security: allows you to change the PIN code, use biometrics, show the wallet recovery phrase, manage user consent, backup, and restore features.</li>
-      <li>Wallet Settings: allows you to change the language and themes.</li>
-      <li>Self-Sovereign Identity: provides access to all DIDs, private keys, and OIDC4VC parameters for advanced users.</li>
-      <li>Developer Mode: allows advanced users to access raw data and protocol requests and responses.</li>
-      <li>Help Center: provides access to support chat, notifications, and email.</li>
-      <li>About: access the terms and conditions document.</li>
-      <li>Activity Log: displays all events such as issuances and credential presentations.</li>
-      <li>Reset: resets the wallet, deleting all credentials and private keys with no option to undo if no backup is available.</li>
-    </ol>
-    <p>The menu may vary depending on the configuration of the wallet.</p>
-  </div>
-</div>
diff --git a/docs/wallet/wallet-screen/display-screen.md b/docs/wallet/wallet-screen/display-screen.md
new file mode 100644
index 0000000..f59eddb
--- /dev/null
+++ b/docs/wallet/wallet-screen/display-screen.md
@@ -0,0 +1,22 @@
+# Display Screen
+
+Updated the 14th of October 2024.
+
+<div style={{ display: 'flex', alignItems: 'stretch', marginBottom: '20px' }}>
+  <div style={{ flex: '0 0 30%' }}>
+    <img src="/img/ssi_screen/talao_discover.png" alt="Talao Discover Screen" style={{ width: '100%', marginLeft: '50px', height: 'auto' }} />
+  </div>
+  <div style={{ flex: '0 0 70%', height: '100%', marginLeft: '150px' }}>
+    <p>This is the Discover screen of the wallet to access issuers.</p>
+    <ol>
+      <li>My Wallet: to access the main screen of the wallet with all verifiable credentials represented as cards.</li>
+      <li>Discover: to access the issuer marketplace of the wallet to get all the issuer links.</li>
+      <li>Scan: to open the wallet scanner.</li>
+      <li>Buy coins: to access the <a href="https://wert.io">wert.io</a> exchange services to buy tokens and cryptos.</li>
+      <li>Settings: to access the settings menu.</li>
+      <li>Issuer links.</li>
+      <li>Active crypto account: to access the list of crypto accounts.</li>
+    </ol>
+    <p>The issuer links depend on the configuration of the wallet.</p>
+  </div>
+</div>
diff --git a/docs/wallet/wallet-screen/settings-menu-screen.md b/docs/wallet/wallet-screen/settings-menu-screen.md
new file mode 100644
index 0000000..66e038a
--- /dev/null
+++ b/docs/wallet/wallet-screen/settings-menu-screen.md
@@ -0,0 +1,24 @@
+# Settings Menu
+
+Updated the 14th of October 2024.
+
+<div style={{ display: 'flex', alignItems: 'stretch', marginBottom: '20px' }}>
+  <div style={{ flex: '0 0 30%' }}>
+    <img src="/img/ssi_screen/talao_settings.png" alt="Talao Settings Screen" style={{ width: '100%', marginLeft: '50px', height: 'auto' }} />
+  </div>
+  <div style={{ flex: '0 0 70%', height: '100%', marginLeft: '150px' }}>
+    <p>This is the Settings menu of the wallet.</p>
+    <ol>
+      <li>Wallet Profiles: allows you to select one of the embedded ecosystem profiles.</li>
+      <li>Wallet Security: allows you to change the PIN code, use biometrics, show the wallet recovery phrase, manage user consent, backup, and restore features.</li>
+      <li>Wallet Settings: allows you to change the language and themes.</li>
+      <li>Self-Sovereign Identity: provides access to all DIDs, private keys, and OIDC4VC parameters for advanced users.</li>
+      <li>Developer Mode: allows advanced users to access raw data and protocol requests and responses.</li>
+      <li>Help Center: provides access to support chat, notifications, and email.</li>
+      <li>About: access the terms and conditions document.</li>
+      <li>Activity Log: displays all events such as issuances and credential presentations.</li>
+      <li>Reset: resets the wallet, deleting all credentials and private keys with no option to undo if no backup is available.</li>
+    </ol>
+    <p>The menu may vary depending on the configuration of the wallet.</p>
+  </div>
+</div>
diff --git a/docs/wallet/wallet-screen/wallet-screen.md b/docs/wallet/wallet-screen/wallet-screen.md
new file mode 100644
index 0000000..793d3ef
--- /dev/null
+++ b/docs/wallet/wallet-screen/wallet-screen.md
@@ -0,0 +1,26 @@
+# Main Wallet Screen
+
+Updated the 14th of October 2024.
+
+<div style={{ display: 'flex', alignItems: 'stretch', marginBottom: '20px' }}>
+  <div style={{ flex: '0 0 30%' }}>
+    <img src="/img/ssi_screen/altme_wallet.png" alt="Altme Wallet Main Screen" style={{ width: '100%', marginLeft: '50px', height: 'auto' }} />
+  </div>
+  <div style={{ flex: '0 0 70%', height: '100%', marginLeft: '150px' }}>
+    <p>This is the main screen of the wallet where all verifiable credentials stored in the wallet are displayed.</p>
+    <ol>
+      <li>My Wallet: to access the main screen of the wallet (this screen) with all verifiable credentials represented as cards.</li>
+      <li>Discover: to access the issuer marketplace of the wallet to get all the issuer links.</li>
+      <li>Scan button.</li>
+      <li>Buy coins: to access the <a href="https://wert.io">wert.io</a> exchange services to buy tokens and cryptos.</li>
+      <li>Chat: to access the chat screen and send/receive messages as text and images from company support.</li>
+      <li>Verifiable credentials stored in the wallet.</li>
+      <li>Add cards: to access the issuer marketplace.</li>
+      <li>NFT: to access the list of NFTs of the active crypto account.</li>
+      <li>Coins: to access the list of cryptos and tokens of the active crypto account.</li>
+      <li>Settings: to access the settings menu.</li>
+      <li>Active crypto account: to access the list of crypto accounts.</li>
+      <li>Notifications: to access the notification screen to read messages sent by support to all users.</li>
+    </ol>
+  </div>
+</div>
diff --git a/sidebars.ts b/sidebars.ts
index b3f7797..71387b1 100644
--- a/sidebars.ts
+++ b/sidebars.ts
@@ -19,7 +19,15 @@ const sidebars: SidebarsConfig = {
       items: [
         'wallet/setup_wallet',
         'wallet/getting_started',
-        'wallet/main-wallet-screens',
+        {
+          type: 'category',
+          label: 'Wallet Screen',
+          items: [
+            'wallet/wallet-screen/wallet-screen',
+            'wallet/wallet-screen/display-screen',
+            'wallet/wallet-screen/settings-menu-screen',
+          ],
+        },
         'wallet/wallet-profiles',
         'wallet/oidc4vc_settings',
         'wallet/developer-mode',