Skip to content

feat: add support for importing utxo accounts using a zprv private key #678

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lucasgabrielgsp merged 2 commits into from
Jan 16, 2025
Merged

feat: add support for importing utxo accounts using a zprv private key #678

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
829fbd9
feat: add support for importing utxo accounts using a zprv private key
vieiraricardo Dec 30, 2024
385bbc7
chore: update sysweb3 version
lucasgabrielgsp Jan 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@
"@headlessui/react": "^1.6.0",
"@heroicons/react": "^1.0.5",
"@pollum-io/sysweb3-core": "^1.0.27",
"@pollum-io/sysweb3-keyring": "^1.0.487",
"@pollum-io/sysweb3-keyring": "^1.0.488",
"@pollum-io/sysweb3-network": "^1.0.95",
"@pollum-io/sysweb3-utils": "^1.1.235",
"@pollum-io/sysweb3-utils": "^1.1.236",
"@reduxjs/toolkit": "^1.4.0",
"@tippyjs/react": "^4.2.6",
"@types/chrome": "^0.0.268",
Expand Down
106 changes: 69 additions & 37 deletions source/components/Header/AccountHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ const RenderAccountsListByBitcoinBased = (
className={`py-1.5 px-5 w-max backface-visibility-hidden flex items-center text-white text-sm
font-medium active:bg-opacity-40 focus:outline-none cursor-pointer transform
transition duration-300`}
onClick={() => {
setActiveAccount(
onClick={async () => {
await setActiveAccount(
account.id,
KeyringAccountType.HDAccount
);
Expand All @@ -72,7 +72,7 @@ const RenderAccountsListByBitcoinBased = (
style={{ maxWidth: '16.25rem', textOverflow: 'ellipsis' }}
className="w-max gap-[2px] flex items-center justify-start whitespace-nowrap overflow-hidden"
>
<img src={logo} className="mr-1 w-7"></img>
<img src={logo} className="mr-1 w-7" alt="" />
{account.label} ({ellipsis(account.address, 4, 4)})
</span>
<span className="text-xs ml-2 px-2 py-0.5 text-white bg-brand-blue500 rounded-full">
Expand All @@ -89,6 +89,44 @@ const RenderAccountsListByBitcoinBased = (
</li>
))}

{Object.values(accounts.Imported)
.filter((acc) => !acc.address.startsWith('0x'))
.map((account, index) => (
<li
className={`py-1.5 px-5 w-max backface-visibility-hidden flex items-center text-white text-sm
font-medium active:bg-opacity-40 focus:outline-none cursor-pointer transform
transition duration-300`}
onClick={async () => {
await setActiveAccount(
account.id,
KeyringAccountType.Imported
);
close();
}}
id={`account-${index}`}
key={account.id}
>
<span
style={{ maxWidth: '16.25rem', textOverflow: 'ellipsis' }}
className="w-max gap-[2px] flex items-center justify-start whitespace-nowrap overflow-hidden"
>
<img src={logo} className="mr-1 w-7" alt="" />
{account.label} ({ellipsis(account.address, 4, 4)})
</span>
<span className="text-xs ml-2 px-2 py-0.5 text-white bg-brand-blue500 rounded-full">
Imported
</span>
{activeAccount.id === account.id &&
activeAccount.type === KeyringAccountType.Imported && (
<Icon
name="check"
className="mb-1 ml-2 w-4"
color="#8EC100"
/>
)}
</li>
))}

{Object.values(accounts.Trezor)
.filter((acc) => acc.isImported === false) //todo we don't have account.isImported anymore
.map((account, index) => (
Expand All @@ -100,11 +138,14 @@ const RenderAccountsListByBitcoinBased = (
: 'cursor-pointer'
} transform
transition duration-300`}
onClick={() => {
onClick={async () => {
if (account?.originNetwork.url !== activeNetwork.url) {
return;
}
setActiveAccount(account.id, KeyringAccountType.Trezor);
await setActiveAccount(
account.id,
KeyringAccountType.Trezor
);
close();
}}
id={`account-${index}`}
Expand All @@ -119,12 +160,13 @@ const RenderAccountsListByBitcoinBased = (
>
<img
src={trezorLogo}
alt=""
style={{
filter:
'invert(100%) sepia(0%) saturate(0%) hue-rotate(44deg) brightness(108%) contrast(102%)',
}}
className="mr-1 w-7"
></img>
/>
{account.label}{' '}
{!(account?.originNetwork.url !== activeNetwork.url) &&
`(${ellipsis(account.address, 4, 4)})`}
Expand Down Expand Up @@ -156,11 +198,14 @@ const RenderAccountsListByBitcoinBased = (
: 'cursor-pointer'
} transform
transition duration-300`}
onClick={() => {
onClick={async () => {
if (account?.originNetwork.url !== activeNetwork.url) {
return;
}
setActiveAccount(account.id, KeyringAccountType.Ledger);
await setActiveAccount(
account.id,
KeyringAccountType.Ledger
);
close();
}}
id={`account-${index}`}
Expand All @@ -175,12 +220,13 @@ const RenderAccountsListByBitcoinBased = (
>
<img
src={ledgerLogo}
alt=""
style={{
filter:
'invert(100%) sepia(0%) saturate(0%) hue-rotate(44deg) brightness(108%) contrast(102%)',
}}
className="mr-2 w-7"
></img>
/>
{account.label}{' '}
{!(account?.originNetwork.url !== activeNetwork.url) &&
`(${ellipsis(account.address, 4, 4)})`}
Expand All @@ -206,7 +252,7 @@ const RenderAccountsListByBitcoinBased = (
([keyringAccountType, accountTypeAccounts]) => (
<div key={keyringAccountType}>
{Object.values(accountTypeAccounts)
.filter((account) => account.xpub !== '')
.filter((account) => account.address.startsWith('0x'))
.map((account, index) => (
<li
className={`py-1.5 px-5 w-max backface-visibility-hidden flex items-center justify-start text-white text-sm
Expand All @@ -219,7 +265,7 @@ const RenderAccountsListByBitcoinBased = (
: 'cursor-pointer'
} transform
transition duration-300`}
onClick={() => {
onClick={async () => {
if (
(account.isTrezorWallet &&
account?.originNetwork?.isBitcoinBased) ||
Expand All @@ -228,7 +274,7 @@ const RenderAccountsListByBitcoinBased = (
) {
return;
}
setActiveAccount(
await setActiveAccount(
account.id,
keyringAccountType as KeyringAccountType
);
Expand All @@ -245,27 +291,29 @@ const RenderAccountsListByBitcoinBased = (
className="w-full flex items-center justify-start whitespace-nowrap overflow-hidden"
>
{account.isImported ? (
<img src={importIcon} className="mr-1 w-7"></img>
<img src={importIcon} className="mr-1 w-7" alt="" />
) : account.isTrezorWallet ? (
<img
src={trezorLogo}
alt=""
style={{
filter:
'invert(100%) sepia(0%) saturate(0%) hue-rotate(44deg) brightness(108%) contrast(102%)',
}}
className="mr-1 w-7"
></img>
/>
) : account.isLedgerWallet ? (
<img
src={ledgerLogo}
alt=""
style={{
filter:
'invert(100%) sepia(0%) saturate(0%) hue-rotate(44deg) brightness(108%) contrast(102%)',
}}
className="mr-1 w-7"
></img>
/>
) : (
<img src={logo} className="mr-1 w-7"></img>
<img src={logo} className="mr-1 w-7" alt="" />
)}{' '}
{account.label}{' '}
{!(
Expand Down Expand Up @@ -328,8 +376,6 @@ export const AccountMenu: React.FC = () => {
await controllerEmitter(['wallet', 'setAccount'], [Number(id), type]);
};

const cursorType = isBitcoinBased ? 'cursor-not-allowed' : 'cursor-pointer';

return (
<div className="flex flex-col justify-start items-start">
<span className="disabled text-xs flex justify-start px-5 mt-5 mb-1">
Expand Down Expand Up @@ -394,27 +440,13 @@ export const AccountMenu: React.FC = () => {
<Menu.Item>
<div className="flex flex-col gap-2">
<li
onClick={() => {
isBitcoinBased ? null : navigate('/settings/account/import');
}}
className={`py-1.5 ${cursorType} px-6 w-full backface-visibility-hidden flex items-center justify-start gap-3 text-white text-sm font-medium active:bg-opacity-40 focus:outline-none`}
onClick={() => navigate('/settings/account/import')}
className={`py-1.5 cursor-pointer px-6 w-full backface-visibility-hidden flex items-center justify-start gap-3 text-white text-sm font-medium active:bg-opacity-40 focus:outline-none`}
>
<Icon
name="ImportUser"
isSvg
className="mb-1 text-brand-white"
opacity={isBitcoinBased ? 0.6 : 1}
/>

<span className={isBitcoinBased ? 'disabled' : ''}>
{t('accountMenu.importAccount')}
</span>
<Icon name="ImportUser" isSvg className="mb-1 text-brand-white" />

<span>{t('accountMenu.importAccount')}</span>
</li>
{isBitcoinBased && (
<span className="disabled text-xs px-5 text-left">
{t('accountMenu.importAccMessage')}
</span>
)}
</div>
</Menu.Item>
</div>
Expand Down
138 changes: 72 additions & 66 deletions source/components/Header/Menus/NetworkMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export const NetworkMenu: React.FC<INetworkComponent> = (
</li>
</Menu.Item>
<div className="scrollbar-styled overflow-scroll">
{!activeAccount.isImported ? (
{isBitcoinBased || !activeAccount.isImported ? (
<Menu.Item>
<>
<span className="disabled text-xs flex justify-start px-5 py-4">
Expand Down Expand Up @@ -272,71 +272,77 @@ export const NetworkMenu: React.FC<INetworkComponent> = (
</Menu.Item>
) : null}

<Menu.Item>
<Disclosure>
{({ open }) => (
<>
<Disclosure.Button className="flex items-center justify-start px-5 pt-3 w-full text-base hover:bg-bkg-3 cursor-pointer transition-all duration-200">
<img
src={ethIcon}
width="16px"
className="ml-1 flex items-center text-brand-white"
/>

<span className="px-3 text-sm">
{t('networkMenu.evmNetworks')}
</span>

<img
src={arrow}
className={`relative left-[12.4rem] flex items-center ${
open ? 'transform rotate-180' : ''
} text-brand-white`}
id="network-settings-btn"
/>
</Disclosure.Button>

<Disclosure.Panel className="h-max pb-2 pt-4 text-sm">
{Object.values(networks.ethereum)
.sort(customSort)

.map((currentNetwork: any, index: number, arr) => (
<li
key={uniqueId()}
className={`backface-visibility-hidden ${
index === 0
? 'rounded-tl-lg rounded-tr-lg border-b border-dashed border-gray-600 '
: index === arr.length - 1
? 'rounded-bl-lg rounded-br-lg'
: 'border-b border-dashed border-gray-600'
} flex flex-row items-center justify-start mx-auto p-2 max-w-95 text-white text-sm font-medium active:bg-opacity-40 bg-brand-blue500 focus:outline-none cursor-pointer transform transition duration-300`}
onClick={() =>
handleChangeNetwork(
currentNetwork,
'ethereum'
)
}
>
<span className="ml-8 text-left">
{currentNetwork.label}
</span>
<div className="absolute items-center flex gap-2 right-[1rem] ">
{!isBitcoinBased &&
activeNetworkValidator(currentNetwork) && (
<Icon
name="check"
className="w-4 relative bottom-0.5"
wrapperClassname="w-6"
/>
)}
</div>
</li>
))}
</Disclosure.Panel>
</>
)}
</Disclosure>
</Menu.Item>
{activeAccount.isImported && isBitcoinBased ? null : (
<Menu.Item>
<Disclosure>
{({ open }) => (
<>
<Disclosure.Button className="flex items-center justify-start px-5 pt-3 w-full text-base hover:bg-bkg-3 cursor-pointer transition-all duration-200">
<img
src={ethIcon}
width="16px"
className="ml-1 flex items-center text-brand-white"
/>

<span className="px-3 text-sm">
{t('networkMenu.evmNetworks')}
</span>

<img
src={arrow}
className={`relative left-[12.4rem] flex items-center ${
open ? 'transform rotate-180' : ''
} text-brand-white`}
id="network-settings-btn"
/>
</Disclosure.Button>

<Disclosure.Panel className="h-max pb-2 pt-4 text-sm">
{Object.values(networks.ethereum)
.sort(customSort)

.map(
(currentNetwork: any, index: number, arr) => (
<li
key={uniqueId()}
className={`backface-visibility-hidden ${
index === 0
? 'rounded-tl-lg rounded-tr-lg border-b border-dashed border-gray-600 '
: index === arr.length - 1
? 'rounded-bl-lg rounded-br-lg'
: 'border-b border-dashed border-gray-600'
} flex flex-row items-center justify-start mx-auto p-2 max-w-95 text-white text-sm font-medium active:bg-opacity-40 bg-brand-blue500 focus:outline-none cursor-pointer transform transition duration-300`}
onClick={() =>
handleChangeNetwork(
currentNetwork,
'ethereum'
)
}
>
<span className="ml-8 text-left">
{currentNetwork.label}
</span>
<div className="absolute items-center flex gap-2 right-[1rem] ">
{!isBitcoinBased &&
activeNetworkValidator(
currentNetwork
) && (
<Icon
name="check"
className="w-4 relative bottom-0.5"
wrapperClassname="w-6"
/>
)}
</div>
</li>
)
)}
</Disclosure.Panel>
</>
)}
</Disclosure>
</Menu.Item>
)}

<span className="disabled text-xs flex justify-start px-5 py-3 mt-6">
{t('networkMenu.networkSettings')}
Expand Down
Loading
Loading