Skip to content

Commit

Permalink
feat: confirm accounts section refactoring (#2572)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Asmadek
Asmadek authored Nov 6, 2024
1 parent 04625cd commit 43a0337
Show file tree
Hide file tree
Showing 22 changed files with 278 additions and 1,513 deletions.
3 changes: 2 additions & 1 deletion src/renderer/features/fellowship-voting/components/VotingConfirmation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,8 @@ export const VotingConfirmation = ({ fee, account, wallets, chain, asset, vote,
})}
</span>
</Box>
<TransactionDetails wallets={wallets} chain={chain} initiator={account}>

<TransactionDetails wallets={wallets} chain={chain} initiator={[account]}>
<DetailRow label={t('fellowship.voting.confirmation.vote')}>{t(`fellowship.voting.${vote}`)}</DetailRow>
<Separator className="border-filter-border" />
<DetailRow label={t('fellowship.voting.confirmation.fee')}>{formatAsset(fee, asset)}</DetailRow>
Expand Down
91 changes: 11 additions & 80 deletions src/renderer/features/operations/OperationsConfirm/AddProxy/ui/Confirmation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,13 @@ import { type ReactNode, useState } from 'react';

import { useI18n } from '@/shared/i18n';
import { Button, DetailRow, FootnoteText, Icon, Tooltip } from '@/shared/ui';
import { TransactionDetails } from '@/shared/ui-entities';
import { AssetBalance } from '@/entities/asset';
import { SignButton } from '@/entities/operations';
import { AssetFiatBalance } from '@/entities/price';
import { proxyUtils } from '@/entities/proxy';
import { FeeWithLabel, MultisigDepositWithLabel } from '@/entities/transaction';
import { AddressWithExplorers, ExplorersPopover, WalletCardSm, WalletIcon, accountUtils } from '@/entities/wallet';
import { AddressWithExplorers, accountUtils, walletModel } from '@/entities/wallet';
import { MultisigExistsAlert } from '../../common/MultisigExistsAlert';
import { confirmModel } from '../model/confirm-model';

