npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

expo-solana-wallet

v1.1.4

Published

This is a simple Solana Wallet Cross-Platform App built with Expo, Web3 & React Native to learn about web3.

Downloads

1

Readme

Solana Wallet Cross-Platform App with Expo, Web3 & React Native

This is a simple Solana Wallet Cross-Platform App built with Expo, Web3 & React Native to learn about web3.

Screens and Features

Welcome

This screen only shows a button to start!

Welcome

Create your passcode

This screen let you create a passcode that for now is only requested when you want to see your recovery phrase.

Later, it can be used to encrypt the seed, before doing a transfer or even to access to the full app.

Passcode

Dashboard

This screen shows the account balance and soon it will show the Activity of the account.

Also, it is where I placed the Navigation using a floating action button (component provided by React Native Paper)

Dashboard

Get account balance with web3:

const getBalance = async (publicKey) => {
  const connection = createConnection();
  const _publicKey = publicKeyFromString(publicKey);

  const lamports = await connection.getBalance(_publicKey).catch((err) => {
    console.error(`Error: ${err}`);
  });

  const sol = lamports / LAMPORTS_PER_SOL;
  return sol;
};

Receive

This screen shows the address and a qr to make easier receive tokens.

Receive

Send

This screen allows you to send tokens to other accounts typing the address or scanning a qr code.

Also, this screen shows the current price of SOL, SOL available in the account and convert the introduced amount to USD.

Validations are pending!

Send

Create transaction with web3:

const transaction = async (from, to, amount) => {
  const account = accountFromSeed(from.seed);

  console.log("Executing transaction...");
  console.log(amount);

  const transaction = new solanaWeb3.Transaction().add(
    solanaWeb3.SystemProgram.transfer({
      fromPubkey: publicKeyFromString(from.account),
      toPubkey: publicKeyFromString(to),
      lamports: amount * LAMPORTS_PER_SOL,
    })
  );

  // Sign transaction, broadcast, and confirm
  const connection = createConnection();
  const signature = await solanaWeb3.sendAndConfirmTransaction(
    connection,
    transaction,
    [account]
  );
  console.log("SIGNATURE", signature);
};

Get Solana price using Coingecko API:

const getSolanaPrice = async () => {
  const response = await fetch(
    `https://api.coingecko.com/api/v3/simple/price?ids=solana&vs_currencies=usd`,
    {
      method: "GET",
    }
  );

  const data = await response.json();
  return data.solana.usd;
};

Settings

This screen shows two options:

Settings

Backup

To access to recovery phrase. Before ask for passcode.

Request Airdrop

This app is configured to connect to dev network so the tokens showed are not real.

Good thing is that every time you press here you get 1 SOL in your account that can be used to test the app, make transfers...

Request an Airdrop in dev mode with web3:

const requestAirDrop = async (publicKeyString: string) => {
  const connection = createConnection();

  const airdropSignature = await connection.requestAirdrop(
    publicKeyFromString(publicKeyString),
    LAMPORTS_PER_SOL
  );

  const signature = await connection.confirmTransaction(airdropSignature);
  return signature;
};

What I used to build this Solana Wallet

Expo

Expo is an open-source platform for making universal native apps for Android, iOS, and the web with JavaScript and React.

Solana/web3.js

This is the Solana Javascript API built on the Solana JSON RPC API.

Easy Peasy

Vegetarian friendly state for React.

React Native Paper

Paper is a collection of customizable and production-ready components for React Native, following Google’s Material Design guidelines.

React Navigation

Routing and navigation for Expo and React Native apps.

More

Moreover I used other libraries for crypto, qr generate and scan...

You can check them in package.json

Problems that I found and workarounds to solve them

Crypto dependency

solana/web3.js needs Crypto that it seems that now it's included in NodeJS but no in React Native and although I found some ways to have it working in React Native I didn't find a w ay to do it without ejecting the app from Expo.

Finally I found a workaround that basically uses ethers.js and expo-random to be able to generate mnemonic and seed. Later, I was able to use solana/web3.js without issues to conn ect to the network, get balance, transfer...

const generateMnemonic = async () => {
  const randomBytes = await Random.getRandomBytesAsync(32);
  const mnemonic = ethers.utils.entropyToMnemonic(randomBytes);
  return mnemonic;
};

const mnemonicToSeed = (mnemonic: string) => {
  const seed = ethers.utils.mnemonicToSeed(mnemonic);
  return seed;
};

const accountFromSeed = (seed: string) => {
  const hex = Uint8Array.from(Buffer.from(seed));
  const keyPair = nacl.sign.keyPair.fromSeed(hex.slice(0, 32));
  const account = new solanaWeb3.Account(keyPair.secretKey);
  return account;
};

Metro has encountered an error trying to resolve module 'superstruct'

Here the problem seems to be that the package entrypoint is a CommmonJS file. To solve it I added .cjs files to metro.config.js

module.exports = {
  resolver: {
    sourceExts: ["jsx", "js", "ts", "tsx", "cjs"],
  },
};

Some RN URL methods have no implementation

React Native react-native/Libraries/Blob/URL.js has no implementation for some methods.

Before, I was changing the 2 methods (protocol and port) manually but every time that I run yarn back to normal.

After a bit of research it seems that RN doesn't include this because the full implementation will increase a lot the size of the bundle but can be solved adding react-native-url-polyf ill package.

$ yarn add react-native-url-polyfill
# App.tsx
...
import "react-native-url-polyfill/auto";
...

What's next

  • Continue cleaning the code and remove packages that I'm not using anymore.
  • Design doesn't adjust well. I used a Background only to see it nice when I was building.
  • Give option to connect to Mainnet.
  • Let the option to generate derived accounts, encrypt seed phrase...
  • Integration with Serum for Swaps.
  • Run as Browser Extension.

Final

My goal with this was to learn the Web3 basics building something simple and sharing 100% of the code between Web and Native.

I think it has been a good introduction to see how Web3 works.

Run it:

$ git clone https://github.com/jferrer/expo-solana-wallet.git
$ cd expo-solana-wallet
$ yarn install
$ expo web or expo start

Or install apk for Android from Expo