feat: connect modal #3347

magiziz · 2024-11-27T18:15:09Z

Description

New AppKit connect modal

Type of change

Chore (non-breaking change that addresses non-functional tasks, maintenance, or code quality improvements)
Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)

Associated Issues

For Linear issues: Closes APKT-1532

Showcase (Optional)

Checklist

Code in this PR is covered by automated tests (Unit tests, E2E tests)
My changes generate no new warnings
I have reviewed my own code
I have filled out all required sections
I have tested my changes on the preview link
Approver of this PR confirms that the changes are tested on the preview link

changeset-bot · 2024-11-27T18:15:13Z

⚠️ No Changeset found

Latest commit: a482cbb

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2024-11-27T18:15:13Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
appkit-gallery-new	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 28, 2024 10:03am
appkit-laboratory	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 28, 2024 10:03am
appkit-laboratory-new	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 28, 2024 10:03am
appkit-vue-solana	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 28, 2024 10:03am
appkit-wagmi-cdn-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 28, 2024 10:03am
vue-wagmi-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 28, 2024 10:03am

github-actions · 2024-11-27T18:17:59Z

Coverage Report for Coverage

Status	Category	Percentage	Covered / Total
🔵	Lines	401.54999999999995%	5347 / 24263
🔵	Statements	401.54999999999995%	5347 / 24263
🔵	Functions	413.27000000000004%	408 / 1481
🔵	Branches	560.5900000000001%	812 / 1808

File Coverage

File	Stmts	Branches	Functions	Lines
Changed Files
packages/ui-new/index.ts	0%	0%	0%	0%
packages/ui-new/src/assets/svg/apple.ts	0%	0%	0%	0%
packages/ui-new/src/assets/svg/caret-right.ts	0%	0%	0%	0%
packages/ui-new/src/assets/svg/chevron-right.ts	0%	0%	0%	0%
packages/ui-new/src/assets/svg/close.ts	0%	0%	0%	0%
packages/ui-new/src/assets/svg/envelope-simple.ts	0%	0%	0%	0%
packages/ui-new/src/assets/svg/more.ts	0%	0%	0%	0%
packages/ui-new/src/assets/svg/qr-code.ts	0%	0%	0%	0%
packages/ui-new/src/assets/svg/question.ts	0%	0%	0%	0%
packages/ui-new/src/assets/svg/search.ts	0%	0%	0%	0%
packages/ui-new/src/assets/svg/wallet.ts	0%	0%	0%	0%
packages/ui-new/src/assets/svg/x.ts	0%	0%	0%	0%
packages/ui-new/src/components/wui-card/styles.ts	0%	0%	0%	0%
packages/ui-new/src/components/wui-icon/index.ts	0%	0%	0%	0%
packages/ui-new/src/components/wui-icon/styles.ts	0%	0%	0%	0%
packages/ui-new/src/components/wui-image/styles.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-email-input/index.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-icon-box/index.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-icon-box/styles.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-input-text/styles.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-link/index.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-link/styles.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-list-select-wallet/index.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-list-select-wallet/styles.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-logo/index.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-powered-by/index.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-powered-by/logo.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-powered-by/styles.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-social-button/index.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-social-button/styles.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-tag/styles.ts	0%	0%	0%	0%
packages/ui-new/src/utils/JSXTypeUtil.ts	100%	100%	100%	100%
packages/ui-new/src/utils/TypeUtil.ts	0%	100%	100%	0%
packages/ui-new/src/utils/UiHelperUtil.ts	27.81%	66.66%	15.38%	27.81%

Generated in workflow #7680 for commit a482cbb by the Vitest Coverage Report Action

magiziz · 2024-11-27T18:18:08Z

packages/scaffold-ui-new/src/modal/w3m-modal/styles.ts

