Merge branch 'main' into feature/fet-1761-temporary-premium-graph-has-an-empty-box-which-appears-when

Author: sugh01

e2e/specs/stateless/settings.spec.ts

@@ -125,6 +125,7 @@ test.describe('Select Primary Name', () => {
     login,
     makeName,
     makePageObject,
+    accounts,
   }) => {
     test.slow()
 
@@ -141,6 +142,7 @@ test.describe('Select Primary Name', () => {
     const settingsPage = makePageObject('SettingsPage')
     const selectPrimaryNameModal = makePageObject('SelectPrimaryNameModal')
     await settingsPage.goto()
+    await expect(settingsPage.walletAddress).toHaveText(new RegExp(accounts.getAddress('user')))
     await settingsPage.choosePrimaryNameButton.click()
     await selectPrimaryNameModal.waitForPageLoad()
     const nameWithoutSuffix = name.slice(0, -4)

playwright/pageObjects/settingsPage.ts

@@ -10,11 +10,14 @@ export class SettingsPage {
 
   readonly choosePrimaryNameButton: Locator
 
+  readonly walletAddress: Locator
+
   constructor(page: Page) {
     this.page = page
     this.changePrimaryNameButton = this.page.getByTestId('change-primary-name-button')
     this.removePrimaryNameButton = this.page.getByTestId('remove-primary-name-button')
     this.choosePrimaryNameButton = this.page.getByTestId('set-primary-name-button')
+    this.walletAddress = this.page.getByTestId('name-details-address-address')
   }
 
   async goto() {

src/components/pages/profile/settings/WalletSection.tsx

@@ -0,0 +1,45 @@
+import { useAccount, useConnections } from 'wagmi'
+
+import { Box, Button, Card, Typography, WalletSVG } from '@ensdomains/thorin'
+
+import RecordItem from '@app/components/RecordItem'
+import { hasParaConnection } from '@app/utils/utils'
+
+export const WalletSection = () => {
+  const { address, connector } = useAccount()
+
+  const connections = useConnections()
+  const isParaConnected = hasParaConnection(connections)
+
+  return (
+    <Card>
+      <Typography
+        display="flex"
+        fontVariant="headingFour"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        Wallet{' '}
+      </Typography>
+      <RecordItem type="address" itemKey="Address" value={address as string} />
+      <Box
+        display="flex"
+        flexDirection={{ base: 'column', sm: 'row' }}
+        justifyContent="space-between"
+        gap="2"
+      >
+        <RecordItem type="text" itemKey="Connector" value={connector?.name as string} />
+        {isParaConnected && (
+          <Button
+            width={{ base: 'full', sm: 'max' }}
+            size="small"
+            colorStyle="accentSecondary"
+            prefix={() => <WalletSVG height={12} width={12} />}
+          >
+            Go to wallet
+          </Button>
+        )}
+      </Box>
+    </Card>
+  )
+}

src/pages/my/settings.tsx

@@ -7,6 +7,7 @@ import { DevSection } from '@app/components/pages/profile/settings/DevSection'
 import { PrimarySection } from '@app/components/pages/profile/settings/PrimarySection'
 import { PrivacySection } from '@app/components/pages/profile/settings/PrivacySection'
 import { TransactionSection } from '@app/components/pages/profile/settings/TransactionSection/TransactionSection'
+import { WalletSection } from '@app/components/pages/profile/settings/WalletSection'
 import { useSubgraphMeta } from '@app/hooks/ensjs/subgraph/useSubgraphMeta'
 import { useProtectedRoute } from '@app/hooks/useProtectedRoute'
 import { Content } from '@app/layouts/Content'
@@ -43,6 +44,7 @@ export default function Page() {
         trailing: (
           <OtherWrapper>
             <PrimarySection />
+            <WalletSection />
             <TransactionSection />
             <PrivacySection />
             {IS_DEV_ENVIRONMENT && <DevSection />}