demos/delta_demo.html at master · xlnfinance/demos · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
Insurance <span id=insurance_text></span> (stored onchain, how much collateral is locked up between two users)<input type="range" min="0" max="100" value="0" class="slider" id=insurance><br>
Ondelta <span id=ondelta_text></span> (stored onchain, updated only during onchain tx by L, apply same changes you do to insurance: += for deposit, -= for withdrawal) <input type="range" min="-50" max="50" value="0" class="slider" id=ondelta> <br>
Offdelta <span id=offdelta_text></span> (stored offchain, updated during offchain payments)<input type="range" min="-50" max="50" value="0" class="slider" id=offdelta><br>
<pre id=result></pre>
<div id=outcome></div>


<style>
.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

span{
  color: red;font-weight: bold;
}
</style>
<script>
resolveChannel = (insurance, delta, is_left = true) => {
  var parts = {
    // left user promises only with negative delta, scenario 3
    they_uninsured: delta < 0 ? -delta : 0,
    insured: delta > insurance ? insurance : delta > 0 ? delta : 0,
    they_insured:
      delta > insurance ? 0 : delta > 0 ? insurance - delta : insurance,
    // right user promises when delta > insurance, scenario 1
    uninsured: delta > insurance ? delta - insurance : 0
  }

  var total =
    parts.they_uninsured + parts.uninsured + parts.they_insured + parts.insured

  if (total < 300) total = 100

  var bar = (amount, symbol) => {
    if (amount == 0) return ''
    return Array(1 + Math.ceil(amount * 100 / total)).join(symbol)
  }

  var o='';
  var c = (a)=>{return a}

      if (parts.uninsured > 0) {
        o += `${c(parts.insured)} + ${c(parts.uninsured)} | 0`
      } else if (parts.they_uninsured > 0) {
        o += `0 | ${c(parts.they_insured)} + ${c(parts.they_uninsured)}`
      } else {
        o += `${c(parts.insured)} | ${c(parts.they_insured)}`
      }

  parts.o = `Left ${o} Right`


  if (delta < 0) {
    parts.outcome = `R has \$${parts.they_insured} insured and  \$${parts.they_uninsured} uninsured`
    parts.ascii_channel =
      '|' + bar(parts.they_uninsured, '-') + bar(parts.they_insured, '=')
  } else if (delta < insurance) {
    parts.outcome = `L has \$${parts.insured} insured, R has \$${parts.they_insured} insured`
    parts.ascii_channel =
      bar(parts.insured, '=') + '|' + bar(parts.they_insured, '=')
  } else {
    parts.outcome = `L has \$${parts.insured} insured and \$${parts.uninsured} uninsured`
    parts.ascii_channel =
      bar(parts.insured, '=') + bar(parts.uninsured, '-') + '|'
  }

  // default view is left. if current user is right, simply reverse
  if (!is_left) {
    ;[
      parts.they_uninsured,
      parts.insured,
      parts.they_insured,
      parts.uninsured
    ] = [
      parts.uninsured,
      parts.they_insured,
      parts.insured,
      parts.they_uninsured
    ]
  }

  return parts
}

l= console.log


function update(){
  ['insurance', 'ondelta','offdelta'].map(tag=>{
    window[tag+'_text'].innerHTML = window[tag].value
  })

  var resolved = resolveChannel(parseInt(insurance.value), parseInt(ondelta.value) + parseInt(offdelta.value))


  result.innerHTML = resolved.o + "<br>"+  resolved.ascii_channel
  outcome.innerHTML = resolved.outcome
}

update()

insurance.oninput = ondelta.oninput = offdelta.oninput = update


</script>