merged back master

.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
   plugins: ['prettier'],
   overrides: [
     {
-      files: ['*.ts', '*.tsx', '*.js'],
+      files: ['*.ts', '*.tsx', '*.js', 'json'],
       parser: '@typescript-eslint/parser',
     },
   ],

.github/workflows/node.js.yml

@@ -20,17 +20,17 @@ jobs:
 
     steps:
     - uses: actions/checkout@v3
-    
+
     - name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'npm'
-    
+
     - run: npm ci
     - run: npm run build --if-present
     # - run: npm test
-    
+
     # - name: Test Report
     #   uses: dorny/test-reporter@v1
     #   if: success() || failure()    # run this step even if previous step failed

README.md

@@ -113,7 +113,7 @@ or
 You can run test with Jest Preview with the following command. You can see the result at <http://locahost:3336> for test using React Testing Library along with Jest Preview.
 
 ```sh
-npm test:preview
+npm run test:preview
 ```
 
 or

app/components/Effect.tsx

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/remix'
 import type { ServerApi } from 'stellar-sdk'
 
 import { FormattedMessage } from 'react-intl'
@@ -122,7 +123,13 @@ const Data = ({ op, type }: any) => {
         <span title={op.name}>{truncate(op.name)}</span>
       </div>
 
-      {type !== 'data_removed' && (
+      {/* logging and workaround for issue seen on testnet where the value was undefined and it crashed */}
+      {op.value === undefined &&
+        Sentry.captureMessage(
+          `op.value undefined for op ${JSON.stringify(op)}`,
+        )}
+
+      {type !== 'data_removed' && op.value && (
         <div>
           <FormattedMessage id="value" />
           {': '}

app/components/operations/__tests__/ManageData.test.tsx

@@ -0,0 +1,54 @@
+import { render, screen } from '@testing-library/react'
+import enTranslation from '../../../lib/languages/en.json'
+import zhHansTranslation from '../../../lib/languages/zh-Hans.json'
+
+import { IntlProvider } from 'react-intl'
+
+import ManageData from '../ManageData'
+
+describe('ManageData', () => {
+  it('decodes ordinary string values', () => {
+    render(
+      <IntlProvider locale="en" messages={enTranslation}>
+        <ManageData name="lang" value="aW5kb25lc2lhbg==" />
+      </IntlProvider>,
+    )
+
+    expect(
+      screen.getByText((content) => {
+        return content.includes('indonesian')
+      }),
+    ).toBeInTheDocument()
+  })
+
+  it('decodes utf8 string values', () => {
+    render(
+      <IntlProvider locale="zh-CN" messages={zhHansTranslation}>
+        <ManageData name="utf8value" value="6ams6ams6JmO6JmO" />
+      </IntlProvider>,
+    )
+
+    expect(
+      screen.getByText((content) => {
+        return content.includes('马马虎虎')
+      }),
+    ).toBeInTheDocument()
+  })
+
+  it('truncates a long key and long value', () => {
+    const aLongPrefix = 'some_really_long_12345678901234567890123456789'
+    const aLongName = `name_${aLongPrefix}`
+    const aLongValue = Buffer.from(`value_${aLongPrefix}`).toString('base64')
+    render(
+      <IntlProvider locale="en" messages={enTranslation}>
+        <ManageData name={aLongName} value={aLongValue} />
+      </IntlProvider>,
+    )
+
+    expect(
+      screen.getByText((content) => {
+        return content.includes('value_some_really_long_1234...')
+      }),
+    ).toBeInTheDocument()
+  })
+})

app/components/shared/__tests__/AccountLink.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@testing-library/react'
+import { BrowserRouter } from 'react-router-dom'
+
+import type { KnownAccountProps } from '../../../data/known_accounts'
+import knownAccounts from '../../../data/known_accounts'
+import AccountLink, { BaseAccountLink } from '../AccountLink'
+
+interface TKnownAccountProps extends KnownAccountProps {
+  displayName: string
+}
+
+const ACC_KNOWN = Object.keys(knownAccounts).find(
+  (key) => (knownAccounts[key] as TKnownAccountProps).displayName === 'NaoBTC',
+) as string
+const ACC_UNKNOWN = 'GCGG3CIRBG2TTBR4HYZJ7JLDRFKZIYOAHFXRWLU62CA2QN52P2SUQNPJ'
+const LABEL = 'Anchor'
+
+describe('AccountLink', () => {
+  it('renders with label', () => {
+    render(
+      <BrowserRouter>
+        <AccountLink label={LABEL} account={ACC_UNKNOWN} />
+      </BrowserRouter>,
+    )
+
+    expect(screen.getByText(LABEL)).toBeInTheDocument()
+  })
+
+  it('renders short account for label when no label property', () => {
+    render(
+      <BrowserRouter>
+        <AccountLink account={ACC_UNKNOWN} />
+      </BrowserRouter>,
+    )
+
+    expect(screen.getByText(ACC_UNKNOWN.slice(0, 4))).toBeInTheDocument()
+  })
+
+  it('renders anchor name in italics if account a known anchor', () => {
+    render(
+      <BrowserRouter>
+        <BaseAccountLink label={''} address={ACC_KNOWN} hideKnown={false} />
+      </BrowserRouter>,
+    )
+
+    expect(screen.getByText('NaoBTC')).toBeInTheDocument()
+  })
+})
+
+describe('MuxedAccount', () => {
+  it.todo('muxed account renders muxed and base')
+})