feat: add transaction components

[abcrane123]

What changed? Why?

• add TransactionButton, TransactionGasFee and TransactionStatus components

Notes to reviewers

How has it been tested?

[Zizzamia]

Nice

[Zizzamia]

Keep alphabetical order

[Zizzamia]

So it's interesting how we want to build this because, we want to have two groups

<Transaction
  address={accountAddress}
  ​​className="custom-style"
  contracts={contractsToCall}
  onError={handleTransactionError}
  onStatusChange={handleTransactionStatusChange}
  sponsorOptions={sponsorOptions}
>
  <TransactionButton text={optionalButtonText} />
  <TransactionGasFee>
    <TransactionGasFeeLabel />
    <TransactionGasFeeEstimated />
    <TransactionGasFeeSponsoredBy />
  </TransactionGasFee>
  <TransactionStatus>
    <TransactionStatusLabel />
    <TransactionStatusAction />
  </TransactionStatus>
</Transaction>

We want

<TransactionGasFee>
    <TransactionGasFeeLabel />
    <TransactionGasFeeEstimated />
    <TransactionGasFeeSponsoredBy />
  </TransactionGasFee>

to be used for the initial flow, and than

 <TransactionStatus>
    <TransactionStatusLabel />
    <TransactionStatusAction />
  </TransactionStatus>

for the second part of the flow.

And if you see the sub components will get the information and we can customize their style.

[Zizzamia]

types always at the end

[Zizzamia]

nit. remember to keep everything alphabetically ordered.

[Zizzamia]

I think we can create an utility function, similar to getSwapMessage, to help organize those cases.

[Zizzamia]

Out of curiosity, were you able to get this Story working, because I was trying build some complex story with different Wagmi providers, and they were not quite working.

[abcrane123]

i was able to get it working for TransactionButton but i tried to create a more complex one for the Transaction component and haven't been able to figure that one out yet which is why i created the docs pages

[Zizzamia]

All good, I asked Sid to help us out with Storybook in the future.

[Zizzamia]

Now that I think about it, if we want to test a contract in our docs, probably that should be something super chill on Base Sepolia. Something to think about it on Monday.

[abcrane123]

yeah agreed going to ask in the group for help on this

[Zizzamia]

Add the

Component is actively in development. Stay tuned for upcoming releases.

[Zizzamia]

to remember href will change based on the Chain.

We can create an utility called getChainExplorer, and have it at top level similar on how we have isBase, and that can be an utility to use across all modules.

[Zizzamia]

Note for future us, we need to get on top of the Accessibility story. @fakepixels at some point we should do an Accessibility week work.

[Zizzamia]

@siddharthkul would love to hear from you how Storybook can help us catch and improve those.