DEV Community: cryptorustacean.com

Connecting the Phantom wallet to Your Project

cryptorustacean.com — Thu, 23 Sep 2021 00:00:00 +0000

I'll be honest. I had some preconceived notions about how hard it would be to connect a crypto wallet to my web app, but after having done it, I can really say how surprisingly simple it is.

First off, I'll be using NextJS but you can very easily use this tutorial to add Phantom to any web app, be it a front-end or an MVC framework.

Let's create our application with npx create-next-app --typescript -e with-tailwindcss phantom-wallet-example. For my particular app, I'll be using TypeScript and TailwindCSS, so I'll add those dependencies right when I create the app.

I'll rename my pages/index.js and pages/_app.js files to pages/index.tsx and pages._app.tsx respectively.

Now, if I run npm run dev from the console, NextJS will be helpful and tell you to install some dev dependencies. Let's go do that now with npm i -D typescript @types/react. After installing these dependencies, run npm run dev again and NextJS will create a tsconfig.json file for us and start the dev server.

Now, let's first think of what we want to show on the screen. If the browser doesn't have a Phantom wallet extension, we want to display a link to the Phantom website so user can add the extension. If the user has an extension, we either want to ask if they want to connect their wallet if they aren't already connected or disconnect if they are already connected.

Let's start with the first state (the link to the Phantom website). First, create the file components/ConnectToPhantom.tsx:

const ConnectToPhantom = () => {
  return (
    <a
      href="https://phantom.app/"
      target="_blank"
      className="bg-purple-500 px-4 py-2 border border-transparent rounded-md text-base font-medium text-white"
    >
      Get Phantom
    </a>
  );
};

export default ConnectToPhantom;

Taking a look at the documentation, looks like we can access the Phantom on the window object. This makes things much simpler than having to use the wallet adapter from Solana Labs. Obviously, if you need to integrate all these wallets, it's probably good to use it, but if you're only supporting Phantom, you don't need it.

Now let's first set the state of whether we detect the solana object on window:

import {useEffect, useState} from "react"

interface Phantom {}

