taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

refactor confirm-contract rendering

Browse Source
This commit is contained in:
Florian Dold 2016-10-05 17:04:57 +02:00
parent 39b3fd7fc6
commit 7fb527b000
6 changed files with 1183 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

556
lib/decl/preact.d.ts vendored Normal file
View File

@ -0,0 +1,556 @@
declare namespace preact {
interface ComponentProps {
children?:JSX.Element[];
key?:string;
}
interface PreactHTMLAttributes {
key?:string;
}
interface VNode {
nodeName:ComponentConstructor<any, any>|string;
attributes:{[name:string]:any};
children:VNode[];
key:string;
}
interface ComponentLifecycle<PropsType, StateType> {
componentWillMount?():void;
componentDidMount?():void;
componentWillUnmount?():void;
componentDidUnmount?():void;
componentWillReceiveProps?(props:PropsType):void;
shouldComponentUpdate?(props:PropsType):boolean;
componentWillUpdate?():void;
componentDidUpdate?():void;
}
interface ComponentConstructor<PropsType, StateType> {
new (props?:PropsType):Component<PropsType, StateType>;
}
abstract class Component<PropsType, StateType> implements ComponentLifecycle<PropsType, StateType> {
constructor(props?:PropsType);
state:StateType;
props:PropsType & ComponentProps;
base:HTMLElement;
linkState:(name:string) => void;
setState(state:StateType, opts?:any):void;
forceUpdate():void;
abstract render(props:PropsType & ComponentProps, state:any):JSX.Element;
}
function h<PropsType>(node:ComponentConstructor<PropsType, any>, params:PropsType, ...children:(JSX.Element|string)[]):JSX.Element;
function h(node:string, params:JSX.HTMLAttributes|JSX.SVGAttributes, ...children:(JSX.Element|string)[]):JSX.Element;
function render(node:JSX.Element, parent:Element, merge?:boolean):Element;
function rerender():void;
function cloneElement(element:JSX.Element, props:any):JSX.Element;
var options:{
syncComponentUpdates?:boolean;
debounceRendering?:(render:() => void) => void;
vnode?:(vnode:VNode) => void;
event?:(event:Event) => Event;
};
}
declare module "preact" {
export = preact;
}
declare namespace JSX {
interface Element extends preact.VNode {
}
interface ElementClass extends preact.Component<any, any> {
}
interface ElementAttributesProperty {
props:any;
}
interface SVGAttributes {
clipPath?:string;
cx?:number | string;
cy?:number | string;
d?:string;
dx?:number | string;
dy?:number | string;
fill?:string;
fillOpacity?:number | string;
fontFamily?:string;
fontSize?:number | string;
fx?:number | string;
fy?:number | string;
gradientTransform?:string;
gradientUnits?:string;
markerEnd?:string;
markerMid?:string;
markerStart?:string;
offset?:number | string;
opacity?:number | string;
patternContentUnits?:string;
patternUnits?:string;
points?:string;
preserveAspectRatio?:string;
r?:number | string;
rx?:number | string;
ry?:number | string;
spreadMethod?:string;
stopColor?:string;
stopOpacity?:number | string;
stroke?:string;
strokeDasharray?:string;
strokeLinecap?:string;
strokeMiterlimit?:string;
strokeOpacity?:number | string;
strokeWidth?:number | string;
textAnchor?:string;
transform?:string;
version?:string;
viewBox?:string;
x1?:number | string;
x2?:number | string;
x?:number | string;
xlinkActuate?:string;
xlinkArcrole?:string;
xlinkHref?:string;
xlinkRole?:string;
xlinkShow?:string;
xlinkTitle?:string;
xlinkType?:string;
xmlBase?:string;
xmlLang?:string;
xmlSpace?:string;
y1?:number | string;
y2?:number | string;
y?:number | string;
}
interface PathAttributes {
d:string;
}
interface EventHandler<E extends Event> {
(event:E):void;
}
type ClipboardEventHandler = EventHandler<ClipboardEvent>;
type CompositionEventHandler = EventHandler<CompositionEvent>;
type DragEventHandler = EventHandler<DragEvent>;
type FocusEventHandler = EventHandler<FocusEvent>;
type KeyboardEventHandler = EventHandler<KeyboardEvent>;
type MouseEventHandler = EventHandler<MouseEvent>;
type TouchEventHandler = EventHandler<TouchEvent>;
type UIEventHandler = EventHandler<UIEvent>;
type WheelEventHandler = EventHandler<WheelEvent>;
type AnimationEventHandler = EventHandler<AnimationEvent>;
type TransitionEventHandler = EventHandler<TransitionEvent>;
type GenericEventHandler = EventHandler<Event>;
interface DOMAttributed {
// Clipboard Events
onCopy?:ClipboardEventHandler;
onCut?:ClipboardEventHandler;
onPaste?:ClipboardEventHandler;
// Composition Events
onCompositionEnd?:CompositionEventHandler;
onCompositionStart?:CompositionEventHandler;
onCompositionUpdate?:CompositionEventHandler;
// Focus Events
onFocus?:FocusEventHandler;
onBlur?:FocusEventHandler;
// Form Events
onChange?:GenericEventHandler;
onInput?:GenericEventHandler;
onSubmit?:GenericEventHandler;
// Keyboard Events
onKeyDown?:KeyboardEventHandler;
onKeyPress?:KeyboardEventHandler;
onKeyUp?:KeyboardEventHandler;
// Media Events
onAbort?:GenericEventHandler;
onCanPlay?:GenericEventHandler;
onCanPlayThrough?:GenericEventHandler;
onDurationChange?:GenericEventHandler;
onEmptied?:GenericEventHandler;
onEncrypted?:GenericEventHandler;
onEnded?:GenericEventHandler;
onLoadedData?:GenericEventHandler;
onLoadedMetadata?:GenericEventHandler;
onLoadStart?:GenericEventHandler;
onPause?:GenericEventHandler;
onPlay?:GenericEventHandler;
onPlaying?:GenericEventHandler;
onProgress?:GenericEventHandler;
onRateChange?:GenericEventHandler;
onSeeked?:GenericEventHandler;
onSeeking?:GenericEventHandler;
onStalled?:GenericEventHandler;
onSuspend?:GenericEventHandler;
onTimeUpdate?:GenericEventHandler;
onVolumeChange?:GenericEventHandler;
onWaiting?:GenericEventHandler;
// MouseEvents
onClick?:MouseEventHandler;
onContextMenu?:MouseEventHandler;
onDoubleClick?:MouseEventHandler;
onDrag?:DragEventHandler;
onDragEnd?:DragEventHandler;
onDragEnter?:DragEventHandler;
onDragExit?:DragEventHandler;
onDragLeave?:DragEventHandler;
onDragOver?:DragEventHandler;
onDragStart?:DragEventHandler;
onDrop?:DragEventHandler;
onMouseDown?:MouseEventHandler;
onMouseEnter?:MouseEventHandler;
onMouseLeave?:MouseEventHandler;
onMouseMove?:MouseEventHandler;
onMouseOut?:MouseEventHandler;
onMouseOver?:MouseEventHandler;
onMouseUp?:MouseEventHandler;
// Selection Events
onSelect?:GenericEventHandler;
// Touch Events
onTouchCancel?:TouchEventHandler;
onTouchEnd?:TouchEventHandler;
onTouchMove?:TouchEventHandler;
onTouchStart?:TouchEventHandler;
// UI Events
onScroll?:UIEventHandler;
// Wheel Events
onWheel?:WheelEventHandler;
// Animation Events
onAnimationStart?:AnimationEventHandler;
onAnimationEnd?:AnimationEventHandler;
onAnimationIteration?:AnimationEventHandler;
// Transition Events
onTransitionEnd?:TransitionEventHandler;
}
interface HTMLAttributes extends preact.PreactHTMLAttributes, DOMAttributed {
// Standard HTML Attributes
accept?:string;
acceptCharset?:string;
accessKey?:string;
action?:string;
allowFullScreen?:boolean;
allowTransparency?:boolean;
alt?:string;
async?:boolean;
autocomplete?:string;
autofocus?:boolean;
autoPlay?:boolean;
capture?:boolean;
cellPadding?:number | string;
cellSpacing?:number | string;
charSet?:string;
challenge?:string;
checked?:boolean;
class?:string;
className?:string;
cols?:number;
colSpan?:number;
content?:string;
contentEditable?:boolean;
contextMenu?:string;
controls?:boolean;
coords?:string;
crossOrigin?:string;
data?:string;
dateTime?:string;
default?:boolean;
defer?:boolean;
dir?:string;
disabled?:boolean;
download?:any;
draggable?:boolean;
encType?:string;
form?:string;
formAction?:string;
formEncType?:string;
formMethod?:string;
formNoValidate?:boolean;
formTarget?:string;
frameBorder?:number | string;
headers?:string;
height?:number | string;
hidden?:boolean;
high?:number;
href?:string;
hrefLang?:string;
for?:string;
httpEquiv?:string;
icon?:string;
id?:string;
inputMode?:string;
integrity?:string;
is?:string;
keyParams?:string;
keyType?:string;
kind?:string;
label?:string;
lang?:string;
list?:string;
loop?:boolean;
low?:number;
manifest?:string;
marginHeight?:number;
marginWidth?:number;
max?:number | string;
maxLength?:number;
media?:string;
mediaGroup?:string;
method?:string;
min?:number | string;
minLength?:number;
multiple?:boolean;
muted?:boolean;
name?:string;
noValidate?:boolean;
open?:boolean;
optimum?:number;
pattern?:string;
placeholder?:string;
poster?:string;
preload?:string;
radioGroup?:string;
readOnly?:boolean;
rel?:string;
required?:boolean;
role?:string;
rows?:number;
rowSpan?:number;
sandbox?:string;
scope?:string;
scoped?:boolean;
scrolling?:string;
seamless?:boolean;
selected?:boolean;
shape?:string;
size?:number;
sizes?:string;
span?:number;
spellCheck?:boolean;
src?:string;
srcset?:string;
srcDoc?:string;
srcLang?:string;
srcSet?:string;
start?:number;
step?:number | string;
style?:any;
summary?:string;
tabIndex?:number;
target?:string;
title?:string;
type?:string;
useMap?:string;
value?:string | string[];
width?:number | string;
wmode?:string;
wrap?:string;
// RDFa Attributes
about?:string;
datatype?:string;
inlist?:any;
prefix?:string;
property?:string;
resource?:string;
typeof?:string;
vocab?:string;
}
interface IntrinsicElements {
// HTML
a:HTMLAttributes;
abbr:HTMLAttributes;
address:HTMLAttributes;
area:HTMLAttributes;
article:HTMLAttributes;
aside:HTMLAttributes;
audio:HTMLAttributes;
b:HTMLAttributes;
base:HTMLAttributes;
bdi:HTMLAttributes;
bdo:HTMLAttributes;
big:HTMLAttributes;
blockquote:HTMLAttributes;
body:HTMLAttributes;
br:HTMLAttributes;
button:HTMLAttributes;
canvas:HTMLAttributes;
caption:HTMLAttributes;
cite:HTMLAttributes;
code:HTMLAttributes;
col:HTMLAttributes;
colgroup:HTMLAttributes;
data:HTMLAttributes;
datalist:HTMLAttributes;
dd:HTMLAttributes;
del:HTMLAttributes;
details:HTMLAttributes;
dfn:HTMLAttributes;
dialog:HTMLAttributes;
div:HTMLAttributes;
dl:HTMLAttributes;
dt:HTMLAttributes;
em:HTMLAttributes;
embed:HTMLAttributes;
fieldset:HTMLAttributes;
figcaption:HTMLAttributes;
figure:HTMLAttributes;
footer:HTMLAttributes;
form:HTMLAttributes;
h1:HTMLAttributes;
h2:HTMLAttributes;
h3:HTMLAttributes;
h4:HTMLAttributes;
h5:HTMLAttributes;
h6:HTMLAttributes;
head:HTMLAttributes;
header:HTMLAttributes;
hr:HTMLAttributes;
html:HTMLAttributes;
i:HTMLAttributes;
iframe:HTMLAttributes;
img:HTMLAttributes;
input:HTMLAttributes;
ins:HTMLAttributes;
kbd:HTMLAttributes;
keygen:HTMLAttributes;
label:HTMLAttributes;
legend:HTMLAttributes;
li:HTMLAttributes;
link:HTMLAttributes;
main:HTMLAttributes;
map:HTMLAttributes;
mark:HTMLAttributes;
menu:HTMLAttributes;
menuitem:HTMLAttributes;
meta:HTMLAttributes;
meter:HTMLAttributes;
nav:HTMLAttributes;
noscript:HTMLAttributes;
object:HTMLAttributes;
ol:HTMLAttributes;
optgroup:HTMLAttributes;
option:HTMLAttributes;
output:HTMLAttributes;
p:HTMLAttributes;
param:HTMLAttributes;
picture:HTMLAttributes;
pre:HTMLAttributes;
progress:HTMLAttributes;
q:HTMLAttributes;
rp:HTMLAttributes;
rt:HTMLAttributes;
ruby:HTMLAttributes;
s:HTMLAttributes;
samp:HTMLAttributes;
script:HTMLAttributes;
section:HTMLAttributes;
select:HTMLAttributes;
small:HTMLAttributes;
source:HTMLAttributes;
span:HTMLAttributes;
strong:HTMLAttributes;
style:HTMLAttributes;
sub:HTMLAttributes;
summary:HTMLAttributes;
sup:HTMLAttributes;
table:HTMLAttributes;
tbody:HTMLAttributes;
td:HTMLAttributes;
textarea:HTMLAttributes;
tfoot:HTMLAttributes;
th:HTMLAttributes;
thead:HTMLAttributes;
time:HTMLAttributes;
title:HTMLAttributes;
tr:HTMLAttributes;
track:HTMLAttributes;
u:HTMLAttributes;
ul:HTMLAttributes;
"var":HTMLAttributes;
video:HTMLAttributes;
wbr:HTMLAttributes;
//SVG
svg:SVGAttributes;
circle:SVGAttributes;
clipPath:SVGAttributes;
defs:SVGAttributes;
ellipse:SVGAttributes;
feBlend:SVGAttributes;
feColorMatrix:SVGAttributes;
feComponentTransfer:SVGAttributes;
feComposite:SVGAttributes;
feConvolveMatrix:SVGAttributes;
feDiffuseLighting:SVGAttributes;
feDisplacementMap:SVGAttributes;
feFlood:SVGAttributes;
feGaussianBlur:SVGAttributes;
feImage:SVGAttributes;
feMerge:SVGAttributes;
feMergeNode:SVGAttributes;
feMorphology:SVGAttributes;
feOffset:SVGAttributes;
feSpecularLighting:SVGAttributes;
feTile:SVGAttributes;
feTurbulence:SVGAttributes;
filter:SVGAttributes;
foreignObject:SVGAttributes;
g:SVGAttributes;
image:SVGAttributes;
line:SVGAttributes;
linearGradient:SVGAttributes;
marker:SVGAttributes;
mask:SVGAttributes;
path:SVGAttributes;
pattern:SVGAttributes;
polygon:SVGAttributes;
polyline:SVGAttributes;
radialGradient:SVGAttributes;
rect:SVGAttributes;
stop:SVGAttributes;
symbol:SVGAttributes;
text:SVGAttributes;
tspan:SVGAttributes;
use:SVGAttributes;
}
}

