Solana change network

sdk/apps/modal-example/package.json

@@ -18,14 +18,14 @@
   "dependencies": {
     "@aptos-labs/ts-sdk": "^1.9.1",
     "@aptos-labs/wallet-standard": "^0.0.11",
-    "@mysten/sui": "^1.2.1",
+    "@mysten/sui": "1.4.0",
     "@nightlylabs/nightly-connect-polkadot": "0.0.16",
     "@nightlylabs/nightly-connect-solana": "0.0.29",
     "@nightlylabs/nightly-connect-sui": "0.1.0",
     "@nightlylabs/wallet-selector-aptos": "0.1.10",
     "@nightlylabs/wallet-selector-base": "^0.4.1",
     "@nightlylabs/wallet-selector-polkadot": "0.2.7",
-    "@nightlylabs/wallet-selector-solana": "0.3.6",
+    "@nightlylabs/wallet-selector-solana": "0.3.7",
     "@nightlylabs/wallet-selector-sui": "0.4.0",
     "@polkadot/api": "^10.10.1",
     "@polkadot/extension-inject": "^0.46.5",

sdk/apps/modal-example/src/app.css

@@ -1,5 +1,5 @@
 body {
-  font-family: "Arial", "Helvetica";
+  font-family: 'Arial', 'Helvetica';
 }
 
 main {
@@ -34,3 +34,28 @@ button {
   width: 300px;
   cursor: pointer;
 }
+
+.dropdown-list {
+  display: flex;
+  flex-direction: column;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  width: 280px;
+  align-self: center;
+  align-items: center;
+  overflow: hidden;
+  transition: max-height 0.2s ease-out;
+}
+.dropdown-item {
+  background-color: cornflowerblue;
+  color: white;
+  font-size: 16px;
+  padding: 16px;
+  text-transform: uppercase;
+  width: 280px;
+  cursor: pointer;
+}
+
+.dropdown-item:hover {
+  filter: brightness(95%);
+}

sdk/apps/modal-example/src/components/DropdownButton.tsx

@@ -0,0 +1,53 @@
+import { createSignal } from 'solid-js'
+
+interface IDropdownProps<T extends { name: string }> {
+  options: T[]
+  label: string
+  onClickOption: (item: T) => void
+}
+
+export function DropdownButton<T extends { name: string }>({
+  options,
+  label,
+  onClickOption
+}: IDropdownProps<T>) {
+  const [isExpanded, setIsExpanded] = createSignal<boolean>(false)
+
+  return (
+    <div style={{ display: 'flex', 'flex-direction': 'column', 'align-items': 'center' }}>
+      <button
+        style={{ position: 'relative' }}
+        onClick={() => {
+          setIsExpanded(!isExpanded())
+        }}>
+        {label}
+        <svg
+          style={{
+            position: 'absolute',
+            right: '16px',
+            top: '20px',
+            transform: `rotate(${isExpanded() ? '180deg' : '0deg'})`
+          }}
+          width="16"
+          height="10"
+          viewBox="0 0 12 8"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M6 7.68555L0.219672 1.90522C-0.0732217 1.61232 -0.0732216 1.13745 0.219671 0.844557C0.512564 0.551664 0.987438 0.551664 1.28033 0.844557L6 5.56423L10.7197 0.844558C11.0126 0.551665 11.4874 0.551665 11.7803 0.844558C12.0732 1.13745 12.0732 1.61232 11.7803 1.90522L6 7.68555Z"
+            fill="#FFFFFF"
+          />
+        </svg>
+      </button>
+      <div class="dropdown-list" style={{ 'max-height': isExpanded() ? '1000px' : '0px' }}>
+        {options.map((item) => (
+          <div onClick={() => onClickOption(item)} class="dropdown-item">
+            {item.name}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}

sdk/apps/modal-example/src/routes/solana.tsx

@@ -1,67 +1,111 @@
-import { createEffect, createSignal, onMount, Show } from "solid-js";
-import { Title } from "@solidjs/meta";
-import { NightlyConnectAdapter } from "@nightlylabs/wallet-selector-solana";
-import {
-  Connection,
-  PublicKey,
-  SystemProgram,
-  Transaction as SolanaTx,
-} from "@solana/web3.js";
-import toast from "solid-toast";
+import { createEffect, createSignal, onMount, Show } from 'solid-js'
+import { Title } from '@solidjs/meta'
+import { NightlyConnectAdapter } from '@nightlylabs/wallet-selector-solana'
+import { Connection, PublicKey, SystemProgram, Transaction as SolanaTx } from '@solana/web3.js'
+import toast from 'solid-toast'
+import { DropdownButton } from '~/components/DropdownButton'
 
-const connection = new Connection("https://api.devnet.solana.com");
+const connection = new Connection('https://api.devnet.solana.com')
+
+export interface INetwork {
+  name: string
+  genesisHash: string
+  url: string | undefined
+}
+const CUSTOM_NETWORK: INetwork[] = [
+  {
+    name: 'Solana Mainnet',
+    genesisHash: '5eykt4UsFv8P8NJdTREpY1vzqKqZKvdpKuc147dw2N9d',
+    url: undefined
+  },
+  {
+    name: 'Solana Testnet',
+    genesisHash: '4uhcVJyU9pJkvQyS88uRDiswHXSCkY3zQawwpjk2NsNY',
+    url: undefined
+  },
+  {
+    name: 'Solana Devnet',
+    genesisHash: 'EtWTRABZaYq6iMfeYKouRu166VU2xqa1wcaWoxPkrZBG',
+    url: undefined
+  },
+  {
+    name: 'Eclipse Mainnet',
+    genesisHash: 'EAQLJCV2mh23BsK2P9oYpV5CHVLDNHTxYss3URrNmg3s',
+    url: undefined
+  },
+  {
+    name: 'Eclipse Testnet',
+    genesisHash: 'CX4huckiV9QNAkKNVKi5Tj8nxzBive5kQimd94viMKsU',
+    url: undefined
+  },
+  {
+    name: 'Eclipse Devnet',
+    genesisHash: '8axJLKAqQU9oyULRunGrZTLDEXhn17VWxoH5F7MCmdXG',
+    url: undefined
+  },
+  {
+    name: 'Sonic Testnet',
+    genesisHash: 'Ep5wb4kbMk8yHqV4jMXNqDiMWnNtnTh8jX6WY59Y8Qvj',
+    url: undefined
+  },
+  {
+    name: 'Solana Mainnet with url',
+    genesisHash: '5eykt4UsFv8P8NJdTREpY1vzqKqZKvdpKuc147dw2N9d',
+    url: 'https://solana-mainnet.rpc.extrnode.com/85c27167-63a1-4fa3-9971-fc1df7b132dc'
+  }
+]
 
 export default function Solana() {
-  const [adapter, setAdapter] = createSignal<NightlyConnectAdapter>();
-  const [eager, setEager] = createSignal(false);
-  const [publicKey, setPublicKey] = createSignal<PublicKey>();
+  const [adapter, setAdapter] = createSignal<NightlyConnectAdapter>()
+  const [eager, setEager] = createSignal(false)
+  const [publicKey, setPublicKey] = createSignal<PublicKey>()
   onMount(async () => {
     NightlyConnectAdapter.build(
       {
         appMetadata: {
-          name: "NCTestSolana",
-          description: "Nightly Connect Test",
-          icon: "https://docs.nightly.app/img/logo.png",
-          additionalInfo: "Courtesy of Nightly Connect team",
-        },
+          name: 'NCTestSolana',
+          description: 'Nightly Connect Test',
+          icon: 'https://docs.nightly.app/img/logo.png',
+          additionalInfo: 'Courtesy of Nightly Connect team'
+        }
       },
       {},
-      document.getElementById("modalAnchor")
+      document.getElementById('modalAnchor')
     ).then((adapter) => {
-      adapter.on("connect", (pk) => {
-        setPublicKey(pk);
-      });
+      adapter.on('connect', (pk) => {
+        setPublicKey(pk)
+      })
 
-      adapter.on("disconnect", () => {
-        setPublicKey(undefined);
-      });
-      adapter.on("change", (a) => {
+      adapter.on('disconnect', () => {
+        setPublicKey(undefined)
+      })
+      adapter.on('change', (a) => {
         if (!!a.accounts?.length && a.accounts[0].publicKey) {
-          setPublicKey(new PublicKey(a.accounts[0].publicKey));
+          setPublicKey(new PublicKey(a.accounts[0].publicKey))
         }
-      });
+      })
       adapter.canEagerConnect().then((canEagerConnect) => {
-        setEager(canEagerConnect);
-      });
+        setEager(canEagerConnect)
+      })
 
-      setAdapter(adapter);
-    });
-  });
+      setAdapter(adapter)
+    })
+  })
 
   createEffect(() => {
     if (eager()) {
       adapter()
         ?.connect()
         .then(
           () => {
-            console.log("connect resolved successfully");
+            console.log('connect resolved successfully')
           },
           () => {
-            console.log("connect rejected");
+            console.log('connect rejected')
           }
-        );
+        )
     }
-  });
+  })
 
   return (
     <main>
@@ -76,69 +120,71 @@ export default function Solana() {
                 ?.connect()
                 .then(
                   () => {
-                    console.log("connect resolved successfully");
+                    console.log('connect resolved successfully')
                   },
                   () => {
-                    console.log("connect rejected");
+                    console.log('connect rejected')
                   }
-                );
-            }}
-          >
+                )
+            }}>
             Connect
           </button>
