Merge pull request #44 from metastellar-io/main

Docs update
paulfears · Jul 12, 2024 · ba55326 · ba55326
2 parents f7f7992 + e42f3fa
commit ba55326
Show file tree

Hide file tree

Showing 16 changed files with 959 additions and 514 deletions.
diff --git a/docs/README.md b/docs/README.md
diff --git a/docs/index.html b/docs/index.html
@@ -7,21 +7,51 @@
   <meta name="description" content="Description">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
   <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/stellar-sdk/12.1.0/stellar-sdk.js"></script>
 </head>
 <body>
   <div id="app"></div>
   <script>
     window.$docsify = {
       name: '',
       repo: '',
-      executeScript: true
+      executeScript: true,
+
     }
   </script>
   <!-- Docsify v4 -->
   <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
+  <script src="./typescriptHighlight.js"></script>
+  <!-- docsify-plugin-runkit (latest v1.x.x) -->
+  <script src="https://cdn.jsdelivr.net/npm/docsify-plugin-runkit@1"></script>
   <style>
 
+    .comment{
+      color: rgb(255, 251, 2);
+    }
+
+    .builtin{
+      color: #83C5DB;
+    }
+
+    .keywords{
+      color:  #006D77;
+    }
+
+    .interpolation{
+      color: #F4A261;
+    }
 
+    .function{
+      color: #83C5DB;
+    }
+    .class-name{
+      color: #CDB4DB;
+    }
+    .internalType{
+      color: #CDB4DB;
+      cursor:pointer;
+    }
 
     .spacer{
       display: flex;
@@ -43,11 +73,16 @@
       font-size: 16px;
 
     }
+    i{
+      color:#83C5DB;
+    }
+
     button:hover {
           transition: all .2s ease;
           background: #da4601;
       }
 
   </style>
+
 </body>
 </html>
