Is there a wish for make surf a centralized sdk for move?

[21Chani]

I have been using surf package for a while and got the wondering:

Is there a wish for make surf a central package for typescript and react utils?

Like we have wagmi with viem, we could make a package that already provides everything without the need to download 5+ more packages.

I would love to have everything in the same place for messing with standard abis, such as coins, hooks that could be tied with WalletProvider and more.

Also I figured that react-wallet-adapter package has lot of points that could be improved.

If the answer is yes, I would love to help achieve that (even because me and my team will need those in the project we have.)

[0xbe1]

@21Chani if you have a proposal in terms of how to do it, please share here and we can start from there. Ty for using surf and provide helpful feedback, looking forward to your reply

[21Chani]

@0xbe1 Sorry for my late, got busy on work.
I think I don't have something in mind in terms on how to do it right now, but if you want I can think and bring some ideas.

Of course would be a big change to surf due to refactor and etc, but would be necessary a core package (that is basically what this current package does) and a package for wrapping everything + react hooks.

To star I would say that the config could be simpler lie wagmi does.

For example, AptosWalletAdatarProvider is too much closed and not open for changes:

<AptosWalletAdapterProvider autoConnect={true} optInWallets={["Petra", "Pontem Wallet", "Nightly"]}>
  {children}
</AptosWalletAdapterProvider>

the ideal here would have something like:

<SurfProvider config={surfConfig}> 
  {children}
</SurfProvider>

Then, this config would be everything we would need to work with surf package.

Hook Examples

import { useCoin } from "surf"
useCoin({
  address: "0x00...00::Coin::coin",
  user: "0x0000...00",
  chainId: 2 // Aptos Testnet.
})

Actions Example

import { fetchCoin } from "surf/actions"
import { surfConfig } from "../surf.ts"

// The surfConfig would contain information about chain transports, connected user account and wallet context and more, so we wouldn't have to get useWallet always to make a simple call.
fetchCoin(surfConfig, {
  address: "0x00...00::Coin::coin",
  user: "0x0000...00",
  chainId: 2 // Aptos Testnet.
})

import { writeEntry } from "surf/actions"
import { surfConfig } from "../surf.ts"

// Again, surfConfig would already contain information of wallet and etc.
writeEntry(surfConfig, {
  abi: CONTRACT_ABI, // This would provide type safety 
  function: "FUNCTION_NAME",
  typeArguments: [],
  functionArguments: []
})

Utils Example

/**
 * Validates if the given address is a valid Aptos address
 * Be aware that ethereum addresses are also valid Aptos addresses
 * @param address - The address to validate
 * @returns - True if the address is a valid Aptos address
 */
export function isAddress(address: string): address is `0x${string}` {
  return AccountAddress.isValid({ input: address }).valid
}

export type StructAddress = `0x${string}::${string}::${string}`

/**
 * Validates if the given address is a valid Struct address
 * @param address - The address to validate
 * @returns - True if the address is a valid Struct address
 */
export function isStructAddress(address: string): address is StructAddress {
  try {
    // This may throw an error if the address is not a valid Aptos address
    return parseTypeTag(address).isStruct()
  } catch {
    return false
  }
}

import { isAddress, isStructAddress, type StructAddress } from "surf"

Chain Management

Also the used chains could be easily

examples:

type AptosCurrency = {
  name: string
  symbol: string
  decimals: number
}


const APTOS_COIN = {
  name: "Aptos Coin",
  symbol: "APT",
  decimals: 8,
} as const satisfies AptosCurrency

const MOVE_COIN = {
  name: "Movement Coin",
  symbol: "MOVE",
  decimals: 8,
}as const satisfies AptosCurrency

export type AptosChain = {
  id: number
  name: string
  network: Network
  icon: string
  currency: AptosCurrency
}


export const aptos = {
  id: 1,
  name: "Aptos Mainnet",
  network: Network.MAINNET,
  icon: "/assets/ecosystem/move/aptos.png",
  currency: APTOS_COIN,
} as const satisfies AptosChain

export const move = {
  id: 126,
  name: "Movement Mainnet",
  network: Network.MAINNET,
  icon: "/assets/ecosystem/move/movement.png",
  currency: MOVE_COIN,
} as const satisfies AptosChain

then could be easily used with

import {aptos, move} from "surf/chains"

Also would be ideal, if in the surfConfig you could specify the supportedChains of your app like wagmiConfig does.

Of course would be a lot, but I believe this package could make this and turn life of move developer easier like wagmi with viem does.

Would love to contribute to that.

Best regards ❤

[0xbe1]

@SamuelQZQ please share thoughts sir