-        }
-      >
+        }>
         <h1>Current public key: {publicKey()!.toString()}</h1>
         <button
           onClick={async () => {
             try {
               const ix = SystemProgram.transfer({
                 fromPubkey: adapter()!.publicKey!,
                 lamports: 1e6,
-                toPubkey: new PublicKey(
-                  "147oKbjwGDHEthw7sRKNrzYiRiGqYksk1ravTMFkpAnv"
-                ),
-              });
-              const tx = new SolanaTx().add(ix).add(ix).add(ix).add(ix).add(ix);
-              const a = await connection.getRecentBlockhash();
-              tx.recentBlockhash = a.blockhash;
-              tx.feePayer = adapter()!.publicKey!;
-              const signedTx = await adapter()!.signTransaction!(tx);
-              await connection.sendRawTransaction(signedTx!.serialize());
+                toPubkey: new PublicKey('147oKbjwGDHEthw7sRKNrzYiRiGqYksk1ravTMFkpAnv')
+              })
+              const tx = new SolanaTx().add(ix).add(ix).add(ix).add(ix).add(ix)
+              const a = await connection.getRecentBlockhash()
+              tx.recentBlockhash = a.blockhash
+              tx.feePayer = adapter()!.publicKey!
+              const signedTx = await adapter()!.signTransaction!(tx)
+              await connection.sendRawTransaction(signedTx!.serialize())
 
-              toast.success("Transaction was signed and sent!");
+              toast.success('Transaction was signed and sent!')
             } catch (e) {
-              toast.error("Error: couldn't sign and send transaction!");
-              console.log(e);
+              toast.error("Error: couldn't sign and send transaction!")
+              console.log(e)
             }
-          }}
-        >
+          }}>
           Send 0.005 SOL
         </button>
         <button
           onClick={async () => {
             try {
-              await adapter()!.signMessage!(
-                new TextEncoder().encode("I love Nightly")
-              );
+              await adapter()!.signMessage!(new TextEncoder().encode('I love Nightly'))
 
-              toast.success("Message was signed!");
+              toast.success('Message was signed!')
             } catch (e) {
-              toast.error("Error: couldn't sign message!");
-              console.log(e);
+              toast.error("Error: couldn't sign message!")
+              console.log(e)
             }
-          }}
-        >
+          }}>
           Sign message
         </button>
+        <DropdownButton
+          label="Change network"
+          options={CUSTOM_NETWORK}
+          onClickOption={async (network) => {
+            adapter()!.changeNetwork({
+              genesisHash: network.genesisHash,
+              url: network.url
+            })
+          }}
+        />
+
         <button
           onClick={() => {
-            adapter()?.disconnect();
-          }}
-        >
+            adapter()?.disconnect()
+          }}>
           Disconnect
         </button>
       </Show>
     </main>
-  );
+  )
 }