added multible accounts

paulfears · Jan 4, 2024 · d6fc03d · d6fc03d
1 parent b4a61be
commit d6fc03d
Show file tree

Hide file tree

Showing 20 changed files with 554 additions and 227 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "stellar-snap",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "private": false,
   "description": "A non custodial Stellar Wallet built for metamask",
   "repository": {
@@ -25,7 +25,7 @@
     "lint:misc": "prettier '**/*.json' '**/*.md' '!CHANGELOG.md' --ignore-path .gitignore",
     "serve": "mm-snap serve",
     "test": "echo 'TODO'",
-    "start": "mm-snap build && concurrently \"(mm-snap serve)\"  \"yarn --cwd ./site/ dev\""
+    "start": "mm-snap build && concurrently \"(mm-snap serve)\"  \"yarn --cwd ./site/ && yarn --cwd ./site/ dev\""
   },
   "devDependencies": {
     "@esbuild-plugins/node-globals-polyfill": "^0.2.3",

diff --git a/site/index.html b/site/index.html
@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
     <script src="https://bundle.run/[email protected]"></script>
     <script>
       /**
@@ -20,11 +19,6 @@
       <div id="app"></div>
       <script type="module" src="/src/main.ts"></script>
     </div>
-    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.rings.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/soroban-client/1.0.0-beta.2/soroban-client.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/stellar-sdk.min.js"></script>
-    <script>
-
-    </script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-sdk/11.1.0/stellar-sdk.js"></script>
   </body>
 </html>
diff --git a/site/package.json b/site/package.json
@@ -24,12 +24,13 @@
   },
   "dependencies": {
     "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
+    "@stellar/stellar-sdk": "^11.1.0",
     "buffer": "^6.0.3",
     "events": "^3.3.0",
     "flowbite-svelte": "^0.44.15",
     "process": "^0.11.10",
     "rollup-plugin-node-polyfills": "^0.2.1",
-    "stellar-sdk": "^10.4.1",
+    "stellar-sdk": "^11.1.0",
     "svelte-ace": "^1.0.21",
     "tailwindcss": "^3.3.3",
     "util": "^0.12.5"

diff --git a/site/src/App.svelte b/site/src/App.svelte
@@ -15,6 +15,7 @@
   import OperationForm from './TransactionBuilder/operationForm.svelte';
   import TransactionMaker from './TransactionBuilder/transactionMaker.svelte';
   import Wallet from './lib/Wallet.svelte';
+  import WalletPage from './lib/WalletPage.svelte';
   let funding = false;
 
   function genreateCode(method, params){
@@ -159,6 +160,10 @@
         </FunctionContainer>
     </div>
 
+    </TabItem>
+    <TabItem >
+      <span slot="title">Wallet Functions</span>
+      <WalletPage/>
     </TabItem>
     <TabItem >
       <span slot="title">Signing Functions</span>

diff --git a/site/src/TransactionBuilder/transactionMaker.svelte b/site/src/TransactionBuilder/transactionMaker.svelte
@@ -5,7 +5,7 @@
     import { Select, Label } from 'flowbite-svelte';
     import {OperationParams} from './operations';
     import OperationForm from './operationForm.svelte';
-    import {TransactionBuilder, Operation, BASE_FEE, Server, Networks, Asset} from 'stellar-sdk';
+    import {TransactionBuilder, Operation, BASE_FEE, Horizon, Networks, Asset} from 'stellar-sdk';
   import AssetSelect from "./AssetSelect.svelte";
     export let network: "mainnet" | "testnet" = "mainnet";
     export let address:string;
@@ -34,10 +34,13 @@
         console.log(operations)
         const passpharase = network === 'testnet'?Networks.TESTNET : 'Public Global Stellar Network ; September 2015'
         
-        const server = new Server(network === 'testnet'?'https://horizon-testnet.stellar.org':'https://horizon.stellar.org');
+        const server = new Horizon.Server(network === 'testnet'?'https://horizon-testnet.stellar.org':'https://horizon.stellar.org');
         const account = await server.loadAccount(address);
         const txnBuilder = new TransactionBuilder(account, {fee:BASE_FEE, networkPassphrase: passpharase});
         for(let operation of operations){
+            console.log(operation);
+            console.log(operation.type);
+            console.log(operation.params);
             txnBuilder.addOperation(Operation[operation.type](operation.params))
         }
         console.log(txnBuilder);

diff --git a/site/src/lib/SorobanPage.svelte b/site/src/lib/SorobanPage.svelte
@@ -5,7 +5,6 @@
     import {snapId} from '../constants';
     import "brace/mode/javascript";
     import "brace/theme/chrome";
-    
     async function executeCode(){
         const total_code = (code+bottom_code);
         await eval(total_code)
@@ -24,31 +23,33 @@ async function callContract(address, method, args) {
       })
   console.log("get address result");
   console.log(sourcePublicKey);
-  const server = new SorobanClient.Server('https://soroban-testnet.stellar.org:443');
-
+  console.log("stellar sdk is");
+  console.log(StellarSdk);
+  const SorobanServer = new StellarSdk.SorobanRpc.Server('https://soroban-testnet.stellar.org:443');
+  const HorizonServer = new StellarSdk.Horizon.Server('https://horizon-testnet.stellar.org/');
   console.log("getting account")
-  const account = await server.getAccount(sourcePublicKey);
+  const account = await HorizonServer.loadAccount(sourcePublicKey);
   console.log("account is: ")
   console.log(account);
 
-  console.log(SorobanClient);
+  console.log(StellarSdk);
 
-  const contract = new SorobanClient.Contract(contractAddress)
+  const contract = new StellarSdk.Contract(contractAddress)
   console.log(contract)
-  _args = Array.from(_args.map(SorobanClient.nativeToScVal));
+  _args = Array.from(_args.map(StellarSdk.nativeToScVal));
 
   let call_operation = contract.call(methodName, ..._args);
   console.log(call_operation)
 
-  let transaction = new SorobanClient.TransactionBuilder(account, { fee: "150", networkPassphrase: SorobanClient.Networks.TESTNET })
+  let transaction = new StellarSdk.TransactionBuilder(account, { fee: "150", networkPassphrase: StellarSdk.Networks.TESTNET })
     .addOperation(call_operation) // <- funds and creates destinationA
     .setTimeout(30)
     .build();
 
   console.log(transaction)
 
     console.log("about to prepair transaction")
-    const preparedTransaction = await server.prepareTransaction(transaction, SorobanClient.Networks.TESTNET);
+    const preparedTransaction = await SorobanServer.prepareTransaction(transaction);
     console.log("prepairedTxn: ");
     console.log(preparedTransaction);
     const tx_XDR = preparedTransaction.toXDR();
@@ -71,11 +72,11 @@ async function callContract(address, method, args) {
   console.log("signed xdr is: ");
   console.log(signedXDR);
   
-    const signedTxn = new SorobanClient.TransactionBuilder.fromXDR(signedXDR, "Test SDF Network ; September 2015")
-    const transactionResult = await server.sendTransaction(signedTxn);
-    console.log(transactionResult.hash);
+    const signedTxn = new StellarSdk.TransactionBuilder.fromXDR(signedXDR, "Test SDF Network ; September 2015")
+    const transactionResult = await HorizonServer.submitTransaction(signedTxn);
+    console.log(transactionResult);
     async function getTransactionResult(hash, counter){
-      let output = await server.getTransaction(hash);
+      let output = await SorobanServer.getTransaction(hash);
       console.log("output is");
       console.log(output);
       if(output.status === 'SUCCESS'){
@@ -100,15 +101,15 @@ async function callContract(address, method, args) {
     const result = await getTransactionResult(transactionResult.hash, 0);
     console.log("final result is");
     console.log(result);
-    return SorobanClient.scValToNative(result.returnValue);
+    return StellarSdk.scValToNative(result.returnValue);
    
     
 }
 
 `
 let bottom_code = `
 async function main(){
-    const result = await callContract("CBR6NOFQEFCBGH63EUGTQ4356MROIBBP6EEITGPMJ23MIDX5RZNFUJPH", "hello", "world");
+    const result = await callContract("CCSQUO6HDFIQ2CBRUQLFYQNFILWB4VDJXVUW4YSXEJDNVUYJVKIGPJZW", "hello", "world");
     alert(result);
 }
 main();

diff --git a/site/src/lib/Wallet.svelte b/site/src/lib/Wallet.svelte
@@ -1,10 +1,25 @@
 <script>
     import {address} from '../store'
-    import {Card} from 'flowbite-svelte'
+    import {Card, Button} from 'flowbite-svelte'
+    import {snapId} from '../constants'
+    
+    async function fund(){
+        const fundResult = await window.ethereum.request({
+            method: 'wallet_invokeSnap',
+            params: {
+            snapId: snapId,
+            request: {
+                method: 'fund',
+            },
+            },
+        });
+    }
 </script>
 
 <div class="w-fit flex-col justify-start p-6 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
     <h2>Metamask Account</h2>
     {$address}
+    <br>
+    <Button on:click={fund}>Fund Wallet</Button>
 </div>
 <br/>
diff --git a/site/src/lib/WalletPage.svelte b/site/src/lib/WalletPage.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import FunctionContainer from "./functionContainer.svelte";
+    import {snapId} from '../constants';
+    import {testnet} from '../store';
+  import FunctionButton from "./functionButton.svelte";
+    function genreateCode(method:string, params:any){
+        return `
+        window.ethereum.request({
+        method: 'wallet_invokeSnap',
+        params: {
+            snapId: '${snapId}',
+            request: {
+            method: '${method}',
+            params: ${JSON.stringify(params)}
+            },
+        },
+        })
+        .then((result)=>alert(JSON.stringify(result)))
+        
+        `
+  }
+</script>
+
+<FunctionContainer method="listAccounts" code={genreateCode("listAccounts", {})} params={{}}>
+    <p slot="title">list the wallet Accounts</p>
+</FunctionContainer>
+<FunctionContainer method="setCurrentAccount" code={genreateCode("setCurrentAccount", {"address":"ADDRESS"})} params={{"address":"string"}}>
+    <p slot="title">set The currentAccount</p>
+</FunctionContainer>
+<FunctionContainer method="getCurrentAccount" code={genreateCode("getCurrentAccount", {})}>
+    <p slot="title">get the current Account</p>
+</FunctionContainer>
+<FunctionContainer method="importAccount" code={genreateCode("getCurrentAccount", {})} params={{"name":"string","privateKey":"string"}}>
+    <p slot="title">import An Account</p>
+</FunctionContainer>
+<FunctionContainer method="createAccount" code={genreateCode("getCurrentAccount", {})} params={{"name":"string"}}>
+    <p slot="title">Create A new Account</p>
+</FunctionContainer>
+<FunctionContainer method="renameAccount" code={genreateCode("getCurrentAccount", {})} params={{"address":"string","name":"string"}}>
+    <p slot="title">rename an Account</p>
+</FunctionContainer>
+<FunctionButton method="clearState">Clear All Accounts</FunctionButton>
diff --git a/site/src/lib/connectButton.svelte b/site/src/lib/connectButton.svelte
@@ -32,6 +32,8 @@
         }
         await callback()
         connected.set(true);
+
+        
         const metamask_address = await window.ethereum.request({
             method: 'wallet_invokeSnap',
             params: {