feat(wallet-dashboard): add styles for Review & Send screen

apps/core/package.json

@@ -26,12 +26,16 @@
         "@amplitude/analytics-types": "^0.20.0",
         "@growthbook/growthbook-react": "^1.0.0",
         "@hookform/resolvers": "^3.9.0",
+        "@iota/apps-ui-kit": "workspace:*",
         "@iota/dapp-kit": "workspace:*",
         "@iota/iota-sdk": "workspace:*",
         "@iota/kiosk": "workspace:*",
+        "@iota/ui-icons": "workspace:*",
         "@sentry/react": "^7.59.2",
         "@tanstack/react-query": "^5.50.1",
         "bignumber.js": "^9.1.1",
+        "clsx": "^2.1.1",
+        "formik": "^2.4.2",
         "qrcode.react": "^4.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

apps/core/src/components/Inputs/AddressInput.tsx

@@ -0,0 +1,67 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Input, InputType } from '@iota/apps-ui-kit';
+import { Close } from '@iota/ui-icons';
+import { useIotaAddressValidation } from '../../hooks';
+import React, { useCallback } from 'react';
+import { useField, useFormikContext } from 'formik';
+
+export interface AddressInputProps {
+    name: string;
+    disabled?: boolean;
+    placeholder?: string;
+    label?: string;
+}
+
+export function AddressInput({
+    name,
+    disabled,
+    placeholder = '0x...',
+    label = 'Enter Recipient Address',
+}: AddressInputProps) {
+    const { validateField } = useFormikContext();
+    const [field, meta, helpers] = useField<string>(name);
+    const iotaAddressValidation = useIotaAddressValidation();
+
+    const formattedValue = iotaAddressValidation.cast(field.value);
+
+    const handleOnChange = useCallback(
+        async (e: React.ChangeEvent<HTMLInputElement>) => {
+            const address = e.currentTarget.value;
+            await helpers.setValue(iotaAddressValidation.cast(address));
+            validateField(name);
+        },
+        [name, iotaAddressValidation],
+    );
+
+    const clearAddress = () => {
+        helpers.setValue('');
+    };
+
+    return (
+        <Input
+            type={InputType.Text}
+            disabled={disabled}
+            placeholder={placeholder}
+            value={formattedValue}
+            name={field.name}
+            onBlur={field.onBlur}
+            label={label}
+            onChange={handleOnChange}
+            errorMessage={meta.error}
+            trailingElement={
+                formattedValue ? (
+                    <button
+                        onClick={clearAddress}
+                        type="button"
+                        className="flex items-center justify-center"
+                    >
+                        <Close />
+                    </button>
+                ) : undefined
+            }
+        />
+    );
+}

apps/core/src/components/Inputs/SendTokenFormInput.tsx