const ConnectToPhantom = () => {
  const [phantom, setPhantom] = useState<Phantom | null>(null);

  useEffect(() => {
    if (window["solana"]?.isPhantom) {
      setPhantom(window["solana"]);
    }
  }, []);
  ...

Here we are initializing phantom to null, but upon mounting of the component, we want to see if window has a property named solana. If it does, then we check if its isPhantom property is truthy. If it is, we'll set the state of phantom with setPhantom dispatch function. This all happens in the useEffect React hook. The second parameter here is an empty array, so this callback only runs when the component is first mounted.

Once we have the Phantom provider, we want to display a button to either connect to the user wallet.

  ...
  if (phantom) {
    return (
      <button
        onClick={connectHandler}
        className="bg-purple-500 py-2 px-4 border border-transparent rounded-md text-sm font-medium text-white whitespace-nowrap hover:bg-opacity-75"
      >
        Connect to Phantom
      </button>
    );
  }
  ...

In order to connect to the wallet, we'll use the connect method on phantom and we'll wrap it all in a click event handler for the Connect to Phantom button.

interface Phantom {
  connect: () => Promise<void>;
}

const ConnectToPhantom = () => {
  ...
  const connectHandler = () => {
    phantom?.connect();
  };
  ...

Now that we can connect, let's handle the state for when we're already connected. We'll want the user to be able to disconnect. We'll also want it to be visually distinct from the disconnected state.

type Event = "connect" | "disconnect";

interface Phantom {
  ...
  on: (event: Event, callback: () => void) => void;
}

const ConnectToPhantom = () => {
  ...
  const [connected, setConnected] = useState(false);

  useEffect(() => {
    phantom?.on("connect", () => {
      setConnected(true);
    });

    phantom?.on("disconnect", () => {
      setConnected(false);
    });
  }, [phantom])
  ...

The state of connected will determine what the button looks like and what it says. We can take advantage event emitter provided by Phantom for this. If a "connect" event is emitted, we'll set connected to true. If a "disconnect" event is emitted, we'll set connected to false. Here, we are using another useEffect that will trigger once the phantom variable is set. Then we tell the event handlers what to do in either case ("connect" or "disconnect").

Now let's add the button to disconnect the wallet (shown only in a connected state):

  if (phantom) {
    if (connected) {
      return (
        <button
          onClick={disconnectHandler}
          className="py-2 px-4 border border-purple-700 rounded-md text-sm font-medium text-purple-700 whitespace-nowrap hover:bg-purple-200"
        >
          Disconnect from Phantom
        </button>
      );
    }
    ...

We will employ the disconnect method on phantom to disconnect the wallet. Since we already have the event handlers set for both "connect" and "disconnect", the UI state should change once those events fire.

interface Phantom {
  ...
  disconnect: () => Promise<void>;
}
...
const ConnectToPhantom = () => {
  ...
  const disconnectHandler = () => {
    phantom?.disconnect();
  }

Now let's stick this component on the index page:

import ConnectToPhantom from "../components/ConnectToPhantom";

export default function Home() {
  return (
    <div className="h-screen flex items-center justify-center">
      <ConnectToPhantom />
    </div>
  );
}

Now that we have a functional component, I'll leave it to you to do some cleanup to refactor some of the code it you'd like. Also, Phantom provides logos and assets for you to use in your project.

Feel free to check out the complete project on GitHub.

A Beginner's Survey of the Solana Ecosystem

cryptorustacean.com — Tue, 14 Sep 2021 00:00:00 +0000

This was from a quick survey of my Twitter feed. Is this a complete list? Obviously not. This is just a snapshot in time of what I'm currently aware of. It'll be an interesting read in a year when everything changes.

Oh, it's pretty important to have a nice landing page with a good description and/or whitepaper. I made a long list of projects, but had to edit out a bunch because some projects just didn't have enough of a landing page.

Projects

Project Serum

Project Serum is a protocol for DeFi for Solana. What makes it different is it's "on-chain orderbook" design. The reasoning behind this design is that decentralized exchanges like Uniswap requires Automated Market Making (AMM). In AMM, there's no limit orders, bids or offers, etc. The only price is the current market price. This is a necessary limitation because Uniswap is built on the Ethereum network, and providing matching bids and offers will involve lots of operations and quickly become cost prohibitive.

There are a lot of projects

Figment Learn

Figment Learn is probably the fastest onramp to learning development for Solana. It's probably also the fastest onramp to learning the other projects they have pathways for, like Polkadot and Polygon.

If you've ever worked with React, then the learning curve will be even flatter since the project you build upon is a NextJS repo.

Phantom

Phantom is a browser extension wallet where you can keep your SOL. It's the most recommended wallet for beginners in this ecosystems since it offers a friendly UI. This wallet is also compatible with SPL tokens.

Anchor Framework

The Anchor Framework was described by @armaniferrante as "the Ruby on Rails for Solana development" because of the scaffolding the framework provides for writing smart contracts.

Another reason to use the framework is it provides a "standard" API for building smart contracts on Solana and could be the de-facto solution for a majority of programs written for Solana.

Pyth Network

Pyth provides real-time on-chain market data, which would be instrumental in any derivatives product built on the blockchain. It lists a lot of heavy hitters as data providers, like FTX, Jane Street, and IEX (of Flash Boys fame).

Solanart

It's 2021 and NFTs are all the rage. Solanart is the first NFT marketplace on Solana. I'm pretty ignorant about this whole NFT craze at the moment, but even I recognize the importance of idea of non-fungible tokens so I'll definitely have to spend some time learning more about the NFT market in general.

Check out some interesting projects, like Degen Ape Academy and Sollamas.

Raydium

Raydium is an AMM platform for Solana built to provide on-chain liquidity to Project Serum's central limit order book.

Saber

Saber is a cross-chain stablecoin exchange on Solana. This means it helps to facilitate the transfer of assets between Solana and other blockchains.

SolFarm

SolFarm aggregates yield farms from Raydium and Saber. I don't know much about yield farming at this point, but this definitely merits further investigation.

PsyOptions

PsyOptions is a protocol for building American-style options. Like most of crypto, the project isn't very mature (as of writing), but having a mature protocol for writing options contracts for cryptocurrencies will lead towards more mainstream adoption by players in the financial markets.

Zeta

I saw Zeta present about their experience in the Solana Ignition Hackathon. Their tagline is "the premier under-collateralized DeFi options platform". I have no idea what that means, but the project seems interesting, mostly because of my interest in trading options.

Flux Protocol

Flux Protocol is a cross-chain oracle aggregator that will be launching on Solana. As with all crypto projects, who knows when this will happen. Hopefully this will make writing smart contracts dependent on an oracle much easier.

Hedgehog Market

Hedgehog is a prediction market platform built on Solana (testnet for now). They're currently in open beta so it would be interesting to know what kinds of prediction markets eventually make it.

Grape Protocol

Most Solana projects try to tackle the financial markets aspect of blockchain, but Grapes Network tries to tackle social networking.

Wormhole

Wormhole is a protocol for communication between different blockchains. Version 2 is currently in "active development". The main use of the protocol would be as a bridge between ERC-20 and SPL tokens.

Mango Markets

Mango Markets is a pretty hot decentralized exchange, or so it seems on Twitter.

Conclusion

Many of the projects are at various stages of development, but that seems to be the case with Solana and blockchain in general. What makes Solana so exciting the the multitudes of project currently being developed. A lot of these project also came out of the Solana Ignition or have big backers like FTX.

Rust Learning Resources

cryptorustacean.com — Fri, 10 Sep 2021 00:00:00 +0000

In my current quest to efficiently ramp up my skills in Rust so that I could start contributing to the Solana ecosystem, my friend Mark from Alchemist Camp suggested a pathway that would quickly ramp starting from some fairly approachable resources.

Hands-on Rust: This book is from the author of the free Roguelike Tutorial - In Rust. Since I have access to learning.oreilly.com already, I'll probably just straight into the book first, but the tutorial looks fun too so I may go through it as well if it doesn't duplicate too much of the content in the book.
Programming WebAssembly in Rust: I know Mark had a lot of good things to say about this one, and I'm happy he suggested this one for the second resource since I've been wanting to start checking out Wasm but haven't had a compelling reason to do so.
Rust Web Development: This book is still being written as we speak, so hopefully there will be a few more chapters completed by the time I get to it. Since I do mostly web development, I feel that having a book that teaches a different programming language, but in a familiar context, is a great way to learn.
The Rust Programming Language: This one goes into the nitty-gritty of the language. I'd like to get some awesome things built before getting to this one. It's pretty important to figure out ways to stay motivated on the learning path and getting to this book too early may just stop me in my tracks.

There are a few other books that look pretty interesting, like Rust in Action, that I may look at before getting to The Rust Programming Language. It all depends on how well I feel I've absorbed the information and the fluency with which I build applications.