feat(wallet): add new onboarding pages

.changeset/tasty-cows-relate.md

@@ -0,0 +1,5 @@
+---
+'@iota/apps-ui-icons': patch
+---
+
+Add Firefly and Wallet icons

apps/ui-icons/src/Firefly.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SVGProps } from 'react';
+export default function SvgFirefly(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            fill="none"
+            viewBox="0 0 24 24"
+            {...props}
+        >
+            <path
+                fill="currentColor"
+                fillRule="evenodd"
+                d="M6.015 3.765a4.66 4.66 0 0 1 4.407 1.206l6.225 6.164c.199.196.28.45.266.694a.92.92 0 0 1-.245.68l-6.016 6.427c-1.117 1.194-2.76 1.697-4.33 1.315-3.472-.845-4.693-5.269-2.247-7.898l.297-.319-.508-.506C1.31 8.985 2.518 4.641 6.015 3.765m.745 14.681c-2.021-.492-2.855-3.183-1.326-4.827l.282-.304a5.74 5.74 0 0 0 5.234.972l2.12-.653-3.774 4.033c-.669.715-1.631 1-2.536.78ZM18.75 3.625a3.125 3.125 0 1 1 0 6.25 3.125 3.125 0 0 1 0-6.25"
+                clipRule="evenodd"
+            />
+        </svg>
+    );
+}

apps/ui-icons/src/Keystone.tsx

@@ -9,16 +9,12 @@ export default function SvgKeystone(props: SVGProps<SVGSVGElement>) {
             width="1em"
             height="1em"
             fill="none"
-            viewBox="0 0 20 18"
+            viewBox="0 0 24 24"
             {...props}
         >
             <path
-                d="M13.0887 17.3327C11.7044 17.3327 10.3202 17.332 8.93585 17.3327C8.46126 17.3327 8.44287 17.3064 8.65532 16.8652C9.2089 15.7156 9.76997 14.5694 10.3202 13.4185C11.6697 10.592 13.0207 7.76689 14.3518 4.93166C14.5234 4.56641 14.7148 4.42582 15.1349 4.43659C16.3708 4.46955 17.608 4.45542 18.8452 4.44331C19.1182 4.44062 19.1931 4.50452 19.1584 4.78637C18.6478 8.87996 18.1547 12.9771 17.6754 17.0744C17.6216 17.3098 17.514 17.3327 17.3118 17.3313C15.905 17.3239 14.4976 17.3273 13.0908 17.3273C13.0887 17.33 13.0887 17.3313 13.0887 17.3327Z"
-                fill="currentColor"
-            />
-            <path
-                d="M11.5247 0.66906C11.2748 1.20113 11.046 1.69553 10.8118 2.18791C9.06727 5.84983 7.31868 9.5104 5.58371 13.1777C5.44753 13.4649 5.28615 13.551 4.97362 13.547C3.69145 13.5288 2.40929 13.5356 1.12713 13.5436C0.890856 13.545 0.80438 13.5255 0.841149 13.2356C1.11896 11.0245 1.36886 8.81017 1.63033 6.59647C1.85503 4.69556 2.0879 2.79531 2.30307 0.893053C2.33303 0.626683 2.49373 0.668387 2.65987 0.668387C5.12205 0.668387 7.58492 0.668387 10.0471 0.668387C10.5217 0.66906 10.9949 0.66906 11.5247 0.66906Z"
                 fill="currentColor"
+                d="M15.707 22h-4.984c-.57 0-.591-.032-.336-.561.664-1.38 1.337-2.755 1.998-4.136 1.62-3.392 3.24-6.782 4.838-10.184.206-.439.435-.607.94-.594 1.482.04 2.967.022 4.452.008.327-.003.417.073.376.411q-.918 7.37-1.78 14.746c-.065.283-.194.31-.436.308-1.689-.009-3.377-.005-5.066-.005zM13.83 2.004c-.3.638-.574 1.231-.855 1.822C10.88 8.221 8.783 12.613 6.7 17.014c-.164.345-.357.448-.732.443a226 226 0 0 0-4.616-.004c-.284.002-.387-.022-.343-.37.333-2.653.633-5.31.947-7.966.27-2.282.549-4.562.807-6.845.036-.32.229-.27.428-.27h8.865c.57.002 1.137.002 1.773.002Z"
             />
         </svg>
     );

