feat(wallet): Rebrand send flow: review & send screen (#2079)

* feat(wallet): rebrand "review & send" page. Signed-off-by: Eugene Panteleymonchuk <[email protected]> * feat(wallet): Rebrand send flow: review & send screen. Change text. Co-authored-by: JCNoguera <[email protected]> --------- Signed-off-by: Eugene Panteleymonchuk <[email protected]> Co-authored-by: JCNoguera <[email protected]>
iotaledger · Aug 27, 2024 · 288cb5b · 288cb5b
1 parent e32d93c
commit 288cb5b
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 44 deletions.
diff --git a/apps/wallet/src/ui/app/hooks/useAddressLink.ts b/apps/wallet/src/ui/app/hooks/useAddressLink.ts
@@ -0,0 +1,23 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useExplorerLink } from '_app/hooks/useExplorerLink';
+import { ExplorerLinkType } from '_components';
+import { formatAddress } from '@iota/iota-sdk/utils';
+import { useResolveIotaNSName } from '@iota/dapp-kit';
+import { isIotaNSName } from '@iota/core';
+
+export function useAddressLink(inputAddress: string | null) {
+    const { data: domainName } = useResolveIotaNSName(inputAddress);
+    const outputAddress = domainName ?? (inputAddress || '');
+    const explorerHref = useExplorerLink({
+        type: ExplorerLinkType.Address,
+        address: outputAddress || undefined,
+    });
+
+    return {
+        explorerHref: explorerHref || '',
+        addressFull: inputAddress || '',
+        address: isIotaNSName(outputAddress) ? outputAddress : formatAddress(outputAddress),
+    };
+}
diff --git a/apps/wallet/src/ui/app/pages/home/transfer-coin/PreviewTransfer.tsx b/apps/wallet/src/ui/app/pages/home/transfer-coin/PreviewTransfer.tsx
@@ -2,11 +2,22 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Text } from '_app/shared/text';
-import { TxnAddress, TxnAmount } from '_components';
+import { CoinIcon } from '_components';
 import { useActiveAddress } from '_src/ui/app/hooks/useActiveAddress';
 import { GAS_SYMBOL } from '_src/ui/app/redux/slices/iota-objects/Coin';