1
lib/vendor/preact vendored
View File

@ -1 +0,0 @@
../../thirdparty/preact/src/

469
lib/vendor/preact.js vendored Normal file
View File

@ -0,0 +1,469 @@
!function(global, factory) {
'object' == typeof exports && 'undefined' != typeof module ? factory(exports) : 'function' == typeof define && define.amd ? define([ 'exports' ], factory) : factory(global.preact = global.preact || {});
}(this, function(exports) {
function VNode(nodeName, attributes, children) {
this.nodeName = nodeName;
this.attributes = attributes;
this.children = children;
this.key = attributes && attributes.key;
}
function h(nodeName, attributes) {
var children, lastSimple, child, simple, i;
for (i = arguments.length; i-- > 2; ) stack.push(arguments[i]);
if (attributes && attributes.children) {
if (!stack.length) stack.push(attributes.children);
delete attributes.children;
}
while (stack.length) if ((child = stack.pop()) instanceof Array) for (i = child.length; i--; ) stack.push(child[i]); else if (null != child && child !== !1) {
if ('number' == typeof child || child === !0) child = String(child);
simple = 'string' == typeof child;
if (simple && lastSimple) children[children.length - 1] += child; else {
if (children) children.push(child); else children = [ child ];
lastSimple = simple;
}
}
var p = new VNode(nodeName, attributes || void 0, children);
if (options.vnode) options.vnode(p);
return p;
}
function extend(obj, props) {
if (props) for (var i in props) obj[i] = props[i];
return obj;
}
function clone(obj) {
return extend({}, obj);
}
function delve(obj, key) {
for (var p = key.split('.'), i = 0; i < p.length && obj; i++) obj = obj[p[i]];
return obj;
}
function isFunction(obj) {
return 'function' == typeof obj;
}
function isString(obj) {
return 'string' == typeof obj;
}
function hashToClassName(c) {
var str = '';
for (var prop in c) if (c[prop]) {
if (str) str += ' ';
str += prop;
}
return str;
}
function cloneElement(vnode, props) {
return h(vnode.nodeName, extend(clone(vnode.attributes), props), arguments.length > 2 ? [].slice.call(arguments, 2) : vnode.children);
}
function createLinkedState(component, key, eventPath) {
var path = key.split('.'), p0 = path[0];
return function(e) {
var _component$setState;
var i, t = e && e.currentTarget || this, s = component.state, obj = s, v = isString(eventPath) ? delve(e, eventPath) : t.nodeName ? (t.nodeName + t.type).match(/^input(che|rad)/i) ? t.checked : t.value : e;
if (path.length > 1) {
for (i = 0; i < path.length - 1; i++) obj = obj[path[i]] || (obj[path[i]] = {});
obj[path[i]] = v;
v = s[p0];
}
component.setState((_component$setState = {}, _component$setState[p0] = v, _component$setState));
};
}
function enqueueRender(component) {
if (!component._dirty && (component._dirty = !0) && 1 == items.push(component)) (options.debounceRendering || defer)(rerender);
}
function rerender() {
var p, list = items;
items = [];
while (p = list.pop()) if (p._dirty) renderComponent(p);
}
function isFunctionalComponent(vnode) {
var nodeName = vnode && vnode.nodeName;
return nodeName && isFunction(nodeName) && !(nodeName.prototype && nodeName.prototype.render);
}
function buildFunctionalComponent(vnode, context) {
return vnode.nodeName(getNodeProps(vnode), context || EMPTY);
}
function isSameNodeType(node, vnode) {
if (isString(vnode)) return node instanceof Text;
if (isString(vnode.nodeName)) return isNamedNode(node, vnode.nodeName);
if (isFunction(vnode.nodeName)) return node._componentConstructor === vnode.nodeName || isFunctionalComponent(vnode); else ;
}
function isNamedNode(node, nodeName) {
return node.normalizedNodeName === nodeName || toLowerCase(node.nodeName) === toLowerCase(nodeName);
}
function getNodeProps(vnode) {
var defaultProps = vnode.nodeName.defaultProps, props = clone(vnode.attributes);
if (defaultProps) for (var i in defaultProps) if (void 0 === props[i]) props[i] = defaultProps[i];
if (vnode.children) props.children = vnode.children;
return props;
}
function removeNode(node) {
var p = node.parentNode;
if (p) p.removeChild(node);
}
function setAccessor(node, name, value, old, isSvg) {
node[ATTR_KEY][name] = value;
if ('className' === name) name = 'class';
if ('class' === name && value && 'object' == typeof value) value = hashToClassName(value);
if ('key' === name || 'children' === name || 'innerHTML' === name) ; else if ('class' === name && !isSvg) node.className = value || ''; else if ('style' === name) {
if (!value || isString(value) || isString(old)) node.style.cssText = value || '';
if (value && 'object' == typeof value) {
if (!isString(old)) for (var i in old) if (!(i in value)) node.style[i] = '';
for (var i in value) node.style[i] = 'number' == typeof value[i] && !NON_DIMENSION_PROPS[i] ? value[i] + 'px' : value[i];
}
} else if ('dangerouslySetInnerHTML' === name) {
if (value) node.innerHTML = value.__html;
} else if ('o' == name[0] && 'n' == name[1]) {
var l = node._listeners || (node._listeners = {});
name = toLowerCase(name.substring(2));
if (value) {
if (!l[name]) node.addEventListener(name, eventProxy, !!NON_BUBBLING_EVENTS[name]);
} else if (l[name]) node.removeEventListener(name, eventProxy, !!NON_BUBBLING_EVENTS[name]);
l[name] = value;
} else if ('list' !== name && 'type' !== name && !isSvg && name in node) {
setProperty(node, name, null == value ? '' : value);
if (null == value || value === !1) node.removeAttribute(name);
} else {
var ns = isSvg && name.match(/^xlink\:?(.+)/);
if (null == value || value === !1) if (ns) node.removeAttributeNS('http://www.w3.org/1999/xlink', toLowerCase(ns[1])); else node.removeAttribute(name); else if ('object' != typeof value && !isFunction(value)) if (ns) node.setAttributeNS('http://www.w3.org/1999/xlink', toLowerCase(ns[1]), value); else node.setAttribute(name, value);
}
}
function setProperty(node, name, value) {
try {
node[name] = value;
} catch (e) {}
}
function eventProxy(e) {
return this._listeners[e.type](options.event && options.event(e) || e);
}
function collectNode(node) {
removeNode(node);
if (node instanceof Element) {
node._component = node._componentConstructor = null;
var _name = node.normalizedNodeName || toLowerCase(node.nodeName);
(nodes[_name] || (nodes[_name] = [])).push(node);
}
}
function createNode(nodeName, isSvg) {
var name = toLowerCase(nodeName), node = nodes[name] && nodes[name].pop() || (isSvg ? document.createElementNS('http://www.w3.org/2000/svg', nodeName) : document.createElement(nodeName));
node.normalizedNodeName = name;
return node;
}
function flushMounts() {
var c;
while (c = mounts.pop()) if (c.componentDidMount) c.componentDidMount();
}
function diff(dom, vnode, context, mountAll, parent, componentRoot) {
if (!diffLevel++) isSvgMode = parent instanceof SVGElement;
var ret = idiff(dom, vnode, context, mountAll);
if (parent && ret.parentNode !== parent) parent.appendChild(ret);
if (!--diffLevel && !componentRoot) flushMounts();
return ret;
}
function idiff(dom, vnode, context, mountAll) {
var originalAttributes = vnode && vnode.attributes;
while (isFunctionalComponent(vnode)) vnode = buildFunctionalComponent(vnode, context);
if (null == vnode) vnode = '';
if (isString(vnode)) {
if (dom) {
if (dom instanceof Text && dom.parentNode) {
dom.nodeValue = vnode;
return dom;
}
recollectNodeTree(dom);
}
return document.createTextNode(vnode);
}
if (isFunction(vnode.nodeName)) return buildComponentFromVNode(dom, vnode, context, mountAll);
var out = dom, nodeName = vnode.nodeName, prevSvgMode = isSvgMode;
if (!isString(nodeName)) nodeName = String(nodeName);
isSvgMode = 'svg' === nodeName ? !0 : 'foreignObject' === nodeName ? !1 : isSvgMode;
if (!dom) out = createNode(nodeName, isSvgMode); else if (!isNamedNode(dom, nodeName)) {
out = createNode(nodeName, isSvgMode);
while (dom.firstChild) out.appendChild(dom.firstChild);
recollectNodeTree(dom);
}
if (vnode.children && 1 === vnode.children.length && 'string' == typeof vnode.children[0] && 1 === out.childNodes.length && out.firstChild instanceof Text) out.firstChild.nodeValue = vnode.children[0]; else if (vnode.children || out.firstChild) innerDiffNode(out, vnode.children, context, mountAll);
var props = out[ATTR_KEY];
if (!props) {
out[ATTR_KEY] = props = {};
for (var a = out.attributes, i = a.length; i--; ) props[a[i].name] = a[i].value;
}
diffAttributes(out, vnode.attributes, props);
if (originalAttributes && 'function' == typeof originalAttributes.ref) (props.ref = originalAttributes.ref)(out);
isSvgMode = prevSvgMode;
return out;
}
function innerDiffNode(dom, vchildren, context, mountAll) {
var j, c, vchild, child, originalChildren = dom.childNodes, children = [], keyed = {}, keyedLen = 0, min = 0, len = originalChildren.length, childrenLen = 0, vlen = vchildren && vchildren.length;
if (len) for (var i = 0; i < len; i++) {
var _child = originalChildren[i], key = vlen ? (c = _child._component) ? c.__key : (c = _child[ATTR_KEY]) ? c.key : null : null;
if (key || 0 === key) {
keyedLen++;
keyed[key] = _child;
} else children[childrenLen++] = _child;
}
if (vlen) for (var i = 0; i < vlen; i++) {
vchild = vchildren[i];
child = null;
var key = vchild.key;
if (null != key) {
if (keyedLen && key in keyed) {
child = keyed[key];
keyed[key] = void 0;
keyedLen--;
}
} else if (!child && min < childrenLen) {
for (j = min; j < childrenLen; j++) {
c = children[j];
if (c && isSameNodeType(c, vchild)) {
child = c;
children[j] = void 0;
if (j === childrenLen - 1) childrenLen--;
if (j === min) min++;
break;
}
}
if (!child && min < childrenLen && isFunction(vchild.nodeName) && mountAll) {
child = children[min];
children[min++] = void 0;
}
}
child = idiff(child, vchild, context, mountAll);
if (child && child !== dom && child !== originalChildren[i]) dom.insertBefore(child, originalChildren[i] || null);
}
if (keyedLen) for (var i in keyed) if (keyed[i]) recollectNodeTree(keyed[i]);
if (min < childrenLen) removeOrphanedChildren(children);
}
function removeOrphanedChildren(children, unmountOnly) {
for (var i = children.length; i--; ) if (children[i]) recollectNodeTree(children[i], unmountOnly);
}
function recollectNodeTree(node, unmountOnly) {
var component = node._component;
if (component) unmountComponent(component, !unmountOnly); else {
if (node[ATTR_KEY] && node[ATTR_KEY].ref) node[ATTR_KEY].ref(null);
if (!unmountOnly) collectNode(node);
if (node.childNodes && node.childNodes.length) removeOrphanedChildren(node.childNodes, unmountOnly);
}
}
function diffAttributes(dom, attrs, old) {
for (var _name in old) if (!(attrs && _name in attrs) && null != old[_name]) setAccessor(dom, _name, null, old[_name], isSvgMode);
if (attrs) for (var _name2 in attrs) if (!(_name2 in old) || attrs[_name2] !== ('value' === _name2 || 'checked' === _name2 ? dom[_name2] : old[_name2])) setAccessor(dom, _name2, attrs[_name2], old[_name2], isSvgMode);
}
function collectComponent(component) {
var name = component.constructor.name, list = components[name];
if (list) list.push(component); else components[name] = [ component ];
}
function createComponent(Ctor, props, context) {
var inst = new Ctor(props, context), list = components[Ctor.name];
Component.call(inst, props, context);
if (list) for (var i = list.length; i--; ) if (list[i].constructor === Ctor) {
inst.nextBase = list[i].nextBase;
list.splice(i, 1);
break;
}
return inst;
}
function setComponentProps(component, props, opts, context, mountAll) {
if (!component._disable) {
component._disable = !0;
if (component.__ref = props.ref) delete props.ref;
if (component.__key = props.key) delete props.key;
if (!component.base || mountAll) {
if (component.componentWillMount) component.componentWillMount();
} else if (component.componentWillReceiveProps) component.componentWillReceiveProps(props, context);
if (context && context !== component.context) {
if (!component.prevContext) component.prevContext = component.context;
component.context = context;
}
if (!component.prevProps) component.prevProps = component.props;
component.props = props;
component._disable = !1;
if (0 !== opts) if (1 === opts || options.syncComponentUpdates !== !1 || !component.base) renderComponent(component, 1, mountAll); else enqueueRender(component);
if (component.__ref) component.__ref(component);
}
}
function renderComponent(component, opts, mountAll, isChild) {
if (!component._disable) {
var skip, rendered, inst, cbase, props = component.props, state = component.state, context = component.context, previousProps = component.prevProps || props, previousState = component.prevState || state, previousContext = component.prevContext || context, isUpdate = component.base, nextBase = component.nextBase, initialBase = isUpdate || nextBase, initialChildComponent = component._component;
if (isUpdate) {
component.props = previousProps;
component.state = previousState;
component.context = previousContext;
if (2 !== opts && component.shouldComponentUpdate && component.shouldComponentUpdate(props, state, context) === !1) skip = !0; else if (component.componentWillUpdate) component.componentWillUpdate(props, state, context);
component.props = props;
component.state = state;
component.context = context;
}
component.prevProps = component.prevState = component.prevContext = component.nextBase = null;
component._dirty = !1;
if (!skip) {
if (component.render) rendered = component.render(props, state, context);
if (component.getChildContext) context = extend(clone(context), component.getChildContext());
while (isFunctionalComponent(rendered)) rendered = buildFunctionalComponent(rendered, context);
var toUnmount, base, childComponent = rendered && rendered.nodeName;
if (isFunction(childComponent)) {
inst = initialChildComponent;
var childProps = getNodeProps(rendered);
if (inst && inst.constructor === childComponent) setComponentProps(inst, childProps, 1, context); else {
toUnmount = inst;
inst = createComponent(childComponent, childProps, context);
inst.nextBase = inst.nextBase || nextBase;
inst._parentComponent = component;
component._component = inst;
setComponentProps(inst, childProps, 0, context);
renderComponent(inst, 1, mountAll, !0);
}
base = inst.base;
} else {
cbase = initialBase;
toUnmount = initialChildComponent;
if (toUnmount) cbase = component._component = null;
if (initialBase || 1 === opts) {
if (cbase) cbase._component = null;
base = diff(cbase, rendered, context, mountAll || !isUpdate, initialBase && initialBase.parentNode, !0);
}
}
if (initialBase && base !== initialBase && inst !== initialChildComponent) {
var baseParent = initialBase.parentNode;
if (baseParent && base !== baseParent) baseParent.replaceChild(base, initialBase);
if (!cbase && !toUnmount && component._parentComponent) {
initialBase._component = null;
recollectNodeTree(initialBase);
}
}
if (toUnmount) unmountComponent(toUnmount, base !== initialBase);
component.base = base;
if (base && !isChild) {
var componentRef = component, t = component;
while (t = t._parentComponent) componentRef = t;
base._component = componentRef;
base._componentConstructor = componentRef.constructor;
}
}
if (!isUpdate || mountAll) mounts.unshift(component); else if (!skip && component.componentDidUpdate) component.componentDidUpdate(previousProps, previousState, previousContext);
var fn, cb = component._renderCallbacks;
if (cb) while (fn = cb.pop()) fn.call(component);
if (!diffLevel && !isChild) flushMounts();
}
}
function buildComponentFromVNode(dom, vnode, context, mountAll) {
var c = dom && dom._component, oldDom = dom, isDirectOwner = c && dom._componentConstructor === vnode.nodeName, isOwner = isDirectOwner, props = getNodeProps(vnode);
while (c && !isOwner && (c = c._parentComponent)) isOwner = c.constructor === vnode.nodeName;
if (c && isOwner && (!mountAll || c._component)) {
setComponentProps(c, props, 3, context, mountAll);
dom = c.base;
} else {
if (c && !isDirectOwner) {
unmountComponent(c, !0);
dom = oldDom = null;
}
c = createComponent(vnode.nodeName, props, context);
if (dom && !c.nextBase) c.nextBase = dom;
setComponentProps(c, props, 1, context, mountAll);
dom = c.base;
if (oldDom && dom !== oldDom) {
oldDom._component = null;
recollectNodeTree(oldDom);
}
}
return dom;
}
function unmountComponent(component, remove) {
var base = component.base;
component._disable = !0;
if (component.componentWillUnmount) component.componentWillUnmount();
component.base = null;
var inner = component._component;
if (inner) unmountComponent(inner, remove); else if (base) {
if (base[ATTR_KEY] && base[ATTR_KEY].ref) base[ATTR_KEY].ref(null);
component.nextBase = base;
if (remove) {
removeNode(base);
collectComponent(component);
}
removeOrphanedChildren(base.childNodes, !remove);
}
if (component.__ref) component.__ref(null);
if (component.componentDidUnmount) component.componentDidUnmount();
}
function Component(props, context) {
this._dirty = !0;
this.context = context;
this.props = props;
if (!this.state) this.state = {};
}
function render(vnode, parent, merge) {
return diff(merge, vnode, {}, !1, parent);
}
var options = {};
var stack = [];
var lcCache = {};
var toLowerCase = function(s) {
return lcCache[s] || (lcCache[s] = s.toLowerCase());
};
var resolved = 'undefined' != typeof Promise && Promise.resolve();
var defer = resolved ? function(f) {
resolved.then(f);
} : setTimeout;
var EMPTY = {};
var ATTR_KEY = 'undefined' != typeof Symbol ? Symbol.for('preactattr') : '__preactattr_';
var NON_DIMENSION_PROPS = {
boxFlex: 1,
boxFlexGroup: 1,
columnCount: 1,
fillOpacity: 1,
flex: 1,
flexGrow: 1,
flexPositive: 1,
flexShrink: 1,
flexNegative: 1,
fontWeight: 1,
lineClamp: 1,
lineHeight: 1,
opacity: 1,
order: 1,
orphans: 1,
strokeOpacity: 1,
widows: 1,
zIndex: 1,
zoom: 1
};
var NON_BUBBLING_EVENTS = {
blur: 1,
error: 1,
focus: 1,
load: 1,
resize: 1,
scroll: 1
};
var items = [];
var nodes = {};
var mounts = [];
var diffLevel = 0;
var isSvgMode = !1;
var components = {};
extend(Component.prototype, {
linkState: function(key, eventPath) {
var c = this._linkedStates || (this._linkedStates = {});
return c[key + eventPath] || (c[key + eventPath] = createLinkedState(this, key, eventPath));
},
setState: function(state, callback) {
var s = this.state;
if (!this.prevState) this.prevState = clone(s);
extend(s, isFunction(state) ? state(s, this.props) : state);
if (callback) (this._renderCallbacks = this._renderCallbacks || []).push(callback);
enqueueRender(this);
},
forceUpdate: function() {
renderComponent(this, 2);
},
render: function() {}
});
exports.h = h;
exports.cloneElement = cloneElement;
exports.Component = Component;
exports.render = render;
exports.rerender = rerender;
exports.options = options;
});
//# sourceMappingURL=preact.js.map

