@@ -782,6 +782,40 @@ <h3>Concepts</h3>
782782 </ div >
783783</ div >
784784
785+ < div class ="top-hr ">
786+ < div class ="hr ">
787+ < h2 style ="text-align: left "> Try Auth!</ h2 >
788+ </ div >
789+ </ div >
790+
791+ < div style ="margin-top: 1rem; margin-bottom: 1rem "id ="authsandpack "> </ div >
792+
793+ < div class ="top-hr ">
794+ < div class ="hr ">
795+ < h2 style ="text-align: left "> Try Gasless!</ h2 >
796+ </ div >
797+ </ div >
798+
799+ < div style ="margin-top: 1rem; margin-bottom: 1rem " id ="gaslesssandpack "> </ div >
800+
801+ < div class ="top-hr ">
802+ < div class ="hr ">
803+ < h2 style ="text-align: left "> Share Your Feedback</ h2 >
804+ </ div >
805+ </ div >
806+
807+ < div class ="top-hr ">
808+ < div class ="hr ">
809+ < i > 👋 Hi there!</ i >
810+ </ div >
811+ </ div >
812+ < div class ="top-hr ">
813+ < div class ="hr ">
814+ < i > How was your experience with Arcana Auth and/or Gasless SDKs?</ i >
815+ < b > < a href ="{{ config.site_url }}/support/ "> Let us know...</ a > </ b >
816+ </ div >
817+ </ div >
818+
785819{% include "partials/content.html" %}
786820
787821{% endblock %}
@@ -806,6 +840,187 @@ <h3>Concepts</h3>
806840 </script>
807841 --->
808842
843+ <!--
844+ Sandpack PoC
845+ -->
846+ < script type ="importmap ">
847+ {
848+ "imports" : {
849+ "react" : "https://esm.sh/react@18.2.0" ,
850+ "react-dom" : "https://esm.sh/react-dom@18.2.0" ,
851+ "react-dom/" : "https://esm.sh/react-dom@18.2.0/" ,
852+ "@codesandbox/sandpack-react" : "https://esm.sh/@codesandbox/sandpack-react@2.8.0"
853+ }
854+ }
855+ </ script >
856+
857+ < script type ="module ">
858+ import React from "react" ;
859+ import { createRoot } from "react-dom/client" ;
860+ import { Sandpack } from "@codesandbox/sandpack-react" ;
861+
862+ const authsandpack = createRoot ( document . getElementById ( "authsandpack" ) ) ;
863+ const gaslesssandpack = createRoot ( document . getElementById ( "gaslesssandpack" ) ) ;
864+
865+ let themeType ;
866+ let currentTheme ;
867+ let updateSP ;
868+
869+ // Current Theme check
870+ const startCurrentTheme = document . body . getAttribute ( "data-md-color-scheme" ) ;
871+
872+ if ( startCurrentTheme === "slate" ) {
873+ themeType = "dark" ;
874+ }
875+ //const {sPtheme, setsPTheme} = useState('light');
876+ /*
877+ const watchMedia = window.matchMedia("(data-md-color-scheme: "slate")");
878+ let themetype;
879+
880+ function getTheme(e) {
881+ if (e.matches)
882+ themetype = "dark";
883+ else
884+ themetype = "default";
885+ }
886+ watchMedia.addEventListener("change", getTheme);
887+ */
888+
889+ /*
890+ const prefersDarkMode = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
891+ const themetype = prefersDarkMode ? "dark" : "light";
892+ */
893+
894+ //Try Observer method
895+
896+ // Select the node that will be observed for mutations
897+ const targetNode = document . body ;
898+
899+ // Options for the observer (which mutations to observe)
900+ const config = { attributes : true , childList : false , subtree : false } ;
901+
902+ // Callback function to execute when mutations are observed
903+ const callback = ( mutationList , observer ) => {
904+ for ( const mutation of mutationList ) {
905+ if ( mutation . type === "attributes" && mutation . attributeName === "data-md-color-scheme" ) {
906+ console . log ( `The ${ mutation . attributeName } ) ;
907+ console . log ( "Mutation:" , mutation ) ;
908+
909+ const currentTheme = document . body . getAttribute ( "data-md-color-scheme" ) ;
910+ console . log ( "Current theme:" , currentTheme ) ;
911+
912+ // Determine theme type based on current theme
913+ if ( currentTheme === "slate" ) {
914+ themeType = "dark" ;
915+ } else if ( currentTheme === "default" ) {
916+ themeType = "light" ;
917+ }
918+ console . log ( "Theme type:" , themeType ) ;
919+ }
920+ }
921+ } ;
922+
923+ // Create an observer instance linked to the callback function
924+ const observer = new MutationObserver ( callback ) ;
925+
926+ // Start observing the target node for configured mutations
927+ observer . observe ( targetNode , config ) ;
928+
929+ window . onbeforeunload = function ( ) {
930+ // Later, you can stop observing
931+ observer . disconnect ( ) ;
932+ return 'The observer is now disconnected!' ;
933+ } ;
934+
935+ function fetchAndStoreFiles ( fileUrls , targetObject ) {
936+ const filePromises = fileUrls . map ( url => {
937+ return fetch ( url )
938+ . then ( response => {
939+ if ( ! response . ok ) {
940+ throw new Error ( `Failed to fetch ${ url } ) ;
941+ }
942+ return response . text ( ) ;
943+ } )
944+ . then ( data => {
945+ const fileName = url . substring ( url . lastIndexOf ( '/' ) + 1 ) ;
946+ targetObject [ `/${ fileName } ] = data ;
947+ } ) ;
948+ } ) ;
949+
950+ return Promise . all ( filePromises ) ;
951+ }
952+
953+ function renderSandpack ( template , theme , files , sandpackInstance ) {
954+ const sandpackComponent = React . createElement (
955+ Sandpack ,
956+ {
957+ template,
958+ customSetup : {
959+ dependencies : {
960+ "dotenv" : "^16.3.1" ,
961+ "parcel" : "^2.9.3"
962+ }
963+ } ,
964+ theme,
965+ options : {
966+ showNavigator : true ,
967+ showTabs : true ,
968+ showConsole : true ,
969+ showConsoleButton : true ,
970+ externalResources : [
971+ "https://cdn.jsdelivr.net/npm/@arcana/auth" ,
972+ "https://cdnjs.cloudflare.com/ajax/libs/ethers/5.7.2/ethers.umd.min.js" ,
973+ "https://unpkg.com/@arcana/scw@0.0.30/dist/standalone/scw.umd.js" ,
974+ //"https://cdn.jsdelivr.net/npm/@arcana/scw",
975+ ] ,
976+ editorHeight : '95vh' ,
977+ autoReload : true ,
978+ initMode : "user-visible" ,
979+ resizablePanels : true ,
980+ } ,
981+ files,
982+ } ,
983+ null
984+ ) ;
985+ sandpackInstance . render ( sandpackComponent ) ;
986+ }
987+
988+ const fileUrls = [
989+ 'https://raw.githubusercontent.com/arcana-network/sandpack-examples/main/auth/index.html' ,
990+ 'https://raw.githubusercontent.com/arcana-network/sandpack-examples/main/auth/index.js' ,
991+ 'https://raw.githubusercontent.com/arcana-network/sandpack-examples/main/auth/styles.css' ,
992+ // 'https://raw.githubusercontent.com/arcana-network/sandpack-examples/main/auth/package.json',
993+ ] ;
994+ //../sandpack/auth/index.html
995+ const files = { } ;
996+ fetchAndStoreFiles ( fileUrls , files )
997+ . then ( ( ) => {
998+ console . log ( 'Sandpack files:' , files ) ;
999+ renderSandpack ( 'vanilla' , themeType , files , authsandpack ) ;
1000+ } )
1001+ . catch ( error => {
1002+ console . error ( 'Error loading sample files:' , error ) ;
1003+ } ) ;
1004+
1005+ const gaslessFileUrls = [
1006+ 'https://raw.githubusercontent.com/arcana-network/sandpack-examples/main/gl/index.html' ,
1007+ 'https://raw.githubusercontent.com/arcana-network/sandpack-examples/main/gl/index.js' ,
1008+ 'https://raw.githubusercontent.com/arcana-network/sandpack-examples/main/gl/styles.css' ,
1009+ 'https://raw.githubusercontent.com/arcana-network/sandpack-examples/main/gl/myerc20.js' ,
1010+ ] ;
1011+
1012+ const glFiles = { } ;
1013+ fetchAndStoreFiles ( gaslessFileUrls , glFiles )
1014+ . then ( ( ) => {
1015+ console . log ( 'Gasless Sandpack files:' , glFiles ) ;
1016+ renderSandpack ( 'vanilla' , themeType , glFiles , gaslesssandpack ) ;
1017+ } )
1018+ . catch ( error => {
1019+ console . error ( 'Error loading gasless sample files:' , error ) ;
1020+ } ) ;
1021+
1022+ </ script >
1023+
8091024 <!-- Chatbase bot script -->
8101025 < script >
8111026 window . chatbaseConfig = {
0 commit comments