Problem

UI rendering performance is very poor and there are a lot of dropped frames when scrolling the page.

Root Cause

This is happening because filter: blur CSS is used to create the Aurora effect.

filter: blur filter is extremely taxing on CPU/GPU and should be avoided for creating Aurora effect ( because that requires applying the blur on a large element with a large blur radius )

If we remove the filter:blur CSS - rendering issues get resolved

See the attached video:

https://user-images.githubusercontent.com/22043396/205436880-744b5634-27d2-4b63-8ee1-d5e125648720.mp4

Solution

Instead of creating the blur at runtime with CSS - just use an image

See https://cosmos.network/ for example

Tested on

Hardware: Macbook Pro 16" (2021) (M1 Pro) Browser: Chrome 107

What?

• Break down pages/index.tsx into subcomponents by creating a separate component for each section
• No Additional code change is done

Why?

• pages/index.tsx is a huge file (850+ LOC) and is very hard to maintain
• Breaking it down to subcomponents makes it easy to maintain
• it will also allow us to load some of the sections lazily using dynamic() to reduce initial JS bundle size and improve main thread blocking during page load

Do I have to configure all the variables in .env? I want to deploy the contract on GOERLI. when I click Deploy new contract,an error has occurred.

• Landing copy changes
• New pre-built-contracts section
• Padding fixes
• Responsive fixes
• Reshuffle "build anything"
• Add some extra text
• Explore documentation now always links to "/" of portal

Will change links of pre-built-contracts section once we push the new portal page

Code refactor

• Move the Footer code from components/product-pages/homepage/footer to components/footer folder
• Use list rendering (.map) instead of Repeated Components
• Organize Footer sections into components
• Break down footer code into multiple files inside the components/footer

UI Adjustments

• Clear Separation of Footer Link sections
• Logo and Social Icon aligned to center in mobile view

Before ( Desktop )

After ( Desktop )

Before ( Mobile )

After ( Mobile )

• FTUX ( welcome screen ) changed from Modal to inline component
• Massive Refactor of welcome-screen.tsx, now FTUX
• cleaner, more maintainable and understandable, removed duplication, can easily add new slides in future

Goals

• Move generic components that are used in multiple pages out of page-specific folders
• Improve the generic component names - so that it reflects what it does instead of where/how it is being used to encourage reuse and reduce confusion
• Remove duplicate component names to improve auto-import in the code editor and reduce confusion

<HomepageTopNav/>

• Rename To: <MainNavigation/>
• Current Path: components/product-pages/common/Topnav
• Proposed Path: components/navigation/MainNavigation

Also, move the contents of folder components/product-pages/common/nav to components/navigation

The name HomepageTopNav gives the impression that it is only meant for the home page and is positioned at the top, but it is used on a lot of pages and it appears at the bottom on mobile.

<HomepageSection/>

• Rename To: <DecoratedSection/>
• Current Path: components/product-pages/homepage/HomepageSection
• Proposed Path: components/sections/DecoratedSection

The name HomepageSection is misleading - it is used on a lot of pages other than the home page. DecoratedSection gives a better idea of what it does - It creates a section and adds decorations like aurora effects and SVG patterns around its children.

<NewsletterSection/>

• Current Path: components/homepage/sections/NewsletterSection
• Proposed Path: components/sections/NewsletterSection

<SDKSection/>

• Rename To: <SDKShowcaseSection/>
• Current Path: components/homepage/sections/SDKSection
• Proposed Path: components/sections/sdk-showcase/SDKShowcaseSection

This also involves moving <CodeSelector/> from components/product-pages/homepage/CodeSelector to components/sections/sdk-showcase/CodeSelector

tw-compnents

Heading, Badge, Button, Checkbox, Drawer, FormLabel, FormHelperText, FormErrorMessage, Link, MenuGroup, MenuItem, Text

Rename them to

TW_Heading, TW_Badge, TW_Button, TW_Checkbox, TW_Drawer, TW_FormLabel, TW_FormHelperText, TW_FormErrorMessage, TW_Link, TW_MenuGroup, TW_MenuItem, TW_Text

Why?

These components have the same name as ChakraUI components and because of this - the code editor’s auto-import feature ends up importing the wrong components. (VSCode auto imports from ChakraUI)

It also creates confusion about what exact component is being used and requires looking at the import path.

To avoid issues like this, There should not be two components with the same name. Adding a Namespace prefix in the component name fixes the issue while maintaining its previous meaning

Also, Delete the tw-components/index.ts and import tw-components from the file component is defined in. This provides a better DX as Jumping to Component Definition (command-clicking on the component name in VSCode) will jump to the actual file where the component is defined instead of jumping to tw-components/index.ts. This will also reduce the likelihood of tree-shaking issues in the future as we saw with AddressCopyButton

There are a lot more components like this that also requires refactoring and restructuring which we can cover in the next rounds.

Fix List

• Parallelize asyncronous file text reading in utils/batch.ts -> getAcceptedFiles
• Removed mutable variables
• Improved higher order functions
• missing (=) in .env.example