Expand All @@ -21,6 +22,7 @@ type Props = {

export const Confirmation = ({ id = 0, onGoBack, secondaryActionButton, hideSignButton }: Props) => {
const { t } = useI18n();
const wallets = useUnit(walletModel.$wallets);

const confirmStore = useStoreMap({
store: confirmModel.$confirmStore,
Expand All @@ -40,12 +42,6 @@ export const Confirmation = ({ id = 0, onGoBack, secondaryActionButton, hideSign
fn: (value, [id]) => value?.[id],
});

const proxiedWallet = useStoreMap({
store: confirmModel.$proxiedWallets,
keys: [id],
fn: (value, [id]) => value?.[id],
});

const api = useStoreMap({
store: confirmModel.$apis,
keys: [confirmStore?.chain?.chainId],
Expand All @@ -68,78 +64,13 @@ export const Confirmation = ({ id = 0, onGoBack, secondaryActionButton, hideSign

<MultisigExistsAlert active={isMultisigExists} />

<dl className="flex w-full flex-col gap-y-4">
{proxiedWallet && confirmStore.proxiedAccount && (
<>
<DetailRow label={t('transfer.senderProxiedWallet')} className="flex gap-x-2">
<WalletIcon type={proxiedWallet.type} size={16} />
<FootnoteText className="pr-2">{proxiedWallet.name}</FootnoteText>
</DetailRow>

<DetailRow label={t('transfer.senderProxiedAccount')}>
<AddressWithExplorers
type="short"
explorers={confirmStore.chain.explorers}
addressFont="text-footnote text-inherit"
accountId={confirmStore.proxiedAccount.accountId}
addressPrefix={confirmStore.chain.addressPrefix}
wrapperClassName="text-text-secondary"
/>
</DetailRow>

<hr className="w-full border-filter-border pr-2" />

<DetailRow label={t('transfer.signingWallet')} className="flex gap-x-2">
<WalletIcon type={initiatorWallet.type} size={16} />
<FootnoteText className="pr-2">{initiatorWallet.name}</FootnoteText>
</DetailRow>

<DetailRow label={t('transfer.signingAccount')}>
<AddressWithExplorers
type="short"
explorers={confirmStore.chain.explorers}
addressFont="text-footnote text-inherit"
accountId={confirmStore.proxiedAccount.proxyAccountId}
addressPrefix={confirmStore.chain.addressPrefix}
wrapperClassName="text-text-secondary"
/>
</DetailRow>
</>
)}

{!proxiedWallet && (
<>
<DetailRow label={t('proxy.details.wallet')} className="flex gap-x-2">
<WalletIcon type={initiatorWallet.type} size={16} />
<FootnoteText className="pr-2">{initiatorWallet.name}</FootnoteText>
</DetailRow>

<DetailRow label={t('proxy.details.account')}>
<AddressWithExplorers
type="short"
explorers={confirmStore.chain.explorers}
addressFont="text-footnote text-inherit"
accountId={confirmStore.account.accountId}
addressPrefix={confirmStore.chain.addressPrefix}
wrapperClassName="text-text-secondary"
/>
</DetailRow>
</>
)}

{signerWallet && confirmStore.signatory && (
<DetailRow label={t('proxy.details.signatory')}>
<ExplorersPopover
button={<WalletCardSm wallet={signerWallet} />}
address={confirmStore.signatory.accountId}
explorers={confirmStore.chain.explorers}
addressPrefix={confirmStore.chain.addressPrefix}
/>
</DetailRow>
)}

<hr className="w-full border-filter-border pr-2" />

<TransactionDetails
chain={confirmStore.chain}
wallets={wallets}
initiator={[confirmStore.account]}
signatory={confirmStore.signatory}
proxied={confirmStore.proxiedAccount}
>
<DetailRow label={t('proxy.details.grantAccessType')} className="pr-2">
<FootnoteText>{t(proxyUtils.getProxyTypeName(confirmStore.proxyType))}</FootnoteText>
</DetailRow>
Expand Down Expand Up @@ -188,7 +119,7 @@ export const Confirmation = ({ id = 0, onGoBack, secondaryActionButton, hideSign
transaction={confirmStore.transaction}
onFeeLoading={setIsFeeLoading}
/>
</dl>
</TransactionDetails>

<div className="mt-3 flex w-full justify-between">
{onGoBack && (
Expand Down
91 changes: 11 additions & 80 deletions src/renderer/features/operations/OperationsConfirm/AddPureProxied/ui/Confirmation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import { type ReactNode } from 'react';

import { useI18n } from '@/shared/i18n';
import { Button, DetailRow, FootnoteText, Icon, Tooltip } from '@/shared/ui';
import { TransactionDetails } from '@/shared/ui-entities';
import { AssetBalance } from '@/entities/asset';
import { SignButton } from '@/entities/operations';
import { AssetFiatBalance } from '@/entities/price';
import { AddressWithExplorers, ExplorersPopover, WalletCardSm, WalletIcon, accountUtils } from '@/entities/wallet';
import { accountUtils, walletModel } from '@/entities/wallet';
import { MultisigExistsAlert } from '../../common/MultisigExistsAlert';
import { confirmModel } from '../model/confirm-model';

Expand All @@ -19,6 +20,7 @@ type Props = {

export const Confirmation = ({ id = 0, secondaryActionButton, hideSignButton, onGoBack }: Props) => {
const { t } = useI18n();
const wallets = useUnit(walletModel.$wallets);

const confirmStore = useStoreMap({
store: confirmModel.$confirmStore,
Expand All @@ -38,12 +40,6 @@ export const Confirmation = ({ id = 0, secondaryActionButton, hideSignButton, on
fn: (value, [id]) => value?.[id],
});

const proxiedWallet = useStoreMap({
store: confirmModel.$proxiedWallets,
keys: [id],
fn: (value, [id]) => value?.[id],
});

const isMultisigExists = useUnit(confirmModel.$isMultisigExists);

if (!confirmStore || !initiatorWallet) {
Expand All @@ -58,78 +54,13 @@ export const Confirmation = ({ id = 0, secondaryActionButton, hideSignButton, on

<MultisigExistsAlert active={isMultisigExists} />

<dl className="flex w-full flex-col gap-y-4">
{proxiedWallet && confirmStore.proxiedAccount && (
<>
<DetailRow label={t('transfer.senderProxiedWallet')} className="flex gap-x-2">
<WalletIcon type={proxiedWallet.type} size={16} />
<FootnoteText className="pr-2">{proxiedWallet.name}</FootnoteText>
</DetailRow>

<DetailRow label={t('transfer.senderProxiedAccount')}>
<AddressWithExplorers
type="short"
explorers={confirmStore.chain.explorers}
addressFont="text-footnote text-inherit"
accountId={confirmStore.proxiedAccount.accountId}
addressPrefix={confirmStore.chain.addressPrefix}
wrapperClassName="text-text-secondary"
/>
</DetailRow>

<hr className="w-full border-filter-border pr-2" />

<DetailRow label={t('transfer.signingWallet')} className="flex gap-x-2">
<WalletIcon type={initiatorWallet.type} size={16} />
<FootnoteText className="pr-2">{initiatorWallet.name}</FootnoteText>
</DetailRow>

<DetailRow label={t('transfer.signingAccount')}>
<AddressWithExplorers
type="short"
explorers={confirmStore.chain.explorers}
addressFont="text-footnote text-inherit"
accountId={confirmStore.proxiedAccount.proxyAccountId}
addressPrefix={confirmStore.chain.addressPrefix}
wrapperClassName="text-text-secondary"
/>
</DetailRow>
</>
)}

{!proxiedWallet && (
<>
<DetailRow label={t('proxy.details.wallet')} className="flex gap-x-2">
<WalletIcon type={initiatorWallet.type} size={16} />
<FootnoteText className="pr-2">{initiatorWallet.name}</FootnoteText>
</DetailRow>

<DetailRow label={t('proxy.details.account')}>
<AddressWithExplorers
type="short"
explorers={confirmStore.chain.explorers}
addressFont="text-footnote text-inherit"
accountId={confirmStore.account.accountId}
addressPrefix={confirmStore.chain.addressPrefix}
wrapperClassName="text-text-secondary"
/>
</DetailRow>
</>
)}

{signerWallet && confirmStore.signatory && (
<DetailRow label={t('proxy.details.signatory')}>
<ExplorersPopover
button={<WalletCardSm wallet={signerWallet} />}
address={confirmStore.signatory.accountId}
explorers={confirmStore.chain.explorers}
addressPrefix={confirmStore.chain.addressPrefix}
/>
</DetailRow>
)}

<hr className="w-full border-filter-border pr-2" />

<TransactionDetails
chain={confirmStore.chain}
wallets={wallets}
initiator={[confirmStore.account]}
signatory={confirmStore.signatory}
proxied={confirmStore.proxiedAccount}
>
<DetailRow
className="text-text-primary"
label={
Expand Down Expand Up @@ -177,7 +108,7 @@ export const Confirmation = ({ id = 0, secondaryActionButton, hideSignButton, on
<AssetFiatBalance asset={confirmStore.chain.assets[0]} amount={confirmStore.fee} />
</div>
</DetailRow>
</dl>
</TransactionDetails>

<div className="mt-3 flex w-full justify-between">
{onGoBack && (
Expand Down
Loading

0 comments on commit 43a0337

Please sign in to comment.