start state

Montoya · Jun 12, 2024 · c1b71f9 · c1b71f9
1 parent 4de3f26
commit c1b71f9
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 34 deletions.
diff --git a/packages/snap/snap.manifest.json b/packages/snap/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/Montoya/slots-snap.git"
   },
   "source": {
-    "shasum": "DEwJgO0f1N86d+jjVHEllZey9W2gTePAswrtGqcuB8E=",
+    "shasum": "BpVex4pFtmK9KhV+TRoPl+FPECdtgh03ZUdRkM9u/nk=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
@@ -18,7 +18,8 @@
     }
   },
   "initialPermissions": {
-    "endowment:page-home": {}
+    "endowment:page-home": {},
+    "snap_manageState": {}
   },
   "manifestVersion": "0.1"
 }
diff --git a/packages/snap/src/index.tsx b/packages/snap/src/index.tsx
@@ -1,32 +1,10 @@
 import type { OnHomePageHandler } from "@metamask/snaps-sdk";
-import {Box, Text, Image } from '@metamask/snaps-sdk/jsx';
+import { SnapComponent, Box, Text, Image, JsonObject } from '@metamask/snaps-sdk/jsx';
 
-const svg = `
-<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"><style>.emoji{text-anchor:middle;dominant-baseline:middle;font-size:80px;}</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><linearGradient id="b" gradientTransform="rotate(90)"><stop offset="0" stop-color="#fff"/><stop offset="60%" stop-color="#444"/><stop offset="100%" stop-color="#fff"/></linearGradient><filter id="b" 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></defs><path fill="url(#a)" style="box-shadow:0 0 112px 168px inset rgba(0,0,0,.8)" d="M0 0h400v200H0z"/><path fill="#fff" filter="url(#b)" d="M16 16h112v168H16zm128 0h112v168H144zm128 0h112v168H272z"/>
-<text x="72" y="76" class="emoji" opacity="0">🦊
-  <animate 
-    attributeName="opacity" 
-    values="0.6;1" 
-    dur="0.15s" 
-    begin="2s" 
-    repeatCount="0" 
-    fill="freeze" />
-  <animate 
-    attributeName="y" 
-    values="76;114" 
-    dur="0.15s" 
-    begin="2s" 
-    repeatCount="0" 
-    fill="freeze" /></text>
-<rect x="16" y="-40" width="112" height="40" opacity="1" fill="url(#b)">
-  <animate
-      attributeName="y"
-      values="16;144"
-      dur="0.5s"
-      repeatCount="4" />
-</rect>
-<text x="200" y="76" class="emoji" opacity="0">🦊
-  <animate 
+const svgArr = [
+  `<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"><style>.emoji{text-anchor:middle;dominant-baseline:middle;font-size:80px;}</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><linearGradient id="b" gradientTransform="rotate(90)"><stop offset="0" stop-color="#fff"/><stop offset="60%" stop-color="#444"/><stop offset="100%" stop-color="#fff"/></linearGradient><filter id="b" 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></defs><path fill="url(#a)" style="box-shadow:0 0 112px 168px inset rgba(0,0,0,.8)" d="M0 0h400v200H0z"/><path fill="#fff" filter="url(#b)" d="M16 16h112v168H16zm128 0h112v168H144zm128 0h112v168H272z"/><text x="72" y="76" class="emoji" opacity="0">`,
+  `<animate attributeName="opacity" values="0.6;1" dur="0.15s" begin="2s" repeatCount="0" fill="freeze"/><animate attributeName="y" values="76;114" dur="0.15s" begin="2s" repeatCount="0" fill="freeze"/></text><rect x="16" y="-40" width="112" height="40" opacity="1" fill="url(#b)"><animate attributeName="y" values="16;144" dur="0.5s" repeatCount="4"/></rect><text x="200" y="76" class="emoji" opacity="0">`,
+  `<animate 
     attributeName="opacity" 
     values="0.6;1" 
     dur="0.15s" 
@@ -48,8 +26,8 @@ const svg = `
       dur="0.5s"
       repeatCount="6" />
 </rect>
-<text x="328" y="76" class="emoji" opacity="0">🦊
-<animate 
+<text x="328" y="76" class="emoji" opacity="0">`,
+  `<animate 
     attributeName="opacity" 
     values="0.6;1" 
     dur="0.15s" 
@@ -71,12 +49,34 @@ const svg = `
       dur="0.5s"
       repeatCount="9" />
 </rect>
-</svg>
-`; 
+</svg>`
+];
+
+type State = {
+  balance: Number; 
+};
+
+type SlotProps = { 
+  one: string;
+  two: string;
+  three: string; 
+}; 
+
+export const Slot: SnapComponent<SlotProps> = ({ one, two, three }) => {
+  return (
+    <Image src={svgArr[0]+one+svgArr[1]+two+svgArr[2]+three+svgArr[3]}/>
+  );
+};
+
 export const onHomePage: OnHomePageHandler = async () => {
+  // At a later time, get the stored data.
+  const persistedData = await snap.request({
+    method: "snap_manageState",
+    params: { operation: "get" },
+  }) || { balance: 0 };
   return { content: (
     <Box>
-      <Image src={svg}/>
+      <Slot one="🦊" two="🍒" three="🍒"/>
     </Box>
   ) };
 };