update

components/sidebar/context/strategy/SidebarStrategy.vue

@@ -0,0 +1,51 @@
+<template>
+  <SidebarContextContainer class="h-full overflow-hidden">
+    <SidebarContextHeader class="xxl:hidden">Strategy</SidebarContextHeader>
+
+    <div class="h-full overflow-y-scroll scrollbar-hover">
+      <div class="mx-auto" style="max-width: 296px">
+        <div class="py-2 sm:py-4">
+          <pre>{{ $props }}</pre>
+        </div>
+      </div>
+    </div>
+  </SidebarContextContainer>
+</template>
+
+<script>
+import { defineComponent } from '@nuxtjs/composition-api'
+import { useSidebar } from '~/composables/useSidebar';
+import { protocolStrategies } from '~/core/strategies'
+
+export default defineComponent({
+  props: {
+    protocol: {
+      type: String,
+      required: true,
+    },
+    strategy: {
+      type: String,
+      required: true,
+    }
+  },
+  setup(props) {
+    const { close } = useSidebar();
+
+    // const strategies = protocolStrategies[props.protocol];
+
+    // if (!strategies) {
+    //   close()
+    // }
+
+    // const strategy = strategies.find(strategy => strategy.id === props.strategy);
+
+    // if (!strategy) {
+    //   close()
+    // }
+
+    return {
+      //   strategy
+    }
+  },
+})
+</script>

components/sidebar/context/strategy/SidebarStrategySelection.vue

@@ -0,0 +1,56 @@
+<template>
+  <SidebarContextContainer class="h-full overflow-hidden">
+    <SidebarContextHeader class="xxl:hidden">Strategies</SidebarContextHeader>
+
+    <div class="h-full overflow-y-scroll scrollbar-hover">
+      <div class="mx-auto" style="max-width: 296px">
+        <div class="py-2 sm:py-4">
+          <div
+            v-for="strategy in strategies"
+            :key="strategy.name"
+            @click="selectStrategy(strategy)"
+            class="flex-shrink-0 flex flex-col px-6 py-4 mt-2 bg-background rounded cursor-pointer select-none first:mt-0 sm:mt-6 group hover:bg-selection"
+          >
+            <div class="flex items-start justify-between mb-3">
+              <h4
+                class="font-bold text-17 text-navi-pure-light dark:text-light"
+              >
+                {{ strategy.name }}
+              </h4>
+            </div>
+            <div class="font-medium leading-snug text-12 text-grey-pure">
+              {{ strategy.description }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </SidebarContextContainer>
+</template>
+
+<script>
+import { defineComponent, useRouter } from '@nuxtjs/composition-api'
+import { protocolStrategies } from '~/core/strategies'
+
+export default defineComponent({
+  props: {
+    protocol: {
+      type: String,
+      required: true,
+    }
+  },
+  setup(props) {
+    const router = useRouter()
+
+    const strategies = protocolStrategies[props.protocol] || [];
+
+    function selectStrategy(strategy) {
+      router.push({
+        hash: `#strategy?protocol=${props.protocol}&strategy=${strategy.id}`
+      })
+    }
+
+    return { strategies, selectStrategy, protocolStrategies }
+  },
+})
+</script>

composables/useSidebar.ts

@@ -35,11 +35,16 @@ import SidebarLiquityTroveWithdraw from '~/components/sidebar/context/liquity/Si
 import SidebarLiquityTroveBorrow from '~/components/sidebar/context/liquity/SidebarLiquityTroveBorrow.vue'
 import SidebarLiquityTrovePayback from '~/components/sidebar/context/liquity/SidebarLiquityTrovePayback.vue'
 
+import SidebarStrategySelection from '~/components/sidebar/context/strategy/SidebarStrategySelection.vue'
+import SidebarStrategy from '~/components/sidebar/context/strategy/SidebarStrategy.vue'
 
 const sidebars = {
   "#overview" :  {component: SidebarOverview, back : false, close : true },
   "#deposit-overview": {component: SidebarDepositOverview, back: { hash: 'overview' }  },
   '#withdraw-token': { component: SidebarWithdraw, back: { hash: 'overview' } },
+  '#strategies': { component: SidebarStrategySelection },
+  '#strategy': { component: SidebarStrategy },
+
   "/aave-v2": { component: null },
   "/aave-v2#supply": { component: SidebarAaveV2Supply },
   "/aave-v2#borrow": { component: SidebarAaveV2Borrow },

core/strategies/helpers/strategy.ts

@@ -1,6 +1,6 @@
 import DSA from "dsa-connect";
 import Web3 from "web3";
-
+import slugify from "slugify"
 export interface IStrategyContext {
   dsa: typeof DSA;
   web3: Web3;
@@ -22,6 +22,13 @@ export enum StrategyInputType {
   INPUT_WITH_TOKEN = "input-with-token"
 }
 
+// type InputTypes  = {
+//   [StrategyInputType.INPUT] : {
+//     token?: IStrategyToken;
+//     value?: any;
+//   };
+// }
+
 export interface IStrategyInput {
   type: StrategyInputType;
   name: string;
@@ -32,9 +39,12 @@ export interface IStrategyInput {
   // If type is "input-with-token", this is the token
   token?: IStrategyToken;
   value?: any;
+
+  [key: string]: any;
 }
 
 export interface IStrategy {
+  id?: string;
   name: string;
   description: string;
   author?: string;
@@ -42,8 +52,15 @@ export interface IStrategy {
   inputs: IStrategyInput[];
 
   spells: (context: IStrategyContext) => any;
+
+  submitText?: string;
 }
 
 export function defineStrategy(strategy: IStrategy): IStrategy {
+
+  if(! strategy.id){
+    strategy.id = slugify(strategy.name).toLowerCase();
+  }
+
   return strategy;
 }

core/strategies/index.ts

@@ -1,5 +1,5 @@
 import AaveV2 from "./protocols/aave-v2"
 
-export const strategies = {
+export const protocolStrategies = {
     aaveV2 : AaveV2,
 }

core/strategies/protocols/aave-v2/deposit-and-borrow.ts

@@ -16,8 +16,8 @@ export default defineStrategy({
         }
 
         if (input.token.balance < input.value) {
-            return "Your amount exceeds your maximum limit.";
-          }
+          return "Your amount exceeds your maximum limit.";
+        }
 
         return true;
       }

package.json

@@ -21,6 +21,7 @@
     "dsa-connect": "^0.4.3",
     "nuxt": "^2.15.7",
     "qrcode": "^1.4.4",
+    "slugify": "^1.6.0",
     "v-click-outside": "^3.1.2",
     "v-tooltip": "^2.1.3",
     "vue-clipboard2": "^0.3.1",

yarn.lock

@@ -10410,6 +10410,11 @@ slash@^3.0.0:
   resolved "https://registry.yarnpkg.com/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
+slugify@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/slugify/-/slugify-1.6.0.tgz#6bdf8ed01dabfdc46425b67e3320b698832ff893"
+  integrity sha512-FkMq+MQc5hzYgM86nLuHI98Acwi3p4wX+a5BO9Hhw4JdK4L7WueIiZ4tXEobImPqBz2sVcV0+Mu3GRB30IGang==
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"