Feat: Select camera

src/renderer/entities/operations/ui/SignatorySelector.tsx

@@ -1,13 +1,13 @@
 import { type BN } from '@polkadot/util';
-import { useMemo } from 'react';
 
-import { type Account, type Asset } from '@/shared/core';
+import { type Account, type Asset, type ID } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { toAddress } from '@/shared/lib/utils';
-import { InputHint, Select } from '@/shared/ui';
-import { type DropdownOption } from '@/shared/ui/types';
+import { InputHint } from '@/shared/ui';
+import { Address } from '@/shared/ui-entities';
+import { Field, Select } from '@/shared/ui-kit';
 import { AssetBalance } from '@/entities/asset';
-import { AccountAddress, accountUtils } from '@/entities/wallet';
+import { accountUtils } from '@/entities/wallet';
 
 type Props = {
   signatory?: Account | null;
@@ -30,42 +30,45 @@ export const SignatorySelector = ({
 }: Props) => {
   const { t } = useI18n();
 
-  const options = useMemo(
-    () =>
-      signatories.map<DropdownOption>(({ signer, balance }) => {
-        const isShard = accountUtils.isShardAccount(signer);
-        const address = toAddress(signer.accountId, { prefix: addressPrefix });
+  const selectSigner = (signerId: ID) => {
+    const selectedSigner = signatories.find(({ signer }) => signer.id === signerId);
+    if (!selectedSigner) return;
 
-        return {
-          id: signer.id.toString(),
-          value: signer,
-          element: (
-            <div className="flex w-full items-center justify-between">
-              <AccountAddress
-                size={20}
-                type="short"
-                address={address}
-                name={isShard ? address : signer.name}
-                canCopy={false}
-              />
-              <AssetBalance value={balance.toString()} asset={asset} />
-            </div>
-          ),
-        };
-      }, []),
-    [signatories],
-  );
+    onChange(selectedSigner.signer);
+  };
 
   return (
     <div className="flex flex-col gap-y-2">
-      <Select
-        label={t('proxy.addProxy.signatoryLabel')}
-        placeholder={t('proxy.addProxy.signatoryPlaceholder')}
-        selectedId={signatory?.id?.toString()}
-        options={options}
-        invalid={hasError}
-        onChange={({ value }) => onChange(value)}
-      />
+      <Field text={t('proxy.addProxy.signatoryLabel')}>
+        <Select
+          placeholder={t('proxy.addProxy.signatoryPlaceholder')}
+          value={signatory?.id.toString() ?? null}
+          invalid={hasError}
+          onChange={(value) => selectSigner(Number(value))}
+        >
+          {signatories.map(({ signer, balance }) => {
+            const isShard = accountUtils.isShardAccount(signer);
+            const address = toAddress(signer.accountId, { prefix: addressPrefix });
+
+            return (
+              <Select.Item key={signer.id} value={signer.id.toString()}>
+                <div className="flex w-full items-center justify-between">
+                  <Address
+                    showIcon
+                    hideAddress
+                    variant="short"
+                    iconSize={20}
+                    address={address}
+                    title={isShard ? address : signer.name}
+                    canCopy={false}
+                  />
+                  <AssetBalance value={balance.toString()} asset={asset} />
+                </div>
+              </Select.Item>
+            );
+          })}
+        </Select>
+      </Field>
       <InputHint variant="error" active={hasError}>
         {errorText}
       </InputHint>

src/renderer/entities/transaction/ui/QrCode/QrReader/QrReaderWrapper.tsx

@@ -3,8 +3,8 @@ import { useEffect, useState } from 'react';
 import { type HexString } from '@/shared/core';
 import { useI18n } from '@/shared/i18n';
 import { ValidationErrors, cnTw } from '@/shared/lib/utils';
-import { Button, CaptionText, Countdown, FootnoteText, Select, Shimmering, SmallTitleText } from '@/shared/ui';
-import { type DropdownOption, type DropdownResult } from '@/shared/ui/types';
+import { Button, CaptionText, Countdown, FootnoteText, Shimmering, SmallTitleText } from '@/shared/ui';
+import { Select } from '@/shared/ui-kit';
 import { CameraAccessErrors, CameraError, WhiteTextButtonStyle } from '../common/constants';
 import { type ErrorObject, type Progress, QrError, type VideoInput } from '../common/types';
 
@@ -42,8 +42,8 @@ export const QrReaderWrapper = ({ className, onResult, countdown, validationErro
   const [progress, setProgress] = useState<Progress>();
   const [isSuccess, setIsSuccess] = useState<boolean>(false);
 
-  const [activeCamera, setActiveCamera] = useState<DropdownResult<string>>();
-  const [availableCameras, setAvailableCameras] = useState<DropdownOption<string>[]>([]);
+  const [activeCamera, setActiveCamera] = useState<string>();
+  const [availableCameras, setAvailableCameras] = useState<Record<'title' | 'value', string>[]>([]);
 
   useEffect(() => {
     if (validationError) {
@@ -54,18 +54,15 @@ export const QrReaderWrapper = ({ className, onResult, countdown, validationErro
   const isCameraOn = !(error && CameraAccessErrors.includes(error));
 
   const onCameraList = (cameras: VideoInput[]) => {
-    const formattedCameras = cameras.map((camera, index) => ({
-      //eslint-disable-next-line i18next/no-literal-string
-      element: `${index + 1}. ${camera.label}`,
+    const formattedCameras = cameras.map((camera) => ({
+      title: camera.label,
       value: camera.id,
-      id: camera.id,
     }));
 
     setAvailableCameras(formattedCameras);
 
-    if (formattedCameras.length > 1) {
-      // if multiple cameras are available we set first one as active
-      setActiveCamera(formattedCameras[0]);
+    if (formattedCameras.length > 0) {
+      setActiveCamera(formattedCameras[0].value);
       setIsLoading(false);
     }
   };
@@ -113,7 +110,7 @@ export const QrReaderWrapper = ({ className, onResult, countdown, validationErro
       error === CameraError.INVALID_ERROR && 'blur-[13px]',
       className,
     ),
-    cameraId: activeCamera?.value,
+    cameraId: activeCamera,
     onStart: () => setIsLoading(false),
     onCameraList,
     onError,
@@ -160,16 +157,20 @@ export const QrReaderWrapper = ({ className, onResult, countdown, validationErro
         )}
       </div>
 
-      <div className="mb-4 h-8.5">
-        {availableCameras && availableCameras.length > 1 && (
+      <div className="mb-4 w-[208px]">
+        {availableCameras.length > 1 && (
           <Select
             theme="dark"
             placeholder={t('onboarding.paritySigner.selectCameraLabel')}
-            selectedId={activeCamera?.id}
-            options={availableCameras}
-            className="w-[208px]"
+            value={activeCamera ?? null}
             onChange={setActiveCamera}
-          />
+          >
+            {availableCameras.map((camera, index) => (
+              <Select.Item key={camera.value} value={camera.value}>
+                {`${index + 1}. ${camera.title}`}
+              </Select.Item>
+            ))}
+          </Select>
         )}
       </div>
 

src/renderer/features/fellowship-voting/components/VotingConfirmation.tsx

@@ -37,7 +37,7 @@ 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]} signatory={null}>
         <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>

src/renderer/features/fellowship-voting/model/voting.ts

@@ -66,7 +66,11 @@ const signPayloadCreated = createEvent<SigningPayload | null>();
 
 sample({
   clock: sign,
-  source: { transactions: $wrappedTx, account: votingStatusModel.$votingAccount, chain: $chain },
+  source: {
+    transactions: $wrappedTx,
+    account: votingStatusModel.$votingAccount,
+    chain: $chain,
+  },
   fn: ({ transactions, account, chain }) => {
     if (nullable(transactions) || nullable(account) || nullable(chain)) {
       return null;
@@ -76,6 +80,7 @@ sample({
       chain,
       account,
       transaction: transactions.wrappedTx,
+      signatory: null,
     };
   },
   target: signPayloadCreated,

src/renderer/features/governance/types/structs.ts

@@ -53,7 +53,7 @@ export type UnlockFormData = {
   shards: AccountWithClaim[];
   amount: string;
   proxiedAccount?: ProxiedAccount & ClaimData;
-  signatory?: Account;
+  signatory: Account | null;
   chain: Chain;
   asset: Asset;
   totalLock: BN;

src/renderer/features/operations/OperationSign/lib/types.ts

@@ -27,5 +27,5 @@ export type SigningPayload = {
   chain: Chain;
   account: Account;
   transaction: Transaction;
-  signatory?: Account;
+  signatory: Account | null;
 };

src/renderer/features/operations/OperationSubmit/model/submit-model.ts

@@ -22,7 +22,6 @@ import { ExtrinsicResult, SubmitStep } from '../lib/types';
 type Input = {
   chain: Chain;
   account: Account;
-  signatory?: Account;
   coreTxs: Transaction[];
   wrappedTxs: Transaction[];
   multisigTxs: Transaction[];

src/renderer/features/operations/OperationsConfirm/AddProxy/model/confirm-model.ts

@@ -20,7 +20,7 @@ type Input = {
   id?: number;
   chain: Chain;
   account: Account;
-  signatory?: Account;
+  signatory: Account | null;
   proxyType: ProxyType;
   delegate: Address;
   transaction: Transaction;

src/renderer/features/operations/OperationsConfirm/AddPureProxied/model/confirm-model.ts

@@ -11,7 +11,7 @@ type Input = {
   chain: Chain;
   account: Account;
   proxiedAccount?: ProxiedAccount;
-  signatory?: Account;
+  signatory: Account | null;
 
   proxyDeposit: string;
   fee: string;

src/renderer/features/operations/OperationsConfirm/BondExtra/model/confirm-model.ts

@@ -20,7 +20,7 @@ type Input = {
 
   shards: Account[];
   proxiedAccount?: ProxiedAccount;
-  signatory?: Account;
+  signatory: Account | null;
   amount: string;
 
   fee: string;

src/renderer/features/operations/OperationsConfirm/BondNominate/model/confirm-model.ts

@@ -25,7 +25,7 @@ type Input = {
   shards: Account[];
   validators: Validator[];
   proxiedAccount?: ProxiedAccount;
-  signatory?: Account;
+  signatory: Account | null;
   amount: string;
   destination: string;
 

src/renderer/features/operations/OperationsConfirm/Delegate/model/confirm-model.ts

@@ -32,7 +32,7 @@ type Input = {
   balance: string;
 
   proxiedAccount?: ProxiedAccount;
-  signatory?: Account;
+  signatory: Account | null;
 
   fee: string;
   totalFee: string;

src/renderer/features/operations/OperationsConfirm/EditDelegation/model/confirm-model.ts

@@ -32,7 +32,7 @@ type Input = {
   balance: string;
 
   proxiedAccount?: ProxiedAccount;
-  signatory?: Account;
+  signatory: Account | null;
 
   fee: string;
   totalFee: string;

src/renderer/features/operations/OperationsConfirm/Nominate/model/confirm-model.ts

@@ -22,7 +22,7 @@ type Input = {
   shards: Account[];
   validators: Validator[];
   proxiedAccount?: ProxiedAccount;
-  signatory?: Account;
+  signatory: Account | null;
 
   fee: string;
   totalFee: string;

src/renderer/features/operations/OperationsConfirm/Payee/model/confirm-model.ts

@@ -20,7 +20,7 @@ type Input = {
 
   shards: Account[];
   proxiedAccount?: ProxiedAccount;
-  signatory?: Account;
+  signatory: Account | null;
   destination?: string;
 
   fee: string;

src/renderer/features/operations/OperationsConfirm/Referendum/RemoveVote/ui/Confirmation.tsx

@@ -105,7 +105,7 @@ export const Confirmation = ({ id = 0, secondaryActionButton, hideSignButton }:
         chain={confirm.meta.chain}
         wallets={wallets}
         initiator={[confirm.accounts.initiator]}
-        signatory={confirm.accounts.signer || undefined}
+        signatory={confirm.accounts.signer}
       >
         {votingPower && amount && conviction ? (
           <>

src/renderer/features/operations/OperationsConfirm/Referendum/Vote/ui/Confirmation.tsx

@@ -109,7 +109,7 @@ export const Confirmation = ({ id = 0, secondaryActionButton, hideSignButton, on
         chain={confirm.meta.chain}
         wallets={wallets}
         initiator={[confirm.accounts.initiator]}
-        signatory={confirm.accounts.signer || undefined}
+        signatory={confirm.accounts.signer}
         proxied={confirm.accounts.proxy || undefined}
       >
         <DetailRow label={t('governance.vote.field.decision')}>{t(`governance.referendum.${decision}`)}</DetailRow>

src/renderer/features/operations/OperationsConfirm/RemoveProxy/model/confirm-model.ts

@@ -18,7 +18,7 @@ import { walletModel, walletUtils } from '@/entities/wallet';
 
 type Input = {
   id?: number;
-  signatory?: Account;
+  signatory: Account | null;
   transaction: Transaction;
   delegate: Address;
   proxyType: ProxyType;

src/renderer/features/operations/OperationsConfirm/RemovePureProxied/model/confirm-model.ts

@@ -18,7 +18,7 @@ import { walletModel, walletUtils } from '@/entities/wallet';
 
 type Input = {
   id?: number;
-  signatory?: Account;
+  signatory: Account | null;
   transaction: Transaction;
   spawner: AccountId;
   proxyType: ProxyType;

src/renderer/features/operations/OperationsConfirm/Restake/model/confirm-model.ts

@@ -19,7 +19,7 @@ type Input = {
   asset: Asset;
   shards: Account[];
   proxiedAccount?: ProxiedAccount;
-  signatory?: Account;
+  signatory: Account | null;
   amount: string;
 
   fee: string;

src/renderer/features/operations/OperationsConfirm/RevokeDelegation/model/confirm-model.ts

@@ -32,7 +32,7 @@ export type Input = {
   balance: string;
 
   proxiedAccount?: ProxiedAccount;
-  signatory?: Account;
+  signatory: Account | null;
 
   fee: string;
   totalFee: string;

src/renderer/features/operations/OperationsConfirm/Transfer/model/confirm-model.ts

@@ -32,7 +32,7 @@ type Input = {
   asset: Asset;
   account: Account;
   proxiedAccount?: ProxiedAccount;
-  signatory?: Account;
+  signatory: Account | null;
   amount: string;
   destination: Address;
 

src/renderer/features/operations/OperationsConfirm/Unstake/model/confirm-model.ts

@@ -21,7 +21,7 @@ type Input = {
   asset: Asset;
   shards: Account[];
   proxiedAccount?: ProxiedAccount;
-  signatory?: Account;
+  signatory: Account | null;
   amount: string;
 
   fee: string;

src/renderer/features/operations/OperationsConfirm/Withdraw/model/confirm-model.ts

@@ -19,7 +19,7 @@ type Input = {
   asset: Asset;
   shards: Account[];
   proxiedAccount?: ProxiedAccount;
-  signatory?: Account;
+  signatory: Account | null;
   amount: string;
 
   fee: string;

src/renderer/features/operations/OperationsConfirm/lib/createTransactionConfirmStore.ts

@@ -18,7 +18,7 @@ import { walletUtils } from '@/entities/wallet';
 export type ConfirmInfo = {
   id?: number;
   account: Account;
-  signatory?: Account;
+  signatory: Account | null;
   chain: Chain;
   wrappedTransactions: WrappedTransactions;
 };