diff --git a/bsconfig.json b/bsconfig.json
index 07c8573..e4e9c95 100644
--- a/bsconfig.json
+++ b/bsconfig.json
@@ -25,9 +25,9 @@
   ],
   "ppx-flags": [
     "bs-let/ppx",
-    "decco/ppx",
     "rescript-logger/ppx",
-    "@reasonml-community/graphql-ppx/ppx"
+    "@reasonml-community/graphql-ppx/ppx",
+    "@greenlabs/ppx-spice/ppx"
   ],
   "jsx": {
     "version": 4,
@@ -46,9 +46,9 @@
     "bs-css-emotion",
     "@glennsl/rescript-fetch",
     "bs-moment",
-    "decco",
     "reason-promise",
     "rescript-classnames",
+    "@greenlabs/ppx-spice",
     "rescript-logger",
     "@glennsl/bs-jest",
     "@reasonml-community/graphql-ppx",
diff --git a/package.json b/package.json
index 15acc0b..7474308 100644
--- a/package.json
+++ b/package.json
@@ -72,11 +72,11 @@
     "next-start": "next start",
     "start": "npm run res:build && REACT_APP_NETWORK=\"TEST\" react-scripts start",
     "build-js-only": "EXTEND_ESLINT=true REACT_APP_MAINNET_BE=https://api.wildcards.world/v1/graphql REACT_APP_GOERLI_BE=https://goerli.api.wildcards.world/v1/graphql react-scripts build --verbose",
-    "build": "npm run res:build && npm run build-js-only",
+    "build": "npm run res:build && npm run react-scripts build --verbose",
     "test": "react-scripts test",
     "lint": "eslint src",
     "res:clean": "rescript clean -with-deps",
-    "res:build": "res:clean; rescript build",
+    "res:build": "npm run res:clean; rescript build",
     "res:start": "RES_LOG=* rescript build -w",
     "generate-ppx-schema": "get-graphql-schema https://api.wildcards.world/v1/graphql -j >| graphql_schema.json",
     "generate-ppx-schema-goerli": "get-graphql-schema https://api.wildcards.world/v1/graphql -j >| graphql_schema.json",
@@ -107,6 +107,7 @@
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "@babel/plugin-transform-modules-commonjs": "^7.12.1",
     "@glennsl/bs-jest": "^0.6.0",
+    "@greenlabs/ppx-spice": "^0.1.14",
     "@reasonml-community/graphql-ppx": "^1.2.3",
     "babel-plugin-styled-components": "^1.12.0",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
diff --git a/src/components/Dapp.bs.js b/src/components/Dapp.bs.js
index fc47d97..4bd88b3 100644
--- a/src/components/Dapp.bs.js
+++ b/src/components/Dapp.bs.js
@@ -35,7 +35,6 @@ import * as UpdateDeposit from "../harberger-lib/components/UpdateDeposit.bs.js"
 import * as UsdPriceProvider from "../harberger-lib/components/UsdPriceProvider.bs.js";
 import * as LazyThreeBoxUpdate from "./LazyThreeBoxUpdate.bs.js";
 import * as RescriptReactRouter from "@rescript/react/src/RescriptReactRouter.bs.js";
-import * as Browser$ReScriptLogger from "rescript-logger/src/loggers/Browser.bs.js";
 import ReactCarousel from "@wildcards/react-carousel";
 import ShareSocialMediaJs from "./components/shareSocialMedia.js";
 
@@ -682,18 +681,6 @@ var DetailsViewAnimal = {
 
 function Dapp$DetailsView(props) {
   var optionAnimal = props.optionAnimal;
-  Browser$ReScriptLogger.info1({
-        rootModule: "Dapp",
-        subModulePath: {
-          hd: "DetailsView",
-          tl: /* [] */0
-        },
-        value: "make",
-        fullPath: "Dapp.DetailsView.make"
-      }, "optionAnimal", [
-        "a",
-        optionAnimal
-      ]);
   if (optionAnimal !== undefined) {
     return React.createElement(Dapp$DetailsViewAnimal, {
                 chain: props.chain,
@@ -784,18 +771,6 @@ function Dapp$DefaultLook(props) {
                 }));
         break;
     case 2 :
-        Browser$ReScriptLogger.info1({
-              rootModule: "Dapp",
-              subModulePath: {
-                hd: "DefaultLook",
-                tl: /* [] */0
-              },
-              value: "make",
-              fullPath: "Dapp.DefaultLook.make"
-            }, "the animalString", [
-              "a",
-              animalStr
-            ]);
         var optionAnimal = TokenId.make(animalStr);
         var chain = Belt_Option.mapWithDefault(optionAnimal, /* MainnetQuery */2, Animal.getChainIdFromAnimalId);
         tmp = React.createElement(Dapp$DetailsView, {
diff --git a/src/components/OrgProfile.bs.js b/src/components/OrgProfile.bs.js
index 9d580ed..f792404 100644
--- a/src/components/OrgProfile.bs.js
+++ b/src/components/OrgProfile.bs.js
@@ -4,7 +4,7 @@ import * as Css from "bs-css-emotion/src/Css.bs.js";
 import * as CnRe from "rescript-classnames/src/CnRe.bs.js";
 import * as CssJs from "bs-css-emotion/src/CssJs.bs.js";
 import * as Curry from "rescript/lib/es6/curry.js";
-import * as Decco from "decco/src/Decco.bs.js";
+import * as Spice from "@greenlabs/ppx-spice/src/rescript/Spice.bs.js";
 import * as React from "react";
 import * as Animal from "../harberger-lib/Animal.bs.js";
 import * as Styles from "../Styles.bs.js";
@@ -25,7 +25,7 @@ import ReactResponsiveCarousel from "react-responsive-carousel";
 import YoutubeVideoJs from "./StaticContent//YoutubeVideo.js";
 
 function orgDescriptionArray_decode(v) {
-  return Decco.arrayFromJson(Decco.stringFromJson, v);
+  return Spice.arrayFromJson(Spice.stringFromJson, v);
 }
 
 var make = YoutubeVideoJs;
@@ -239,7 +239,7 @@ function OrgProfile$OrgPage(props) {
   var orgId = props.orgId;
   var orgData = props.orgData;
   var orgName = orgData.name;
-  var orgDescription = Decco.arrayFromJson(Decco.stringFromJson, orgData.description);
+  var orgDescription = Spice.arrayFromJson(Spice.stringFromJson, orgData.description);
   var orgAnimals = orgData.wildcard;
   var orgComingSoon = orgData.unlaunched;
   var selectedComingSoonAnimal = Belt_Option.flatMap(props.selectedWildcardKey, (function (wildcardKey) {
diff --git a/src/components/OrgProfile.res b/src/components/OrgProfile.res
index cc66d78..482fd99 100644
--- a/src/components/OrgProfile.res
+++ b/src/components/OrgProfile.res
@@ -1,4 +1,4 @@
-@decco.decode
+@spice.decode
 type orgDescriptionArray = array<string>
 
 module YoutubeVid = {
diff --git a/src/harberger-lib/QlHooks.bs.js b/src/harberger-lib/QlHooks.bs.js
index bd4fb26..53ae52f 100644
--- a/src/harberger-lib/QlHooks.bs.js
+++ b/src/harberger-lib/QlHooks.bs.js
@@ -1,7 +1,7 @@
 // Generated by ReScript, PLEASE EDIT WITH CARE
 
 import * as Curry from "rescript/lib/es6/curry.js";
-import * as Decco from "decco/src/Decco.bs.js";
+import * as Spice from "@greenlabs/ppx-spice/src/rescript/Spice.bs.js";
 import BnJs from "bn.js";
 import * as React from "react";
 import * as Helper from "./Helper.bs.js";
@@ -1890,13 +1890,13 @@ function useDetailsPageNextPrevious(currentToken) {
 }
 
 function animalDescription_decode(v) {
-  return Decco.arrayFromJson(Decco.stringFromJson, v);
+  return Spice.arrayFromJson(Spice.stringFromJson, v);
 }
 
 function useWildcardDescription(tokenId) {
   var match = useWildcardDataQuery(tokenId);
   if (match !== undefined) {
-    return Belt_Result.mapWithDefault(Decco.arrayFromJson(Decco.stringFromJson, match.wildcard.description), undefined, (function (descriptionArray) {
+    return Belt_Result.mapWithDefault(Spice.arrayFromJson(Spice.stringFromJson, match.wildcard.description), undefined, (function (descriptionArray) {
                   return descriptionArray;
                 }));
   }
diff --git a/src/harberger-lib/QlHooks.res b/src/harberger-lib/QlHooks.res
index 4e84423..4ab326e 100644
--- a/src/harberger-lib/QlHooks.res
+++ b/src/harberger-lib/QlHooks.res
@@ -360,7 +360,7 @@ let useDetailsPageNextPrevious = (currentToken: TokenId.t) => {
   )
 }
 
-@decco.decode
+@spice.decode
 type animalDescription = array<string>
 let useWildcardDescription = tokenId =>
   switch useWildcardDataQuery(tokenId) {
diff --git a/src/harberger-lib/components/UsdPriceProvider.bs.js b/src/harberger-lib/components/UsdPriceProvider.bs.js
index 08d5acb..7ab2d8e 100644
--- a/src/harberger-lib/components/UsdPriceProvider.bs.js
+++ b/src/harberger-lib/components/UsdPriceProvider.bs.js
@@ -2,7 +2,7 @@
 
 import * as Async from "../Async.bs.js";
 import * as Curry from "rescript/lib/es6/curry.js";
-import * as Decco from "decco/src/Decco.bs.js";
+import * as Spice from "@greenlabs/ppx-spice/src/rescript/Spice.bs.js";
 import * as React from "react";
 import * as Globals from "../Globals.bs.js";
 import * as Js_dict from "rescript/lib/es6/js_dict.js";
@@ -33,21 +33,22 @@ function c(param) {
 }
 
 function price_encode(v) {
-  return Js_dict.fromArray([[
-                "c",
-                Decco.arrayToJson(Decco.stringToJson, v.c)
-              ]]);
+  return Js_dict.fromArray(Spice.filterOptional([[
+                    "c",
+                    false,
+                    Spice.arrayToJson(Spice.stringToJson, v.c)
+                  ]]));
 }
 
 function price_decode(v) {
   var dict = Js_json.classify(v);
   if (typeof dict === "number") {
-    return Decco.error(undefined, "Not an object", v);
+    return Spice.error(undefined, "Not an object", v);
   }
   if (dict.TAG !== /* JSONObject */2) {
-    return Decco.error(undefined, "Not an object", v);
+    return Spice.error(undefined, "Not an object", v);
   }
-  var c = Decco.arrayFromJson(Decco.stringFromJson, Belt_Option.getWithDefault(Js_dict.get(dict._0, "c"), null));
+  var c = Spice.arrayFromJson(Spice.stringFromJson, Belt_Option.getWithDefault(Js_dict.get(dict._0, "c"), null));
   if (c.TAG === /* Ok */0) {
     return {
             TAG: /* Ok */0,
@@ -72,21 +73,22 @@ function ethUsd(param) {
 }
 
 function ethUsdPrice_encode(v) {
-  return Js_dict.fromArray([[
-                "XETHZUSD",
-                Decco.optionToJson(price_encode, v.ethUsd)
-              ]]);
+  return Js_dict.fromArray(Spice.filterOptional([[
+                    "XETHZUSD",
+                    false,
+                    Spice.optionToJson(price_encode, v.ethUsd)
+                  ]]));
 }
 
 function ethUsdPrice_decode(v) {
   var dict = Js_json.classify(v);
   if (typeof dict === "number") {
-    return Decco.error(undefined, "Not an object", v);
+    return Spice.error(undefined, "Not an object", v);
   }
   if (dict.TAG !== /* JSONObject */2) {
-    return Decco.error(undefined, "Not an object", v);
+    return Spice.error(undefined, "Not an object", v);
   }
-  var ethUsd = Decco.optionFromJson(price_decode, Belt_Option.getWithDefault(Js_dict.get(dict._0, "XETHZUSD"), null));
+  var ethUsd = Spice.optionFromJson(price_decode, Belt_Option.getWithDefault(Js_dict.get(dict._0, "XETHZUSD"), null));
   if (ethUsd.TAG === /* Ok */0) {
     return {
             TAG: /* Ok */0,
@@ -111,21 +113,22 @@ function result(param) {
 }
 
 function krakenPriceResponse_encode(v) {
-  return Js_dict.fromArray([[
-                "result",
-                Decco.optionToJson(ethUsdPrice_encode, v.result)
-              ]]);
+  return Js_dict.fromArray(Spice.filterOptional([[
+                    "result",
+                    false,
+                    Spice.optionToJson(ethUsdPrice_encode, v.result)
+                  ]]));
 }
 
 function krakenPriceResponse_decode(v) {
   var dict = Js_json.classify(v);
   if (typeof dict === "number") {
-    return Decco.error(undefined, "Not an object", v);
+    return Spice.error(undefined, "Not an object", v);
   }
   if (dict.TAG !== /* JSONObject */2) {
-    return Decco.error(undefined, "Not an object", v);
+    return Spice.error(undefined, "Not an object", v);
   }
-  var result = Decco.optionFromJson(ethUsdPrice_decode, Belt_Option.getWithDefault(Js_dict.get(dict._0, "result"), null));
+  var result = Spice.optionFromJson(ethUsdPrice_decode, Belt_Option.getWithDefault(Js_dict.get(dict._0, "result"), null));
   if (result.TAG === /* Ok */0) {
     return {
             TAG: /* Ok */0,
diff --git a/src/harberger-lib/components/UsdPriceProvider.res b/src/harberger-lib/components/UsdPriceProvider.res
index 7ef17a7..1935506 100644
--- a/src/harberger-lib/components/UsdPriceProvider.res
+++ b/src/harberger-lib/components/UsdPriceProvider.res
@@ -17,14 +17,14 @@ module PriceProvider = {
     }
 }
 
-@decco @deriving(accessors)
+@spice @deriving(accessors)
 type price = {c: array<string>}
-@decco @deriving(accessors)
+@spice @deriving(accessors)
 type ethUsdPrice = {
-  @decco.key("XETHZUSD")
+  @spice.key("XETHZUSD")
   ethUsd: option<price>,
 }
-@decco @deriving(accessors)
+@spice @deriving(accessors)
 type krakenPriceResponse = {result: option<ethUsdPrice>}
 
 let getPrice = () => {
diff --git a/yarn.lock b/yarn.lock
index 36056d7..e3bf02d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3218,6 +3218,11 @@
   resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
   integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==
 
+"@greenlabs/ppx-spice@^0.1.14":
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/@greenlabs/ppx-spice/-/ppx-spice-0.1.14.tgz#0c531452233c5f55e5c631d13d22f86660cd1c32"
+  integrity sha512-2zP5E3+yWCRwYkvOl1A/VoRC1ixHdIa4CujsGD3uwbAzfJkrGc7KH83Zbc+Yw858+RNw2GKrNC35f0CNVMusHw==
+
 "@hapi/accept@^3.2.4":
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-3.2.4.tgz#687510529493fe1d7d47954c31aff360d9364bd1"