-import { parseAmount, useCoinMetadata } from '@iota/core';
+import { parseAmount, useCoinMetadata, useFormatCoin } from '@iota/core';
+import {
+    Card,
+    CardAction,
+    CardActionType,
+    CardBody,
+    CardImage,
+    CardType,
+    Divider,
+    ImageType,
+    KeyValueInfo,
+} from '@iota/apps-ui-kit';
+import { useAddressLink } from '_app/hooks/useAddressLink';
 
 export type PreviewTransferProps = {
     coinType: string;
@@ -26,26 +37,42 @@ export function PreviewTransfer({
     const accountAddress = useActiveAddress();
     const { data: metadata } = useCoinMetadata(coinType);
     const amountWithoutDecimals = parseAmount(amount, metadata?.decimals ?? 0);
+    const [formatted, symbol] = useFormatCoin(
+        Math.abs(Number(amountWithoutDecimals.toString())),
+        coinType,
+    );
+
+    const addrFrom = useAddressLink(accountAddress);
+    const addrTo = useAddressLink(to);
 
     return (
-        <div className="divide-steel/20 flex w-full flex-col divide-x-0 divide-y divide-solid px-2.5">
-            <TxnAmount
-                amount={amountWithoutDecimals.toString()}
-                label="Sending"
-                coinType={coinType}
-                approximation={approximation}
-            />
-            <TxnAddress address={accountAddress || ''} label="From" />
-            <TxnAddress address={to} label="To" />
-            <div className="mb-5 flex w-full justify-between gap-2 pt-3.5">
-                <div className="flex gap-1">
-                    <Text variant="body" color="gray-80" weight="medium">
-                        Estimated Gas Fees
-                    </Text>
-                </div>
-                <Text variant="body" color="gray-90" weight="medium">
-                    {gasBudget} {GAS_SYMBOL}
-                </Text>
+        <div className="flex w-full flex-col gap-md">
+            <Card type={CardType.Filled}>
+                <CardImage type={ImageType.BgSolid}>
+                    <div className="flex h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8  text-neutral-10">
+                        <CoinIcon coinType={coinType} />
+                    </div>
+                </CardImage>
+                <CardBody
+                    title={`${approximation ? '~' : ''}${formatted} ${symbol}`}
+                    subtitle="Amount"
+                />
+                <CardAction type={CardActionType.SupportingText} />
+            </Card>
+            <div className="flex flex-col gap-md--rs p-sm--rs">
+                <KeyValueInfo
+                    keyText={'From'}
+                    valueText={addrFrom.address}
+                    valueLink={addrFrom.explorerHref}
+                />
+                <Divider />
+                <KeyValueInfo
+                    keyText={'To'}
+                    valueText={addrTo.address}
+                    valueLink={addrTo.explorerHref}
+                />
+                <Divider />
+                <KeyValueInfo keyText={'Est. Gas Fees'} valueText={`${gasBudget} ${GAS_SYMBOL}`} />
             </div>
         </div>
     );

diff --git a/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx b/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx
@@ -2,8 +2,6 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import BottomMenuLayout, { Content, Menu } from '_app/shared/bottom-menu-layout';
-import { Button } from '_app/shared/ButtonUI';
 import { Text } from '_app/shared/text';
 import { ActiveCoinsCard, Overlay } from '_components';
 import { ampli } from '_src/shared/analytics/ampli';
@@ -12,16 +10,16 @@ import { useActiveAccount } from '_src/ui/app/hooks/useActiveAccount';
 import { useSigner } from '_src/ui/app/hooks/useSigner';
 import { useUnlockedGuard } from '_src/ui/app/hooks/useUnlockedGuard';
 import { createTokenTransferTransaction, useCoinMetadata } from '@iota/core';
-import { ArrowLeft16, ArrowRight16 } from '@iota/icons';
 // import * as Sentry from '@sentry/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useMemo, useState } from 'react';
 import { toast } from 'react-hot-toast';
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
+import { Button, ButtonType } from '@iota/apps-ui-kit';
 
 import { PreviewTransfer } from './PreviewTransfer';
-import { SendTokenForm } from './SendTokenForm';
 import type { SubmitProps } from './SendTokenForm';
+import { SendTokenForm } from './SendTokenForm';
 
 function TransferCoinPage() {
     const [searchParams] = useSearchParams();
@@ -101,42 +99,33 @@ function TransferCoinPage() {
 
     return (
         <Overlay
-            showModal={true}
+            showModal
             title={showTransactionPreview ? 'Review & Send' : 'Send Coins'}
             closeOverlay={() => navigate('/')}
+            showBackButton
         >
             <div className="flex h-full w-full flex-col">
                 {showTransactionPreview && formData ? (
-                    <BottomMenuLayout>
-                        <Content>
+                    <>
+                        <div className="flex flex-1">
                             <PreviewTransfer
                                 coinType={coinType}
                                 amount={formData.amount}
                                 to={formData.to}
                                 approximation={formData.isPayAllIota}
                                 gasBudget={formData.gasBudgetEst}
                             />
-                        </Content>
-                        <Menu stuckClass="sendCoin-cta" className="mx-0 w-full gap-2.5 px-0 pb-0">
-                            <Button
-                                type="button"
-                                variant="secondary"
-                                onClick={() => setShowTransactionPreview(false)}
-                                text="Back"
-                                before={<ArrowLeft16 />}
-                            />
-
+                        </div>
+                        <div className="pt-sm">
                             <Button
-                                type="button"
-                                variant="primary"
+                                fullWidth
+                                type={ButtonType.Primary}
                                 onClick={() => executeTransfer.mutateAsync()}
                                 text="Send Now"
                                 disabled={coinType === null}
-                                after={<ArrowRight16 />}
-                                loading={executeTransfer.isPending}
                             />
-                        </Menu>
-                    </BottomMenuLayout>
+                        </div>
+                    </>
                 ) : (
                     <>
                         <div className="mb-7 flex flex-col gap-2.5">