imp: improve connect flow with verified server signatures

Author: ashconnell

docs/solana.md

@@ -12,13 +12,7 @@ You can generate a new wallet by running `node ./scripts/gen-wallet.js` and past
 
 ## player.wallet
 
-Wallet information is automatically synchronized and can be accessed by apps on both the server and client.
-
-**player.wallet.connecting**: A boolean that determines whether their wallet is in the process of connecting.
-
-**player.wallet.connected**: A boolean that determines whether their wallet is connected.
-
-**player.wallet.address**: The players wallet address, when connected.
+Either a `String` wallet address or `null`. This is automatically synchronized and accessable by apps on both the client and server.
 
 ## world.on('wallet', callback)
 
@@ -27,23 +21,19 @@ Apps can also subscribe to global player wallet changes on both the client and s
 ```jsx
 world.on('wallet', e => {
   // e.playerId
-  // e.wallet.connecting
-  // e.wallet.connected
-  // e.wallet.address
+  // e.wallet
 })
 ```
 
 ## player.connect()
 
-Client only.
+On the client this invokes a connect and sign flow, which is then verified on the server before updating the `player.wallet` value and emitting the `wallet` change event above.
 
-Displays a modal for the player to select a wallet provider and then connect.
+On the server this sends a network event to the client to invoke the above.
 
 ## player.disconnect()
 
-Client only.
-
-Disconnects the players current wallet.
+Disconnects the players current wallet. Can be used on the client or server, and clears the `player.wallet` value. Also emits a `wallet` change event.
 
 ## player.deposit(amount)
 
@@ -59,8 +49,4 @@ Server only.
 
 Generates an unsigned transaction for the player to receive `amoutn` from the world wallet, sends it to the client to be signed, and is then signed and confirmed back on the server.
 
-Returns a promise that resolves with the signature, or rejects with an error code.
-
-
-
-
+Returns a promise that resolves with the signature, or rejects with an error code.

package-lock.json

@@ -73,6 +73,7 @@
     "source-map-support": "^0.5.21",
     "three": "^0.173.0",
     "three-mesh-bvh": "^0.8.3",
+    "tweetnacl": "^1.0.3",
     "yoga-layout": "^3.2.1"
   },
   "devDependencies": {

package.json

@@ -27,8 +27,7 @@ export function Logic({ world }) {
   const modal = useWalletModal()
   const { connecting, connected, publicKey } = wallet
   useEffect(() => {
-    wallet.openModal = () => modal.setVisible(true)
-    world.entities.player.setWallet(wallet)
+    world.solana.bind({ wallet, modal })
   }, [connecting, connected, publicKey])
   return null
 }

src/client/components/Wallet.js

@@ -977,20 +977,6 @@ export class PlayerLocal extends Entity {
     })
   }
 
