The future of the Javascript SDK

The future of the Javascript SDK

Some updates and a look behind the scene

Dear fellow mages🧙‍♂️. Today I want to update you on something exiting about the JavaScript SDK. We are working on a new version with a lot of improvements. A lot of these updates are technical so we can scale and maintain the code better in the future. But it also comes with a lot of developer experience improvements for you.

I will share you now some insights and behind the scenes in this and upcoming posts.

More info about updates and the early alpha release for tester and early adopters is coming soon.

Some highlights

The SDK is being redesigned from the ground up, with a few reasons in mind:

  • First-class typescript support for better dev-experience for you
  • More consistent data across the whole sdk (no more need to concern about lowercase addresses, and chainIds that are a hex-string or decimal)
  • A lot of easy accessible utilities on dataTypes (converting a value to Wei, Gwei etc, or reading block explorer links on transactions)
  • More scalable in the future and better to maintain
  • Modular system so you can choose what features to install and reduce your package size.
  • With this modular system, you or third-parties can even expand upon the sdk
  • Future proof of adaptation for new networks. We will not assume anymore that EVM/Ethereum is the default network. We can scale to as many networks as we want

Typescript

We are moving to first-class Typescript support. So everything is written in Typescript, which results in no more types that are outdated, provide with an amazing dev-experience (both for us internally, and for you developers)

Monorepo

We are moving towards a monorepo. What this means is that we will subdivide the library in smaller packages. Each domain within the sdk as a separate package. This is good for us in maintain our codebase.
But this also allow you to only install dedicated packages (for example if you are only concerned about the EvmApi, then you don’t have all the code included regarding servers etc). This is an optional feature, you can also choose to install all the features by just installing the ‘umbrella’ Moralis package.

Example of what using the umbrella package will look like (spoiler alert: not a lot will change regarding v1)

Import Moralis from ‘moralis’

// Start Moralis

Moralis.start(config)

// You will have access to ALL modules, each accessed in its own namespace

Moralis.Server.authenticate()
Moralis.Evm.connect()
Moralis.EvmApi.account.getNFTs()

// Some functionalities will also be forwarded to the Moralis namespace for easy access. For example:
Moralis.authenticate()

Example of only using only a few packages: in this case: the server and evm

// Importing the core module is always required when using individual packages, as it serves for communication and initialisation between packages
Import MoralisCore from ‘@moralisweb3/core’

// Import the modules that you want to use
Import MoralisEvm from ‘@moralisweb3/evm’
Import MoralisServer from ‘@moralisweb3/server’

// Register the modules to the core package
MoralisCore.registerModules([MoralisEvm, MoralisServer])

// Now you can use any functionality of these packages
MoralisEvm.connect()
MoralisServer.authenticate()

With the introduction of a Monorepo, we will also move all “connectors” (Metamask, Walletconnect, Magic etc.) to its own package. This way no code or dependencies gets added in your app if you’re not using these connectors. This also resolves some errors we have in v1 of the sdk where users get error messages about missing dependencies.

Example usage:

Import {WalletConnectConnector} from ‘@moralisweb3/walletconnect-connector’

Moralis.Evm.wallets.register(WalletConnectConnector)

// Now users can connect/authenticate via
Moralis.Evm.connect({connector: ‘walletconnect’})

Data consistency

We are implementing a consistent way of handling data within Moralis. So no more issues regarding chainId’s where you have to check if it is 0x1 or 1. And no more checking if an address is a lowercased address, or when it is a checksum address (address with capital symbols in it). In both cases you will always get an EvmChain object or an EvmAddress object. We also implement a way of data consistency in this between Evm functionalities (such as transferring tokens) and getting data from the api.

An example use case for this is:

You connect to an Eve chain via metamask.

After connecting you get back an EvmAddress

To read value from this address you can use functionalities as:

// This will give you the chain after successful connection (this is an instance of EvmChain)
const chain = Moralis.Evm.chain

// To read the values
chain.hex // -> “0x1”
chain.decimal; // -> 1

// Read additional data
chain.currency // => {name: “Ether”, symbol: “ETH”, decimals: 18}
chain.rpcUrls // => list of urls

// equality checks can be in any format, or even another EvmChain instance
chain.equals(1) // -> true
chain.equals(“0x1”) // -> true
const otherChain = new EvmChain(1) 
chain.equals(otherChain) // -> true

This provides with a lot of utility functions and data consistencies. This same EvmChain instance can also be used as parameters in other functions or api interaction (without converting it to hex or decimals).

This functionality will be used to almost all complex data types where we want to specify formatting on, or where we want to give you utilities.