@@ -13,7 +13,7 @@ export default css`
    bottom: 0;
    pointer-events: none;
    opacity: 0;
-    background-color: var(--wui-cover);
+    background-color: rgba(0, 0, 0, 0.8);


We don't have a variable for overlay color. Will leave it like this for now.

magiziz · 2024-11-27T18:23:59Z

packages/scaffold-ui-new/src/partials/w3m-header/index.ts


  return {
-    Connect: `Connect ${isEmail ? 'Email' : ''} Wallet`,


Since some of the views doesn't have a header, we can ignore those and build custom header on the view component level.

magiziz · 2024-11-27T18:24:08Z

packages/scaffold-ui-new/src/partials/w3m-header/index.ts

-    Convert: 'Convert',
-    ConvertSelectToken: 'Select token',
-    ConvertPreview: 'Preview convert',


These didn't exist so removed them as well

magiziz · 2024-11-27T18:25:45Z

packages/scaffold-ui-new/src/views/w3m-connect-view/index.ts

-  public override firstUpdated() {
-    const connectEl = this.shadowRoot?.querySelector('.connect')
-    // Use requestAnimationFrame to access scroll properties before the next repaint
-    requestAnimationFrame(this.handleConnectListScroll.bind(this))
-    connectEl?.addEventListener('scroll', this.handleConnectListScroll.bind(this))


I removed the gradient scroll effect for now. I'll create a separate component for that 🙏

magiziz · 2024-11-27T18:27:41Z

packages/ui-new/src/components/wui-icon/index.ts

+// -- Constants ------------------------------------------ //
+export const ICON_COLOR = {
+  default: vars.tokens.theme.iconDefault,
+  accentPrimary: vars.tokens.core.iconAccentPrimary,
+  inverse: vars.tokens.theme.iconInverse
+}
+


Introduced icon color options for <wui-icon> component

magiziz · 2024-11-27T18:28:21Z

packages/ui-new/src/components/wui-image/styles.ts

-    object-fit: cover;
-    object-position: center center;


I removed these since they caused wallet images to be cropped

linear · 2024-11-27T18:38:45Z

APKT-1532 Login

magiziz added 4 commits November 27, 2024 17:58

feat: connect modal

e6575e2

fix: warnings

05def61

chore: remove <wui-list-social>

21ecd28

fix: storybook error

f08463b

vercel bot deployed to Preview – vue-wagmi-example November 27, 2024 18:16 View deployment

magiziz commented Nov 27, 2024

View reviewed changes

vercel bot deployed to Preview – appkit-laboratory November 27, 2024 18:19 View deployment

chore: remove showSubmitButton property from w3m-email-login-widget

06bdd98

vercel bot deployed to Preview – appkit-vue-solana November 27, 2024 18:21 View deployment

vercel bot deployed to Preview – appkit-laboratory-new November 27, 2024 18:22 View deployment

vercel bot had a problem deploying to Preview – appkit-gallery-new November 27, 2024 18:23 Failure

magiziz commented Nov 27, 2024

View reviewed changes

vercel bot deployed to Preview – appkit-wagmi-cdn-example November 27, 2024 18:24 View deployment

magiziz commented Nov 27, 2024

View reviewed changes

magiziz and others added 4 commits November 27, 2024 18:30

chore: replace logoOptions with socialsIconOptions

71a949e

chore: refactor <wui-powered-by> component

2d6b299

chore: rename type to IconBoxSpacingType

e1d21c3

Merge branch 'main' into feat/connect-modal

a485034

vercel bot deployed to Preview – appkit-wagmi-cdn-example November 27, 2024 18:42 View deployment

vercel bot deployed to Preview – appkit-vue-solana November 27, 2024 18:44 View deployment

vercel bot deployed to Preview – appkit-gallery-new November 27, 2024 18:46 View deployment

vercel bot deployed to Preview – appkit-laboratory November 27, 2024 18:48 View deployment

vercel bot deployed to Preview – vue-wagmi-example November 27, 2024 18:48 View deployment

vercel bot deployed to Preview – appkit-laboratory-new November 27, 2024 18:53 View deployment

magiziz requested a review from enesozturk November 27, 2024 18:56

chore: scrollable header

150e769

vercel bot deployed to Preview – appkit-gallery-new November 28, 2024 09:38 View deployment

vercel bot deployed to Preview – vue-wagmi-example November 28, 2024 09:39 View deployment

vercel bot deployed to Preview – appkit-laboratory November 28, 2024 09:43 View deployment

vercel bot deployed to Preview – appkit-laboratory-new November 28, 2024 09:44 View deployment

vercel bot deployed to Preview – appkit-vue-solana November 28, 2024 09:46 View deployment

vercel bot deployed to Preview – appkit-wagmi-cdn-example November 28, 2024 09:46 View deployment

chore: tweak on mobile

a482cbb

vercel bot deployed to Preview – appkit-wagmi-cdn-example November 28, 2024 09:56 View deployment

vercel bot deployed to Preview – vue-wagmi-example November 28, 2024 09:56 View deployment

vercel bot deployed to Preview – appkit-gallery-new November 28, 2024 09:57 View deployment

vercel bot deployed to Preview – appkit-laboratory November 28, 2024 10:00 View deployment

vercel bot deployed to Preview – appkit-laboratory-new November 28, 2024 10:02 View deployment

vercel bot deployed to Preview – appkit-vue-solana November 28, 2024 10:03 View deployment

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: connect modal #3347

feat: connect modal #3347

magiziz commented Nov 27, 2024 •

edited

Loading

changeset-bot bot commented Nov 27, 2024 •

edited

Loading

vercel bot commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading

magiziz Nov 27, 2024

magiziz Nov 27, 2024

magiziz Nov 27, 2024

magiziz Nov 27, 2024

magiziz Nov 27, 2024

magiziz Nov 27, 2024

linear bot commented Nov 27, 2024


		return {
		Connect: `Connect ${isEmail ? 'Email' : ''} Wallet`,

feat: connect modal #3347

Are you sure you want to change the base?

feat: connect modal #3347

Conversation

magiziz commented Nov 27, 2024 • edited Loading

Description

Type of change

Associated Issues

Showcase (Optional)

Checklist

changeset-bot bot commented Nov 27, 2024 • edited Loading

⚠️ No Changeset found

vercel bot commented Nov 27, 2024 • edited Loading

github-actions bot commented Nov 27, 2024 • edited Loading

Coverage Report for Coverage

magiziz Nov 27, 2024

Choose a reason for hiding this comment

magiziz Nov 27, 2024

Choose a reason for hiding this comment

magiziz Nov 27, 2024

Choose a reason for hiding this comment

magiziz Nov 27, 2024

Choose a reason for hiding this comment

magiziz Nov 27, 2024

Choose a reason for hiding this comment

magiziz Nov 27, 2024

Choose a reason for hiding this comment

linear bot commented Nov 27, 2024

magiziz commented Nov 27, 2024 •

edited

Loading

changeset-bot bot commented Nov 27, 2024 •

edited

Loading

vercel bot commented Nov 27, 2024 •

edited

Loading

github-actions bot commented Nov 27, 2024 •

edited

Loading