@nockchain/rose 0.1.4-nightly.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/artifacts.yml +33 -0
- package/.github/workflows/ci.yml +68 -0
- package/.github/workflows/publish-sdk.yml +35 -0
- package/.nvmrc +1 -0
- package/.prettierignore +5 -0
- package/.prettierrc +8 -0
- package/LICENSE +22 -0
- package/README.md +117 -0
- package/extension/background/index.ts +1500 -0
- package/extension/content/index.ts +59 -0
- package/extension/icons/rose.svg +27 -0
- package/extension/icons/rose128.png +0 -0
- package/extension/icons/rose16.png +0 -0
- package/extension/icons/rose256.png +0 -0
- package/extension/icons/rose32.png +0 -0
- package/extension/icons/rose48.png +0 -0
- package/extension/icons/rose512.png +0 -0
- package/extension/inpage/index.ts +86 -0
- package/extension/manifest.json +48 -0
- package/extension/popup/Popup.tsx +94 -0
- package/extension/popup/Router.tsx +121 -0
- package/extension/popup/assets/arrow-down-icon.svg +3 -0
- package/extension/popup/assets/arrow-left-icon.svg +3 -0
- package/extension/popup/assets/arrow-right-icon.svg +3 -0
- package/extension/popup/assets/arrow-up-icon.svg +3 -0
- package/extension/popup/assets/arrow-up-right-icon.svg +3 -0
- package/extension/popup/assets/checkmark-icon.svg +3 -0
- package/extension/popup/assets/checkmark-pencil-icon.svg +3 -0
- package/extension/popup/assets/checkmark-success-icon.svg +3 -0
- package/extension/popup/assets/clock-icon.svg +3 -0
- package/extension/popup/assets/close-x-icon.svg +3 -0
- package/extension/popup/assets/copy-icon.svg +6 -0
- package/extension/popup/assets/explorer-icon.svg +3 -0
- package/extension/popup/assets/eye-off-icon.svg +3 -0
- package/extension/popup/assets/eye-open-icon.svg +4 -0
- package/extension/popup/assets/feedback-icon.svg +3 -0
- package/extension/popup/assets/green-status-dot.svg +3 -0
- package/extension/popup/assets/info-icon.svg +3 -0
- package/extension/popup/assets/iris-logo-40.svg +27 -0
- package/extension/popup/assets/iris-logo-96.svg +27 -0
- package/extension/popup/assets/iris-logo-blue.svg +27 -0
- package/extension/popup/assets/iris-logo-no-eye.svg +27 -0
- package/extension/popup/assets/iris-logo-orange.svg +27 -0
- package/extension/popup/assets/iris-logo.svg +27 -0
- package/extension/popup/assets/key-icon.svg +3 -0
- package/extension/popup/assets/lock-icon-yellow.svg +3 -0
- package/extension/popup/assets/lock-icon.svg +3 -0
- package/extension/popup/assets/pencil-edit-icon.svg +3 -0
- package/extension/popup/assets/permissions-icon.svg +3 -0
- package/extension/popup/assets/receipt-icon.svg +5 -0
- package/extension/popup/assets/refresh-icon.svg +3 -0
- package/extension/popup/assets/settings-gear-icon.svg +8 -0
- package/extension/popup/assets/settings-icon.svg +3 -0
- package/extension/popup/assets/theme-icon.svg +3 -0
- package/extension/popup/assets/trash-bin-icon.svg +3 -0
- package/extension/popup/assets/trend-down-arrow.svg +5 -0
- package/extension/popup/assets/trend-up-arrow.svg +5 -0
- package/extension/popup/assets/user-account-icon.svg +3 -0
- package/extension/popup/assets/vector-bottom-left.svg +9 -0
- package/extension/popup/assets/vector-left.svg +9 -0
- package/extension/popup/assets/vector-right.svg +9 -0
- package/extension/popup/assets/vector-top-right-rotated.svg +8 -0
- package/extension/popup/assets/vector-top-right.svg +9 -0
- package/extension/popup/assets/wallet-dropdown-arrow.svg +5 -0
- package/extension/popup/assets/wallet-icon-style-1.svg +6 -0
- package/extension/popup/assets/wallet-icon-style-10.svg +8 -0
- package/extension/popup/assets/wallet-icon-style-11.svg +8 -0
- package/extension/popup/assets/wallet-icon-style-12.svg +8 -0
- package/extension/popup/assets/wallet-icon-style-13.svg +8 -0
- package/extension/popup/assets/wallet-icon-style-14.svg +8 -0
- package/extension/popup/assets/wallet-icon-style-15.svg +8 -0
- package/extension/popup/assets/wallet-icon-style-2.svg +8 -0
- package/extension/popup/assets/wallet-icon-style-3.svg +8 -0
- package/extension/popup/assets/wallet-icon-style-4.svg +8 -0
- package/extension/popup/assets/wallet-icon-style-5.svg +8 -0
- package/extension/popup/assets/wallet-icon-style-6.svg +8 -0
- package/extension/popup/assets/wallet-icon-style-7.svg +8 -0
- package/extension/popup/assets/wallet-icon-style-8.svg +8 -0
- package/extension/popup/assets/wallet-icon-style-9.svg +8 -0
- package/extension/popup/components/AccountIcon.tsx +78 -0
- package/extension/popup/components/AccountSelector.tsx +246 -0
- package/extension/popup/components/Alert.tsx +48 -0
- package/extension/popup/components/ConfirmModal.tsx +81 -0
- package/extension/popup/components/PasswordInput.tsx +49 -0
- package/extension/popup/components/ScreenContainer.tsx +17 -0
- package/extension/popup/components/SiteIcon.tsx +60 -0
- package/extension/popup/components/ThemeToggle.tsx +44 -0
- package/extension/popup/components/icons/ArrowDownLeftIcon.tsx +20 -0
- package/extension/popup/components/icons/ArrowUpRightIcon.tsx +20 -0
- package/extension/popup/components/icons/CheckIcon.tsx +20 -0
- package/extension/popup/components/icons/ChevronDownIcon.tsx +15 -0
- package/extension/popup/components/icons/ChevronLeftIcon.tsx +15 -0
- package/extension/popup/components/icons/ChevronRightIcon.tsx +15 -0
- package/extension/popup/components/icons/ChevronUpIcon.tsx +15 -0
- package/extension/popup/components/icons/CloseIcon.tsx +26 -0
- package/extension/popup/components/icons/CopyIcon.tsx +20 -0
- package/extension/popup/components/icons/EditIcon.tsx +20 -0
- package/extension/popup/components/icons/EyeIcon.tsx +13 -0
- package/extension/popup/components/icons/EyeOffIcon.tsx +13 -0
- package/extension/popup/components/icons/InfoIcon.tsx +20 -0
- package/extension/popup/components/icons/LockIcon.tsx +20 -0
- package/extension/popup/components/icons/PlusIcon.tsx +15 -0
- package/extension/popup/components/icons/ReceiveArrowIcon.tsx +14 -0
- package/extension/popup/components/icons/ReceiveCircleIcon.tsx +20 -0
- package/extension/popup/components/icons/SendPaperPlaneIcon.tsx +18 -0
- package/extension/popup/components/icons/SentArrowIcon.tsx +21 -0
- package/extension/popup/components/icons/SettingsIcon.tsx +26 -0
- package/extension/popup/components/icons/ShieldIcon.tsx +20 -0
- package/extension/popup/components/icons/UploadIcon.tsx +20 -0
- package/extension/popup/components/icons/WalletIcon.tsx +20 -0
- package/extension/popup/contexts/ThemeContext.tsx +105 -0
- package/extension/popup/hooks/useApprovalDetection.ts +128 -0
- package/extension/popup/hooks/useAutoFocus.ts +36 -0
- package/extension/popup/hooks/useAutoRejectOnClose.ts +25 -0
- package/extension/popup/hooks/useClickOutside.ts +33 -0
- package/extension/popup/hooks/useCopyToClipboard.ts +33 -0
- package/extension/popup/hooks/useFavicon.ts +64 -0
- package/extension/popup/hooks/useNumericInput.ts +93 -0
- package/extension/popup/index.html +13 -0
- package/extension/popup/index.tsx +24 -0
- package/extension/popup/screens/AboutScreen.tsx +118 -0
- package/extension/popup/screens/HomeScreen.tailwind.css +85 -0
- package/extension/popup/screens/HomeScreen.tsx +902 -0
- package/extension/popup/screens/KeySettingsPasswordScreen.tsx +164 -0
- package/extension/popup/screens/LockTimeScreen.tsx +155 -0
- package/extension/popup/screens/ReceiveScreen.tsx +149 -0
- package/extension/popup/screens/RecoveryPhraseScreen.tsx +183 -0
- package/extension/popup/screens/SendReviewScreen.tsx +308 -0
- package/extension/popup/screens/SendScreen.tsx +825 -0
- package/extension/popup/screens/SendSubmittedScreen.tsx +193 -0
- package/extension/popup/screens/SettingsScreen.tsx +116 -0
- package/extension/popup/screens/ThemeSettingsScreen.tsx +107 -0
- package/extension/popup/screens/TransactionDetailsScreen.tsx +346 -0
- package/extension/popup/screens/ViewSecretPhraseScreen.tsx +212 -0
- package/extension/popup/screens/WalletPermissionsScreen.tsx +123 -0
- package/extension/popup/screens/WalletSettingsScreen.tsx +381 -0
- package/extension/popup/screens/WalletStylingScreen.tsx +306 -0
- package/extension/popup/screens/approvals/ConnectApprovalScreen.tsx +136 -0
- package/extension/popup/screens/approvals/SignMessageScreen.tsx +140 -0
- package/extension/popup/screens/approvals/SignRawTxScreen.tsx +320 -0
- package/extension/popup/screens/approvals/TransactionApprovalScreen.tsx +167 -0
- package/extension/popup/screens/onboarding/BackupScreen.tsx +254 -0
- package/extension/popup/screens/onboarding/CreateScreen.tsx +273 -0
- package/extension/popup/screens/onboarding/ImportScreen.tsx +676 -0
- package/extension/popup/screens/onboarding/ImportScreenV0.tsx +678 -0
- package/extension/popup/screens/onboarding/ImportSuccessScreen.tsx +236 -0
- package/extension/popup/screens/onboarding/ResumeBackupScreen.tsx +166 -0
- package/extension/popup/screens/onboarding/StartScreen.tsx +142 -0
- package/extension/popup/screens/onboarding/SuccessScreen.tsx +193 -0
- package/extension/popup/screens/onboarding/VerifyScreen.tsx +220 -0
- package/extension/popup/screens/system/LockedScreen.tsx +288 -0
- package/extension/popup/screens/transactions/ReceiveScreen.tsx +84 -0
- package/extension/popup/screens/transactions/SentScreen.tsx +138 -0
- package/extension/popup/store.ts +482 -0
- package/extension/popup/styles.css +246 -0
- package/extension/popup/utils/format.ts +58 -0
- package/extension/popup/utils/formatWalletError.ts +36 -0
- package/extension/popup/utils/memo.ts +299 -0
- package/extension/popup/utils/messaging.ts +16 -0
- package/extension/shared/address-encoding.ts +69 -0
- package/extension/shared/balance-query.ts +123 -0
- package/extension/shared/constants.ts +386 -0
- package/extension/shared/currency.ts +128 -0
- package/extension/shared/first-name-derivation.ts +128 -0
- package/extension/shared/keyfile.ts +58 -0
- package/extension/shared/onboarding.ts +78 -0
- package/extension/shared/price-api.ts +79 -0
- package/extension/shared/rpc-client-browser.ts +315 -0
- package/extension/shared/transaction-builder.ts +443 -0
- package/extension/shared/types.ts +450 -0
- package/extension/shared/utxo-diff.ts +212 -0
- package/extension/shared/utxo-store.ts +548 -0
- package/extension/shared/utxo-sync.ts +343 -0
- package/extension/shared/validators.ts +26 -0
- package/extension/shared/vault.ts +1580 -0
- package/extension/shared/wallet-crypto.ts +77 -0
- package/extension/shared/wasm-utils.ts +76 -0
- package/extension/shared/webcrypto.ts +67 -0
- package/extension/types/wasm.d.ts +13 -0
- package/package.json +39 -0
- package/postcss.config.js +6 -0
- package/rose-extension-dist.zip +0 -0
- package/sdk/README.md +88 -0
- package/sdk/examples/app.ts +166 -0
- package/sdk/examples/index.html +51 -0
- package/sdk/examples/tsconfig.json +15 -0
- package/sdk/examples/tx-builder.html +532 -0
- package/sdk/examples/tx-builder.ts +1766 -0
- package/sdk/package-lock.json +424 -0
- package/sdk/package.json +68 -0
- package/sdk/src/constants.ts +28 -0
- package/sdk/src/errors.ts +74 -0
- package/sdk/src/hooks/index.ts +1 -0
- package/sdk/src/hooks/use-rose.ts +94 -0
- package/sdk/src/index.ts +12 -0
- package/sdk/src/provider.ts +396 -0
- package/sdk/src/transaction.ts +163 -0
- package/sdk/src/types/rose-wasm.d.ts +14 -0
- package/sdk/src/types.ts +97 -0
- package/sdk/src/wasm.ts +13 -0
- package/sdk/tsconfig.json +20 -0
- package/sdk/vite.config.examples.ts +32 -0
- package/tailwind.config.ts +38 -0
- package/tsconfig.json +20 -0
- package/vite.config.ts +60 -0
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="logo">
|
|
3
|
+
<g id="Union">
|
|
4
|
+
<path d="M21.8997 12.8654C23.2917 11.4734 25.5487 11.4734 26.9407 12.8654C28.3327 14.2574 28.3327 16.5144 26.9407 17.9064C25.5487 19.2984 23.2917 19.2984 21.8997 17.9064C20.5077 16.5144 20.5077 14.2574 21.8997 12.8654Z" fill="var(--fill-0, #5968fb)"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.9711 0C29.2956 0 31.9906 2.695 31.9906 6.01942V7.96116H33.9323C37.2568 7.96119 39.9517 10.6563 39.9517 13.9808C39.9517 17.3026 37.2609 19.9958 33.9401 20C37.261 20.0041 39.9519 22.6975 39.9519 26.0194C39.9519 29.3438 37.2569 32.0388 33.9325 32.0388H31.9908V33.9804C31.9908 37.3049 29.2956 40 25.9711 40C22.9069 40 20.3772 37.7102 20.0001 34.7484C19.6229 37.7102 17.0937 40 14.0294 40C10.7049 40 8.00979 37.3049 8.00979 33.9804V32.0388H6.06804C2.74366 32.0388 0.0486633 29.3438 0.0486247 26.0194C0.0486245 22.6976 2.73943 20.0042 6.06027 20C2.73951 19.9957 0.0488652 17.3025 0.0488143 13.9808C0.0488142 10.6563 2.74378 7.96119 6.06823 7.96116H8.00998V6.01942C8.00999 2.695 10.705 0 14.0294 0C17.0936 2.36158e-05 19.623 2.28959 20.0003 5.25125C20.3775 2.28959 22.907 2.36158e-05 25.9711 0ZM28.6012 11.3989C25.8484 8.64607 19.7659 10.2653 15.0156 15.0155C10.2653 19.7659 8.64594 25.8485 11.3987 28.6013C14.1516 31.3542 20.2342 29.735 24.9845 24.9846C29.7349 20.2343 31.3541 14.1517 28.6012 11.3989Z" fill="var(--fill-0, #5968fb)"/>
|
|
6
|
+
</g>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="logo">
|
|
3
|
+
<g id="Union">
|
|
4
|
+
<path d="M20.0486 15.6314C22.4613 15.6314 24.4172 17.5873 24.4172 20C24.4172 22.4127 22.4613 24.3686 20.0486 24.3686C17.6359 24.3685 15.6801 22.4127 15.6801 20C15.6801 17.5873 17.6359 15.6315 20.0486 15.6314Z" fill="var(--fill-0, #5968fb)"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.9711 0C29.2956 0 31.9906 2.695 31.9906 6.01942V7.96116H33.9323C37.2568 7.96119 39.9517 10.6563 39.9517 13.9808C39.9517 17.3026 37.2609 19.9958 33.9401 20C37.261 20.0041 39.9519 22.6975 39.9519 26.0194C39.9519 29.3438 37.2569 32.0388 33.9325 32.0388H31.9908V33.9804C31.9908 37.3049 29.2956 40 25.9711 40C22.9069 40 20.3772 37.7102 20.0001 34.7484C19.6229 37.7102 17.0937 40 14.0294 40C10.7049 40 8.00979 37.3049 8.00979 33.9804V32.0388H6.06804C2.74366 32.0388 0.0486633 29.3438 0.0486247 26.0194C0.0486245 22.6976 2.73943 20.0042 6.06027 20C2.73951 19.9957 0.0488652 17.3025 0.0488143 13.9808C0.0488142 10.6563 2.74378 7.96119 6.06823 7.96116H8.00998V6.01942C8.00999 2.695 10.705 0 14.0294 0C17.0936 2.36158e-05 19.623 2.28959 20.0003 5.25125C20.3775 2.28959 22.907 2.36158e-05 25.9711 0ZM20.0001 13.4953C13.9861 13.4953 9.11075 16.4076 9.11075 20C9.11078 23.5924 13.9861 26.5047 20.0001 26.5047C26.0141 26.5047 30.8894 23.5924 30.8894 20C30.8894 16.4076 26.0141 13.4953 20.0001 13.4953Z" fill="var(--fill-0, #5968fb)"/>
|
|
6
|
+
</g>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="logo">
|
|
3
|
+
<g id="Union">
|
|
4
|
+
<path d="M20.0486 15.6314C22.4613 15.6314 24.4172 17.5873 24.4172 20C24.4172 22.4127 22.4613 24.3686 20.0486 24.3686C17.6359 24.3685 15.6801 22.4127 15.6801 20C15.6801 17.5873 17.6359 15.6315 20.0486 15.6314Z" fill="var(--fill-0, #5968fb)"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.9711 0C29.2956 0 31.9906 2.695 31.9906 6.01942V7.96116H33.9323C37.2568 7.96119 39.9517 10.6563 39.9517 13.9808C39.9517 17.3026 37.2609 19.9958 33.9401 20C37.261 20.0041 39.9519 22.6975 39.9519 26.0194C39.9519 29.3438 37.2569 32.0388 33.9325 32.0388H31.9908V33.9804C31.9908 37.3049 29.2956 40 25.9711 40C22.9069 40 20.3772 37.7102 20.0001 34.7484C19.6229 37.7102 17.0937 40 14.0294 40C10.7049 40 8.00979 37.3049 8.00979 33.9804V32.0388H6.06804C2.74366 32.0388 0.0486633 29.3438 0.0486247 26.0194C0.0486245 22.6976 2.73943 20.0042 6.06027 20C2.73951 19.9957 0.0488652 17.3025 0.0488143 13.9808C0.0488142 10.6563 2.74378 7.96119 6.06823 7.96116H8.00998V6.01942C8.00999 2.695 10.705 0 14.0294 0C17.0936 2.36158e-05 19.623 2.28959 20.0003 5.25125C20.3775 2.28959 22.907 2.36158e-05 25.9711 0ZM20.0001 27.6519C19.3985 27.6519 18.9109 28.1395 18.9109 28.7411V31.7521C18.9109 32.3537 19.3985 32.8413 20.0001 32.8413C20.6016 32.8413 21.0893 32.3536 21.0893 31.7521V28.7411C21.0893 28.1396 20.6016 27.6519 20.0001 27.6519ZM15.3077 26.3662C14.8468 25.9796 14.1597 26.0397 13.773 26.5005L11.8375 28.8071C11.4509 29.2679 11.5111 29.9549 11.9718 30.3415C12.4326 30.7282 13.1198 30.6681 13.5064 30.2073L15.4419 27.9007C15.8285 27.4399 15.7684 26.7529 15.3077 26.3662ZM26.2269 26.5005C25.8403 26.0397 25.1533 25.9796 24.6925 26.3662C24.2317 26.7529 24.1716 27.4399 24.5583 27.9007L26.4937 30.2073C26.8804 30.6681 27.5674 30.7282 28.0282 30.3415C28.489 29.9548 28.5491 29.2679 28.1624 28.8071L26.2269 26.5005ZM23.7958 14.6162C21.52 13.0654 18.5269 13.0654 16.251 14.6162L9.50004 19.2167C8.93451 19.602 8.93451 20.4359 9.50004 20.8213L16.251 25.4217C18.5269 26.9726 21.52 26.9726 23.7958 25.4217L30.547 20.8213C31.1124 20.4359 31.1124 19.602 30.547 19.2167L23.7958 14.6162ZM13.5064 9.79274C13.1198 9.33194 12.4326 9.27184 11.9718 9.65849C11.5111 10.0451 11.4509 10.7321 11.8375 11.1929L13.773 13.4995C14.1597 13.9603 14.8468 14.0204 15.3077 13.6338C15.7684 13.2471 15.8285 12.5601 15.4419 12.0993L13.5064 9.79274ZM28.0282 9.65849C27.5674 9.27183 26.8804 9.33195 26.4937 9.79274L24.5583 12.0993C24.1716 12.5601 24.2317 13.2471 24.6925 13.6338C25.1533 14.0204 25.8403 13.9603 26.2269 13.4995L28.1624 11.1929C28.5491 10.7321 28.489 10.0452 28.0282 9.65849ZM20.0001 7.15868C19.3985 7.15868 18.9109 7.64633 18.9109 8.24788V11.2589C18.9109 11.8605 19.3985 12.3481 20.0001 12.3481C20.6016 12.3481 21.0893 11.8604 21.0893 11.2589V8.24788C21.0893 7.64635 20.6016 7.15872 20.0001 7.15868Z" fill="var(--fill-0, #5968fb)"/>
|
|
6
|
+
</g>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="logo">
|
|
3
|
+
<g id="Union">
|
|
4
|
+
<path d="M20.0486 15.6314C22.4613 15.6314 24.4172 17.5873 24.4172 20C24.4172 22.4127 22.4613 24.3686 20.0486 24.3686C17.6359 24.3685 15.6801 22.4127 15.6801 20C15.6801 17.5873 17.6359 15.6315 20.0486 15.6314Z" fill="var(--fill-0, #5968fb)"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.9711 0C29.2956 0 31.9906 2.695 31.9906 6.01942V7.96116H33.9323C37.2568 7.96119 39.9517 10.6563 39.9517 13.9808C39.9517 17.3026 37.2609 19.9958 33.9401 20C37.261 20.0041 39.9519 22.6975 39.9519 26.0194C39.9519 29.3438 37.2569 32.0388 33.9325 32.0388H31.9908V33.9804C31.9908 37.3049 29.2956 40 25.9711 40C22.9069 40 20.3772 37.7102 20.0001 34.7484C19.6229 37.7102 17.0937 40 14.0294 40C10.7049 40 8.00979 37.3049 8.00979 33.9804V32.0388H6.06804C2.74366 32.0388 0.0486633 29.3438 0.0486247 26.0194C0.0486245 22.6976 2.73943 20.0042 6.06027 20C2.73951 19.9957 0.0488652 17.3025 0.0488143 13.9808C0.0488142 10.6563 2.74378 7.96119 6.06823 7.96116H8.00998V6.01942C8.00999 2.695 10.705 0 14.0294 0C17.0936 2.36158e-05 19.623 2.28959 20.0003 5.25125C20.3775 2.28959 22.907 2.36158e-05 25.9711 0ZM20.0001 27.6519C19.3985 27.6519 18.9109 28.1395 18.9109 28.7411V31.7521C18.9109 32.3537 19.3985 32.8413 20.0001 32.8413C20.6016 32.8413 21.0893 32.3536 21.0893 31.7521V28.7411C21.0893 28.1396 20.6016 27.6519 20.0001 27.6519ZM23.7958 14.6162C21.52 13.0654 18.5269 13.0654 16.251 14.6162L9.50004 19.2167C8.93451 19.602 8.93451 20.4359 9.50004 20.8213L16.251 25.4217C18.5269 26.9726 21.52 26.9726 23.7958 25.4217L30.547 20.8213C31.1124 20.4359 31.1124 19.602 30.547 19.2167L23.7958 14.6162ZM13.5064 9.79274C13.1198 9.33193 12.4326 9.27184 11.9718 9.65849C11.5111 10.0452 11.4509 10.7321 11.8375 11.1929L13.773 13.4995C14.1597 13.9603 14.8468 14.0204 15.3077 13.6338C15.7684 13.2471 15.8285 12.5601 15.4419 12.0993L13.5064 9.79274ZM28.0282 9.65849C27.5674 9.27182 26.8804 9.33194 26.4937 9.79274L24.5583 12.0993C24.1716 12.5601 24.2317 13.2471 24.6925 13.6338C25.1533 14.0204 25.8403 13.9603 26.2269 13.4995L28.1624 11.1929C28.5491 10.7321 28.489 10.0452 28.0282 9.65849Z" fill="var(--fill-0, #5968fb)"/>
|
|
6
|
+
</g>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="logo">
|
|
3
|
+
<g id="Union">
|
|
4
|
+
<path d="M20.0486 15.6314C22.4613 15.6314 24.4172 17.5873 24.4172 20C24.4172 22.4127 22.4613 24.3686 20.0486 24.3686C17.6359 24.3685 15.6801 22.4127 15.6801 20C15.6801 17.5873 17.6359 15.6315 20.0486 15.6314Z" fill="var(--fill-0, #5968fb)"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.9711 0C29.2956 0 31.9906 2.695 31.9906 6.01942V7.96116H33.9323C37.2568 7.96119 39.9517 10.6563 39.9517 13.9808C39.9517 17.3026 37.2609 19.9958 33.9401 20C37.261 20.0041 39.9519 22.6975 39.9519 26.0194C39.9519 29.3438 37.2569 32.0388 33.9325 32.0388H31.9908V33.9804C31.9908 37.3049 29.2956 40 25.9711 40C22.9069 40 20.3772 37.7102 20.0001 34.7484C19.6229 37.7102 17.0937 40 14.0294 40C10.7049 40 8.00979 37.3049 8.00979 33.9804V32.0388H6.06804C2.74366 32.0388 0.0486633 29.3438 0.0486247 26.0194C0.0486245 22.6976 2.73943 20.0042 6.06027 20C2.73951 19.9957 0.0488652 17.3025 0.0488143 13.9808C0.0488142 10.6563 2.74378 7.96119 6.06823 7.96116H8.00998V6.01942C8.00999 2.695 10.705 0 14.0294 0C17.0936 2.36158e-05 19.623 2.28959 20.0003 5.25125C20.3775 2.28959 22.907 2.36158e-05 25.9711 0ZM20.0001 13.6895C13.9861 13.6895 9.11075 16.5148 9.11075 20C9.11078 23.4851 13.9861 26.3105 20.0001 26.3105C26.0141 26.3105 30.8894 23.4851 30.8894 20C30.8894 16.5148 26.0141 13.6895 20.0001 13.6895ZM19.9999 9.27943C16.0382 9.27945 12.243 11.2361 9.70408 13.0835C8.97014 13.5717 10.0504 14.5037 10.8852 14.1093C13.2413 12.9963 16.2509 11.591 19.9999 11.5909L20.2699 11.5925C23.8935 11.6309 26.815 13.0231 29.1142 14.1091C29.949 14.5035 31.0298 13.5719 30.2959 13.0837C27.8022 11.2664 24.0774 9.32443 20.1933 9.28057L19.9999 9.27943Z" fill="var(--fill-0, #5968fb)"/>
|
|
6
|
+
</g>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="logo">
|
|
3
|
+
<g id="Union">
|
|
4
|
+
<path d="M20.0008 18.0207C22.5733 18.0207 24.6588 20.1062 24.6588 22.6786C24.6587 25.2511 22.5733 27.3365 20.0008 27.3365C17.4284 27.3365 15.3429 25.2511 15.3429 22.6786C15.3429 20.1061 17.4284 18.0207 20.0008 18.0207Z" fill="var(--fill-0, #5968fb)"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.9711 0C29.2956 0 31.9906 2.695 31.9906 6.01942V7.96116H33.9323C37.2568 7.96119 39.9517 10.6563 39.9517 13.9808C39.9517 17.3026 37.2609 19.9958 33.9401 20C37.261 20.0041 39.9519 22.6975 39.9519 26.0194C39.9519 29.3438 37.2569 32.0388 33.9325 32.0388H31.9908V33.9804C31.9908 37.3049 29.2956 40 25.9711 40C22.9069 40 20.3772 37.7102 20.0001 34.7484C19.6229 37.7102 17.0937 40 14.0294 40C10.7049 40 8.00979 37.3049 8.00979 33.9804V32.0388H6.06804C2.74366 32.0388 0.0486633 29.3438 0.0486247 26.0194C0.0486245 22.6976 2.73943 20.0042 6.06027 20C2.73951 19.9957 0.0488652 17.3025 0.0488143 13.9808C0.0488142 10.6563 2.74378 7.96119 6.06823 7.96116H8.00998V6.01942C8.00999 2.695 10.705 0 14.0294 0C17.0936 2.36158e-05 19.623 2.28959 20.0003 5.25125C20.3775 2.28959 22.907 2.36158e-05 25.9711 0ZM20.0005 16.9374C16.9516 16.9374 14.2273 18.5349 12.4263 21.0414C11.7237 22.0194 11.7237 23.3375 12.4263 24.3155C14.2273 26.822 16.9515 28.4197 20.0005 28.4197C23.0493 28.4197 25.7735 26.8222 27.5744 24.3156C28.2771 23.3376 28.2771 22.0192 27.5744 21.0412C25.7735 18.5348 23.0493 16.9374 20.0005 16.9374ZM20.0005 11.5803C16.6874 11.5803 13.7575 13.4666 11.9792 16.356C11.9291 16.4375 11.9033 16.5317 11.9033 16.6274C11.9033 17.1303 12.5754 17.3785 12.9482 17.0409C14.733 15.4246 17.2329 14.4199 20.0005 14.4199C22.7678 14.4199 25.2675 15.4246 27.0522 17.0407C27.425 17.3784 28.0971 17.1301 28.0972 16.6272C28.0972 16.5315 28.0715 16.4373 28.0214 16.3558C26.2431 13.4667 23.3134 11.5803 20.0005 11.5803Z" fill="var(--fill-0, #5968fb)"/>
|
|
6
|
+
</g>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="logo">
|
|
3
|
+
<g id="Union">
|
|
4
|
+
<path d="M20.0005 19.608C21.6962 19.6081 23.0708 20.9827 23.0708 22.6784C23.0708 24.3741 21.6961 25.7488 20.0005 25.7488C18.3048 25.7488 16.9301 24.3741 16.9301 22.6784C16.9301 20.9827 18.3048 19.608 20.0005 19.608Z" fill="var(--fill-0, #5968fb)"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.9711 0C29.2956 0 31.9906 2.695 31.9906 6.01942V7.96116H33.9323C37.2568 7.96119 39.9517 10.6563 39.9517 13.9808C39.9517 17.3026 37.2609 19.9958 33.9401 20C37.261 20.0041 39.9519 22.6975 39.9519 26.0194C39.9519 29.3438 37.2569 32.0388 33.9325 32.0388H31.9908V33.9804C31.9908 37.3049 29.2956 40 25.9711 40C22.9069 40 20.3772 37.7102 20.0001 34.7484C19.6229 37.7102 17.0937 40 14.0294 40C10.7049 40 8.00979 37.3049 8.00979 33.9804V32.0388H6.06804C2.74366 32.0388 0.0486633 29.3438 0.0486247 26.0194C0.0486245 22.6976 2.73943 20.0042 6.06027 20C2.73951 19.9957 0.0488652 17.3025 0.0488143 13.9808C0.0488142 10.6563 2.74378 7.96119 6.06823 7.96116H8.00998V6.01942C8.00999 2.695 10.705 0 14.0294 0C17.0936 2.36158e-05 19.623 2.28959 20.0003 5.25125C20.3775 2.28959 22.907 2.36158e-05 25.9711 0ZM20.0008 16.9374C16.3623 16.9374 13.186 19.2125 11.4896 22.5927C11.4626 22.6465 11.4626 22.7103 11.4896 22.7641C13.186 26.1444 16.3622 28.4197 20.0008 28.4197C23.6394 28.4196 26.8153 26.1444 28.5117 22.7641C28.5387 22.7103 28.5387 22.6465 28.5117 22.5927C26.8153 19.2126 23.6393 16.9374 20.0008 16.9374ZM20.0008 11.5803C16.6401 11.5803 13.6738 13.5213 11.9037 16.4812V18.1608C13.6738 15.9016 16.64 14.4199 20.0008 14.4199C23.3616 14.42 26.3275 15.9017 28.0976 18.1608V16.481C26.3275 13.5213 23.3614 11.5804 20.0008 11.5803Z" fill="var(--fill-0, #5968fb)"/>
|
|
6
|
+
</g>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="logo">
|
|
3
|
+
<g id="Union">
|
|
4
|
+
<path d="M20.0486 15.6323C22.4613 15.6323 24.4172 17.5881 24.4172 20.0008C24.4172 22.4135 22.4613 24.3694 20.0486 24.3694C17.6359 24.3693 15.6801 22.4135 15.6801 20.0008C15.6801 17.5881 17.6359 15.6323 20.0486 15.6323Z" fill="var(--fill-0, #5968fb)"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.9711 0.000813802C29.2956 0.000813802 31.9906 2.69581 31.9906 6.02023V7.96198H33.9323C37.2568 7.962 39.9517 10.6571 39.9517 13.9816C39.9517 17.3034 37.2609 19.9966 33.9401 20.0008C37.261 20.0049 39.9519 22.6983 39.9519 26.0202C39.9519 29.3446 37.2569 32.0396 33.9325 32.0396H31.9908V33.9812C31.9908 37.3057 29.2956 40.0008 25.9711 40.0008C22.9069 40.0008 20.3772 37.711 20.0001 34.7492C19.6229 37.711 17.0937 40.0008 14.0294 40.0008C10.7049 40.0008 8.00979 37.3057 8.00979 33.9812V32.0396H6.06804C2.74366 32.0396 0.0486633 29.3446 0.0486247 26.0202C0.0486245 22.6984 2.73943 20.005 6.06027 20.0008C2.73951 19.9965 0.0488652 17.3033 0.0488143 13.9816C0.0488142 10.6571 2.74378 7.962 6.06823 7.96198H8.00998V6.02023C8.00999 2.69581 10.705 0.000813802 14.0294 0.000813802C17.0936 0.000837418 19.623 2.2904 20.0003 5.25207C20.3775 2.2904 22.907 0.000837418 25.9711 0.000813802ZM20.0001 12.7382C17.1394 12.7382 13.2365 14.8617 10.3989 18.1838C9.50206 19.2338 9.50205 20.7678 10.3989 21.8178C13.2365 25.1401 17.1393 27.2636 20.0001 27.2636C22.8608 27.2636 26.7635 25.14 29.6011 21.8178C30.4979 20.7678 30.4979 19.2338 29.6011 18.1838C26.7635 14.8617 22.8607 12.7382 20.0001 12.7382ZM19.9999 9.28024C16.7681 9.28028 13.672 11.237 11.6009 13.0843C11.0022 13.5725 11.8835 14.1161 12.5646 13.7218C14.4865 12.6088 16.9416 11.2034 19.9999 11.2034L20.2202 11.2049C23.1762 11.2434 25.5595 12.6356 27.435 13.7216C28.1161 14.1159 28.9977 13.5727 28.3991 13.0845C26.3649 11.2672 23.3264 9.32527 20.1578 9.28138L19.9999 9.28024Z" fill="var(--fill-0, #5968fb)"/>
|
|
6
|
+
</g>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<g id="logo">
|
|
3
|
+
<g id="Union">
|
|
4
|
+
<path d="M20.0487 15.62C22.4672 15.62 24.4277 17.5806 24.4278 19.9991C24.4278 22.4177 22.4672 24.3782 20.0487 24.3782C17.6301 24.3782 15.6696 22.4176 15.6696 19.9991C15.6696 17.5806 17.6302 15.62 20.0487 15.62Z" fill="var(--fill-0, #5968fb)"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M25.6665 1.88721C30.0389 1.88724 33.5834 5.43174 33.5834 9.8041C33.5834 10.6261 33.4576 11.4187 33.2251 12.1642C37.0563 12.7177 40 16.0144 40 19.9989C40 23.9835 37.0563 27.2799 33.2251 27.8335C33.4577 28.5791 33.5834 29.3719 33.5834 30.1942C33.5834 34.5665 30.0389 38.1112 25.6665 38.1112C23.445 38.1112 21.4378 37.1956 20 35.7219C18.5622 37.1956 16.555 38.1112 14.3335 38.1112C9.96111 38.1112 6.41658 34.5665 6.41658 30.1942C6.41659 29.372 6.54191 28.5791 6.77451 27.8335C2.94349 27.2798 0 23.9833 0 19.9989C2.99855e-05 16.0145 2.94348 12.7179 6.77451 12.1642C6.54204 11.4188 6.41658 10.6261 6.41658 9.8041C6.4166 5.43174 9.96112 1.88724 14.3335 1.88721C16.5549 1.88721 18.5622 2.80259 20 4.27615C21.4378 2.80259 23.4451 1.88721 25.6665 1.88721ZM20 13.6734C13.9715 13.6734 9.08438 16.5055 9.08438 19.9991C9.08441 23.4927 13.9715 26.3249 20 26.3249C26.0285 26.3248 30.9156 23.4927 30.9156 19.9991C30.9156 16.5055 26.0285 13.6734 20 13.6734Z" fill="var(--fill-0, #5968fb)"/>
|
|
6
|
+
</g>
|
|
7
|
+
</g>
|
|
8
|
+
</svg>
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { useEffect, useState } from 'react';
|
|
2
|
+
|
|
3
|
+
// Import all wallet icon styles
|
|
4
|
+
import WalletStyle1 from '../assets/wallet-icon-style-1.svg';
|
|
5
|
+
import WalletStyle2 from '../assets/wallet-icon-style-2.svg';
|
|
6
|
+
import WalletStyle3 from '../assets/wallet-icon-style-3.svg';
|
|
7
|
+
import WalletStyle4 from '../assets/wallet-icon-style-4.svg';
|
|
8
|
+
import WalletStyle5 from '../assets/wallet-icon-style-5.svg';
|
|
9
|
+
import WalletStyle6 from '../assets/wallet-icon-style-6.svg';
|
|
10
|
+
import WalletStyle7 from '../assets/wallet-icon-style-7.svg';
|
|
11
|
+
import WalletStyle8 from '../assets/wallet-icon-style-8.svg';
|
|
12
|
+
import WalletStyle9 from '../assets/wallet-icon-style-9.svg';
|
|
13
|
+
import WalletStyle10 from '../assets/wallet-icon-style-10.svg';
|
|
14
|
+
import WalletStyle11 from '../assets/wallet-icon-style-11.svg';
|
|
15
|
+
import WalletStyle12 from '../assets/wallet-icon-style-12.svg';
|
|
16
|
+
import WalletStyle13 from '../assets/wallet-icon-style-13.svg';
|
|
17
|
+
import WalletStyle14 from '../assets/wallet-icon-style-14.svg';
|
|
18
|
+
import WalletStyle15 from '../assets/wallet-icon-style-15.svg';
|
|
19
|
+
|
|
20
|
+
const iconStyles = [
|
|
21
|
+
{ id: 1, icon: WalletStyle1 },
|
|
22
|
+
{ id: 2, icon: WalletStyle2 },
|
|
23
|
+
{ id: 3, icon: WalletStyle3 },
|
|
24
|
+
{ id: 4, icon: WalletStyle4 },
|
|
25
|
+
{ id: 5, icon: WalletStyle5 },
|
|
26
|
+
{ id: 6, icon: WalletStyle6 },
|
|
27
|
+
{ id: 7, icon: WalletStyle7 },
|
|
28
|
+
{ id: 8, icon: WalletStyle8 },
|
|
29
|
+
{ id: 9, icon: WalletStyle9 },
|
|
30
|
+
{ id: 10, icon: WalletStyle10 },
|
|
31
|
+
{ id: 11, icon: WalletStyle11 },
|
|
32
|
+
{ id: 12, icon: WalletStyle12 },
|
|
33
|
+
{ id: 13, icon: WalletStyle13 },
|
|
34
|
+
{ id: 14, icon: WalletStyle14 },
|
|
35
|
+
{ id: 15, icon: WalletStyle15 },
|
|
36
|
+
];
|
|
37
|
+
|
|
38
|
+
interface AccountIconProps {
|
|
39
|
+
/** Icon style ID (1-15) */
|
|
40
|
+
styleId?: number;
|
|
41
|
+
/** Icon color (hex string) */
|
|
42
|
+
color?: string;
|
|
43
|
+
/** CSS class names */
|
|
44
|
+
className?: string;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/**
|
|
48
|
+
* Displays an account icon with custom style and color
|
|
49
|
+
* Fetches the SVG and applies the color dynamically
|
|
50
|
+
*/
|
|
51
|
+
export function AccountIcon({
|
|
52
|
+
styleId = 1,
|
|
53
|
+
color = '#5968fb',
|
|
54
|
+
className = 'h-6 w-6',
|
|
55
|
+
}: AccountIconProps) {
|
|
56
|
+
const [svgContent, setSvgContent] = useState<string>('');
|
|
57
|
+
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
const selectedIcon = iconStyles.find(s => s.id === styleId) || iconStyles[0];
|
|
60
|
+
|
|
61
|
+
fetch(selectedIcon.icon)
|
|
62
|
+
.then(res => res.text())
|
|
63
|
+
.then(text => {
|
|
64
|
+
// Replace CSS var `--fill-0` with the chosen color
|
|
65
|
+
const modifiedSvg = text.replace(/var\(--fill-0,\s*#[A-Fa-f0-9]{6}\)/g, color);
|
|
66
|
+
setSvgContent(modifiedSvg);
|
|
67
|
+
})
|
|
68
|
+
.catch(err => {
|
|
69
|
+
console.error('Failed to load SVG:', err);
|
|
70
|
+
// Fallback: just use the default without color
|
|
71
|
+
setSvgContent(
|
|
72
|
+
`<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="${color}"/></svg>`
|
|
73
|
+
);
|
|
74
|
+
});
|
|
75
|
+
}, [styleId, color]);
|
|
76
|
+
|
|
77
|
+
return <div className={className} dangerouslySetInnerHTML={{ __html: svgContent }} />;
|
|
78
|
+
}
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* AccountSelector - Dropdown for switching accounts and creating new ones
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { useState, useRef } from 'react';
|
|
6
|
+
import { useStore } from '../store';
|
|
7
|
+
import { send } from '../utils/messaging';
|
|
8
|
+
import { truncateAddress } from '../utils/format';
|
|
9
|
+
import { useAutoFocus } from '../hooks/useAutoFocus';
|
|
10
|
+
import { useClickOutside } from '../hooks/useClickOutside';
|
|
11
|
+
import { INTERNAL_METHODS } from '../../shared/constants';
|
|
12
|
+
import { Account } from '../../shared/types';
|
|
13
|
+
import { formatWalletError } from '../utils/formatWalletError';
|
|
14
|
+
import { ChevronDownIcon } from './icons/ChevronDownIcon';
|
|
15
|
+
import { PlusIcon } from './icons/PlusIcon';
|
|
16
|
+
import { UploadIcon } from './icons/UploadIcon';
|
|
17
|
+
import { EditIcon } from './icons/EditIcon';
|
|
18
|
+
|
|
19
|
+
export function AccountSelector() {
|
|
20
|
+
const { wallet, syncWallet, navigate } = useStore();
|
|
21
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
22
|
+
const [editingIndex, setEditingIndex] = useState<number | null>(null);
|
|
23
|
+
const [editingName, setEditingName] = useState('');
|
|
24
|
+
const dropdownRef = useRef<HTMLDivElement>(null);
|
|
25
|
+
const editInputRef = useAutoFocus<HTMLInputElement>({
|
|
26
|
+
when: editingIndex !== null,
|
|
27
|
+
select: true,
|
|
28
|
+
});
|
|
29
|
+
|
|
30
|
+
// Close dropdown when clicking outside
|
|
31
|
+
useClickOutside(
|
|
32
|
+
dropdownRef,
|
|
33
|
+
() => {
|
|
34
|
+
setIsOpen(false);
|
|
35
|
+
setEditingIndex(null);
|
|
36
|
+
},
|
|
37
|
+
isOpen
|
|
38
|
+
);
|
|
39
|
+
|
|
40
|
+
async function handleSwitchAccount(index: number) {
|
|
41
|
+
const result = await send<{ ok?: boolean; account?: Account; error?: string }>(
|
|
42
|
+
INTERNAL_METHODS.SWITCH_ACCOUNT,
|
|
43
|
+
[index]
|
|
44
|
+
);
|
|
45
|
+
|
|
46
|
+
if (result?.ok && result.account) {
|
|
47
|
+
const updatedWallet = {
|
|
48
|
+
...wallet,
|
|
49
|
+
currentAccount: result.account,
|
|
50
|
+
address: result.account.address,
|
|
51
|
+
};
|
|
52
|
+
syncWallet(updatedWallet);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
setIsOpen(false);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
async function handleCreateAccount() {
|
|
59
|
+
const result = await send<{ ok?: boolean; account?: Account; error?: string }>(
|
|
60
|
+
INTERNAL_METHODS.CREATE_ACCOUNT,
|
|
61
|
+
[]
|
|
62
|
+
);
|
|
63
|
+
|
|
64
|
+
if (result?.ok && result.account) {
|
|
65
|
+
// Add new account to wallet state and switch to it
|
|
66
|
+
const updatedWallet = {
|
|
67
|
+
...wallet,
|
|
68
|
+
accounts: [...wallet.accounts, result.account],
|
|
69
|
+
currentAccount: result.account,
|
|
70
|
+
address: result.account.address,
|
|
71
|
+
};
|
|
72
|
+
syncWallet(updatedWallet);
|
|
73
|
+
} else if (result?.error) {
|
|
74
|
+
alert(`Failed to create account: ${formatWalletError(result.error)}`);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
setIsOpen(false);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
function handleImportWallet() {
|
|
81
|
+
// Show warning - importing will replace current wallet
|
|
82
|
+
const confirmed = confirm(
|
|
83
|
+
'WARNING: Importing a wallet will replace your current wallet. Make sure you have backed up your current secret phrase. Continue?'
|
|
84
|
+
);
|
|
85
|
+
if (confirmed) {
|
|
86
|
+
navigate('onboarding-import');
|
|
87
|
+
}
|
|
88
|
+
setIsOpen(false);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
function startEditing(account: Account, event: React.MouseEvent) {
|
|
92
|
+
event.stopPropagation(); // Prevent switching accounts
|
|
93
|
+
setEditingIndex(account.index);
|
|
94
|
+
setEditingName(account.name);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
function cancelEditing() {
|
|
98
|
+
setEditingIndex(null);
|
|
99
|
+
setEditingName('');
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
async function saveRename() {
|
|
103
|
+
if (editingIndex === null || !editingName.trim()) {
|
|
104
|
+
cancelEditing();
|
|
105
|
+
return;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
const result = await send<{ ok?: boolean; error?: string }>(INTERNAL_METHODS.RENAME_ACCOUNT, [
|
|
109
|
+
editingIndex,
|
|
110
|
+
editingName.trim(),
|
|
111
|
+
]);
|
|
112
|
+
|
|
113
|
+
if (result?.ok) {
|
|
114
|
+
// Update wallet state with new name
|
|
115
|
+
const updatedAccounts = wallet.accounts.map(acc =>
|
|
116
|
+
acc.index === editingIndex ? { ...acc, name: editingName.trim() } : acc
|
|
117
|
+
);
|
|
118
|
+
const updatedCurrentAccount =
|
|
119
|
+
wallet.currentAccount?.index === editingIndex
|
|
120
|
+
? { ...wallet.currentAccount, name: editingName.trim() }
|
|
121
|
+
: wallet.currentAccount;
|
|
122
|
+
|
|
123
|
+
syncWallet({
|
|
124
|
+
...wallet,
|
|
125
|
+
accounts: updatedAccounts,
|
|
126
|
+
currentAccount: updatedCurrentAccount,
|
|
127
|
+
});
|
|
128
|
+
} else if (result?.error) {
|
|
129
|
+
alert(`Failed to rename account: ${formatWalletError(result.error)}`);
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
cancelEditing();
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
function handleEditKeyDown(event: React.KeyboardEvent) {
|
|
136
|
+
if (event.key === 'Enter') {
|
|
137
|
+
event.preventDefault();
|
|
138
|
+
saveRename();
|
|
139
|
+
} else if (event.key === 'Escape') {
|
|
140
|
+
event.preventDefault();
|
|
141
|
+
cancelEditing();
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
const currentAccount = wallet.currentAccount;
|
|
146
|
+
const truncatedAddress = truncateAddress(currentAccount?.address);
|
|
147
|
+
|
|
148
|
+
return (
|
|
149
|
+
<div className="relative" ref={dropdownRef}>
|
|
150
|
+
{/* Trigger button */}
|
|
151
|
+
<button
|
|
152
|
+
onClick={() => setIsOpen(!isOpen)}
|
|
153
|
+
className="w-full flex items-center justify-between p-3 bg-gray-800 rounded-lg hover:bg-gray-700 transition-colors"
|
|
154
|
+
>
|
|
155
|
+
<div className="flex items-center gap-2">
|
|
156
|
+
<div className="w-6 h-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full" />
|
|
157
|
+
<div className="text-left">
|
|
158
|
+
<div className="font-semibold text-sm">{currentAccount?.name || 'No Account'}</div>
|
|
159
|
+
<div className="text-xs text-gray-400">{truncatedAddress}</div>
|
|
160
|
+
</div>
|
|
161
|
+
</div>
|
|
162
|
+
<div className={`transition-transform ${isOpen ? 'rotate-180' : ''}`}>
|
|
163
|
+
<ChevronDownIcon />
|
|
164
|
+
</div>
|
|
165
|
+
</button>
|
|
166
|
+
|
|
167
|
+
{/* Dropdown menu */}
|
|
168
|
+
{isOpen && (
|
|
169
|
+
<div className="absolute top-full left-0 right-0 mt-2 bg-gray-800 rounded-lg shadow-xl border border-gray-700 overflow-hidden z-50">
|
|
170
|
+
{/* Account list */}
|
|
171
|
+
<div className="max-h-64 overflow-y-auto no-scrollbar">
|
|
172
|
+
{wallet.accounts
|
|
173
|
+
.filter(acc => !acc.hidden)
|
|
174
|
+
.map(account => (
|
|
175
|
+
<div
|
|
176
|
+
key={account.index}
|
|
177
|
+
className={`w-full flex items-center gap-2 p-3 ${
|
|
178
|
+
editingIndex !== account.index ? 'hover:bg-gray-700 cursor-pointer' : ''
|
|
179
|
+
} transition-colors ${
|
|
180
|
+
currentAccount?.index === account.index ? 'bg-gray-700' : ''
|
|
181
|
+
}`}
|
|
182
|
+
onClick={() =>
|
|
183
|
+
editingIndex !== account.index && handleSwitchAccount(account.index)
|
|
184
|
+
}
|
|
185
|
+
>
|
|
186
|
+
<div className="w-6 h-6 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex-shrink-0" />
|
|
187
|
+
<div className="text-left flex-1 min-w-0">
|
|
188
|
+
{editingIndex === account.index ? (
|
|
189
|
+
<input
|
|
190
|
+
ref={editInputRef}
|
|
191
|
+
type="text"
|
|
192
|
+
value={editingName}
|
|
193
|
+
onChange={e => setEditingName(e.target.value)}
|
|
194
|
+
onKeyDown={handleEditKeyDown}
|
|
195
|
+
onBlur={saveRename}
|
|
196
|
+
className="bg-gray-900 border border-blue-500 rounded px-2 py-1 text-sm w-full focus:outline-none"
|
|
197
|
+
placeholder="Account name"
|
|
198
|
+
/>
|
|
199
|
+
) : (
|
|
200
|
+
<>
|
|
201
|
+
<div className="font-semibold text-sm flex items-center gap-2">
|
|
202
|
+
{account.name}
|
|
203
|
+
<button
|
|
204
|
+
onClick={e => startEditing(account, e)}
|
|
205
|
+
className="text-gray-400 hover:text-white transition-colors"
|
|
206
|
+
>
|
|
207
|
+
<EditIcon className="w-3 h-3" />
|
|
208
|
+
</button>
|
|
209
|
+
</div>
|
|
210
|
+
<div className="text-xs text-gray-400 truncate">
|
|
211
|
+
{truncateAddress(account.address)}
|
|
212
|
+
</div>
|
|
213
|
+
</>
|
|
214
|
+
)}
|
|
215
|
+
</div>
|
|
216
|
+
{currentAccount?.index === account.index && editingIndex !== account.index && (
|
|
217
|
+
<div className="w-2 h-2 bg-green-500 rounded-full flex-shrink-0" />
|
|
218
|
+
)}
|
|
219
|
+
</div>
|
|
220
|
+
))}
|
|
221
|
+
</div>
|
|
222
|
+
|
|
223
|
+
{/* Divider */}
|
|
224
|
+
<div className="border-t border-gray-700" />
|
|
225
|
+
|
|
226
|
+
{/* Actions */}
|
|
227
|
+
<button
|
|
228
|
+
onClick={handleCreateAccount}
|
|
229
|
+
className="w-full flex items-center gap-2 p-3 hover:bg-gray-700 transition-colors text-left"
|
|
230
|
+
>
|
|
231
|
+
<PlusIcon />
|
|
232
|
+
<span className="text-sm">Create New Account</span>
|
|
233
|
+
</button>
|
|
234
|
+
|
|
235
|
+
<button
|
|
236
|
+
onClick={handleImportWallet}
|
|
237
|
+
className="w-full flex items-center gap-2 p-3 hover:bg-gray-700 transition-colors text-left"
|
|
238
|
+
>
|
|
239
|
+
<UploadIcon />
|
|
240
|
+
<span className="text-sm">Import Wallet</span>
|
|
241
|
+
</button>
|
|
242
|
+
</div>
|
|
243
|
+
)}
|
|
244
|
+
</div>
|
|
245
|
+
);
|
|
246
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Alert component - Displays inline notification messages
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { ReactNode } from 'react';
|
|
6
|
+
|
|
7
|
+
export type AlertType = 'error' | 'success' | 'warning' | 'info';
|
|
8
|
+
|
|
9
|
+
interface AlertProps {
|
|
10
|
+
type?: AlertType;
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
className?: string;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const alertStyles: Record<AlertType, { bg: string; text: string }> = {
|
|
16
|
+
error: {
|
|
17
|
+
bg: 'var(--color-red-light)',
|
|
18
|
+
text: 'var(--color-red)',
|
|
19
|
+
},
|
|
20
|
+
success: {
|
|
21
|
+
bg: 'var(--color-green-light)',
|
|
22
|
+
text: 'var(--color-green)',
|
|
23
|
+
},
|
|
24
|
+
warning: {
|
|
25
|
+
bg: 'var(--color-orange-light)',
|
|
26
|
+
text: 'var(--color-orange)',
|
|
27
|
+
},
|
|
28
|
+
info: {
|
|
29
|
+
bg: 'var(--color-blue-light)',
|
|
30
|
+
text: 'var(--color-blue)',
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export function Alert({ type = 'info', children, className = '' }: AlertProps) {
|
|
35
|
+
const styles = alertStyles[type];
|
|
36
|
+
|
|
37
|
+
return (
|
|
38
|
+
<div
|
|
39
|
+
className={`rounded-lg px-3 py-2.5 ${className}`}
|
|
40
|
+
style={{
|
|
41
|
+
backgroundColor: styles.bg,
|
|
42
|
+
color: styles.text,
|
|
43
|
+
}}
|
|
44
|
+
>
|
|
45
|
+
<p className="text-sm font-medium leading-[18px] tracking-[0.14px]">{children}</p>
|
|
46
|
+
</div>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ConfirmModal - Reusable confirmation dialog
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
interface ConfirmModalProps {
|
|
6
|
+
isOpen: boolean;
|
|
7
|
+
title: string;
|
|
8
|
+
message: string;
|
|
9
|
+
confirmText?: string;
|
|
10
|
+
cancelText?: string;
|
|
11
|
+
onConfirm: () => void;
|
|
12
|
+
onCancel: () => void;
|
|
13
|
+
variant?: 'danger' | 'default';
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export function ConfirmModal({
|
|
17
|
+
isOpen,
|
|
18
|
+
title,
|
|
19
|
+
message,
|
|
20
|
+
confirmText = 'Confirm',
|
|
21
|
+
cancelText = 'Cancel',
|
|
22
|
+
onConfirm,
|
|
23
|
+
onCancel,
|
|
24
|
+
variant = 'default',
|
|
25
|
+
}: ConfirmModalProps) {
|
|
26
|
+
if (!isOpen) return null;
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<>
|
|
30
|
+
<div
|
|
31
|
+
className="fixed inset-0 z-40"
|
|
32
|
+
style={{ backgroundColor: 'var(--color-modal-overlay)' }}
|
|
33
|
+
onClick={onCancel}
|
|
34
|
+
/>
|
|
35
|
+
<div className="fixed inset-0 z-50 flex items-center justify-center p-4" onClick={onCancel}>
|
|
36
|
+
<div
|
|
37
|
+
className="rounded-xl p-6 flex flex-col gap-4 max-w-[325px] w-full"
|
|
38
|
+
style={{ backgroundColor: 'var(--color-bg)' }}
|
|
39
|
+
onClick={e => e.stopPropagation()}
|
|
40
|
+
>
|
|
41
|
+
<h3
|
|
42
|
+
className="m-0 text-base font-medium leading-[22px] tracking-[0.16px]"
|
|
43
|
+
style={{ color: 'var(--color-text-primary)' }}
|
|
44
|
+
>
|
|
45
|
+
{title}
|
|
46
|
+
</h3>
|
|
47
|
+
<p
|
|
48
|
+
className="m-0 text-sm leading-[18px] tracking-[0.14px]"
|
|
49
|
+
style={{ color: 'var(--color-text-muted)' }}
|
|
50
|
+
>
|
|
51
|
+
{message}
|
|
52
|
+
</p>
|
|
53
|
+
<div className="flex gap-3">
|
|
54
|
+
<button
|
|
55
|
+
type="button"
|
|
56
|
+
onClick={onCancel}
|
|
57
|
+
className="flex-1 h-12 rounded-lg text-sm font-medium leading-[18px] tracking-[0.14px] transition-opacity hover:opacity-90"
|
|
58
|
+
style={{
|
|
59
|
+
backgroundColor: 'var(--color-surface-800)',
|
|
60
|
+
color: 'var(--color-text-primary)',
|
|
61
|
+
}}
|
|
62
|
+
>
|
|
63
|
+
{cancelText}
|
|
64
|
+
</button>
|
|
65
|
+
<button
|
|
66
|
+
type="button"
|
|
67
|
+
onClick={onConfirm}
|
|
68
|
+
className="flex-1 h-12 rounded-lg text-sm font-medium leading-[18px] tracking-[0.14px] transition-opacity hover:opacity-90"
|
|
69
|
+
style={{
|
|
70
|
+
backgroundColor: variant === 'danger' ? 'var(--color-red)' : 'var(--color-primary)',
|
|
71
|
+
color: variant === 'danger' ? '#fff' : '#000',
|
|
72
|
+
}}
|
|
73
|
+
>
|
|
74
|
+
{confirmText}
|
|
75
|
+
</button>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
</>
|
|
80
|
+
);
|
|
81
|
+
}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* PasswordInput - Password input field with visibility toggle
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { useState } from 'react';
|
|
6
|
+
import { EyeIcon } from './icons/EyeIcon';
|
|
7
|
+
import { EyeOffIcon } from './icons/EyeOffIcon';
|
|
8
|
+
|
|
9
|
+
interface PasswordInputProps {
|
|
10
|
+
value: string;
|
|
11
|
+
onChange: (value: string) => void;
|
|
12
|
+
placeholder?: string;
|
|
13
|
+
className?: string;
|
|
14
|
+
autoFocus?: boolean;
|
|
15
|
+
onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export function PasswordInput({
|
|
19
|
+
value,
|
|
20
|
+
onChange,
|
|
21
|
+
placeholder = 'Password',
|
|
22
|
+
className = '',
|
|
23
|
+
autoFocus = false,
|
|
24
|
+
onKeyDown,
|
|
25
|
+
}: PasswordInputProps) {
|
|
26
|
+
const [showPassword, setShowPassword] = useState(false);
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<div className="relative">
|
|
30
|
+
<input
|
|
31
|
+
type={showPassword ? 'text' : 'password'}
|
|
32
|
+
placeholder={placeholder}
|
|
33
|
+
className={`input-field pr-10 ${className}`}
|
|
34
|
+
value={value}
|
|
35
|
+
onChange={e => onChange(e.target.value)}
|
|
36
|
+
onKeyDown={onKeyDown}
|
|
37
|
+
autoFocus={autoFocus}
|
|
38
|
+
/>
|
|
39
|
+
<button
|
|
40
|
+
type="button"
|
|
41
|
+
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-300 transition-colors"
|
|
42
|
+
onClick={() => setShowPassword(!showPassword)}
|
|
43
|
+
tabIndex={-1}
|
|
44
|
+
>
|
|
45
|
+
{showPassword ? <EyeOffIcon className="w-5 h-5" /> : <EyeIcon className="w-5 h-5" />}
|
|
46
|
+
</button>
|
|
47
|
+
</div>
|
|
48
|
+
);
|
|
49
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ScreenContainer - Consistent container for all popup screens
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
import { ReactNode } from 'react';
|
|
6
|
+
|
|
7
|
+
interface ScreenContainerProps {
|
|
8
|
+
children: ReactNode;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export function ScreenContainer({ children, className = '' }: ScreenContainerProps) {
|
|
13
|
+
const baseClasses = 'w-[357px] h-[600px] p-4';
|
|
14
|
+
const combinedClasses = className ? `${baseClasses} ${className}` : baseClasses;
|
|
15
|
+
|
|
16
|
+
return <div className={combinedClasses}>{children}</div>;
|
|
17
|
+
}
|