Everything is still work-in-progress. But if you’re curious then you can see the code at https://github.com/MoralisWeb3/Moralis-JS-SDK/tree/sdkv2

…More updates coming soon, stay tuned

14 Likes

Feel free to leave any suggestions, requests, or questions here on this topic. We want to provide the best experience for you to work with the SDK as possible :smiley:

1 Like

case address issue messed me up for days.Am happy to see you will solve that issue

4 Likes

Currently we released the first alpha version of sdk v2. Note that this is not feature-complete and under development. See the README in the codebase or the Changelog for the implemented features/roadmap.

Currently you can use it for Evm connections, authentication with the server, and the evmApi.

Let us know if you have any qyestions/feedback.

Codebase: https://github.com/MoralisWeb3/Moralis-JS-SDK/tree/alpha
Install: yarn add moralis@alpha or npm install moralis@alpha
Changelog: https://github.com/MoralisWeb3/Moralis-JS-SDK/blob/alpha/packages/moralis/CHANGELOG.md

2 Likes

HI @Erno @cryptokid , I was using moralis v1.11.0 and I got email to migrate from moralis to moralis-v1 SDK, I migrated to that, but as I am using moralis in React Project with “react-moralis”, react-moralis dosen’t recognise moralis-v1 sdk and throws error of moralis not found.

So I moved back to moralis v1.11.0, any suggestions/idea for this?

1 Like

We will change the peer dependency of react-moralis to moralis-v1 after we have launched v2 of the SDK. If you leave the version as it is (on 1.11.0), then it should be ok.

1 Like

Could this be fixed in the v2 ?

1 Like

that is my expectation for now, to be fixed in v2

2 Likes

I have the same issue in expo, I have the mentioned versions but that happened after I updated moralis, deleted node_modules and reinstalled the project now nothing loads and it gives me that error: Uncaught (in promise) TypeError: Right-hand side of ‘instanceof’ is not callable

1 Like

Hello can you please make a new thread with more details e.g. which package versions you’re using.

2 Likes
dependencies": {
    "@date-io/dayjs": "^2.14.0",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@expo-google-fonts/orbitron": "^0.2.2",
    "@material-ui/core": "^4.12.4",
    "@mui/icons-material": "^5.8.0",
    "@mui/material": "^5.8.1",
    "@mui/x-date-pickers": "^5.0.0-alpha.6",
    "@reduxjs/toolkit": "^1.8.2",
    "@sumsub/websdk": "^1.3.1",
    "@types/node": "^17.0.40",
    "@types/react-dom": "^18.0.5",
    "@types/react-google-recaptcha": "^2.1.5",
    "@types/webpack-env": "^1.17.0",
    "@vouched.id/vouched-react-native": "0.6.0",
    "@walletconnect/react-native-dapp": "^1.7.8",
    "@walletconnect/web3-provider": "^1.7.8",
    "@web3auth/web3auth": "^1.0.0",
    "add": "^2.0.6",
    "expo": "~45.0.0",
    "expo-status-bar": "~1.3.0",
    "formik": "^2.2.9",
    "magic-sdk": "7.0.0",
    "moralis": "^1.11.0",
    "react": "17.0.2",
    "react-countdown": "^2.3.2",
    "react-dom": "17.0.2",
    "react-dropzone": "^14.2.1",
    "react-google-recaptcha": "^2.1.0",
    "react-moralis": "^1.4.0",
    "react-multi-carousel": "^2.8.2",
    "react-native": "0.68.2",
    "react-native-crypto": "^2.2.0",
    "react-native-gesture-handler": "2.2.1",
    "react-native-reanimated": "2.8.0",
    "react-native-web": "0.17.7",
    "react-qr-code": "^2.0.7",
    "react-redux": "^8.0.2",
    "react-router-dom": "6",
    "react-scripts": "4.0.3",
    "resub": "^2.3.1",
    "sharp-cli": "2.1.1",
    "web3": "^1.7.3",
    "web3-auth": "^1.1.0",
    "yarn": "^1.22.18",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@expo/webpack-config": "^0.16.24",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
    "@types/react": "~17.0.21",
    "@types/react-native": "~0.67.6",
    "gh-pages": "^4.0.0",
    "react-error-overlay": "6.0.9",
    "react-refresh": "^0.13.0",
    "tsconfig-paths": "^4.0.0",
    "typescript": "~4.3.5",
    "webpack-hot-middleware": "^2.25.1"
  },
2 Likes

Okay thanks @cryptokid.

2 Likes

Hey make a new thread pls, this is not ideal place to talk your issue :raised_hands:

Only for moralis new js sdk discussion

2 Likes