@@ -0,0 +1,91 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ButtonPill, Input, InputType } from '@iota/apps-ui-kit';
+import { CoinStruct } from '@iota/iota-sdk/client';
+import { useFormatCoin, useGasBudgetEstimation } from '../../hooks';
+import React, { useEffect } from 'react';
+import { GAS_SYMBOL } from '../../constants';
+import { useField, useFormikContext } from 'formik';
+import { TokenForm } from '../../forms';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+
+export interface SendTokenInputProps {
+    coins: CoinStruct[];
+    symbol: string;
+    coinDecimals: number;
+    activeAddress: string;
+    to: string;
+    onActionClick: () => Promise<void>;
+    isMaxActionDisabled?: boolean;
+    name: string;
+}
+
+export function SendTokenFormInput({
+    coins,
+    to,
+    symbol,
+    coinDecimals,
+    activeAddress,
+    onActionClick,
+    isMaxActionDisabled,
+    name,
+}: SendTokenInputProps) {
+    const { values, setFieldValue, isSubmitting, validateField } = useFormikContext<TokenForm>();
+
+    const { data: gasBudgetEstimation } = useGasBudgetEstimation({
+        coinDecimals,
+        coins: coins ?? [],
+        activeAddress,
+        to: to,
+        amount: values.amount,
+        isPayAllIota: values.isPayAllIota,
+        showGasSymbol: false,
+    });
+    const [formattedGasBudgetEstimation] = useFormatCoin(gasBudgetEstimation, IOTA_TYPE_ARG);
+
+    const [field, meta, helpers] = useField<string>(name);
+    const errorMessage = meta.error;
+    const isActionButtonDisabled = isSubmitting || isMaxActionDisabled;
+
+    const renderAction = () => (
+        <ButtonPill disabled={isActionButtonDisabled} onClick={onActionClick}>
+            Max
+        </ButtonPill>
+    );
+
+    // gasBudgetEstimation should change when the amount above changes
+    useEffect(() => {
+        setFieldValue('gasBudgetEst', formattedGasBudgetEstimation, false);
+    }, [formattedGasBudgetEstimation, setFieldValue, values.amount]);
+
+    return (
+        <Input
+            type={InputType.NumericFormat}
+            name={field.name}
+            onBlur={field.onBlur}
+            value={field.value}
+            caption="Est. Gas Fees:"
+            placeholder="0.00"
+            label="Send Amount"
+            suffix={` ${symbol}`}
+            prefix={values.isPayAllIota ? '~ ' : undefined}
+            allowNegative={false}
+            errorMessage={errorMessage}
+            amountCounter={
+                !errorMessage
+                    ? coins && formattedGasBudgetEstimation !== '--'
+                        ? `${formattedGasBudgetEstimation} ${GAS_SYMBOL}`
+                        : '--'
+                    : undefined
+            }
+            trailingElement={renderAction()}
+            decimalScale={coinDecimals ? undefined : 0}
+            thousandSeparator
+            onValueChange={async (values) => {
+                await helpers.setValue(values.value);
+                validateField(name);
+            }}
+        />
+    );
+}

apps/core/src/components/Inputs/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './AddressInput';
+export * from './SendTokenFormInput';

apps/wallet/src/ui/app/components/coin-icon/index.tsx → apps/core/src/components/coin/CoinIcon.tsx

@@ -2,10 +2,11 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { ImageIcon, ImageIconSize } from '_app/shared/image-icon';
-import { useCoinMetadata } from '@iota/core';
-import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import React from 'react';
+import { useCoinMetadata } from '../../hooks';
 import { IotaLogoMark } from '@iota/ui-icons';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { ImageIcon, ImageIconSize } from '../icon';
 import cx from 'clsx';
 
 interface NonIotaCoinProps {
@@ -28,19 +29,45 @@ function NonIotaCoin({ coinType, size = ImageIconSize.Full, rounded }: NonIotaCo
         </div>
     );
 }
-
 export interface CoinIconProps {
     coinType: string;
     size?: ImageIconSize;
     rounded?: boolean;
+    hasCoinWrapper?: boolean;
 }
 