diff --git a/docs/typescriptHighlight.js b/docs/typescriptHighlight.js
@@ -0,0 +1,79 @@
+(function (Prism) {
+
+	Prism.languages.typescript = Prism.languages.extend('javascript', {
+        'internalType': /walletAsset|NativeBalance|DataPacket|AssetBalance/,
+		'keywords': {
+			pattern: /(\b(?:class|extends|implements|instanceof|interface|new|type)\s+)(?!keyof\b)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?:\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>)?|(?<=\n).*?(?=:)/,
+			lookbehind: true,
+			greedy: true,
+			inside: null // see below
+		},
+		'builtin': /\b(?:Array|Function|Promise|any|boolean|console|never|number|string|symbol|unknown|String)\b/,
+
+
+	});
+
+	// The keywords TypeScript adds to JavaScript
+	Prism.languages.typescript.keyword.push(
+		/\b(?:abstract|declare|is|keyof|readonly|require)\b/,
+		// keywords that have to be followed by an identifier
+		/\b(?:asserts|infer|interface|module|namespace|type)\b(?=\s*(?:[{_$a-zA-Z\xA0-\uFFFF]|$))/,
+		// This is for `import type *, {}`
+		/\btype\b(?=\s*(?:[\{*]|$))/,
+
+	);
+
+	// doesn't work with TS because TS is too complex
+	delete Prism.languages.typescript['parameter'];
+	delete Prism.languages.typescript['literal-property'];
+
+	// a version of typescript specifically for highlighting types
+	var typeInside = Prism.languages.extend('typescript', {});
+	delete typeInside['class-name'];
+
+	Prism.languages.typescript['class-name'].inside = typeInside;
+
+	Prism.languages.insertBefore('typescript', 'function', {
+		'decorator': {
+			pattern: /@[$\w\xA0-\uFFFF]+/,
+			inside: {
+				'at': {
+					pattern: /^@/,
+					alias: 'operator'
+				},
+				'function': /^[\s\S]+/
+			}
+		},
+		'generic-function': {
+			// e.g. foo<T extends "bar" | "baz">( ...
+			pattern: /#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*<(?:[^<>]|<(?:[^<>]|<[^<>]*>)*>)*>(?=\s*\()/,
+			greedy: true,
+			inside: {
+				'function': /^#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*/,
+				'generic': {
+					pattern: /<[\s\S]+/, // everything after the first <
+					alias: 'class-name',
+					inside: typeInside
+				}
+			}
+		}
+	});
+
+	Prism.languages.ts = Prism.languages.typescript;
+    (function (){
+        let typelinks = [...document.getElementsByClassName('token internalType')];
+        console.log("typelinks");
+        console.log(typelinks);
+        console.log("typelinks.length");
+        console.log(typelinks.length);
+        for (let i = 0; i < typelinks.length; i++) {
+            console.log("typelinks[i]");
+            console.log(typelinks[i]);
+            let type = typelinks[i].innerText;
+            console.log(type);
+            typelinks[i].innerHTML = `<a href="/#/?id=${type}">${type}</a>`;
+        }
+    }());
+
+}(Prism));
+
diff --git a/faq/.nojekyll b/faq/.nojekyll
diff --git a/faq/README.md b/faq/README.md
@@ -0,0 +1,100 @@
+# Metastellar FAQ
+Please See if your question is anwsered by the FAQ
+
+
+
+<div style="width:50%; height:0; padding-bottom:100%; position:relative;"><div style="width:100%;height:0;padding-bottom:100%;position:relative;"><iframe src="https://giphy.com/embed/XZyZJCtQHo7dPGWjG2" width="100%" height="100%" style="position:absolute" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div><p><a href="https://giphy.com/gifs/netflix-duncan-trussell-midnight-gospel-the-XZyZJCtQHo7dPGWjG2">via GIPHY</a></p>
+</div>
+
+
+# MetaStellar Wallet
+
+[github](https://github.com/paulfears/StellarSnap) [discord](https://discord.gg/ETQk4UcYyc)
+
+Metastellar wallet is a Stellar wallet for Metamask. This allows you to interact with the stellar blockchain and hold XLM with Metamask.
+Metastellar can hold your XLM, stellar, and stellar assets, as well as interact with stellar web3 applications. At the current time, <b>we do not recommend using metastellar as your primary stellar wallet</b>, but my team and I are constantly working to improve the wallet. If you are having a problem, with the wallet please contact
+
+ <b>support@metastellar.io</b>
+
+and we will work to get it resolved. This is open-source software and is provided as-is. We are not responsible for anything loss of funds that results from the use or misuse of this software.
+
+------------------------------------------- 
+
+## Install
+
+to install the Stellar-Snap
+
+1. Make sure you have the latest version of the <b>Metamask Browser extension</b>, it can be installed [here](https://metamask.io/download/)
+2. After metamask is installed
+
+<button id="installButton">Install MetaStellar</button>
+
+<br>
+<div class="appearOnConnected">
+<p>You can test you're installation with</p>
+<br>
+<button id="viewAddress">Test Install</button>
+</div>
+
+<div class="spacer"></div>
+
+
+<script>
+    console.log("script live");
+let metastellarButton = document.getElementById("installButton");
+metastellarButton.addEventListener('click', async ()=>await connectSnap());
+
+let viewAddress = document.getElementById('viewAddress');
+viewAddress.addEventListener('click', async ()=>await displayAddress());
+
+function setConnected(connected){
+    let display = connected? 'block' : 'none'
+    let elements = document.getElementsByClassName('appearOnConnected');
+    for(let i = 0; i<elements.length; i++){
+        elements[i].style.display = display
+    }
+}
+
+setConnected(false);
+
+async function connectSnap(){
+    try{
+        console.log("here")
+        const connected = await ethereum.request({
+        method: 'wallet_requestSnaps',
+        params: {
+            ['npm:stellar-snap']: {}
+        },
+        });
+        console.log(connected)
+        setConnected(true)
+        return true;
+    }catch(e){
+        if (e.toString() === "ReferenceError: ethereum is not defined"){
+            alert("Install Metamask")
+        }
+        alert(e);
+        setConnected(false);
+        return false;
+    }
+}
+
+
+async function displayAddress(){
+    try{
+    const request = {
+        method: 'wallet_invokeSnap',
+        params: {snapId:`npm:stellar-snap`, 
+            request:{
+                method: `${'showAddress'}`
+            }
+            }
+        }
+    let address = await ethereum.request(request);
+    }
+    catch(e){
+        alert(e);
+    }
+}
+
+</script>
diff --git a/faq/index.html b/faq/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+  <meta name="description" content="Description">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
+  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script>
+    window.$docsify = {
+      name: 'Metastellar FAQ',
+      repo: '',
+      executeScript: true,
+    }
+  </script>
+  <!-- Docsify v4 -->
+  <script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
+  <style>
+
+
+
+    .spacer{
+      display: flex;
+      height: 15vh;
+      width:100%;
+    }
+
+    button{
+      display: inline-block;
+      outline: none;
+      cursor: pointer;
+      font-weight: 600;
+      border-radius: 3px;
+      padding: 12px 24px;
+      border: 0;
+      color: #fff;
+      background: #ff5000;
+      line-height: 1.15;
+      font-size: 16px;
+
+    }
+    button:hover {
+          transition: all .2s ease;
+          background: #da4601;
+      }
+
+  </style>
+</body>
+</html>
diff --git a/postBuild.js b/postBuild.js
@@ -24,6 +24,11 @@ Access-Control-Allow-Origin = "*"
           console.error(err);
         }
     });
+    await fs.cp('./faq', './site_dist/docs', { recursive: true }, (err) => {
+        if (err) {
+          console.error(err);
+        }
+    });
     console.log("post processing complete");
 }
 

diff --git a/site/src/constants.ts b/site/src/constants.ts
@@ -1 +1 @@
-export const snapId = import.meta.env.DEV? "local:http://localhost:8080/" : "npm:stellar-snap"
+export const snapId = "npm:stellar-snap"
diff --git a/site_dist/assets/index-c10310fa.js → site_dist/assets/index-206b660c.js b/site_dist/assets/index-c10310fa.js → site_dist/assets/index-206b660c.js
diff --git a/site_dist/assets/index-27c2ae45.css b/site_dist/assets/index-27c2ae45.css
diff --git a/site_dist/assets/index-3239fb55.css b/site_dist/assets/index-3239fb55.css