implements #258

implements #33

packages/o-editors/src/ProcessNavigation.svelte

@@ -15,32 +15,34 @@
   class="flex flex-col mt-4 space-x-0 space-y-4 md:space-x-4 md:space-y-0 md:flex-row"
 >
   <div class="flex-1">
-    <button
-      type="submit"
-      on:click={() => {
-        dispatch("buttonClick");
-        /* const answer = new Continue();
-        answer.data = context.data;
-        context.process.submit(answer);
-        */
-      }}
-      class="btn btn-primary btn-block"
-      >{context.params.submitButtonText
-        ? context.params.submitButtonText
-        : "Submit"}
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        class="inline-block w-6 h-6 ml-2 stroke-current"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M9 5l7 7-7 7"
-        />
-      </svg>
-    </button>
+    {#if !context.params.hideNav}
+      <button
+        type="submit"
+        on:click={() => {
+          dispatch("buttonClick");
+          /* const answer = new Continue();
+          answer.data = context.data;
+          context.process.submit(answer);
+          */
+        }}
+        class="btn btn-primary btn-block"
+        >{context.params.submitButtonText
+          ? context.params.submitButtonText
+          : "Submit"}
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          class="inline-block w-6 h-6 ml-2 stroke-current"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 5l7 7-7 7"
+          />
+        </svg>
+      </button>
+    {/if}
   </div>
 </div>

packages/o-editors/src/editorContext.ts

@@ -13,6 +13,7 @@ export type EditorContext = {
   isSensitive?: boolean;
   canGoBack: boolean;
   canSkip: boolean;
+  hideNav: boolean;
   dataSchema?: any;
   sendAnswer(answer:PlatformEvent) : void;
 };

shell/src/dapps/o-banking/processes/deploySafe.ts

@@ -8,13 +8,10 @@ import {RpcGateway} from "@o-platform/o-circles/dist/rpcGateway";
 import {GNOSIS_SAFE_ADDRESS, HUB_ADDRESS, PROXY_FACTORY_ADDRESS} from "@o-platform/o-circles/dist/consts";
 import {CirclesHub} from "@o-platform/o-circles/dist/circles/circlesHub";
 import {GnosisSafeProxy} from "@o-platform/o-circles/dist/safe/gnosisSafeProxy";
-import {Web3Contract} from "@o-platform/o-circles/dist/web3Contract";
-import {BN} from "ethereumjs-util";
 import {upsertIdentity} from "../../o-passport/processes/upsertIdentity";
 import {loadProfile} from "../../o-passport/processes/identify/services/loadProfile";
 import {Profile} from "../data/api/types";
 import {UpsertProfileDocument} from "../../o-passport/data/api/types";
-import {emptySafe} from "../data/emptySafe";
 import {push} from "svelte-spa-router";
 import {Banking} from "../banking";
 

shell/src/dapps/o-banking/processes/getUbi.ts

@@ -3,11 +3,6 @@ import { ProcessContext } from "@o-platform/o-process/dist/interfaces/processCon
 import { fatalError } from "@o-platform/o-process/dist/states/fatalError";
 import { createMachine } from "xstate";
 import {PlatformEvent} from "@o-platform/o-events/dist/platformEvent";
-import {RpcGateway} from "@o-platform/o-circles/dist/rpcGateway";
-import {GnosisSafeProxy} from "@o-platform/o-circles/dist/safe/gnosisSafeProxy";
-import {CirclesAccount} from "@o-platform/o-circles/dist/model/circlesAccount";
-import {emptySafe} from "../data/emptySafe";
-import {mySafe} from "../stores/safe";
 import {getUBIService} from "./getUBIService";
 
 export type GetUbiContextData = {

shell/src/dapps/o-banking/processes/setTrust.ts

@@ -3,17 +3,18 @@ import { ProcessContext } from "@o-platform/o-process/dist/interfaces/processCon
 import { fatalError } from "@o-platform/o-process/dist/states/fatalError";
 import { createMachine } from "xstate";
 import { prompt } from "@o-platform/o-process/dist/states/prompt";
-import TextEditor from "../../../../../packages/o-editors/src/TextEditor.svelte";
+import TextEditor from "@o-platform/o-editors/src//TextEditor.svelte";
 import DropdownSelectEditor from "@o-platform/o-editors/src/DropdownSelectEditor.svelte";
 import { PlatformEvent } from "@o-platform/o-events/dist/platformEvent";
 import gql from "graphql-tag";
-import { Choice } from "../../../../../packages/o-editors/src/choiceSelectorContext";
+import { Choice } from "@o-platform/o-editors/src/choiceSelectorContext";
 import { GnosisSafeProxy } from "@o-platform/o-circles/dist/safe/gnosisSafeProxy";
 import { RpcGateway } from "@o-platform/o-circles/dist/rpcGateway";
 import { CirclesHub } from "@o-platform/o-circles/dist/circles/circlesHub";
 import { HUB_ADDRESS } from "@o-platform/o-circles/dist/consts";
 import { BN } from "ethereumjs-util";
 import {AvataarGenerator} from "../../../shared/avataarGenerator";
+import HtmlViewer from "@o-platform/o-editors/src//HtmlViewer.svelte";
 
 export type SetTrustContextData = {
   safeAddress: string;
@@ -175,10 +176,22 @@ const processDefinition = (processId: string) =>
 
             return execResult.toPromise();
           },
-          onDone: "#success",
+          onDone: "#showSuccess",
           onError: "#error",
         },
       },
