feat: account list select component #3287

magiziz · 2024-11-20T18:39:49Z

Description

Added account list select component
Added font-feature-settings option to <wui-text>

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-1500

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

linear · 2024-11-20T18:39:51Z

APKT-1500 Account list select

changeset-bot · 2024-11-20T18:39:52Z

⚠️ No Changeset found

Latest commit: be9b285

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-20T18:39:53Z

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

Name	Status	Preview	Comments	Updated (UTC)
appkit-gallery-new	🛑 Canceled (Inspect)			Nov 21, 2024 8:44am
appkit-laboratory	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 8:44am
appkit-vue-solana	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 8:44am
appkit-wagmi-cdn-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 8:44am
vue-wagmi-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 21, 2024 8:44am

github-actions · 2024-11-20T18:41:30Z

Coverage Report for Coverage

Status	Category	Percentage	Covered / Total
🔵	Lines	335.7%	4838 / 23584
🔵	Statements	335.7%	4838 / 23584
🔵	Functions	368.88%	388 / 1431
🔵	Branches	475.80999999999995%	745 / 1724

File Coverage

File	Stmts	Branches	Functions	Lines
Changed Files
packages/ui-new/index.ts	0%	0%	0%	0%
packages/ui-new/src/assets/svg/mail.ts	0%	0%	0%	0%
packages/ui-new/src/components/wui-shimmer/index.ts	0%	0%	0%	0%
packages/ui-new/src/components/wui-text/styles.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-avatar/styles.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-button/index.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-list-select-account/index.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-list-select-account/styles.ts	0%	0%	0%	0%
packages/ui-new/src/composites/wui-wallet-image/index.ts	0%	0%	0%	0%
packages/ui-new/src/layout/wui-flex/index.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.27%	66.66%	15.38%	27.27%

Generated in workflow #7499 for commit 2196554 by the Vitest Coverage Report Action

magiziz · 2024-11-20T18:41:49Z

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

