[Tenscan] address and tx placeholder page for MetaMask redirect link #1705

Jennievon · 2023-12-15T14:15:01Z

Why this change is needed

Please provide a description and a link to the underlying ticket

https://github.com/ten-protocol/ten-internal/issues/2614

What changes were made as part of this PR

Please provide a high level list of the changes made

Add a placeholder page for address

PR checks pre-merging

Please indicate below by ticking the checkbox that you have read and performed the required
PR checks

PR checks reviewed and performed

coderabbitai · 2023-12-15T14:15:08Z

Walkthrough

The updates to the ObscuroScan V3 frontend involve enhancing the user interface and accessibility. The AddressDetails page now features a placeholder layout with a coming soon message and a home button. The footer layout has been improved for better spacing and includes accessibility labels for social links. Additionally, the EmptyState component has been upgraded to support images, offering a new way to present visual information alongside text and actions.

Changes

File Path	Change Summary
.../frontend/pages/address/[address].tsx	Added imports and modified to include a placeholder UI.
.../frontend/src/components/layouts/footer.tsx	Updated imports, improved layout, added `aria-label`, and embedded version in an `h3` tag.
.../frontend/src/components/modules/common/empty-state.tsx	Enhanced component to accept an `image` prop and render an image element if provided.

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on X ?

Tips

Chat with CodeRabbit Bot (`@coderabbitai`)

You can reply to a review comment made by CodeRabbit.
You can tag CodeRabbit on specific lines of code or files in the PR by tagging @coderabbitai in a comment.
You can tag @coderabbitai in a PR comment and ask one-off questions about the PR and the codebase. Use quoted replies to pass the context for follow-up questions.

CodeRabbit Commands (invoked as PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger a review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
The JSON schema for the configuration file is available here.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/coderabbit-overrides.v2.json

coderabbitai

Review Status

Actionable comments generated: 3

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between b528fcb and 6de440a.

Files ignored due to filter (1)

tools/obscuroscan_v3/frontend/public/assets/images/clock.png

Files selected for processing (3)

tools/obscuroscan_v3/frontend/pages/address/[address].tsx (1 hunks)
tools/obscuroscan_v3/frontend/src/components/layouts/footer.tsx (2 hunks)
tools/obscuroscan_v3/frontend/src/components/modules/common/empty-state.tsx (1 hunks)

Additional comments: 7

tools/obscuroscan_v3/frontend/pages/address/[address].tsx (1)

1-23: The implementation of the AddressDetails component with the EmptyState component to display a placeholder page looks good and follows best practices for React functional components.

tools/obscuroscan_v3/frontend/src/components/layouts/footer.tsx (5)

2-2: The change from an alias to a relative path for importing socialLinks and version is noted and should not affect functionality, assuming the relative path is correct and the files exist at the specified location.

11-40: The updates to the DOM structure, including the use of justify-between and flex-wrap classes, and the addition of a new div for version information, are appropriate for improving the layout and accessibility of the footer.

16-16: The addition of aria-label attributes to anchor elements is a good practice for accessibility, enhancing the experience for users who rely on screen readers.

Also applies to: 23-23, 30-30

36-39: The version information is now displayed within an h3 element, which is a change from the previous implementation. Ensure this aligns with the design and semantic requirements of the page.

1-43: > Note: This review was outside the patches, so it was mapped to the patch with the greatest overlap. Original lines [11-56]

Ensure that the removal of the previous div for version information, as mentioned in the AI-generated summary, does not affect other parts of the application that may rely on the old structure.

tools/obscuroscan_v3/frontend/src/components/modules/common/empty-state.tsx (1)

4-29: The addition of the image prop to the EmptyState component is implemented correctly. It is optional and does not affect existing usages of the component. The image is conditionally rendered only if the image prop is provided, which aligns with the PR's objective to enhance the EmptyState component with the ability to display an image.

tools/obscuroscan_v3/frontend/src/components/modules/common/empty-state.tsx

tools/obscuroscan_v3/frontend/pages/address/[address].tsx

coderabbitai

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 6de440a and c809bbb.

Files selected for processing (1)

tools/obscuroscan_v3/frontend/pages/address/[address].tsx (1 hunks)

Additional comments: 3

tools/obscuroscan_v3/frontend/pages/address/[address].tsx (3)

7-22: The implementation of the AddressDetails component looks correct and aligns with the PR objectives to introduce a placeholder page for address details. The usage of the EmptyState component with the new image prop is consistent with the enhancements mentioned in the summary.

16-16: The navigation button within the EmptyState action is correctly implemented using the useRouter hook for client-side navigation to the home page.

1-5: The use of path aliases in import statements is a good practice for improving readability and maintainability of the codebase.

component

coderabbitai

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between c809bbb and 648913a.

Files selected for processing (2)

tools/obscuroscan_v3/frontend/pages/address/[address].tsx (1 hunks)
tools/obscuroscan_v3/frontend/src/components/modules/common/empty-state.tsx (1 hunks)

Files skipped from review as they are similar to previous changes (2)

tools/obscuroscan_v3/frontend/pages/address/[address].tsx
tools/obscuroscan_v3/frontend/src/components/modules/common/empty-state.tsx

coderabbitai

Review Status

Actionable comments generated: 1

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 648913a and 732bf2c.

Files selected for processing (1)

tools/obscuroscan_v3/frontend/pages/tx/[hash].tsx (1 hunks)

tools/obscuroscan_v3/frontend/pages/tx/[hash].tsx

coderabbitai

Review Status

Actionable comments generated: 0

Configuration used: CodeRabbit UI

Commits

Files that changed from the base of the PR and between 732bf2c and e1d5ec0.

Files selected for processing (1)

tools/walletextension/frontend/src/lib/constants.ts (1 hunks)

Additional comments: 2

tools/walletextension/frontend/src/lib/constants.ts (2)

1-2: The update to tenGatewayAddress to use an environment variable or default to a local address is a good practice for configuration management. Ensure that the environment variable NEXT_PUBLIC_API_GATEWAY_URL is properly set in all deployment environments.

4-4: Verify that the domain change from "https://testnet.tenscan.com" to "https://testnet.tenscan.io" is intentional and that the new domain is fully operational to avoid broken links.

otherview · 2023-12-19T10:59:56Z

tools/walletextension/frontend/src/lib/constants.ts

+export const tenGatewayAddress =
+  process.env.NEXT_PUBLIC_API_GATEWAY_URL || "http://127.0.0.1:3000";


👀 lol we should probably fix this upstream, looks like a weird hack

lol yeah, Ziga mentioned when building the static files, it doesn't pick up the env variables. would need to investigate that.

otherview

lgtm

feat: address placeholder page

6de440a

Jennievon requested review from tudor-malene and zkokelj December 15, 2023 14:15

Jennievon self-assigned this Dec 15, 2023

coderabbitai bot reviewed Dec 15, 2023

View reviewed changes

add home url

c809bbb

coderabbitai bot reviewed Dec 18, 2023

View reviewed changes

Update image source and alt text in EmptyState

648913a

component

coderabbitai bot reviewed Dec 18, 2023

View reviewed changes

Jennievon changed the title ~~[Tenscan] address placeholder page~~ [Tenscan] address placeholder page for MetaMask redirect link Dec 18, 2023

Jennievon added 2 commits December 19, 2023 14:40

add tx details page

732bf2c

update tenscan link

e1d5ec0

coderabbitai bot reviewed Dec 19, 2023

View reviewed changes

tools/obscuroscan_v3/frontend/pages/tx/[hash].tsx Show resolved Hide resolved

coderabbitai bot reviewed Dec 19, 2023

View reviewed changes

Jennievon requested a review from otherview December 19, 2023 10:56

Jennievon changed the title ~~[Tenscan] address placeholder page for MetaMask redirect link~~ [Tenscan] address and tx placeholder page for MetaMask redirect link Dec 19, 2023

otherview reviewed Dec 19, 2023

View reviewed changes

otherview approved these changes Dec 19, 2023

View reviewed changes

Jennievon merged commit 875e3e3 into main Dec 19, 2023
1 of 2 checks passed

Jennievon deleted the jennifer/2614-tenscan-set-placeholder-for-address-details branch December 19, 2023 11:36

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Tenscan] address and tx placeholder page for MetaMask redirect link #1705

