As moralis is updating to v2 lots of user had to stay to [email protected] and [email protected] for beeing able to use last react-moralis functionality. Unfortunately @web3uikit/web3 is throwing a server error:

Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I wonder if this is coming because of the use of react-moralis@^1.4.0 as dependencies on your side?

lots of users are facing same issue and can't use @web3uikit/web3 anymore. Can you have a look at it?

many thanks.

Upgrade peerDep and DevDep to react 18

For anyone who is interested:

this PR needs some refactor on every test file as ReactDOM.render doesnt work anymore in react 18 If you want to use web3uikit in react 18 you probably see issues when trying to install with npmso please use yarn and everything works fine

I think it would be awesome if there was a component that looks like this:

import {sendTransactionButton} from "web3uikit"
.
.
.
<sendTransactionButton runContractFunction={doTx} useNotification={true}/>

And it take a runContractFunction object from the react-moralis useWeb3Contract as an input parameter, and then does the following:

1. Has a spin & disabled animation when metamask is poped up
2. Has a spin animation as the transaction is going through
3. stops spinning when the transition has 1 block confirmation, and optionally a useNotification pops up

I think this would save lot of development time, and would be so sick. We'd have like a useState and useEffect in this component tracking the status of the transaction.

Let me know what you think.

name: 'feat:Added BlockNumber' about: Pr for issue #695

New Pull Request

Checklist

• [x] I am not disclosing a vulnerability.
• [x] My code is conform the code style
• [x] I have made corresponding changes to the documentation
• [x] I have updated Typescript definitions when needed

Issue Description

Related issue: #695

Solution Description

It takes no props just a provider should be available for it to from moralis final screenshot

I was so happy when i saw this lib... but then I tried the connect button with its beautiful wallet selection popup and found out it was inflating itself inside my user's profile dropdown menu! :(

is there any way to fix this?

Things done in the PR:

• Added NFT Collections component using morallis getNFTs api

Things i need some suggestions on:

• Hardcoded types such as chain and NFTResult , because i was not able to use types imported from morallis/types. (typescript was throwing error - cannot assign type.......).
• Used Row and Card components, Do i need to make styled components instead?
• Any improvements i need to make while fetching the data?
• Any ideas on extra tests i can write?
• Please let me know all the negative points of my code, would help me improve in future 😄

This is a very simple component which will take two props:

1. Non optional text to display: string
2. Optional color / state prop: strings

Color / State:

• Blue / Normal (if unset)
• Green / Success
• Yellow / Warning
• Red / Danger

Remember that <DemoComponent /> is there for you to copy and start hacking if you need it

How it happened/How to recreate the issue

• Create a new React app with npx create-react-app appName

• Install moralis SDK and Web3UIKit npm install moralis react-moralis web3uikit

  • Warning error displayed in the console

• Try to console.log a value

• Error displayed on the webpage

yarn add --dev  @web3uikit/core @web3uikit/web3 @web3uikit/icons
yarn add v1.22.18
info No lockfile found.
[1/4] 🔍  Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/@web3uikit%2fcore: Not found".
info If you think this is a bug, please open a bug report with the information provided in "XXX.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

You get a similar error with npm.

Also, if you look at the NPM website, you can't find these packages either.

https://www.npmjs.com/search?q=web3uikit

The docs currently show to use this api to install web3uikit. Can we please fix?

name: ''feat:Added ENSAvatar" about: Issue #688

New Pull Request

Checklist

• [x] I am not disclosing a vulnerability.
• [x] My code is conform the code style
• [x] I have made corresponding changes to the documentation
• [x] I have updated Typescript definitions when needed

Issue Description

This PR solves Issue #688 about adding an avatar for people that have ENS Avatar Related issue: #688

Solution Description

I worked on adding the logic/component of ENSAvatar where we use blockies as a backup.If our consumer has ENSAvatar enabled the component would show the same otherwise the address is taken as seed for blockie

In Mobile view, i need to scroll the component to view the hide and copy icon. It would be better to make the icons fixed to right on mobile view and only keep the text scrollable. Can be replicated in Google Chrome and Mozilla Firefox.

https://user-images.githubusercontent.com/35369843/163437374-cd614727-b0da-4e20-93f8-9f6d0b645bc4.mp4

If accepted i can work on this. 😄

name: 'Pull request' about: A new pull request

New Pull Request

Checklist

• [x] I am not disclosing a vulnerability.
• [x] My code is conform the code style
• [x] I have made corresponding changes to the documentation
• [x] I have updated Typescript definitions when needed

Issue Description and Solution Description

1. Modal

• added customize prop

Solution:

2. NFTCard

• for palm network the images are sometimes in metadata.file in api result, added fallback image if there is any issue in loading ipfs image (images don't load on palm network sometimes)

Solution: Added more conditions in image display logic

3. Select (Beta)

• When select menu is opened the first element has active hover style, now this is removed.
• Reset active element hover style and menu scroll every time select is closed/opened.
• add fixed to overlay element

Issue:

4. InputNew

• Add tabIndex={-1} to password button to avoid it on tab click.
• sync error message for react hook form

Issue: when used with react hook form, the error message is updated after first render but its not updated in the input component

5. Add new color - purple-60

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to master, this PR will be updated.

Releases

@web3uikit/[email protected]

Patch Changes

• #981 43ce90477 Thanks @SebastianLF! - Model: added zIndex prop

• import TCustomize prop and set up all the types that can be used: see InputNew or Credentials for an example of this
• Implement slots feature: see InputNew

name: 'Pull request' about: A new pull request

New Pull Request

Checklist

• [ ] I am not disclosing a vulnerability.
• [ ] My code is conform the code style
• [ ] I have made corresponding changes to the documentation
• [ ] I have updated Typescript definitions when needed

Issue Description

Related issue: #FILL_THIS_OUT

Solution Description

Most of the code is from the original Table just change the HTML structure I used table element.

Hello, here's a feature request I had and would be happy to work on with some input from the team. Thanks for any help that can be provided.

Context

• In WalletModdal/config.ts, there is a hard-coded array of elements that are used for rendering all of the Wallet-specific UI elements in the modal.
• While I was working on an application, I wanted to be able to explicitly configure which providers were "valid" for my application; basically, I didn't want to give a user of my application the impression that Safepal was supported to the same degree that, e.g., Metamask is.

Proposal

• Continue to use the hard-coded array by default, but allow the user to pass in a connectors prop, which overrides the hardcoded list; the connectors prop would be an array of the same type as the existing connectors variable

While this solves my issue, it creates a UX problem, which is that if a user passes in an odd number of wallet configurations, then they will get a wallet that has one "empty" grid cell. If that's enough of a problem for a consumer, there are ways to fix it, but I'd probably need some design input on how to handle that case.

For example, one way to solve it would be to make the odd element span the entire width of the container, but I think this would require changing GridStyled to be display:flex instead of display:grid, and would also require changes to its children.

Questions

1. Does allowing wallets to be configurable by a consumer make sense?
2. If so, how do you suggest handling the case of an odd number of wallet configs? Do nothing? My suggestion above? Something else?