Web3Connnect button introduced

src/App.scss

@@ -1,9 +1,17 @@
+@font-face {
+  font-family: "PixterDisplayBold";
+  src: url('./fonts/PixterDisplayBold/font.woff2') format('woff2'), url('./fonts/PixterDisplayBold/font.woff') format('woff');
+}
+@font-face {
+  font-family: "PixterDisplay";
+  src: url('./fonts/PixterDisplay/font.woff2') format('woff2'), url('./fonts/PixterDisplay/font.woff') format('woff');
+}
+
 $primary: #ffffff;
 $danger: #ff4136;
 $body-color: #eee;
-@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300&family=VT323');
-$font-family-sans-serif: 'VT323', serif;
-$font-family-monospace: 'IBM Plex Mono', monospace;
+$font-family-sans-serif: 'PixterDisplay', serif;
+$font-family-monospace: 'PixterDisplay', monospace;
 
 $black:    #fff !default;
 $gray-900: #f8f9fa;

src/components/ethers/Web3ConnectStyledButton.js

@@ -0,0 +1,20 @@
+import React from "react";
+import { useConnectWallet } from "@web3-onboard/react";
+
+export default function Web3ConnectStyledButton(props) {
+  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();
+
+  return (
+    <div>
+      <button
+        className={`btn ${props.className} ${
+          connecting || wallet ? "btn-outline-dark" : "btn-outline-primary"
+        }`}
+        disabled={connecting}
+        onClick={() => (wallet ? disconnect(wallet) : connect())}
+      >
+        {connecting ? props.connectingLabel ?? "Connecting" : wallet ? props.disconnectLabel ?? "Disconnect" : props.connectLabel ?? "Connect Wallet"}
+      </button>
+    </div>
+  );
+}

src/data/ethersProvider.js

@@ -47,7 +47,7 @@ export const onboard = init({
     },
   ],
   appMetadata: {
-    name: "bOS",
+    name: "BOS",
     icon: '<svg width="30" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg" class="logotype"><path d="M9.55396 20.518L2 13.009L9.55396 5.5" stroke="#3D7FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path><path d="M19.536 5.5L27 13.009L19.536 20.518" stroke="#3D7FFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path></path></svg>',
     description: "Blockchain Operating System",
   },

src/data/near.js

@@ -63,7 +63,7 @@ export const MainNearConfig = {
     image: "mob.near/widget/Image",
     default: "ethden.near/widget/BosHomepage",
     viewSource: "mob.near/widget/WidgetSource",
-    widgetMetadataEditor: "mob.near/widget/WidgetMetadataEditor",
+    widgetMetadataEditor: "zavodil.near/widget/WidgetMetadataEditor",
     widgetMetadata: "mob.near/widget/WidgetMetadata",
     profileImage: "mob.near/widget/ProfileImage",
     notificationButton: "mob.near/widget/NotificationButton",
@@ -74,6 +74,7 @@ export const MainNearConfig = {
   },
   apiUrl: "https://api.near.social",
   finalSynchronizationDelayMs: 3000,
+  forcedTag: "ethdenver2023",
 };
 
 export const NearConfig = IsMainnet ? MainNearConfig : TestNearConfig;

src/pages/EditorPage.js

@@ -542,7 +542,7 @@ export default function EditorPage(props) {
                         setTab(Tab.Widget);
                       }}
                     >
-                      Widget Preview
+                      Preview
                     </button>
                   </li>
                 )}
@@ -632,6 +632,7 @@ export default function EditorPage(props) {
                       () => ({
                         widgetPath,
                         onChange: setMetadata,
+                        forcedTag: NearConfig.forcedTag
                       }),
                       [widgetPath]
                     )}

src/vm/vm.js

@@ -29,6 +29,7 @@ import BN from "bn.js";
 import * as nacl from "tweetnacl";
 import { ethers } from "ethers";
 import SecureIframe from "../components/SecureIframe";
+import Web3ConnectStyledButton from "../components/ethers/Web3ConnectStyledButton";
 
 const frozenNacl = Object.freeze({
   randomBytes: deepFreeze(nacl.randomBytes),
@@ -152,6 +153,7 @@ const ApprovedTagsCustom = {
   OverlayTrigger: true,
   Files: true,
   iframe: false,
+  Web3Connect: false
 };
 
 const ApprovedTags = {
@@ -529,6 +531,8 @@ class VmStack {
       return <Files {...attributes}>{children}</Files>;
     } else if (element === "iframe") {
       return <SecureIframe {...attributes} />;
+    } else if (element === "Web3Connect") {
+      return <Web3ConnectStyledButton {...attributes} />;
     } else if (styledComponent) {
       return React.createElement(
         styledComponent,