[Tenscan] address and tx placeholder page for MetaMask redirect link #1705

Jennievon commented Dec 15, 2023

coderabbitai bot commented Dec 15, 2023 •

edited

Loading

Chat with CodeRabbit Bot (`@coderabbitai`)

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (`.coderabbit.yaml`)

coderabbitai bot left a comment

coderabbitai bot left a comment

coderabbitai bot left a comment

coderabbitai bot left a comment

coderabbitai bot left a comment

otherview Dec 19, 2023

Jennievon Dec 19, 2023

otherview left a comment

		export const tenGatewayAddress =
		process.env.NEXT_PUBLIC_API_GATEWAY_URL \|\| "http://127.0.0.1:3000";

[Tenscan] address and tx placeholder page for MetaMask redirect link #1705

[Tenscan] address and tx placeholder page for MetaMask redirect link #1705

Conversation

Jennievon commented Dec 15, 2023

Why this change is needed

What changes were made as part of this PR

PR checks pre-merging

coderabbitai bot commented Dec 15, 2023 • edited Loading

Walkthrough

Changes

Chat with CodeRabbit Bot (@coderabbitai)

CodeRabbit Commands (invoked as PR comments)

CodeRabbit Configration File (.coderabbit.yaml)

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

coderabbitai bot left a comment

Choose a reason for hiding this comment

otherview Dec 19, 2023

Choose a reason for hiding this comment

Jennievon Dec 19, 2023

Choose a reason for hiding this comment

otherview left a comment

Choose a reason for hiding this comment

coderabbitai bot commented Dec 15, 2023 •

edited

Loading

Chat with CodeRabbit Bot (`@coderabbitai`)

CodeRabbit Configration File (`.coderabbit.yaml`)