apps/ui-icons/src/Passkey.tsx

@@ -15,16 +15,12 @@ export default function SvgPasskey(props: SVGProps<SVGSVGElement>) {
             <path
                 fill="currentColor"
                 fillRule="evenodd"
+                d="M18.5 9.5q1.45 0 2.475 1.025A3.37 3.37 0 0 1 22 13a3.3 3.3 0 0 1-.638 2q-.637.875-1.612 1.25v3.25h1.225v2H17.5v-5.15a3.45 3.45 0 0 1-1.8-1.238Q15 14.2 15 13q0-1.45 1.025-2.475A3.37 3.37 0 0 1 18.5 9.5m0 2a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3"
                 clipRule="evenodd"
-                d="M18.5 9.5C19.4667 9.5 20.2913 9.84206 20.9746 10.5254C21.6579 11.2087 22 12.0333 22 13C22 13.75 21.7873 14.4167 21.3623 15C20.9373 15.5833 20.4 16 19.75 16.25V19.5H20.9746V21.5H17.5V16.3496C16.7667 16.1329 16.1668 15.7206 15.7002 15.1123C15.2335 14.504 15 13.8 15 13C15 12.0333 15.3421 11.2087 16.0254 10.5254C16.7087 9.84206 17.5333 9.5 18.5 9.5ZM18.5 11.5C17.6716 11.5 17 12.1716 17 13C17 13.8284 17.6716 14.5 18.5 14.5C19.3284 14.5 20 13.8284 20 13C20 12.1716 19.3284 11.5 18.5 11.5Z"
             />
             <path
                 fill="currentColor"
-                d="M11 12.5C11.3333 12.5 11.6667 12.5121 12 12.5371C12.3333 12.5621 12.6667 12.6004 13 12.6504C12.9334 13.6169 13.1088 14.5295 13.5254 15.3877C13.942 16.2458 14.5498 16.9501 15.3496 17.5V19.5H3V16.7002C3 16.1336 3.14589 15.6127 3.4375 15.1377C3.72912 14.6628 4.11638 14.2998 4.59961 14.0498C5.63293 13.5331 6.68335 13.146 7.75 12.8877C8.81667 12.6294 9.9 12.5 11 12.5Z"
-            />
-            <path
-                fill="currentColor"
-                d="M11 3.5C12.1 3.5 13.0419 3.89147 13.8252 4.6748C14.6085 5.45814 15 6.4 15 7.5C15 8.6 14.6085 9.54186 13.8252 10.3252C13.0419 11.1085 12.1 11.5 11 11.5C9.9 11.5 8.95814 11.1085 8.1748 10.3252C7.39147 9.54186 7 8.6 7 7.5C7 6.4 7.39147 5.45814 8.1748 4.6748C8.95814 3.89147 9.9 3.5 11 3.5Z"
+                d="M11 12.5a13.4 13.4 0 0 1 2 .15q-.1 1.45.525 2.738A5.4 5.4 0 0 0 15.35 17.5v2H3v-2.8q0-.85.438-1.562A2.9 2.9 0 0 1 4.6 14.05a15 15 0 0 1 3.15-1.162A13.8 13.8 0 0 1 11 12.5m0-9q1.65 0 2.825 1.175T15 7.5c-.001 1.65-.392 2.042-1.175 2.825Q12.65 11.501 11 11.5c-1.65-.001-2.042-.392-2.825-1.175Q6.999 9.15 7 7.5c.001-1.65.391-2.042 1.175-2.825Q9.35 3.499 11 3.5"
             />
         </svg>
     );