-export function CoinIcon({ coinType, size = ImageIconSize.Full, rounded }: CoinIconProps) {
+export function CoinIcon({
+    coinType,
+    size = ImageIconSize.Full,
+    rounded,
+    hasCoinWrapper,
+}: CoinIconProps) {
+    const Component = hasCoinWrapper ? CoinIconWrapper : React.Fragment;
+    const coinWrapperProps = hasCoinWrapper ? { hasBorder: true, size: ImageIconSize.Large } : {};
+
     return coinType === IOTA_TYPE_ARG ? (
-        <div className={cx(size)}>
-            <IotaLogoMark className="h-full w-full" />
-        </div>
+        <Component {...coinWrapperProps}>
+            <div className={cx(size, 'text-neutral-10')}>
+                <IotaLogoMark className="h-full w-full" />
+            </div>
+        </Component>
     ) : (
         <NonIotaCoin rounded={rounded} size={size} coinType={coinType} />
     );
 }
+type CoinIconWrapperProps = React.PropsWithChildren<Pick<CoinIconProps, 'size'>> & {
+    hasBorder?: boolean;
+};
+export function CoinIconWrapper({ children, size, hasBorder }: CoinIconWrapperProps) {
+    return (
+        <div
+            className={cx(
+                size,
+                hasBorder && 'border border-shader-neutral-light-8',
+                'flex items-center justify-center rounded-full bg-neutral-100',
+            )}
+        >
+            {children}
+        </div>
+    );
+}

apps/wallet-dashboard/components/coins/CoinItem.tsx → apps/core/src/components/coin/CoinItem.tsx

@@ -1,6 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import React from 'react';
 import {
     Card,
     CardAction,
@@ -10,11 +11,10 @@ import {
     CardType,
     ImageType,
 } from '@iota/apps-ui-kit';
-import { useFormatCoin } from '@iota/core';
+import { CoinIcon, ImageIconSize } from '../';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { type ReactNode } from 'react';
-import { ImageIconSize } from '../ImageIcon';
-import { CoinIcon } from './CoinIcon';
+import { useFormatCoin } from '../../hooks';
 
 interface CoinItemProps {
     coinType: string;
@@ -25,7 +25,7 @@ interface CoinItemProps {
     usd?: number;
 }
 
-function CoinItem({
+export function CoinItem({
     coinType,
     balance,
     onClick,
@@ -39,8 +39,13 @@ function CoinItem({
     return (
         <Card type={CardType.Default} onClick={onClick}>
             <CardImage type={ImageType.BgTransparent}>
-                <div className="flex h-10 w-10 items-center justify-center rounded-full ">
-                    <CoinIcon coinType={coinType} rounded size={ImageIconSize.Small} />
+                <div className="flex h-10 w-10 items-center justify-center rounded-full">
+                    <CoinIcon
+                        coinType={coinType}
+                        rounded
+                        size={ImageIconSize.Small}
+                        hasCoinWrapper
+                    />
                 </div>
             </CardImage>
             <CardBody
@@ -57,5 +62,3 @@ function CoinItem({
         </Card>
     );
 }
-
-export default CoinItem;

apps/core/src/components/coin/CoinSelector.tsx

@@ -0,0 +1,61 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import { Select, SelectOption } from '@iota/apps-ui-kit';
+import { CoinBalance } from '@iota/iota-sdk/client';
+import { useFormatCoin } from '../../hooks';
+import { CoinIcon } from './CoinIcon';
+import { ImageIconSize } from '../icon';
+
+interface CoinSelectorProps {
+    activeCoinType: string;
+    coins: CoinBalance[];
+    onClick: (coinType: string) => void;
+}
+
+export function CoinSelector({
+    activeCoinType = IOTA_TYPE_ARG,
+    coins,
+    onClick,
+}: CoinSelectorProps) {
+    const activeCoin = coins?.find(({ coinType }) => coinType === activeCoinType) ?? coins?.[0];
+    const initialValue = activeCoin?.coinType;
+    const coinsOptions: SelectOption[] =
+        coins?.map((coin) => ({
+            id: coin.coinType,
+            renderLabel: () => <CoinSelectOption coin={coin} />,
+        })) || [];
+
+    return (
+        <Select
+            label="Select Coins"
+            value={initialValue}
+            options={coinsOptions}
+            onValueChange={(coinType) => {
+                onClick(coinType);
+            }}
+        />
+    );
+}
+
+function CoinSelectOption({ coin: { coinType, totalBalance } }: { coin: CoinBalance }) {
+    const [formatted, symbol, { data: coinMeta }] = useFormatCoin(totalBalance, coinType);
+    const isIota = coinType === IOTA_TYPE_ARG;
+
+    return (
+        <div className="flex w-full flex-row items-center justify-between">
+            <div className="flex flex-row items-center gap-x-md">
+                <div className="flex h-6 w-6 items-center justify-center">
+                    <CoinIcon size={ImageIconSize.Small} coinType={coinType} rounded />
+                </div>
+                <span className="text-body-lg text-neutral-10">
+                    {isIota ? (coinMeta?.name || '').toUpperCase() : coinMeta?.name || symbol}
+                </span>
+            </div>
+            <span className="text-label-lg text-neutral-60">
+                {formatted} {symbol}
+            </span>
+        </div>
+    );
+}

apps/core/src/components/coin/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './CoinIcon';
+export * from './CoinSelector';
+export * from './CoinItem';