feat: add transactions types

[developerfred]

ref #270

new transaction type page

how to test

• check if the page is rendering accordingly

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
evm-codes	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 30, 2024 2:09pm

[dorlevi]

@developerfred : it seems like the build is failing on this branch, are you addressing it?

[charisra]

Few comments, also please check the failed build.

[2xic]

@developerfred do you need any help addressing the feedback / getting the build to complete ?

[developerfred]

@developerfred do you need any help addressing the feedback / getting the build to complete ?

If you could help that would be great too, I can't see the Vercel logs I'm doing typecheck locally

[vercel]

@developerfred is attempting to deploy a commit to the smlXL Team on Vercel.

A member of the Team first needs to authorize it.

[2xic]

@developerfred do you need any help addressing the feedback / getting the build to complete ?

If you could help that would be great too, I can't see the Vercel logs I'm doing typecheck locally

Sure, attached the command for running the typechecker and how to fix them 😄

Let us know if you still have any issues 🙌

Finding the build error

If you run yarn run typecheck you should see the following two build errors (if you don't make sure you ran yarn install first)

brage@brages-MBP developerfred-evm.codes % yarn run typecheck

> evm.codes@0.1.0 typecheck
> tsc --pretty

components/KBar/Results.tsx:8:11 - error TS2339: Property 'results' does not exist on type 'ActionGroup[]'.

8   const { results } = useMatches()
            ~~~~~~~

pages/_app.tsx:38:27 - error TS2322: Type '({ id: string; name: string; shortcut: string[]; keywords: string; section: string; subtitle: string; icon: Element; children: { id: string; name: string; shortcut: string[]; keywords: string; section: string; perform: () => void; subtitle: string; icon: Element; }[]; perform?: undefined; } | { ...; } | { ...; })[]' is not assignable to type 'Action[]'.
  Type '{ id: string; name: string; shortcut: string[]; keywords: string; section: string; subtitle: string; icon: Element; children: { id: string; name: string; shortcut: string[]; keywords: string; section: string; perform: () => void; subtitle: string; icon: Element; }[]; perform?: undefined; } | { ...; } | { ...; }' is not assignable to type 'Action'.
    Type '{ id: string; name: string; shortcut: string[]; keywords: string; section: string; subtitle: string; icon: JSX.Element; children: { id: string; name: string; shortcut: string[]; keywords: string; section: string; perform: () => void; subtitle: string; icon: JSX.Element; }[]; perform?: undefined; }' is not assignable to type 'Action'.
      Types of property 'children' are incompatible.
        Type '{ id: string; name: string; shortcut: string[]; keywords: string; section: string; perform: () => void; subtitle: string; icon: Element; }[]' is not assignable to type 'string[]'.
          Type '{ id: string; name: string; shortcut: string[]; keywords: string; section: string; perform: () => void; subtitle: string; icon: JSX.Element; }' is not assignable to type 'string'.

38             <KBarProvider actions={actions}>
                             ~~~~~~~

  node_modules/kbar/lib/types.d.ts:27:5
    27     actions: Action[];
           ~~~~~~~
    The expected type comes from property 'actions' which is declared here on type 'IntrinsicAttributes & KBarProviderProps & { children?: ReactNode; }'


Found 2 errors in 2 files.

Errors  Files
     1  components/KBar/Results.tsx:8
     1  pages/_app.tsx:38

Fixing components/KBar/Results.tsx:8

So first step would be to fix the error in Results.tsx .

Since useMatches() returns an array we want to switch from

evm.codes/components/KBar/Results.tsx

Line 8 in eb75abc

const { results } = useMatches()

to

const results = useMatches() 

Fixing pages/_app.tsx:38

Then fix the issue in pages/_app.tsx where you added a new entry for the theme

(only showing the relevant code entry, but click the link for full context)

evm.codes/lib/useActions.tsx

Lines 13 to 53 in eb75abc

	{
	id: 'theme',
	name: 'Theme',
	shortcut: ['t'],
	keywords: 'change theme',
	section: 'Settings',
	subtitle: 'Change application theme',
	icon: <Icon name="palette-line" />,
	children: [
	{
	id: 'theme-light',
	name: 'Light Mode',
	shortcut: ['l'],
	keywords: 'light theme',
	section: 'Settings',
	perform: () => setTheme('light'),
	subtitle: 'Switch to Light Mode',
	icon: <Icon name="sun-line" />,
	},
	{
	id: 'theme-dark',
	name: 'Dark Mode',
	shortcut: ['d'],
	keywords: 'dark theme',
	section: 'Settings',
	perform: () => setTheme('dark'),
	subtitle: 'Switch to Dark Mode',
	icon: <Icon name="moon-line" />,
	},
	{
	id: 'theme-system',
	name: 'System Default',
	shortcut: ['s'],
	keywords: 'system theme',
	section: 'Settings',
	perform: () => setTheme('system'),
	subtitle: 'Use system theme settings',
	icon: <Icon name="settings-2-line" />,
	},
	],
	},

The Action type wants just the action id in the children field so you should be able to switch this to

    {
      id: 'theme',
      name: 'Theme',
      shortcut: ['t'],
      keywords: 'change theme',
      section: 'Settings',
      subtitle: 'Change application theme',
      icon: <Icon name="palette-line" />,
      children: [
        'theme-light',
        'theme-dark',
        'theme-system'
      ],
    },
    {
      id: 'theme-light',
      name: 'Light Mode',
      shortcut: ['l'],
      keywords: 'light theme',
      section: 'Settings',
      perform: () => setTheme('light'),
      subtitle: 'Switch to Light Mode',
      icon: <Icon name="sun-line" />,
    },
    {
      id: 'theme-dark',
      name: 'Dark Mode',
      shortcut: ['d'],
      keywords: 'dark theme',
      section: 'Settings',
      perform: () => setTheme('dark'),
      subtitle: 'Switch to Dark Mode',
      icon: <Icon name="moon-line" />,
    },
    {
      id: 'theme-system',
      name: 'System Default',
      shortcut: ['s'],
      keywords: 'system theme',
      section: 'Settings',
      perform: () => setTheme('system'),
      subtitle: 'Use system theme settings',
      icon: <Icon name="settings-2-line" />,
    },

[2xic]

@developerfred do you need any more help here - I'm happy to help so we can get this in a reviewable state 😄

[charisra]

@developerfred all you need to for the to fix the build error is replace this:

children: [
  'theme-light',
  'theme-dark',
  'theme-system'
],

with this:
children: ['theme-light', 'theme-dark', 'theme-system']

in: ./lib/useActions.tsx

Want to give this a try and see if it builds? I can help more if you face more problems. Would really help if you got your local ESLint properly setup, if you haven’t already.

[developerfred]

Thanks @2xic @dorlevi and @charisra build working now

version working https://evm-codes-fmjmeuoa2-developerfred.vercel.app/transactions

[charisra]

Thanks @2xic @dorlevi and @charisra build working now

version working evm-codes-fmjmeuoa2-developerfred.vercel.app/transactions

It's lot letting me preview so can't tell if it's ok @developerfred . I still see errors building in the latest builds. Can you do a check that your latest commits build successfully?

Also, if you're using VSCode, please ensure you have Prettier installed and enabled. It should auto-fix several code formatting errors.

[developerfred]

@charisra My commits were compiled, I also used prettier, what are the next steps?

[charisra]

@charisra My commits were compiled, I also used prettier, what are the next steps?

Great. I'll review once more, also check the Preview, approve and then you can merge.

[charisra]

This is going on the right track, close to be merge-able.
@developerfred please add in the PR description a short explanation about what has been done in this PR and how we (reviewers) can test & confirm that the PR achieves its purpose.

Left a few comments, too, should be easy to address.

[charisra]

Optional: Can become a one-liner: let title = isPrecompiled ? 'Precompiled Contracts' : isTransactionType ? 'Transaction Types' : 'Instructions';

[charisra]

So that's what I'm expected to see?

Just the types, there's not any more info on those, it mentions There is no reference doc for this yet. Why not contribute That's the expected behavior?

[developerfred]

There is no reference doc for this yet. Why not contribute That's the expected behavior?

I believe this is a call action to attract contributors

[charisra]

@developerfred I approved the PR. Is there anything pending before you merge?