Merge pull request #144 from blend-capital/network-page

chore: remove passphrase option network config page and add minor updates
blend-capital · Jul 27, 2024 · 21ede45 · 21ede45
2 parents 6d4276f + 64d83cc
commit 21ede45
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 31 deletions.
diff --git a/src/pages/network.tsx b/src/pages/network.tsx
@@ -1,4 +1,5 @@
 import { Input, Typography } from '@mui/material';
+import { SorobanRpc } from '@stellar/stellar-sdk';
 import { useState } from 'react';
 import { Divider } from '../components/common/Divider';
 import { OpaqueButton } from '../components/common/OpaqueButton';
@@ -8,29 +9,42 @@ import { useStore } from '../store/store';
 import theme from '../theme';
 
 export default function NetworkPage() {
-  const { walletAddress, getNetworkDetails, walletId } = useWallet();
+  const { getNetworkDetails, walletId } = useWallet();
   const { network, setNetwork } = useStore((state) => state);
-  const [newNetworkRPCUrl, setNewNetworkRPCUrl] = useState<string>();
-  const [newHorizonUrl, setNewHorizonUrl] = useState<string>('');
-  const [newNetworkPassphrase, setNewNetworkPassphrase] = useState<string>();
   const loadBlendData = useStore((state) => state.loadBlendData);
+
+  const [newNetworkRPCUrl, setNewNetworkRPCUrl] = useState<string>('');
+  const [newHorizonUrl, setNewHorizonUrl] = useState<string>('');
+  const [newOpts, setNewOpts] = useState<SorobanRpc.Server.Options | undefined>(undefined);
+
   function fetchFromWallet() {
     getNetworkDetails().then((networkDetails) => {
       if (networkDetails.rpc) {
-        setNewNetworkPassphrase(networkDetails.passphrase);
-        setNewNetworkRPCUrl(networkDetails.rpc);
+        handleChangeRpcUrl(networkDetails.rpc);
         setNewHorizonUrl(networkDetails.horizonUrl);
       }
     });
   }
 
   function handleUpdateNetworkClick() {
-    if (newNetworkRPCUrl && newNetworkPassphrase) {
-      setNetwork(newNetworkRPCUrl, newNetworkPassphrase, newHorizonUrl);
+    if (newNetworkRPCUrl && newHorizonUrl) {
+      setNetwork(newNetworkRPCUrl, newHorizonUrl, newOpts);
+      setNewHorizonUrl('');
+      setNewNetworkRPCUrl('');
+      setNewOpts(undefined);
       loadBlendData(true);
     }
   }
 
+  function handleChangeRpcUrl(rpcUrl: string) {
+    if (rpcUrl.startsWith('http://')) {
+      setNewOpts({ allowHttp: true });
+    } else {
+      setNewOpts(undefined);
+    }
+    setNewNetworkRPCUrl(rpcUrl);
+  }
+
   return (
     <>
       <>
@@ -49,10 +63,6 @@ export default function NetworkPage() {
             <Typography variant="h4" sx={{ color: theme.palette.text.secondary }}>
               {network.horizonUrl}
             </Typography>
-            <Typography variant="h3">Passphrase</Typography>
-            <Typography variant="h4" sx={{ color: theme.palette.text.secondary }}>
-              {network.passphrase}
-            </Typography>
           </Row>
         )}
         <Divider />
@@ -72,20 +82,14 @@ export default function NetworkPage() {
               placeholder="Input RPC Url"
               type="text"
               value={newNetworkRPCUrl}
-              onChange={(e) => setNewNetworkRPCUrl(e.target.value)}
+              onChange={(e) => handleChangeRpcUrl(e.target.value)}
             />
             <Input
               placeholder="Input Horizon Url"
               type="text"
               value={newHorizonUrl}
               onChange={(e) => setNewHorizonUrl(e.target.value)}
             />
-            <Input
-              placeholder="Input Passphrase "
-              type="text"
-              value={newNetworkPassphrase}
-              onChange={(e) => setNewNetworkPassphrase(e.target.value)}
-            />
             {walletId === 'freighter' && (
               <OpaqueButton
                 sx={{ width: '20rem', margin: 'auto' }}

diff --git a/src/store/rpcSlice.ts b/src/store/rpcSlice.ts
@@ -3,32 +3,39 @@ import { Horizon, SorobanRpc } from '@stellar/stellar-sdk';
 import { StateCreator } from 'zustand';
 import { DataStore } from './store';
 
+const DEFAULT_RPC = process.env.NEXT_PUBLIC_RPC_URL || 'https://soroban-testnet.stellar.org';
+const DEFAULT_HORIZON =
+  process.env.NEXT_PUBLIC_HORIZON_URL || 'https://horizon-testnet.stellar.org';
+const DEFAULT_PASSPHRASE =
+  process.env.NEXT_PUBLIC_PASSPHRASE || 'Test SDF Network ; September 2015';
+
 export interface RPCSlice {
   network: Network & { horizonUrl: string };
   rpcServer: () => SorobanRpc.Server;
-  setNetwork: (
-    rpcUrl: string,
-    newPassphrase: string,
-    newHorizonUrl: string,
-    opts?: SorobanRpc.Server.Options
-  ) => void;
-
+  setNetwork: (rpcUrl: string, newHorizonUrl: string, opts?: SorobanRpc.Server.Options) => void;
   horizonServer: () => Horizon.Server;
 }
 
 export const createRPCSlice: StateCreator<DataStore, [], [], RPCSlice> = (set, get) => ({
   network: {
-    rpc: process.env.NEXT_PUBLIC_RPC_URL || 'https://soroban-testnet.stellar.org',
-    passphrase: process.env.NEXT_PUBLIC_PASSPHRASE || 'Test SDF Network ; September 2015',
+    rpc: DEFAULT_RPC,
+    passphrase: DEFAULT_PASSPHRASE,
     opts: undefined,
-    horizonUrl: process.env.NEXT_PUBLIC_HORIZON_URL || 'https://horizon-testnet.stellar.org',
+    horizonUrl: DEFAULT_HORIZON,
   },
   rpcServer: () => {
     let network = get().network;
     return new SorobanRpc.Server(network.rpc, network.opts);
   },
-  setNetwork: (newUrl, newPassphrase, horizonUrl: string, newOpts) =>
-    set({ network: { rpc: newUrl, passphrase: newPassphrase, opts: newOpts, horizonUrl } }),
+  setNetwork: (newUrl: string, newHorizonUrl: string, newOpts?: SorobanRpc.Server.Options) =>
+    set({
+      network: {
+        rpc: newUrl,
+        passphrase: DEFAULT_PASSPHRASE,
+        opts: newOpts,
+        horizonUrl: newHorizonUrl,
+      },
+    }),
   horizonServer: () => {
     let network = get().network;
     return new Horizon.Server(network.horizonUrl, network.opts);