From 98c0412c5223e4ec7a2fc3de709d6f0ff2493f98 Mon Sep 17 00:00:00 2001
From: Michal Zielenkiewicz <michal@oasisprotocol.org>
Date: Wed, 20 Sep 2023 11:06:44 +0200
Subject: [PATCH] Show contact name in tx confirmation dialog

---
 .../__snapshots__/index.test.tsx.snap         | 100 ++++++++++++++++++
 .../__tests__/index.test.tsx                  |  44 +++++++-
 .../components/ResponsiveGridRow/index.tsx    |  21 ++++
 .../components/TransactionPreview/index.tsx   |  17 +--
 4 files changed, 166 insertions(+), 16 deletions(-)

diff --git a/src/app/components/ResponsiveGridRow/__tests__/__snapshots__/index.test.tsx.snap b/src/app/components/ResponsiveGridRow/__tests__/__snapshots__/index.test.tsx.snap
index 57c83a5c63..b77927274a 100644
--- a/src/app/components/ResponsiveGridRow/__tests__/__snapshots__/index.test.tsx.snap
+++ b/src/app/components/ResponsiveGridRow/__tests__/__snapshots__/index.test.tsx.snap
@@ -1,5 +1,105 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<ResponsiveGridAddressRow  /> should match snapshot 1`] = `
+.c0 {
+  font-family: Rubik;
+  font-size: 18px;
+  line-height: 24px;
+  background-color: #ffffff;
+  color: #16213E;
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  min-height: 0;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+}
+
+.c2 {
+  font-size: 18px;
+  line-height: 24px;
+  font-weight: bold;
+}
+
+.c4 {
+  font-size: 18px;
+  line-height: 24px;
+}
+
+<div
+  class="c0"
+  style="min-height: 100vh;"
+>
+  <div
+    class="c1"
+  >
+    <span
+      class="c2"
+    >
+      To
+    </span>
+  </div>
+  <div
+    class="c3"
+  >
+    <span
+      class="c2"
+    >
+      My Contact
+    </span>
+  </div>
+  <div
+    class="c1"
+  >
+    <span
+      class="c2"
+    />
+  </div>
+  <div
+    class="c3"
+  >
+    <span
+      class="c4"
+      style="font-family: Roboto mono; letter-spacing: 0;"
+    >
+      <span
+        class="notranslate"
+        translate="no"
+      >
+        oasis1 qq2v zcvx n0js 5uns ch5m e2xz 4kr4 3vca sv0d 5eq4
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
 exports[`<ResponsiveGridRow /> should render component 1`] = `
 .c0 {
   display: -webkit-box;
diff --git a/src/app/components/ResponsiveGridRow/__tests__/index.test.tsx b/src/app/components/ResponsiveGridRow/__tests__/index.test.tsx
index d85e42ef73..bfb08b9751 100644
--- a/src/app/components/ResponsiveGridRow/__tests__/index.test.tsx
+++ b/src/app/components/ResponsiveGridRow/__tests__/index.test.tsx
@@ -1,7 +1,8 @@
-import * as React from 'react'
-import { render } from '@testing-library/react'
-
-import { ResponsiveGridRow } from '..'
+import { render, screen } from '@testing-library/react'
+import { Provider } from 'react-redux'
+import { configureAppStore } from 'store/configureStore'
+import { ThemeProvider } from 'styles/theme/ThemeProvider'
+import { ResponsiveGridRow, ResponsiveGridAddressRow } from '..'
 
 describe('<ResponsiveGridRow />', () => {
   it('should render component', () => {
@@ -10,3 +11,38 @@ describe('<ResponsiveGridRow />', () => {
     expect(container).toMatchSnapshot()
   })
 })
+
+const address = 'oasis1qq2vzcvxn0js5unsch5me2xz4kr43vcasv0d5eq4'
+const renderComponent = (store: any, address: string) =>
+  render(
+    <Provider store={store}>
+      <ThemeProvider>
+        <ResponsiveGridAddressRow label="To" value={address} />
+      </ThemeProvider>
+    </Provider>,
+  )
+
+describe('<ResponsiveGridAddressRow  />', () => {
+  let store: ReturnType<typeof configureAppStore>
+
+  beforeEach(() => {
+    store = configureAppStore({
+      contacts: {
+        [address]: {
+          address: address,
+          name: 'My Contact',
+        },
+      },
+    })
+  })
+
+  it('should match snapshot', () => {
+    const { container } = renderComponent(store, address)
+    expect(container.firstChild).toMatchSnapshot()
+  })
+
+  it('should render without a name', () => {
+    renderComponent(store, 'oasis1qqurxkgavtcjjytneumeclx59ds3avjaqg7ftqph')
+    expect(screen.queryByText('My Contact')).not.toBeInTheDocument()
+  })
+})
diff --git a/src/app/components/ResponsiveGridRow/index.tsx b/src/app/components/ResponsiveGridRow/index.tsx
index aa9ee0a999..380093c304 100644
--- a/src/app/components/ResponsiveGridRow/index.tsx
+++ b/src/app/components/ResponsiveGridRow/index.tsx
@@ -1,6 +1,9 @@
+import { useSelector } from 'react-redux'
 import { Box } from 'grommet/es6/components/Box'
 import { Text } from 'grommet/es6/components/Text'
 import React, { memo } from 'react'
+import { selectContact } from 'app/state/contacts/selectors'
+import { PrettyAddress } from '../PrettyAddress'
 
 interface ResponsiveGridRowProps {
   label: React.ReactNode
@@ -17,3 +20,21 @@ export const ResponsiveGridRow = memo(({ label, value }: ResponsiveGridRowProps)
     </>
   )
 })
+
+interface ResponsiveGridAddressRowProps {
+  label: string
+  value: string
+}
+
+export const ResponsiveGridAddressRow = ({ label, value }: ResponsiveGridAddressRowProps) => {
+  const contactAddress = useSelector(selectContact(value))
+
+  return (
+    <>
+      {contactAddress && (
+        <ResponsiveGridRow label={label} value={<Text weight="bold">{contactAddress.name}</Text>} />
+      )}
+      <ResponsiveGridRow label={contactAddress ? '' : label} value={<PrettyAddress address={value} />} />
+    </>
+  )
+}
diff --git a/src/app/components/TransactionPreview/index.tsx b/src/app/components/TransactionPreview/index.tsx
index ae1e7642f6..01595bf32b 100644
--- a/src/app/components/TransactionPreview/index.tsx
+++ b/src/app/components/TransactionPreview/index.tsx
@@ -9,8 +9,7 @@ import { ResponsiveContext } from 'grommet/es6/contexts/ResponsiveContext'
 import React, { memo, useContext } from 'react'
 
 import { AmountFormatter } from '../AmountFormatter'
-import { PrettyAddress } from '../PrettyAddress'
-import { ResponsiveGridRow } from '../ResponsiveGridRow'
+import { ResponsiveGridRow, ResponsiveGridAddressRow } from '../ResponsiveGridRow'
 import { TransactionPreview as Preview } from 'app/state/transaction/types'
 import { useTranslation } from 'react-i18next'
 import { TransactionTypeFormatter } from '../TransactionTypeFormatter'
@@ -32,20 +31,14 @@ export const TransactionPreview = memo((props: Props) => {
         label={t('transaction.preview.type', 'Type')}
         value={<TransactionTypeFormatter type={preview.transaction.type} />}
       />
-      <ResponsiveGridRow
-        label={t('transaction.preview.from', 'From')}
-        value={<PrettyAddress address={walletAddress} />}
-      />
+      <ResponsiveGridAddressRow label={t('transaction.preview.from', 'From')} value={walletAddress} />
       {preview.transaction.type === 'transfer' && (
-        <ResponsiveGridRow
-          label={t('transaction.preview.to', 'To')}
-          value={<PrettyAddress address={preview.transaction.to} />}
-        />
+        <ResponsiveGridAddressRow label={t('transaction.preview.to', 'To')} value={preview.transaction.to} />
       )}
       {(preview.transaction.type === 'addEscrow' || preview.transaction.type === 'reclaimEscrow') && (
-        <ResponsiveGridRow
+        <ResponsiveGridAddressRow
           label={t('transaction.preview.validator', 'Validator')}
-          value={<PrettyAddress address={preview.transaction.validator} />}
+          value={preview.transaction.validator}
         />
       )}
       <ResponsiveGridRow