+      showSuccess: prompt({
+        id: "showSuccess",
+        fieldName: "__",
+        component: HtmlViewer,
+        params: {
+          html: () => `<p>Trust changed</p>`,
+          submitButtonText: "Close"
+        },
+        navigation: {
+          next: "#success"
+        }
+      }),
       success: {
         type: "final",
         id: "success",

shell/src/dapps/o-banking/processes/transfer.ts

@@ -407,7 +407,7 @@ const processDefinition = (processId: string) =>
             messages: {},
             dirtyFlags: {},
           },
-          onDone: "#success",
+          onDone: "#showSuccess",
           onError: "#error",
         },
       },
@@ -430,10 +430,22 @@ const processDefinition = (processId: string) =>
             messages: {},
             dirtyFlags: {},
           },
-          onDone: "#success",
+          onDone: "#showSuccess",
           onError: "#error",
         },
       },
+      showSuccess: prompt({
+        id: "showSuccess",
+        fieldName: "__",
+        component: HtmlViewer,
+        params: {
+          html: () => `<p>Transfer successful</p>`,
+          submitButtonText: "Close"
+        },
+        navigation: {
+          next: "#success"
+        }
+      }),
       success: {
         id: "success",
         type: "final",

shell/src/dapps/o-banking/processes/transferCircles.ts

@@ -5,16 +5,19 @@ import { createMachine } from "xstate";
 import {PlatformEvent} from "@o-platform/o-events/dist/platformEvent";
 import {BN} from "ethereumjs-util";
 import {RpcGateway} from "@o-platform/o-circles/dist/rpcGateway";
+import PaymentPath from "../../../shared/molecules/PaymentPath.svelte";
 import {GnosisSafeProxy} from "@o-platform/o-circles/dist/safe/gnosisSafeProxy";
 import {CirclesHub} from "@o-platform/o-circles/dist/circles/circlesHub";
 import {HUB_ADDRESS} from "@o-platform/o-circles/dist/consts";
 import {requestPathToRecipient} from "../services/requestPathToRecipient";
+import {show} from "@o-platform/o-process/dist/actions/show";
 
 export type TransferCirclesContextData = {
   safeAddress:string;
   recipientAddress:string;
   amount:string;
   privateKey:string;
+  transitivePath?:TransitivePath;
   pathToRecipient?: {
     tokenOwners: string[];
     sources: string[];
@@ -61,21 +64,32 @@ createMachine<TransferCirclesContext, any>({
     requestPathToRecipient: {
       id: "requestPathToRecipient",
       invoke: {
-        src: requestPathToRecipient,
-        onDone: "#transferCircles",
+        src: async (context) => {
+          context.data.transitivePath = await requestPathToRecipient(context);
+        },
+        onDone:  "#transferCircles",
         onError: "#error"
       }
     },
     transferCircles: {
       id: "transferCircles",
-      entry: () => {
-        window.o.publishEvent(<PlatformEvent>{
-          type: "shell.progress",
-          message: `Processing Circles transfer ..`
-        });
-      },
+      entry: <any>show({
+        fieldName: "__",
+        component: PaymentPath,
+        params: (context) => {
+          return {
+            hideNav: true,
+            label: "Transferring Circles ..",
+            transfers: context.data.transitivePath.transfers
+          }
+        },
+        navigation: {
+          canGoBack: () => false,
+          canSkip: () => false,
+        }
+      }),
       invoke: {
-        src: async (context, event) => {
+        src: async (context) => {
           const ownerAddress = RpcGateway.get()
             .eth
             .accounts
@@ -85,33 +99,12 @@ createMachine<TransferCirclesContext, any>({
           const gnosisSafeProxy = new GnosisSafeProxy(RpcGateway.get(), context.data.safeAddress);
 
           try {
-            const circlesValueInWei = RpcGateway.get().utils
-              .toWei(context.data.amount.toString(), "ether")
-              .toString();
-            const oValueInWei = new BN(circlesValueInWei);
-            /*
-            const pathResult = await sendMessage({
-              call: "findPath",
-              args: {
-                from: context.environment.safe.address,
-                to: context.data.recipient.value,
-                value: wei
-              }
-            });
-
-            window.o.logger.log(pathResult);
-            const tokenOwners = [safeState.mySafeAddress];
-            const sources = [safeState.mySafeAddress];
-            const destinations = [context.data.recipient.value];
-            const values = [oValueInWei];
-        */
             const tokenOwners = [];
             const sources = [];
             const destinations = [];
             const values = [];
 
-            const path = <TransitivePath>event.data;
-            path.transfers.forEach(transfer => {
+            context.data.transitivePath.transfers.forEach(transfer => {
               tokenOwners.push(transfer.tokenOwner);
               sources.push(transfer.from);
               destinations.push(transfer.to);
@@ -127,7 +120,6 @@ createMachine<TransferCirclesContext, any>({
               values
             );
             const receipt = await transferTroughResult.toPromise();
-
             console.log(receipt);
           } catch (e) {
             console.error(e);

shell/src/shared/molecules/PaymentPath.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+  import ProcessNavigation from "@o-platform/o-editors/src/ProcessNavigation.svelte";
+  import {Continue} from "@o-platform/o-process/dist/events/continue";
+  import {PaymentPathContext} from "./paymentPathContext";
+  import CirclesTransferGraph from "../pathfinder/CirclesTransferGraph.svelte";
+
+  export let context: PaymentPathContext;
+
+  function submit() {
+    const answer = new Continue();
+    answer.data = context.data;
+    context.process.sendAnswer(answer);
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    if (e.key == "Enter") {
+      submit();
+    }
+  }
+</script>
+
+{#if context.messages[context.fieldName]}
+  <div class="alert alert-error mb-2 mt-2">
+    <div class="flex-1">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        class="w-6 h-6 mx-2 stroke-current"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
+        />
+      </svg>
+      <label for="input">{context.messages[context.fieldName]} </label>
+    </div>
+  </div>
+{/if}
+<div class="label-text">
+  <CirclesTransferGraph transfers={context.params.transfers}/>
+</div>
+<ProcessNavigation on:buttonClick={submit} {context} />

shell/src/shared/molecules/paymentPathContext.ts

@@ -0,0 +1,11 @@
+import {EditorContext} from "@o-platform/o-editors/src/editorContext";
+import {ProcessContext} from "@o-platform/o-process/dist/interfaces/processContext";
+import {PlatformEvent} from "@o-platform/o-events/dist/platformEvent";
+
+export type PaymentPathContext = EditorContext & {
+    params: {
+        label: string;
+        transfers:(context:ProcessContext<any>, event:PlatformEvent) => any[],
+        [x: string]: any
+    }
+}

shell/src/shared/pathfinder/CirclesAdjacencyGraph.svelte

@@ -3,7 +3,7 @@
   import { DataSet } from "vis-data";
   import { onMount } from "svelte";
 
-  import { fillUsernames, userDB } from "./userdb.js";
+  import { fillUsernames} from "./userdb.js";
   import { toAddress, getAdjacencies } from "./utility.js";
   import { createNodeContents } from "./visUtils.js";
 

shell/src/shared/pathfinder/utility.js

@@ -44,12 +44,18 @@ export let userInfo = async function(addresses) {
 };
 
 export let tokenOwner = async function(token) {
-    return (await (await fetch(GraphAPI, {
+    const owner = (await (await fetch(GraphAPI, {
         method: 'POST',
         body: JSON.stringify({
             query: `{token(id: "${token}") { owner { id } } }`
         })
-    })).json()).data.token.owner.id;
+    })).json());
+    const tokenResult = owner.data.token;
+    if (!tokenResult) {
+        return "";
+    }
+    const ownerAddress = tokenResult.owner.id;
+    return ownerAddress;
 };
 
 export let computeFlow = async function(from, to, maxValue) {