WIP

packages/snap/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/Montoya/slots-snap.git"
   },
   "source": {
-    "shasum": "VVxT5LvHf9iv8PpHCdG86UXguENWD22+MbiN3l5IHcc=",
+    "shasum": "1s4OpwU26OCravJiI6gH7c32e2qC3W68ubxZcaZD0H0=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/snap/src/index.tsx

@@ -1,5 +1,5 @@
-import type { OnHomePageHandler } from "@metamask/snaps-sdk";
-import { SnapComponent, Box, Text, Image, JsonObject } from '@metamask/snaps-sdk/jsx';
+import type { OnHomePageHandler, OnUserInputHandler } from "@metamask/snaps-sdk";
+import { SnapComponent, Box, Button, Image, Heading, Text } from '@metamask/snaps-sdk/jsx';
 
 const svgTitle = `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"><style>.sign{text-anchor:middle;dominant-baseline:middle;font-size:64px;font-weight:bold}</style><defs><linearGradient id="a" x1="0" y1="0" x2="0" y2="200" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#818181"/><stop offset=".24" stop-color="#b8b8b8"/><stop offset=".51" stop-color="#f3f3f3"/><stop offset=".86" stop-color="#b4b4b4"/><stop offset="1" stop-color="#666"/></linearGradient><filter id="c" x="-50%" y="-50%" width="200%" height="200%"><feComponentTransfer in="SourceAlpha"><feFuncA type="table" tableValues="1 0"/></feComponentTransfer><feGaussianBlur stdDeviation="4"/><feOffset dy="5" result="offsetblur"/><feFlood flood-color="#000" result="color"/><feComposite in2="offsetblur" operator="in"/><feComposite in2="SourceAlpha" operator="in"/><feMerge><feMergeNode in="SourceGraphic"/><feMergeNode/></feMerge></filter><filter id="g" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur stdDeviation="8 8" result="glow"/><feMerge><feMergeNode in="glow"/><feMergeNode in="glow"/><feMergeNode in="glow"/></feMerge></filter></defs><path fill="url(#a)" style="box-shadow:0 0 112px 168px inset rgba(0,0,0,.8)" d="M0 0h400v200H0z"/><rect fill="#334" filter="url(#c)" x="16" y="16" width="368" height="168"/><text x="200" y="62" class="sign" style="font-size:24px;font-weight:normal;font-family:'Comic Sans MS','Comic Sans',Charcoal,cursive" fill="white">Let's play...</text><text x="200" y="124" class="sign" fill="#ff8c00" filter="url(#g)">Slots</text><text x="200" y="124" class="sign" fill="white">Slots</text></svg>`; 
 
@@ -54,6 +54,12 @@ const svgArr = [
 </svg>`
 ];
 
+const reel = ['🦊','🍒','🍊','🍌','🍌','🍎','🍎']; 
+
+const getRandom = () => { 
+
+}
+
 type State = {
   balance: Number; 
   new: boolean; 
@@ -65,7 +71,7 @@ type SlotProps = {
   three: string; 
 }; 
 
-export const Slot: SnapComponent<SlotProps> = ({ one, two, three }) => {
+const Slot: SnapComponent<SlotProps> = ({ one, two, three }) => {
   return (
     <Image src={svgArr[0]+one+svgArr[1]+two+svgArr[2]+three+svgArr[3]}/>
   );
@@ -76,16 +82,68 @@ export const onHomePage: OnHomePageHandler = async () => {
     method: "snap_manageState",
     params: { operation: "get" },
   }) || { balance: 1000, new: true };
-  if(playerState.new) { 
-    return { content: (
-      <Box>
-        <Image src={svgTitle}/>
-      </Box>
-    ) }; 
+  const interfaceId = await snap.request({
+    method: "snap_createInterface",
+    params: {
+      ui: (
+        <Box>
+          <Image src={svgTitle}/>
+          <Button name={playerState.new ? "new" : "start"} variant="primary">Start</Button>
+        </Box>
+      )
+    },
+  }); 
+  return { 
+    id: interfaceId
   }
   return { content: (
     <Box>
       <Slot one="🦊" two="🍒" three="🍒"/>
     </Box>
   ) };
-};
+};
+
+export const onUserInput: OnUserInputHandler = async ({id, event}) => { 
+  const playerState = await snap.request({
+    method: "snap_manageState",
+    params: { operation: "get" },
+  }) || { balance: 1000, new: true };
+  switch (event.name) { 
+    case "new": 
+      snap.request({ 
+        method: "snap_updateInterface",
+        params: { 
+          id, 
+          ui: (
+            <Box>
+              <Heading>Welcome to Slots!</Heading>
+              <Text>In this game, you start with $1000 virtual dollars and bet on a slot machine to earn more. If you run out of money, you can reset and start again. Sounds fun, right? Let's play...</Text>
+              <Button name="startFresh">Continue</Button>
+            </Box>
+          )
+        }
+      }); 
+      break;
+    case "startFresh": 
+      playerState.new = false; 
+      await snap.request({
+        method: "snap_manageState",
+        params: { 
+          operation: "update",
+          newState: playerState,
+        },
+      });
+    case "start": 
+      snap.request({ 
+        method: "snap_updateInterface",
+        params: { 
+          id, 
+          ui: ( 
+            <Text>{"Hello, world! Balance: $"+playerState.balance}</Text>
+          )
+        }
+      }); 
+      setTimeout(() => { playerState.balance += 50; }, 500); 
+      break; 
+  }
+}; 

packages/snap/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "baseUrl": "./"
+    "baseUrl": "./",
+    "jsx": "react-jsxdev"
   },
   "include": ["**/*.ts", "**/*.tsx"]
-}
+}