apps/ui-icons/src/Wallet.tsx

@@ -0,0 +1,23 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SVGProps } from 'react';
+export default function SvgWallet(props: SVGProps<SVGSVGElement>) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="1em"
+            height="1em"
+            fill="none"
+            viewBox="0 0 24 24"
+            {...props}
+        >
+            <path
+                fill="currentColor"
+                fillRule="evenodd"
+                d="M3.175 18.825Q4.35 20 6 20h12q1.65 0 2.825-1.175T22 16V8q0-1.65-1.175-2.825T18 4H6Q4.35 4 3.175 5.175T2 8v8q0 1.65 1.175 2.825M18 8H6q-.55 0-1.05.125a3.4 3.4 0 0 0-.95.4V8q0-.824.588-1.412A1.93 1.93 0 0 1 6 6h12q.824 0 1.413.588Q20 7.175 20 8v.525a3.4 3.4 0 0 0-.95-.4A4.3 4.3 0 0 0 18 8m2 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0"
+                clipRule="evenodd"
+            />
+        </svg>
+    );
+}

apps/ui-icons/src/index.ts

@@ -1,6 +1,7 @@
 // Copyright (c) 2025 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+export { default as Passkey } from './Passkey';
 export { default as Activity } from './Activity';
 export { default as Add } from './Add';
 export { default as Apps } from './Apps';
@@ -35,6 +36,7 @@ export { default as Exclamation } from './Exclamation';
 export { default as Expand } from './Expand';
 export { default as Export } from './Export';
 export { default as FilterList } from './FilterList';
+export { default as Firefly } from './Firefly';
 export { default as Flag } from './Flag';
 export { default as GasStation } from './GasStation';
 export { default as Globe } from './Globe';
@@ -74,7 +76,6 @@ export { default as Play } from './Play';
 export { default as Profile } from './Profile';
 export { default as QrCode } from './QrCode';
 export { default as QuestionMarkFilled } from './QuestionMarkFilled';
-export { default as Passkey } from './Passkey';
 export { default as RadioOff } from './RadioOff';
 export { default as RadioOn } from './RadioOn';
 export { default as RecognizedBadge } from './RecognizedBadge';
@@ -104,4 +105,5 @@ export { default as Vest } from './Vest';
 export { default as Vesting } from './Vesting';
 export { default as VisibilityOff } from './VisibilityOff';
 export { default as VisibilityOn } from './VisibilityOn';
+export { default as Wallet } from './Wallet';
 export { default as Warning } from './Warning';

apps/wallet/src/ui/app/index.tsx

@@ -62,6 +62,8 @@ import { AccountsFinderPage } from './pages/accounts/manage/accounts-finder/Acco
 import { AccountsFinderIntroPage } from './pages/accounts/manage/accounts-finder/AccountsFinderIntroPage';
 import { PasskeyAccountPage } from './pages/accounts/PasskeyAccountPage';
 import { ImportKeystone } from './pages/accounts/ImportKeystone';
+import { CreateNewWallet } from './pages/accounts/CreateNewWallet';
+import { ImportExistingWallet } from './pages/accounts/ImportExistingWallet';
 
 const HIDDEN_MENU_PATHS = [
     '/nft-details',
@@ -190,6 +192,8 @@ export function App() {
             <Route path="accounts/*" element={<AccountsPage />}>
                 <Route path="welcome" element={<WelcomePage />} />
                 <Route path="add-account" element={<AddAccountPage />} />
+                <Route path="create-new" element={<CreateNewWallet />} />
+                <Route path="import-existing" element={<ImportExistingWallet />} />
                 <Route path="import-ledger-accounts" element={<ImportLedgerAccountsPage />} />
                 <Route path="import-passphrase" element={<ImportPassphrasePage />} />
                 <Route path="import-private-key" element={<ImportPrivateKeyPage />} />