@@ -16,7 +16,7 @@ export class WuiShimmer extends LitElement {

  @property() public height = ''

-  @property() public borderRadius: BorderRadiusType = 'm'
+  @property() public borderRadius: BorderRadiusType = '2'


I changed this to "2" for now to not get any errors. Will come back to shimmer component and fix it.

magiziz · 2024-11-20T18:42:28Z

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

+    font-feature-settings:
+      'liga' off,
+      'clig' off;


I added this css font feature setting to KHTeka font only

magiziz · 2024-11-20T18:43:52Z

packages/ui-new/src/composites/wui-wallet-image/index.ts

+    let borderRadius: BorderRadiusType = '1'
    if (this.size === 'lg') {
-      borderRadius = 'm'
+      borderRadius = '3'
    } else if (this.size === 'md') {
-      borderRadius = 'xs'
+      borderRadius = '2'
    } else {
-      borderRadius = 'xxs'
+      borderRadius = '1'
    }


Same here just a tweaked it for now

magiziz · 2024-11-20T18:48:35Z

packages/ui-new/src/composites/wui-list-select-account/index.ts

+        <wui-avatar size="sm" address=${this.address}></wui-avatar>
+        <wui-icon class="avatarIcon" size="xs" name=${this.icon}></wui-icon>


We should create avatar + badge component instead of doing it manually. I created a ticket called APKT-1507 where we comment down all todos so we don't forget.

magiziz · 2024-11-20T18:48:56Z

packages/ui-new/src/composites/wui-list-select-account/index.ts

+          <wui-text color="secondary" variant="lg-regular-mono" lineClamp="1">
+            $${this.dollars}.${this.pennies}
+          </wui-text>


Same here would be better to have dollar balance component

enesozturk · 2024-11-20T19:25:58Z

apps/gallery-new/stories/composites/wui-list-select-account.stories.ts

+    dollars: '1740',
+    pennies: '72',


Why these two are different properties? We should instead format the number inside. We should have such utilities

Also tried removing penny value in story and there is still dot after dollars value: https://appkit-gallery-brxkv59qj-reown-com.vercel.app/?path=/docs/composites-wui-list-select-account--docs

Same when you remove dollar value, you see "$." in the component

Just added UiHelperUtil.formatCurrency function which will convert numbers into formatted dollar value 🙏

enesozturk · 2024-11-20T19:29:55Z

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

+    font-feature-settings:
+      'liga' off,
+      'clig' off;


Why do we need these?

I noticed i forgot to add these from figma heading designs. Apparently it'll provide more advanced typographic features and make fonts cleaner 👌

enesozturk · 2024-11-20T19:32:28Z

packages/ui-new/src/composites/wui-list-select-account/index.ts

+  @property() pennies = '00'
+
+  @property() address = ''


Same for the comment above, I think better practice instead of getting these values separately, getting the value and format it here with floating numbers. Also for such components it's important to make sure we're testing them with different values like very small values and very big numbers

…nt as prop to list select account

enesozturk · 2024-11-21T05:47:15Z

packages/ui-new/src/composites/wui-list-select-account/index.ts

+
+  @property() icon: IconType = 'mail'
+
+  @property({ type: Number }) dollarAmount = 0


For future features, maybe we would start showing different currencies depending on the user's choice, what about separating amount and currency and we would keep the currency USD by default for now?

Good idea. Let me do that.

enesozturk · 2024-11-21T05:48:05Z

packages/ui-new/src/composites/wui-list-select-account/index.ts

+          columnGap="2"
+        >
+          <wui-text color="secondary" variant="lg-regular-mono" lineClamp="1">
+            ${UiHelperUtil.formatCurrency(this.dollarAmount)}


enesozturk · 2024-11-21T05:48:53Z

packages/ui-new/src/utils/UiHelperUtil.ts

@@ -16,6 +16,24 @@ export const UiHelperUtil = {
    return new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric' }).format(date)
  },

+  formatCurrency(amount: number | string = 0, options: Intl.NumberFormatOptions = {}) {
+    const numericAmount = Number(amount)


Should we cast it to number? What if the number is comes float? and when there are many floating numbers, isn't this will remove them?

Okay seems like not yeah

magiziz added 4 commits November 20, 2024 12:28

feat: list select account

4d7ffcb

fix: merge conflicts

16d09fd

chore: remove <wui-list-account>

e9982a7

chore: edit typography and push ellipsis text support

826fd7d

chore: add <wui-list-select-account> to export file

e337b41

magiziz commented Nov 20, 2024

View reviewed changes

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

chore: tweak

5bdfd85

magiziz commented Nov 20, 2024

View reviewed changes

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

Merge branch 'main' into feat/list-select-account

6833498

magiziz requested a review from enesozturk November 20, 2024 18:50

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

chore: tweak mail svg

4d9c6e7

vercel bot deployed to Preview – appkit-gallery-new November 20, 2024 19:01 View deployment

vercel bot deployed to Preview – appkit-vue-solana November 20, 2024 19:01 View deployment

vercel bot deployed to Preview – vue-wagmi-example November 20, 2024 19:03 View deployment

vercel bot deployed to Preview – appkit-wagmi-cdn-example November 20, 2024 19:05 View deployment

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

enesozturk reviewed Nov 20, 2024

View reviewed changes

enesozturk approved these changes Nov 20, 2024

View reviewed changes

magiziz and others added 3 commits November 20, 2024 21:25

chore: add UiHelperUtil.formatCurrency function and expose dollarAmou…

8338c29

…nt as prop to list select account

chore: tweak comments

7df315a

Merge branch 'main' into feat/list-select-account

40260aa

vercel bot deployed to Preview – appkit-wagmi-cdn-example November 20, 2024 21:37 View deployment

vercel bot deployed to Preview – appkit-gallery-new November 20, 2024 21:39 View deployment

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

vercel bot deployed to Preview – vue-wagmi-example November 20, 2024 21:42 View deployment

vercel bot deployed to Preview – appkit-laboratory November 20, 2024 21:44 View deployment

enesozturk reviewed Nov 21, 2024

View reviewed changes

enesozturk approved these changes Nov 21, 2024

View reviewed changes

magiziz and others added 2 commits November 21, 2024 08:34

chore: add currency option

be9b285

Merge branch 'main' into feat/list-select-account

2196554

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

vercel bot deployed to Preview – appkit-laboratory November 21, 2024 08:41 View deployment

vercel bot deployed to Preview – appkit-gallery-new November 21, 2024 08:42 View deployment

vercel bot deployed to Preview – vue-wagmi-example November 21, 2024 08:43 View deployment

vercel bot deployed to Preview – appkit-wagmi-cdn-example November 21, 2024 08:44 View deployment

magiziz merged commit 4417c7b into main Nov 21, 2024
19 checks passed

magiziz deleted the feat/list-select-account branch November 21, 2024 08:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: account list select component #3287

feat: account list select component #3287

magiziz commented Nov 20, 2024

linear bot commented Nov 20, 2024

changeset-bot bot commented Nov 20, 2024 •

edited

Loading

vercel bot commented Nov 20, 2024 •

edited

Loading

github-actions bot commented Nov 20, 2024 •

edited

Loading

magiziz Nov 20, 2024

magiziz Nov 20, 2024

magiziz Nov 20, 2024 •

edited

Loading

magiziz Nov 20, 2024

magiziz Nov 20, 2024

enesozturk Nov 20, 2024

enesozturk Nov 20, 2024

enesozturk Nov 20, 2024

magiziz Nov 20, 2024

enesozturk Nov 20, 2024

magiziz Nov 20, 2024

enesozturk Nov 20, 2024

enesozturk Nov 21, 2024

magiziz Nov 21, 2024

enesozturk Nov 21, 2024

enesozturk Nov 21, 2024

enesozturk Nov 21, 2024

		<wui-avatar size="sm" address=${this.address}></wui-avatar>
		<wui-icon class="avatarIcon" size="xs" name=${this.icon}></wui-icon>


		@property() icon: IconType = 'mail'

		@property({ type: Number }) dollarAmount = 0

feat: account list select component #3287

feat: account list select component #3287

Conversation

magiziz commented Nov 20, 2024

Description

Type of change

Associated Issues

Showcase (Optional)

Checklist

linear bot commented Nov 20, 2024

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

⚠️ No Changeset found

vercel bot commented Nov 20, 2024 • edited Loading

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

Coverage Report for Coverage

Choose a reason for hiding this comment

Choose a reason for hiding this comment

magiziz Nov 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

changeset-bot bot commented Nov 20, 2024 •

edited

Loading

vercel bot commented Nov 20, 2024 •

edited

Loading

github-actions bot commented Nov 20, 2024 •

edited

Loading

magiziz Nov 20, 2024 •

edited

Loading