24
lib/wallet/renderHtml.ts
View File

@ -24,26 +24,26 @@
import {AmountJson, Contract} from "./types";
let h = preact.h;
export function prettyAmount(amount: AmountJson) {
let v = amount.value + amount.fraction / 1e6;
return `${v.toFixed(2)} ${amount.currency}`;
}
export function renderContract(contract: Contract): any {
export function renderContract(contract: Contract): JSX.Element {
let merchantName = m("strong", contract.merchant.name);
let amount = m("strong", prettyAmount(contract.amount));
return m("div", {}, [
m("p",
i18n.parts`${merchantName}
return h("div", {},
h("p", {},
i18n.parts`${merchantName}
wants to enter a contract over ${amount}
with you.`),
m("p",
i18n`You are about to purchase:`),
m('ul',
contract.products.map(
(p: any) => m("li",
`${p.description}: ${prettyAmount(p.price)}`)))
]);
h("p", {},
i18n`You are about to purchase:`),
h('ul', {},
...contract.products.map(
(p: any) => h("li", {},
`${p.description}: ${prettyAmount(p.price)}`))));
}

3
pages/confirm-contract.html
View File

@ -11,9 +11,10 @@
<script src="../lib/vendor/URI.js"></script>
<script src="../lib/vendor/mithril.js"></script>
<script src="../lib/vendor/preact.js"></script>
<script src="../lib/vendor/lodash.core.min.js"></script>
<script src="../lib/vendor/system-csp-production.src.js"></script>
<script src="../lib/vendor/jed.js"></script>
<!-- <script src="../lib/vendor/jed.js"></script> -->
<script src="../lib/i18n.js"></script>
<script src="../i18n/strings.js"></script>
<script src="../lib/module-trampoline.js"></script>

235
pages/confirm-contract.tsx
View File

@ -22,43 +22,157 @@
*/
/// <reference path="../lib/decl/handlebars/handlebars.d.ts" />
import MithrilComponent = _mithril.MithrilComponent;
/// <reference path="../lib/decl/preact.d.ts" />
import {substituteFulfillmentUrl} from "../lib/wallet/helpers";
import m from "mithril";
import {Contract, AmountJson} from "../lib/wallet/types";
import {renderContract, prettyAmount} from "../lib/wallet/renderHtml";
"use strict";
const Details = {
controller() {
return {collapsed: m.prop(true)};
},
view(ctrl: any, contract: Contract) {
if (ctrl.collapsed()) {
return m("div", [
m("button.linky", {
onclick: () => {
ctrl.collapsed(false);
}
}, "show more details")
]);
interface DetailState {
collapsed: boolean;
}
interface DetailProps {
contract: Contract;
}
let h = preact.h;
class Details extends preact.Component<DetailProps, DetailState> {
constructor() {
super();
this.state = {
collapsed: true
};
}
render(props: DetailProps, state: DetailState) {
if (state.collapsed) {
return h("div", {},
h("button", {
className: "linky",
onClick: () => {
this.setState({collapsed: false});
}
}, "show more details"));
} else {
return m("div", [
m("button.linky", {
onclick: () => {
ctrl.collapsed(true);
}
}, "show less details"),
m("div", [
"Accepted exchanges:",
m("ul",
contract.exchanges.map(e => m("li", `${e.url}: ${e.master_pub}`)))
])
]);
return h("div", {},
h("button", {
className: "linky",
onClick: () => {
this.setState({collapsed: true});
}
}, "show less details"),
h("div", {},
"Accepted exchanges:",
h("ul", {},
...props.contract.exchanges.map(
e => h("li", {}, `${e.url}: ${e.master_pub}`)))));
}
}
};
}
interface ContractPromptProps {
offer: any;
}
interface ContractPromptState {
error: string|null;
payDisabled: boolean;
}
class ContractPrompt extends preact.Component<ContractPromptProps, ContractPromptState> {
constructor() {
super();
this.state = {
error: null,
payDisabled: true,
}
}
componentWillMount() {
this.checkPayment();
}
componentWillUnmount() {
// FIXME: abort running ops
}
checkPayment() {
let msg = {
type: 'check-pay',
detail: {
offer: this.props.offer
}
};
chrome.runtime.sendMessage(msg, (resp) => {
if (resp.error) {
console.log("check-pay error", JSON.stringify(resp));
switch (resp.error) {
case "coins-insufficient":
this.state.error = i18n`You have insufficient funds of the requested currency in your wallet.`;
break;
default:
this.state.error = `Error: ${resp.error}`;
break;
}
this.state.payDisabled = true;
} else {
this.state.payDisabled = false;
this.state.error = null;
}
this.forceUpdate();
window.setTimeout(() => this.checkPayment(), 300);
});
}
doPayment() {
let d = {offer: this.props.offer};
chrome.runtime.sendMessage({type: 'confirm-pay', detail: d}, (resp) => {
if (resp.error) {
console.log("confirm-pay error", JSON.stringify(resp));
switch (resp.error) {
case "coins-insufficient":
this.state.error = "You do not have enough coins of the" +
" requested currency.";
break;
default:
this.state.error = `Error: ${resp.error}`;
break;
}
preact.rerender();
return;
}
let c = d.offer.contract;
console.log("contract", c);
document.location.href = substituteFulfillmentUrl(c.fulfillment_url,
this.props.offer);
});
}
render(props: ContractPromptProps, state: ContractPromptState) {
let c = props.offer.contract;
return h("div", {},
renderContract(c),
h("button",
{
onClick: () => this.doPayment(),
disabled: state.payDisabled,
"className": "accept"
},
i18n`Confirm Payment`),
(state.error ? h("p",
{className: "errorbox"},
state.error) : h("p", "")),
h(Details, {contract: c})
);
}
}
export function main() {
let url = URI(document.location.href);
@ -66,69 +180,8 @@ export function main() {
let offer = JSON.parse(query.offer);
console.dir(offer);
let contract = offer.contract;
let error: string|null = null;
let payDisabled = true;
var Contract = {
view(ctrl: any) {
return [
renderContract(contract),
m("button.accept",
{onclick: doPayment, disabled: payDisabled},
i18n`Confirm Payment`),
(error ? m("p.errorbox", error) : []),
m(Details, contract)
];
}
};
m.mount(document.getElementById("contract")!, Contract);
function checkPayment() {
chrome.runtime.sendMessage({type: 'check-pay', detail: {offer}}, (resp) => {
if (resp.error) {
console.log("check-pay error", JSON.stringify(resp));
switch (resp.error) {
case "coins-insufficient":
error = i18n`You have insufficient funds of the requested currency in your wallet.`;
break;
default:
error = `Error: ${resp.error}`;
break;
}
payDisabled = true;
} else {
payDisabled = false;
error = null;
}
m.redraw();
window.setTimeout(checkPayment, 300);
});
}
checkPayment();
function doPayment() {
let d = {offer};
chrome.runtime.sendMessage({type: 'confirm-pay', detail: d}, (resp) => {
if (resp.error) {
console.log("confirm-pay error", JSON.stringify(resp));
switch (resp.error) {
case "coins-insufficient":
error = "You do not have enough coins of the requested currency.";
break;
default:
error = `Error: ${resp.error}`;
break;
}
m.redraw();
return;
}
let c = d.offer.contract;
console.log("contract", c);
document.location.href = substituteFulfillmentUrl(c.fulfillment_url,
offer);
});
}
let prompt = h(ContractPrompt, {offer});
preact.render(prompt, document.getElementById("contract")!);
}