-  setWallet(wallet) {
-    this.wallet = wallet
-    this.data.wallet = {
-      connecting: wallet.connecting,
-      connected: wallet.connected,
-      address: wallet.publicKey?.toString() || null,
-    }
-    this.world.events.emit('wallet', { playerId: this.data.id, wallet: this.data.wallet })
-    this.world.network.send('entityModified', {
-      id: this.data.id,
-      wallet: this.data.wallet,
-    })
-  }
-
   chat(msg) {
     this.nametag.active = false
     this.bubbleText.value = msg
@@ -1037,6 +1023,11 @@ export class PlayerLocal extends Entity {
       this.data.roles = data.roles
       changed = true
     }
+    if (data.hasOwnProperty('wallet')) {
+      console.log('yo')
+      this.data.wallet = data.wallet
+      this.world.events.emit('wallet', { playerId: this.data.id, wallet: data.wallet })
+    }
     if (avatarChanged) {
       this.applyAvatar()
     }

src/core/entities/PlayerLocal.js

@@ -168,10 +168,10 @@ export function createPlayerProxy(entity, player) {
       return player.data.wallet
     },
     connect() {
-      return world.solana.connect()
+      return world.solana.connect(player)
     },
     disconnect() {
-      return world.solana.disconnect()
+      return world.solana.disconnect(player)
     },
     deposit(amount) {
       return world.solana.deposit(entity, player, amount)

src/core/extras/createPlayerProxy.js

@@ -22,6 +22,8 @@ const names = [
   'kick',
   'ping',
   'pong',
+  'walletConnect',
+  'walletDisconnect',
   'depositRequest',
   'depositResponse',
   'withdrawRequest',

src/core/packets.js

@@ -205,6 +205,14 @@ export class ClientNetwork extends System {
     this.world.emit('kick', code)
   }
 
+  onWalletConnect = () => {
+    this.world.solana.connect()
+  }
+
+  onWalletDisconnect = () => {
+    this.world.solana.disconnect()
+  }
+
   onDepositRequest = data => {
     this.world.solana.onDepositRequest(data)
   }

src/core/systems/ClientNetwork.js

@@ -1,21 +1,60 @@
 import { Transaction } from '@solana/web3.js'
 import { System } from './System'
+import { storage } from '../storage'
+import bs58 from 'bs58'
+
+const key = 'hyp:solana:auths'
+const template = 'Connect to world:\n{address}'
 
 export class ClientSolana extends System {
   constructor(world) {
     super(world)
+    this.wallet = null
+    this.modal = null
+    this.auths = storage.get(key, []) // [...{ address, signature }]
+    this.connected = false
   }
 
-  connect() {
-    const player = this.world.entities.player
-    if (player.wallet.connected) return console.warn('[solana] already connected')
-    player.wallet.openModal()
+  async bind({ wallet, modal }) {
+    this.wallet = wallet
+    this.modal = modal
+    if (this.wallet.connected && !this.connected) {
+      const address = this.wallet.publicKey.toString()
+      let auth = this.auths.find(auth => auth.address === address)
+      if (!auth) {
+        const text = template.replace('{address}', address)
+        const message = new TextEncoder().encode(text)
+        const signature_ = await this.wallet.signMessage(message)
+        const signature = bs58.encode(signature_)
+        auth = { address, signature }
+        this.auths.push(auth)
+        storage.set(key, this.auths)
+      }
+      this.connected = true
+      this.world.network.send('walletConnect', auth)
+    }
+    if (!this.wallet.connected && this.connected) {
+      this.connected = false
+      this.world.network.send('walletDisconnect')
+    }
   }
 
-  disconnect() {
-    const player = this.world.entities.player
-    if (!player.wallet.connected) return console.warn('[solana] already disconnected')
-    player.wallet.disconnect()
+  connect(player) {
+    if (player && player.data.id !== this.world.network.id) {
+      throw new Error('[solana] cannot connect a remote player from client')
+    }
+    if (!this.wallet) return
+    if (this.wallet.connected) return
+    this.modal.setVisible(true)
+  }
+
+  disconnect(player) {
+    if (player && player.data.id !== this.world.network.id) {
+      throw new Error('[solana] cannot disconnect a remote player from client')
+    }
+    if (!this.wallet) return
+    if (!this.wallet.connected) return
+    this.wallet.disconnect()
   }
 
   deposit(playerId, amount) {

src/core/systems/ClientSolana.js

@@ -287,11 +287,7 @@ export class ServerNetwork extends System {
           avatar: user.avatar || this.world.settings.avatar?.url || 'asset://avatar.vrm',
           sessionAvatar: avatar || null,
           roles: user.roles,
-          wallet: {
-            connecting: false,
-            connected: false,
-            address: null,
-          },
+          wallet: null,
         },
         true
       )
@@ -525,6 +521,14 @@ export class ServerNetwork extends System {
     socket.send('pong', time)
   }
 
+  onWalletConnect = (socket, data) => {
+    this.world.solana.onWalletConnect(socket.id, data)
+  }
+
+  onWalletDisconnect = socket => {
+    this.world.solana.onWalletDisconnect(socket.id)
+  }
+
   onDepositResponse = (socket, data) => {
     this.world.solana.onDepositResponse(data)
   }