Merge pull request #15 from andrerfneves/feature/sidebar
Feature/sidebar
|
@ -34,7 +34,7 @@
|
||||||
"max-len": [
|
"max-len": [
|
||||||
"error",
|
"error",
|
||||||
{
|
{
|
||||||
"code": 120,
|
"code": 80,
|
||||||
"tabWidth": 2,
|
"tabWidth": 2,
|
||||||
"ignoreUrls": true,
|
"ignoreUrls": true,
|
||||||
"ignoreComments": true,
|
"ignoreComments": true,
|
||||||
|
@ -43,7 +43,6 @@
|
||||||
"ignoreTrailingComments": true
|
"ignoreTrailingComments": true
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"consistent-return": 0,
|
"consistent-return": 0
|
||||||
"react/destructuring-assignment": 0
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,6 +32,8 @@ describe('WalletSummary Actions', () => {
|
||||||
transparent: 5000,
|
transparent: 5000,
|
||||||
shielded: 5000,
|
shielded: 5000,
|
||||||
addresses: [],
|
addresses: [],
|
||||||
|
transactions: {},
|
||||||
|
zecPrice: 50,
|
||||||
};
|
};
|
||||||
|
|
||||||
store.dispatch(loadWalletSummarySuccess(payload));
|
store.dispatch(loadWalletSummarySuccess(payload));
|
|
@ -13,7 +13,7 @@ describe('<Sidebar />', () => {
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
const { asFragment } = render(
|
const { asFragment } = render(
|
||||||
<MemoryRouter>
|
<MemoryRouter>
|
||||||
<SidebarComponent />
|
<SidebarComponent location={{ pathname: '/', hash: '/', search: '' }} />
|
||||||
</MemoryRouter>,
|
</MemoryRouter>,
|
||||||
);
|
);
|
||||||
|
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.891 10.875"><defs><style>.a{fill:#3b3b3f;stroke:#3b3b3f;stroke-width:0.5px;}</style></defs><g transform="translate(0.283 0.286)"><g transform="translate(-0.001 0.004)"><path class="a" d="M2.269,5.239c1.185,1.183,2.35,2.345,3.513,3.508a.938.938,0,1,1-1.307,1.342c-.786-.777-1.564-1.561-2.346-2.342q-.89-.89-1.779-1.78A.943.943,0,0,1,.345,4.5Q2.4,2.446,4.449.395A.938.938,0,0,1,5.441.115a.891.891,0,0,1,.638.7.941.941,0,0,1-.307.917q-1.654,1.649-3.3,3.3C2.408,5.091,2.349,5.156,2.269,5.239Z" transform="translate(0.001 -0.067)"/><path class="a" d="M297.98,5.214c-1.2-1.2-2.36-2.357-3.522-3.512a1.015,1.015,0,0,1-.336-.674.944.944,0,0,1,.536-.9.932.932,0,0,1,1.071.195c.592.582,1.177,1.173,1.765,1.76l2.344,2.344a.959.959,0,0,1,.01,1.534q-2.027,2.028-4.054,4.057a.948.948,0,0,1-1.053.283.933.933,0,0,1-.307-1.576q1.655-1.664,3.319-3.319C297.815,5.341,297.888,5.29,297.98,5.214Z" transform="translate(-277.88 -0.034)"/><path class="a" d="M142.53,9.378a3.646,3.646,0,0,1,.149-.453q1.983-4.169,3.976-8.332a.939.939,0,1,1,1.7.8q-1.995,4.19-4,8.375a.93.93,0,0,1-1.1.533A1,1,0,0,1,142.53,9.378Z" transform="translate(-134.629 -0.004)"/></g></g></svg>
|
After Width: | Height: | Size: 1.2 KiB |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.891 10.875"><defs><style>.a{fill:#f4b728;stroke:#3b3b3f;stroke-width:0.5px;}</style></defs><g transform="translate(0.283 0.286)"><g transform="translate(-0.001 0.004)"><path class="a" d="M2.269,5.239c1.185,1.183,2.35,2.345,3.513,3.508a.938.938,0,1,1-1.307,1.342c-.786-.777-1.564-1.561-2.346-2.342q-.89-.89-1.779-1.78A.943.943,0,0,1,.345,4.5Q2.4,2.446,4.449.395A.938.938,0,0,1,5.441.115a.891.891,0,0,1,.638.7.941.941,0,0,1-.307.917q-1.654,1.649-3.3,3.3C2.408,5.091,2.349,5.156,2.269,5.239Z" transform="translate(0.001 -0.067)"/><path class="a" d="M297.98,5.214c-1.2-1.2-2.36-2.357-3.522-3.512a1.015,1.015,0,0,1-.336-.674.944.944,0,0,1,.536-.9.932.932,0,0,1,1.071.195c.592.582,1.177,1.173,1.765,1.76l2.344,2.344a.959.959,0,0,1,.01,1.534q-2.027,2.028-4.054,4.057a.948.948,0,0,1-1.053.283.933.933,0,0,1-.307-1.576q1.655-1.664,3.319-3.319C297.815,5.341,297.888,5.29,297.98,5.214Z" transform="translate(-277.88 -0.034)"/><path class="a" d="M142.53,9.378a3.646,3.646,0,0,1,.149-.453q1.983-4.169,3.976-8.332a.939.939,0,1,1,1.7.8q-1.995,4.19-4,8.375a.93.93,0,0,1-1.1.533A1,1,0,0,1,142.53,9.378Z" transform="translate(-134.629 -0.004)"/></g></g></svg>
|
After Width: | Height: | Size: 1.2 KiB |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.091"><defs><style>.a{fill:#3b3b3f;}</style></defs><rect class="a" width="9.091" height="9.091" rx="2"/><rect class="a" width="20" height="8.182" rx="2" transform="translate(0 10.909)"/><rect class="a" width="9.091" height="9.091" rx="2" transform="translate(10.909)"/></svg>
|
After Width: | Height: | Size: 333 B |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 19.091"><defs><style>.a{fill:#f4b728;}</style></defs><rect class="a" width="9.091" height="9.091" rx="2"/><rect class="a" width="20" height="8.182" rx="2" transform="translate(0 10.909)"/><rect class="a" width="9.091" height="9.091" rx="2" transform="translate(10.909)"/></svg>
|
After Width: | Height: | Size: 333 B |
|
@ -0,0 +1,7 @@
|
||||||
|
<?xml version="1.0" ?>
|
||||||
|
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
|
||||||
|
<svg enable-background="new 0 0 256 256" height="256px" id="Layer_1" version="1.1" viewBox="0 0 256 256" width="256px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||||
|
<circle fill="white" cx="57.6" cy="128" r="20"/>
|
||||||
|
<circle fill="white" cx="128" cy="128" r="20"/>
|
||||||
|
<circle fill="white" cx="198.4" cy="128" r="20"/>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 502 B |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.854"><defs><style>.a{fill:#3b3b3f;}</style></defs><g transform="translate(0)"><path class="a" d="M6.612,39.045h0a.9.9,0,0,1-.9.9h-3.9v9.638H5.959c.5,0,.675.176.675.682,0,.768,0,1.536,0,2.3,0,.424.191.619.617.62q2.387,0,4.774,0c.436,0,.627-.2.628-.638,0-.784,0-1.568,0-2.352,0-.429.186-.616.616-.616q1.94,0,3.88,0h.3V39.956H13.569a.9.9,0,0,1-.9-.9v-.022a.9.9,0,0,1,.9-.9c1.227,0,3.415,0,4.657,0a.948.948,0,0,1,1.053,1.066q0,7.972,0,15.944A1.048,1.048,0,0,1,18.23,56.2H1.041A.931.931,0,0,1,0,55.152q0-8.007,0-16.015a.912.912,0,0,1,.951-1c1.293-.006,3.529,0,4.769.006A.9.9,0,0,1,6.612,39.045Z" transform="translate(0.002 -36.345)"/><path class="a" d="M112.724,5.946l.016-.016a1.125,1.125,0,0,1,1.6.005l1.14,1.154.06-.024V1.222A1.221,1.221,0,0,1,116.756,0h0a1.222,1.222,0,0,1,1.222,1.222V7.057l1.143-1.144a1.125,1.125,0,0,1,1.6,0l.04.041a1.125,1.125,0,0,1,0,1.586l-3.4,3.4a.86.86,0,0,1-1.216,0l-3.409-3.41A1.125,1.125,0,0,1,112.724,5.946Z" transform="translate(-107.108)"/></g></svg>
|
After Width: | Height: | Size: 1.0 KiB |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.854"><defs><style>.a{fill:#f4b728;}</style></defs><g transform="translate(0)"><path class="a" d="M6.612,39.045h0a.9.9,0,0,1-.9.9h-3.9v9.638H5.959c.5,0,.675.176.675.682,0,.768,0,1.536,0,2.3,0,.424.191.619.617.62q2.387,0,4.774,0c.436,0,.627-.2.628-.638,0-.784,0-1.568,0-2.352,0-.429.186-.616.616-.616q1.94,0,3.88,0h.3V39.956H13.569a.9.9,0,0,1-.9-.9v-.022a.9.9,0,0,1,.9-.9c1.227,0,3.415,0,4.657,0a.948.948,0,0,1,1.053,1.066q0,7.972,0,15.944A1.048,1.048,0,0,1,18.23,56.2H1.041A.931.931,0,0,1,0,55.152q0-8.007,0-16.015a.912.912,0,0,1,.951-1c1.293-.006,3.529,0,4.769.006A.9.9,0,0,1,6.612,39.045Z" transform="translate(0.002 -36.345)"/><path class="a" d="M112.724,5.946l.016-.016a1.125,1.125,0,0,1,1.6.005l1.14,1.154.06-.024V1.222A1.221,1.221,0,0,1,116.756,0h0a1.222,1.222,0,0,1,1.222,1.222V7.057l1.143-1.144a1.125,1.125,0,0,1,1.6,0l.04.041a1.125,1.125,0,0,1,0,1.586l-3.4,3.4a.86.86,0,0,1-1.216,0l-3.409-3.41A1.125,1.125,0,0,1,112.724,5.946Z" transform="translate(-107.108)"/></g></svg>
|
After Width: | Height: | Size: 1.0 KiB |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.283"><defs><style>.a{fill:#3b3b3f;}</style></defs><g transform="translate(0 0)"><path class="a" d="M7.454,19.286c-.055-.021-.111-.038-.163-.063a.657.657,0,0,1-.4-.613c-.005-1.236,0-2.472,0-3.708a.213.213,0,0,1,.049-.12q1.437-1.766,2.878-3.528l6.229-7.635a.277.277,0,0,0,.051-.085.5.5,0,0,0-.042.029L9.744,9.019q-2.5,2.166-5,4.333a.12.12,0,0,1-.148.015Q2.513,12.512.432,11.661a.683.683,0,0,1-.086-1.232L3.87,8.4,18.218.118a.666.666,0,0,1,.751,0,.663.663,0,0,1,.294.717q-.356,2.122-.708,4.245Q18.2,7.241,17.838,9.4q-.428,2.568-.858,5.136-.23,1.38-.458,2.763a.686.686,0,0,1-.969.55q-2.369-.966-4.734-1.937a.138.138,0,0,0-.193.048q-1.254,1.535-2.511,3.066a.778.778,0,0,1-.424.264C7.612,19.286,7.533,19.286,7.454,19.286Z" transform="translate(0.003 -0.005)"/></g></svg>
|
After Width: | Height: | Size: 826 B |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19.28 19.283"><defs><style>.a{fill:#f4b728;}</style></defs><g transform="translate(0 0)"><path class="a" d="M7.454,19.286c-.055-.021-.111-.038-.163-.063a.657.657,0,0,1-.4-.613c-.005-1.236,0-2.472,0-3.708a.213.213,0,0,1,.049-.12q1.437-1.766,2.878-3.528l6.229-7.635a.277.277,0,0,0,.051-.085.5.5,0,0,0-.042.029L9.744,9.019q-2.5,2.166-5,4.333a.12.12,0,0,1-.148.015Q2.513,12.512.432,11.661a.683.683,0,0,1-.086-1.232L3.87,8.4,18.218.118a.666.666,0,0,1,.751,0,.663.663,0,0,1,.294.717q-.356,2.122-.708,4.245Q18.2,7.241,17.838,9.4q-.428,2.568-.858,5.136-.23,1.38-.458,2.763a.686.686,0,0,1-.969.55q-2.369-.966-4.734-1.937a.138.138,0,0,0-.193.048q-1.254,1.535-2.511,3.066a.778.778,0,0,1-.424.264C7.612,19.286,7.533,19.286,7.454,19.286Z" transform="translate(0.003 -0.005)"/></g></svg>
|
After Width: | Height: | Size: 826 B |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.327 20.328"><defs><style>.a{fill:#3b3b3f;fill-rule:evenodd;}</style></defs><path class="a" d="M20.311,9.58a.868.868,0,0,0-.725-.865c-.067-.017-.134-.017-.2-.029-.58-.1-1.159-.2-1.763-.312-.218-.571-.434-1.136-.658-1.713.1-.134.186-.265.283-.39.253-.32.5-.65.772-.953A1.017,1.017,0,0,0,18,3.707c-.146-.143-.271-.306-.408-.457-.577-.638-.859-.679-1.588-.23-.484.3-.961.6-1.471.921A8.953,8.953,0,0,0,12,2.771c-.047-.245-.093-.463-.131-.685-.07-.425-.137-.851-.213-1.276a.874.874,0,0,0-.827-.778,6.587,6.587,0,0,0-1.291,0A.861.861,0,0,0,8.708.8c-.041.248-.067.5-.131.737a6.365,6.365,0,0,1-.242,1.194c-.749.315-1.436.6-2.153.9-.131-.087-.283-.184-.431-.285-.373-.262-.734-.539-1.113-.787A.881.881,0,0,0,3.4,2.658c-.268.245-.527.5-.772.772a.863.863,0,0,0-.09,1.229c.236.361.5.7.746,1.058.125.184.312.338.323.51-.312.752-.6,1.439-.891,2.141-.111.023-.218.047-.329.064-.536.093-1.078.172-1.611.277a.855.855,0,0,0-.76.836,12.027,12.027,0,0,0,0,1.3.828.828,0,0,0,.647.787c.151.047.312.052.466.087a11.385,11.385,0,0,1,1.626.329c.23.609.446,1.177.667,1.765-.189.236-.37.466-.554.7-.227.283-.466.559-.679.854A.888.888,0,0,0,2.2,16.493a10.568,10.568,0,0,0,.816.915.842.842,0,0,0,1.116.157c.181-.1.35-.21.524-.318l1.2-.743c.437.224.83.452,1.241.635s.842.32,1.261.478c.038.186.073.341.1.5.087.492.157.988.262,1.477a.809.809,0,0,0,.848.728c.431.017.865.015,1.3-.006a.781.781,0,0,0,.749-.591c.061-.192.079-.4.125-.6a13.164,13.164,0,0,1,.28-1.492l2.141-.88c.192.131.4.268.6.411.335.236.661.484,1,.708a.863.863,0,0,0,1.232-.082,10.682,10.682,0,0,0,.772-.769.9.9,0,0,0,.093-1.238c-.277-.417-.58-.813-.865-1.224-.1-.146-.184-.306-.245-.408.3-.728.583-1.4.9-2.15.274-.05.565-.1.854-.154.335-.058.676-.1,1.008-.166a.891.891,0,0,0,.813-.935C20.329,10.352,20.332,9.964,20.311,9.58ZM10.188,14a3.779,3.779,0,0,1-3.8-3.825,3.812,3.812,0,1,1,7.624.023A3.769,3.769,0,0,1,10.188,14Z" transform="translate(0 -0.001)"/></svg>
|
After Width: | Height: | Size: 1.9 KiB |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.327 20.328"><defs><style>.a{fill:#f4b728;fill-rule:evenodd;}</style></defs><path class="a" d="M20.311,9.58a.868.868,0,0,0-.725-.865c-.067-.017-.134-.017-.2-.029-.58-.1-1.159-.2-1.763-.312-.218-.571-.434-1.136-.658-1.713.1-.134.186-.265.283-.39.253-.32.5-.65.772-.953A1.017,1.017,0,0,0,18,3.707c-.146-.143-.271-.306-.408-.457-.577-.638-.859-.679-1.588-.23-.484.3-.961.6-1.471.921A8.953,8.953,0,0,0,12,2.771c-.047-.245-.093-.463-.131-.685-.07-.425-.137-.851-.213-1.276a.874.874,0,0,0-.827-.778,6.587,6.587,0,0,0-1.291,0A.861.861,0,0,0,8.708.8c-.041.248-.067.5-.131.737a6.365,6.365,0,0,1-.242,1.194c-.749.315-1.436.6-2.153.9-.131-.087-.283-.184-.431-.285-.373-.262-.734-.539-1.113-.787A.881.881,0,0,0,3.4,2.658c-.268.245-.527.5-.772.772a.863.863,0,0,0-.09,1.229c.236.361.5.7.746,1.058.125.184.312.338.323.51-.312.752-.6,1.439-.891,2.141-.111.023-.218.047-.329.064-.536.093-1.078.172-1.611.277a.855.855,0,0,0-.76.836,12.027,12.027,0,0,0,0,1.3.828.828,0,0,0,.647.787c.151.047.312.052.466.087a11.385,11.385,0,0,1,1.626.329c.23.609.446,1.177.667,1.765-.189.236-.37.466-.554.7-.227.283-.466.559-.679.854A.888.888,0,0,0,2.2,16.493a10.568,10.568,0,0,0,.816.915.842.842,0,0,0,1.116.157c.181-.1.35-.21.524-.318l1.2-.743c.437.224.83.452,1.241.635s.842.32,1.261.478c.038.186.073.341.1.5.087.492.157.988.262,1.477a.809.809,0,0,0,.848.728c.431.017.865.015,1.3-.006a.781.781,0,0,0,.749-.591c.061-.192.079-.4.125-.6a13.164,13.164,0,0,1,.28-1.492l2.141-.88c.192.131.4.268.6.411.335.236.661.484,1,.708a.863.863,0,0,0,1.232-.082,10.682,10.682,0,0,0,.772-.769.9.9,0,0,0,.093-1.238c-.277-.417-.58-.813-.865-1.224-.1-.146-.184-.306-.245-.408.3-.728.583-1.4.9-2.15.274-.05.565-.1.854-.154.335-.058.676-.1,1.008-.166a.891.891,0,0,0,.813-.935C20.329,10.352,20.332,9.964,20.311,9.58ZM10.188,14a3.779,3.779,0,0,1-3.8-3.825,3.812,3.812,0,1,1,7.624.023A3.769,3.769,0,0,1,10.188,14Z" transform="translate(0 -0.001)"/></svg>
|
After Width: | Height: | Size: 1.9 KiB |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.342 18.853"><defs><style>.a{fill:#6aeac0;}</style></defs><g transform="translate(34.55 55.562) rotate(180)"><g transform="translate(22.05 41.044)"><path class="a" d="M2.822,2.39h.817l3.889-.011c.69,0,1.381,0,2.071,0a.836.836,0,0,1,.1,1.668,1.591,1.591,0,0,1-.187.007q-4.277,0-8.55,0a1.1,1.1,0,0,1-.511-.093A.811.811,0,0,1,.228,2.67Q1.426,1.444,2.642.233A.8.8,0,0,1,3.777.24a.8.8,0,0,1,.015,1.127c-.295.31-.6.612-.907.918a.4.4,0,0,1-.1.056A.407.407,0,0,1,2.822,2.39Z" transform="translate(6.505 0) rotate(90)"/><path class="a" d="M2.822,1.664h.817l3.889.011c.69,0,1.381,0,2.071,0A.836.836,0,0,0,9.7.011,1.591,1.591,0,0,0,9.517,0Q5.24,0,.967,0A1.1,1.1,0,0,0,.455.093.811.811,0,0,0,.228,1.385q1.2,1.226,2.415,2.437A.808.808,0,0,0,3.792,2.687c-.295-.31-.6-.612-.907-.918a.4.4,0,0,0-.1-.056A.407.407,0,0,0,2.822,1.664Z" transform="translate(4.054 0) rotate(90)"/></g><g transform="translate(16.208 36.709)"><g transform="translate(0 0)"><path class="a" d="M9.568,0c.192.018.384.033.572.054a8.642,8.642,0,0,1,3.97,1.44,9.218,9.218,0,0,1,4.013,5.978,9.494,9.494,0,0,1-.923,6.481.923.923,0,0,0-.047.1.812.812,0,0,1-.919.5.847.847,0,0,1-.666-.85.325.325,0,0,1,.029-.13c.159-.38.322-.76.478-1.143a7.694,7.694,0,0,0,.59-3.456,7.687,7.687,0,0,0-2.4-5.236,7.093,7.093,0,0,0-4.071-1.979A7.2,7.2,0,0,0,4.249,3.579a7.447,7.447,0,0,0-2.5,4.614,7.65,7.65,0,0,0,1.925,6.492,7.156,7.156,0,0,0,4.429,2.377,7.222,7.222,0,0,0,5.453-1.39.387.387,0,0,0,.058-.051.8.8,0,0,1,.9-.17.871.871,0,0,1,.5.8.711.711,0,0,1-.275.572,8.448,8.448,0,0,1-4.48,1.954,8.725,8.725,0,0,1-6.846-2A9.249,9.249,0,0,1,.182,11.337a9.4,9.4,0,0,1-.127-3A9.343,9.343,0,0,1,2.36,3.108,8.962,8.962,0,0,1,7.234.214a8.521,8.521,0,0,1,1.419-.2A1.044,1.044,0,0,0,8.758,0C9.029,0,9.3,0,9.568,0Z" transform="translate(0.01)"/></g></g></g></svg>
|
After Width: | Height: | Size: 1.8 KiB |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.342 18.853"><defs><style>.a{fill:#ff6c6c;}</style></defs><g transform="translate(-16.208 -36.709)"><g transform="translate(22.05 41.044)"><path class="a" d="M2.822,2.39h.817l3.889-.011c.69,0,1.381,0,2.071,0a.836.836,0,0,1,.1,1.668,1.591,1.591,0,0,1-.187.007q-4.277,0-8.55,0a1.1,1.1,0,0,1-.511-.093A.811.811,0,0,1,.228,2.67Q1.426,1.444,2.642.233A.8.8,0,0,1,3.777.24a.8.8,0,0,1,.015,1.127c-.295.31-.6.612-.907.918a.4.4,0,0,1-.1.056A.407.407,0,0,1,2.822,2.39Z" transform="translate(6.505 0) rotate(90)"/><path class="a" d="M2.822,1.664h.817l3.889.011c.69,0,1.381,0,2.071,0A.836.836,0,0,0,9.7.011,1.591,1.591,0,0,0,9.517,0Q5.24,0,.967,0A1.1,1.1,0,0,0,.455.093.811.811,0,0,0,.228,1.385q1.2,1.226,2.415,2.437A.808.808,0,0,0,3.792,2.687c-.295-.31-.6-.612-.907-.918a.4.4,0,0,0-.1-.056A.407.407,0,0,0,2.822,1.664Z" transform="translate(4.054 0) rotate(90)"/></g><g transform="translate(16.208 36.709)"><g transform="translate(0 0)"><path class="a" d="M9.568,0c.192.018.384.033.572.054a8.642,8.642,0,0,1,3.97,1.44,9.218,9.218,0,0,1,4.013,5.978,9.494,9.494,0,0,1-.923,6.481.923.923,0,0,0-.047.1.812.812,0,0,1-.919.5.847.847,0,0,1-.666-.85.325.325,0,0,1,.029-.13c.159-.38.322-.76.478-1.143a7.694,7.694,0,0,0,.59-3.456,7.687,7.687,0,0,0-2.4-5.236,7.093,7.093,0,0,0-4.071-1.979A7.2,7.2,0,0,0,4.249,3.579a7.447,7.447,0,0,0-2.5,4.614,7.65,7.65,0,0,0,1.925,6.492,7.156,7.156,0,0,0,4.429,2.377,7.222,7.222,0,0,0,5.453-1.39.387.387,0,0,0,.058-.051.8.8,0,0,1,.9-.17.871.871,0,0,1,.5.8.711.711,0,0,1-.275.572,8.448,8.448,0,0,1-4.48,1.954,8.725,8.725,0,0,1-6.846-2A9.249,9.249,0,0,1,.182,11.337a9.4,9.4,0,0,1-.127-3A9.343,9.343,0,0,1,2.36,3.108,8.962,8.962,0,0,1,7.234.214a8.521,8.521,0,0,1,1.419-.2A1.044,1.044,0,0,0,8.758,0C9.029,0,9.3,0,9.568,0Z" transform="translate(0.01)"/></g></g></g></svg>
|
After Width: | Height: | Size: 1.8 KiB |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 21.4"><defs><style>.a{fill:#3b3b3f;}</style></defs><g transform="translate(0)"><path class="a" d="M10.862,0c.218.021.435.037.649.062A9.81,9.81,0,0,1,16.017,1.7a10.464,10.464,0,0,1,4.555,6.786,10.777,10.777,0,0,1-1.047,7.356,1.048,1.048,0,0,0-.053.119.921.921,0,0,1-1.043.567.961.961,0,0,1-.756-.965.369.369,0,0,1,.033-.148c.181-.431.366-.863.542-1.3a8.733,8.733,0,0,0,.67-3.923,8.725,8.725,0,0,0-2.723-5.944A8.051,8.051,0,0,0,11.573,2,8.176,8.176,0,0,0,4.824,4.062,8.452,8.452,0,0,0,1.99,9.3a8.683,8.683,0,0,0,2.185,7.369,8.123,8.123,0,0,0,5.028,2.7,8.2,8.2,0,0,0,6.19-1.577.44.44,0,0,0,.066-.058.909.909,0,0,1,1.027-.193.988.988,0,0,1,.571.908.807.807,0,0,1-.312.649,9.59,9.59,0,0,1-5.085,2.218,9.9,9.9,0,0,1-7.771-2.271,10.5,10.5,0,0,1-3.68-6.174A10.675,10.675,0,0,1,.064,9.46,10.6,10.6,0,0,1,2.68,3.528,10.173,10.173,0,0,1,8.213.242,9.672,9.672,0,0,1,9.823.021,1.185,1.185,0,0,0,9.942,0C10.25,0,10.554,0,10.862,0Z" transform="translate(0.01)"/><path class="a" d="M14.3,17.106h.9l4.28-.012c.76,0,1.52,0,2.28,0a.92.92,0,0,1,.115,1.836,1.751,1.751,0,0,1-.205.008q-4.707,0-9.41,0a1.214,1.214,0,0,1-.563-.1.893.893,0,0,1-.251-1.421q1.318-1.349,2.658-2.682a.889.889,0,0,1,1.265,1.249c-.324.341-.661.674-1,1.01a.436.436,0,0,1-.115.062A.448.448,0,0,1,14.3,17.106Z" transform="translate(-6.589 -8.53)"/><path class="a" d="M19.609,29.83h-.14q-3.654.006-7.3.008a.932.932,0,0,1-.928-.641A.915.915,0,0,1,12.1,28c1.109-.008,2.218,0,3.331,0h6.334a.908.908,0,0,1,.949.858.881.881,0,0,1-.283.694c-.32.32-.641.645-.961.969l-1.631,1.643A.892.892,0,0,1,18.7,32.3a.877.877,0,0,1-.164-1.339c.32-.341.657-.67.99-1a1.143,1.143,0,0,1,.111-.086A.094.094,0,0,1,19.609,29.83Z" transform="translate(-6.592 -16.498)"/></g></svg>
|
After Width: | Height: | Size: 1.7 KiB |
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20.82 21.4"><defs><style>.a{fill:#f4b728;}</style></defs><path class="a" d="M10.862,0c.218.021.435.037.649.062A9.81,9.81,0,0,1,16.017,1.7a10.464,10.464,0,0,1,4.555,6.786,10.777,10.777,0,0,1-1.047,7.356,1.048,1.048,0,0,0-.053.119.921.921,0,0,1-1.043.567.961.961,0,0,1-.756-.965.369.369,0,0,1,.033-.148c.181-.431.366-.863.542-1.3a8.733,8.733,0,0,0,.67-3.923,8.725,8.725,0,0,0-2.723-5.944A8.051,8.051,0,0,0,11.573,2,8.176,8.176,0,0,0,4.824,4.062,8.452,8.452,0,0,0,1.99,9.3a8.683,8.683,0,0,0,2.185,7.369,8.123,8.123,0,0,0,5.028,2.7,8.2,8.2,0,0,0,6.19-1.577.44.44,0,0,0,.066-.058.909.909,0,0,1,1.027-.193.988.988,0,0,1,.571.908.807.807,0,0,1-.312.649,9.59,9.59,0,0,1-5.085,2.218,9.9,9.9,0,0,1-7.771-2.271,10.5,10.5,0,0,1-3.68-6.174A10.675,10.675,0,0,1,.064,9.46,10.6,10.6,0,0,1,2.68,3.528,10.173,10.173,0,0,1,8.213.242,9.672,9.672,0,0,1,9.823.021,1.185,1.185,0,0,0,9.942,0C10.25,0,10.554,0,10.862,0Z" transform="translate(0.01)"/><path class="a" d="M14.3,17.106h.9l4.28-.012c.76,0,1.52,0,2.28,0a.92.92,0,0,1,.115,1.836,1.751,1.751,0,0,1-.205.008q-4.707,0-9.41,0a1.214,1.214,0,0,1-.563-.1.893.893,0,0,1-.251-1.421q1.318-1.349,2.658-2.682a.889.889,0,0,1,1.265,1.249c-.324.341-.661.674-1,1.01a.436.436,0,0,1-.115.062A.448.448,0,0,1,14.3,17.106Z" transform="translate(-6.589 -8.53)"/><path class="a" d="M19.609,29.83h-.14q-3.654.006-7.3.008a.932.932,0,0,1-.928-.641A.915.915,0,0,1,12.1,28c1.109-.008,2.218,0,3.331,0h6.334a.908.908,0,0,1,.949.858.881.881,0,0,1-.283.694c-.32.32-.641.645-.961.969l-1.631,1.643A.892.892,0,0,1,18.7,32.3a.877.877,0,0,1-.164-1.339c.32-.341.657-.67.99-1a1.143,1.143,0,0,1,.111-.086A.094.094,0,0,1,19.609,29.83Z" transform="translate(-6.592 -16.498)"/></svg>
|
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 24 KiB |
|
@ -4,6 +4,7 @@ import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
/* eslint-disable import/no-extraneous-dependencies */
|
/* eslint-disable import/no-extraneous-dependencies */
|
||||||
|
/* eslint-disable max-len */
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
import { darken } from 'polished';
|
import { darken } from 'polished';
|
||||||
|
|
||||||
|
@ -13,8 +14,14 @@ const defaultStyles = `
|
||||||
// $FlowFixMe
|
// $FlowFixMe
|
||||||
props => props.theme.fontFamily
|
props => props.theme.fontFamily
|
||||||
};
|
};
|
||||||
font-weight: bold;
|
font-weight: ${
|
||||||
font-size: 0.9em;
|
// $FlowFixMe
|
||||||
|
props => props.theme.fontWeight.bold
|
||||||
|
};
|
||||||
|
font-size: ${
|
||||||
|
// $FlowFixMe
|
||||||
|
props => `${props.theme.fontSize.text}em`
|
||||||
|
};
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
outline: none;
|
outline: none;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
|
|
|
@ -0,0 +1,29 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import type { Node } from 'react';
|
||||||
|
|
||||||
|
const Flex = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: ${props => props.alignItems};
|
||||||
|
justify-content: ${props => props.justifyContent};
|
||||||
|
`;
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
alignItems?: string,
|
||||||
|
justifyContent?: string,
|
||||||
|
className?: string,
|
||||||
|
children: Node,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ColumnComponent = ({ children, ...props }: Props) => (
|
||||||
|
<Flex {...props}>{React.Children.map(children, ch => ch)}</Flex>
|
||||||
|
);
|
||||||
|
|
||||||
|
ColumnComponent.defaultProps = {
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
justifyContent: 'flex-start',
|
||||||
|
className: '',
|
||||||
|
};
|
|
@ -11,7 +11,10 @@ import { TextComponent } from './text';
|
||||||
|
|
||||||
/* eslint-disable max-len */
|
/* eslint-disable max-len */
|
||||||
const MenuWrapper = styled.div`
|
const MenuWrapper = styled.div`
|
||||||
background-image: ${props => `linear-gradient(to right, ${darken(0.05, props.theme.colors.activeItem)}, ${props.theme.colors.activeItem})`};
|
background-image: ${props => `linear-gradient(to right, ${darken(
|
||||||
|
0.05,
|
||||||
|
props.theme.colors.activeItem,
|
||||||
|
)}, ${props.theme.colors.activeItem})`};
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
|
@ -68,22 +71,27 @@ export class DropdownComponent extends Component<Props, State> {
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { isOpen } = this.state;
|
||||||
|
const { label, options, renderTrigger } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PopoverWithStyle
|
<PopoverWithStyle
|
||||||
isOpen={this.state.isOpen}
|
isOpen={isOpen}
|
||||||
preferPlace='below'
|
preferPlace='below'
|
||||||
enterExitTransitionDurationMs={0}
|
enterExitTransitionDurationMs={0}
|
||||||
body={[
|
body={[
|
||||||
<ClickOutside onClickOutside={() => this.setState(() => ({ isOpen: false }))}>
|
<ClickOutside
|
||||||
|
onClickOutside={() => this.setState(() => ({ isOpen: false }))}
|
||||||
|
>
|
||||||
<MenuWrapper>
|
<MenuWrapper>
|
||||||
{this.props.label && (
|
{label && (
|
||||||
<MenuItem disabled>
|
<MenuItem disabled>
|
||||||
<TextComponent value={this.props.label} isBold />
|
<TextComponent value={label} isBold />
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)}
|
)}
|
||||||
{this.props.options.map(({ label, onClick }) => (
|
{options.map(({ label: optionLabel, onClick }) => (
|
||||||
<MenuItem onClick={onClick}>
|
<MenuItem onClick={onClick}>
|
||||||
<TextComponent value={label} />
|
<TextComponent value={optionLabel} />
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
))}
|
))}
|
||||||
</MenuWrapper>
|
</MenuWrapper>
|
||||||
|
@ -91,7 +99,10 @@ export class DropdownComponent extends Component<Props, State> {
|
||||||
]}
|
]}
|
||||||
tipSize={7}
|
tipSize={7}
|
||||||
>
|
>
|
||||||
{this.props.renderTrigger(() => this.setState(state => ({ isOpen: !state.isOpen })), this.state.isOpen)}
|
{renderTrigger(
|
||||||
|
() => this.setState(state => ({ isOpen: !state.isOpen })),
|
||||||
|
isOpen,
|
||||||
|
)}
|
||||||
</PopoverWithStyle>
|
</PopoverWithStyle>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,68 @@
|
||||||
|
// @flow
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
import styled from 'styled-components';
|
||||||
|
|
||||||
|
import { ZCashLogo } from './zcash-logo';
|
||||||
|
import { TextComponent } from './text';
|
||||||
|
|
||||||
|
const Wrapper = styled.div`
|
||||||
|
height: ${props => props.theme.headerHeight};
|
||||||
|
width: 100vw;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
background-color: ${props => props.theme.colors.background};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const LogoWrapper = styled.div`
|
||||||
|
height: ${props => props.theme.headerHeight};
|
||||||
|
width: ${props => props.theme.sidebarWidth};
|
||||||
|
background-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
${props => props.theme.colors.sidebarLogoGradientBegin},
|
||||||
|
${props => props.theme.colors.sidebarLogoGradientEnd}
|
||||||
|
);
|
||||||
|
margin-bottom: 20px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TitleWrapper = styled.div`
|
||||||
|
width: ${props => `calc(100% - ${props.theme.sidebarWidth})`};
|
||||||
|
height: ${props => props.theme.headerHeight};
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-left: ${props => props.theme.layoutPaddingLeft};
|
||||||
|
padding-right: ${props => props.theme.layoutPaddingRight};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Title = styled(TextComponent)`
|
||||||
|
font-size: ${props => `${props.theme.fontSize.title}em`};
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Divider = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
background-color: ${props => props.theme.colors.text};
|
||||||
|
height: 1px;
|
||||||
|
opacity: 0.1;
|
||||||
|
`;
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
title: string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const HeaderComponent = ({ title }: Props) => (
|
||||||
|
<Wrapper>
|
||||||
|
<LogoWrapper>
|
||||||
|
<ZCashLogo />
|
||||||
|
</LogoWrapper>
|
||||||
|
<TitleWrapper>
|
||||||
|
<Title value={title} />
|
||||||
|
<Divider />
|
||||||
|
</TitleWrapper>
|
||||||
|
</Wrapper>
|
||||||
|
);
|
|
@ -36,8 +36,12 @@ type Props = {
|
||||||
|
|
||||||
export const InputComponent = ({ inputType, onChange, ...props }: Props) => {
|
export const InputComponent = ({ inputType, onChange, ...props }: Props) => {
|
||||||
const inputTypes = {
|
const inputTypes = {
|
||||||
input: () => <Input onChange={evt => onChange(evt.target.value)} {...props} />,
|
input: () => (
|
||||||
textarea: () => <Textarea onChange={evt => onChange(evt.target.value)} {...props} />,
|
<Input onChange={evt => onChange(evt.target.value)} {...props} />
|
||||||
|
),
|
||||||
|
textarea: () => (
|
||||||
|
<Textarea onChange={evt => onChange(evt.target.value)} {...props} />
|
||||||
|
),
|
||||||
dropdown: () => null,
|
dropdown: () => null,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,14 +1,15 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const Layout = styled.div`
|
const Layout = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: ${props => `calc(100% - ${props.theme.sidebarWidth})`};
|
||||||
height: 100vh;
|
height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
|
||||||
background: ${props => props.theme.colors.secondary};
|
background-color: ${props => props.theme.colors.background};
|
||||||
|
padding-left: ${props => props.theme.layoutPaddingLeft};
|
||||||
|
padding-right: ${props => props.theme.layoutPaddingRight};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
|
|
@ -8,7 +8,9 @@ type Props = {
|
||||||
size?: number,
|
size?: number,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const QRCode = ({ value, size }: Props) => <QR value={value} size={size} />;
|
export const QRCode = ({ value, size }: Props) => (
|
||||||
|
<QR value={value} size={size} />
|
||||||
|
);
|
||||||
|
|
||||||
QRCode.defaultProps = {
|
QRCode.defaultProps = {
|
||||||
size: 128,
|
size: 128,
|
||||||
|
|
|
@ -14,6 +14,7 @@ const Flex = styled.div`
|
||||||
type Props = {
|
type Props = {
|
||||||
alignItems?: string,
|
alignItems?: string,
|
||||||
justifyContent?: string,
|
justifyContent?: string,
|
||||||
|
className?: string,
|
||||||
children: Node,
|
children: Node,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -24,4 +25,5 @@ export const RowComponent = ({ children, ...props }: Props) => (
|
||||||
RowComponent.defaultProps = {
|
RowComponent.defaultProps = {
|
||||||
alignItems: 'flex-start',
|
alignItems: 'flex-start',
|
||||||
justifyContent: 'flex-start',
|
justifyContent: 'flex-start',
|
||||||
|
className: '',
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,43 +2,76 @@
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link, type Location } from 'react-router-dom';
|
||||||
import { MENU_OPTIONS } from '../constants/sidebar';
|
import { MENU_OPTIONS } from '../constants/sidebar';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const Wrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 200px;
|
width: ${props => props.theme.sidebarWidth};
|
||||||
height: 100vh;
|
height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
|
||||||
font-family: ${props => props.theme.fontFamily}
|
font-family: ${props => props.theme.fontFamily}
|
||||||
background-color: ${props => props.theme.colors.sidebarBg};
|
background-color: ${props => props.theme.colors.sidebarBg};
|
||||||
padding: 20px;
|
padding-top: 15px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const StyledLink = styled(Link)`
|
const StyledLink = styled(Link)`
|
||||||
color: ${props => props.theme.colors.sidebarItem};
|
color: ${props => (props.isActive
|
||||||
font-size: 16px;
|
? props.theme.colors.sidebarItemActive
|
||||||
|
: props.theme.colors.sidebarItem)};
|
||||||
|
font-size: ${props => `${props.theme.fontSize.text}em`};
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-weight: 700;
|
font-weight: ${props => (props.isActive
|
||||||
padding: 5px 0;
|
? props.theme.fontWeight.bold
|
||||||
|
: props.theme.fontWeight.default)};
|
||||||
|
padding: 0 20px;
|
||||||
|
height: 35px;
|
||||||
|
width: 100%;
|
||||||
|
margin: 12.5px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
outline: none;
|
||||||
|
border-right: ${props => (props.isActive
|
||||||
|
? `1px solid ${props.theme.colors.sidebarItemActive}`
|
||||||
|
: 'none')};
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: ${/* eslint-disable-next-line max-len */
|
||||||
|
props => (props.isActive
|
||||||
|
? props.theme.colors.sidebarItemActive
|
||||||
|
: props.theme.colors.sidebarHoveredItemLabel)};
|
||||||
|
background-color: ${props => props.theme.colors.sidebarHoveredItem};
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Icon = styled.img`
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-right: 15px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type MenuItem = {
|
type MenuItem = {
|
||||||
route: string,
|
route: string,
|
||||||
label: string,
|
label: string,
|
||||||
|
icon: (isActive: boolean) => string,
|
||||||
};
|
};
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
options?: MenuItem[],
|
options?: MenuItem[],
|
||||||
|
location: Location,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const SidebarComponent = ({ options }: Props) => (
|
export const SidebarComponent = ({ options, location }: Props) => (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
{(options || []).map(item => (
|
{(options || []).map((item) => {
|
||||||
<StyledLink key={item.route} to={item.route}>
|
const isActive = location.pathname === item.route;
|
||||||
|
return (
|
||||||
|
<StyledLink isActive={isActive} key={item.route} to={item.route}>
|
||||||
|
<Icon src={item.icon(isActive)} alt={`Sidebar Icon ${item.route}`} />
|
||||||
{item.label}
|
{item.label}
|
||||||
</StyledLink>
|
</StyledLink>
|
||||||
))}
|
);
|
||||||
|
})}
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,10 @@ const Text = styled.p`
|
||||||
color: ${props => props.color || props.theme.colors.text};
|
color: ${props => props.color || props.theme.colors.text};
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
font-weight: ${props => (props.isBold ? 'bold' : '400')};
|
font-weight: ${props => (props.isBold
|
||||||
|
? props.theme.fontWeight.bold
|
||||||
|
: props.theme.fontWeight.default)};
|
||||||
|
text-align: ${props => props.align};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -18,13 +21,25 @@ type Props = {
|
||||||
isBold?: boolean,
|
isBold?: boolean,
|
||||||
color?: string,
|
color?: string,
|
||||||
className?: string,
|
className?: string,
|
||||||
size?: string,
|
size?: string | number,
|
||||||
|
align?: string,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const TextComponent = ({
|
export const TextComponent = ({
|
||||||
value, isBold, color, className, size,
|
value,
|
||||||
|
isBold,
|
||||||
|
color,
|
||||||
|
className,
|
||||||
|
size,
|
||||||
|
align,
|
||||||
}: Props) => (
|
}: Props) => (
|
||||||
<Text className={className} isBold={isBold} color={color} size={size}>
|
<Text
|
||||||
|
className={className}
|
||||||
|
isBold={isBold}
|
||||||
|
color={color}
|
||||||
|
size={`${String(size)}em`}
|
||||||
|
align={align}
|
||||||
|
>
|
||||||
{value}
|
{value}
|
||||||
</Text>
|
</Text>
|
||||||
);
|
);
|
||||||
|
@ -33,5 +48,6 @@ TextComponent.defaultProps = {
|
||||||
className: '',
|
className: '',
|
||||||
isBold: false,
|
isBold: false,
|
||||||
color: theme.colors.text,
|
color: theme.colors.text,
|
||||||
size: '1em',
|
size: theme.fontSize.text,
|
||||||
|
align: 'left',
|
||||||
};
|
};
|
||||||
|
|
|
@ -0,0 +1,65 @@
|
||||||
|
// @flow
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { TransactionItemComponent, type Transaction } from './transaction-item';
|
||||||
|
import { TextComponent } from './text';
|
||||||
|
|
||||||
|
const Wrapper = styled.div`
|
||||||
|
margin-top: 20px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TransactionsWrapper = styled.div`
|
||||||
|
border-radius: 7.5px;
|
||||||
|
overflow: hidden;
|
||||||
|
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Day = styled(TextComponent)`
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: ${props => props.theme.colors.transactionsDate};
|
||||||
|
font-size: ${props => `${props.theme.fontSize.text * 0.9}em`};
|
||||||
|
font-weight: ${props => props.theme.fontWeight.bold};
|
||||||
|
margin-bottom: 5px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Divider = styled.div`
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background-color: ${props => props.theme.colors.inactiveItem};
|
||||||
|
`;
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
transactionsDate: string,
|
||||||
|
transactions: Transaction[],
|
||||||
|
zecPrice: number,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const TransactionDailyComponent = ({
|
||||||
|
transactionsDate,
|
||||||
|
transactions,
|
||||||
|
zecPrice,
|
||||||
|
}: Props) => (
|
||||||
|
<Wrapper>
|
||||||
|
<Day value={transactionsDate} />
|
||||||
|
<TransactionsWrapper>
|
||||||
|
{transactions.map(({
|
||||||
|
date, type, address, amount,
|
||||||
|
}, idx) => (
|
||||||
|
<div>
|
||||||
|
<TransactionItemComponent
|
||||||
|
type={type}
|
||||||
|
date={date}
|
||||||
|
address={address || ''}
|
||||||
|
amount={amount}
|
||||||
|
zecPrice={zecPrice}
|
||||||
|
/>
|
||||||
|
{idx < transactions.length - 1 && <Divider />}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</TransactionsWrapper>
|
||||||
|
</Wrapper>
|
||||||
|
);
|
|
@ -0,0 +1,38 @@
|
||||||
|
---
|
||||||
|
name: Transaction Daily
|
||||||
|
---
|
||||||
|
|
||||||
|
import { Playground, PropsTable } from 'docz'
|
||||||
|
|
||||||
|
import { TransactionDailyComponent } from './transaction-daily.js'
|
||||||
|
import { DoczWrapper } from '../theme.js'
|
||||||
|
|
||||||
|
# Transaction Item
|
||||||
|
|
||||||
|
<PropsTable of={TransactionDailyComponent} />
|
||||||
|
|
||||||
|
## Basic Usage
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<DoczWrapper>
|
||||||
|
{() => (
|
||||||
|
<TransactionDailyComponent
|
||||||
|
transactionsDate={new Date().toISOString()}
|
||||||
|
transactions={[
|
||||||
|
{
|
||||||
|
type: 'received',
|
||||||
|
address: '123456789123456789123456789123456789',
|
||||||
|
amount: 1.7891,
|
||||||
|
date: new Date().toISOString(),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'sent',
|
||||||
|
address: '123456789123456789123456789123456789',
|
||||||
|
amount: 0.8458,
|
||||||
|
date: new Date().toISOString(),
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</DoczWrapper>
|
||||||
|
</Playground>
|
|
@ -0,0 +1,103 @@
|
||||||
|
// @flow
|
||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import dateFns from 'date-fns';
|
||||||
|
|
||||||
|
import SentIcon from '../assets/images/transaction_sent_icon.svg';
|
||||||
|
import ReceivedIcon from '../assets/images/transaction_received_icon.svg';
|
||||||
|
|
||||||
|
import { RowComponent } from './row';
|
||||||
|
import { ColumnComponent } from './column';
|
||||||
|
import { TextComponent } from './text';
|
||||||
|
|
||||||
|
import theme from '../theme';
|
||||||
|
|
||||||
|
import formatNumber from '../utils/formatNumber';
|
||||||
|
import truncateAddress from '../utils/truncateAddress';
|
||||||
|
|
||||||
|
const Wrapper = styled(RowComponent)`
|
||||||
|
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||||
|
padding: 15px 17px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Icon = styled.img`
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TransactionTypeLabel = styled(TextComponent)`
|
||||||
|
color: ${props => (props.isReceived
|
||||||
|
? props.theme.colors.transactionReceived
|
||||||
|
: props.theme.colors.transactionSent)};
|
||||||
|
text-transform: capitalize;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TransactionTime = styled(TextComponent)`
|
||||||
|
color: ${props => props.theme.colors.inactiveItem};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TransactionColumn = styled(ColumnComponent)`
|
||||||
|
margin-left: 10px;
|
||||||
|
margin-right: 80px;
|
||||||
|
min-width: 60px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export type Transaction = {
|
||||||
|
type: 'send' | 'receive',
|
||||||
|
date: string,
|
||||||
|
address: string,
|
||||||
|
amount: number,
|
||||||
|
zecPrice: number,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const TransactionItemComponent = ({
|
||||||
|
type,
|
||||||
|
date,
|
||||||
|
address,
|
||||||
|
amount,
|
||||||
|
zecPrice,
|
||||||
|
}: Transaction) => {
|
||||||
|
const isReceived = type === 'receive';
|
||||||
|
const transactionTime = dateFns.format(new Date(date), 'HH:mm A');
|
||||||
|
const transactionValueInZec = formatNumber({
|
||||||
|
value: amount,
|
||||||
|
append: `${isReceived ? '+' : '-'}ZEC `,
|
||||||
|
});
|
||||||
|
const transactionValueInUsd = formatNumber({
|
||||||
|
value: amount * zecPrice,
|
||||||
|
append: `${isReceived ? '+' : '-'}USD $`,
|
||||||
|
});
|
||||||
|
const transactionAddress = truncateAddress(address);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Wrapper alignItems='center' justifyContent='space-between'>
|
||||||
|
<RowComponent alignItems='center'>
|
||||||
|
<RowComponent alignItems='center'>
|
||||||
|
<Icon
|
||||||
|
src={isReceived ? ReceivedIcon : SentIcon}
|
||||||
|
alt='Transaction Type Icon'
|
||||||
|
/>
|
||||||
|
<TransactionColumn>
|
||||||
|
<TransactionTypeLabel isReceived={isReceived} value={type} />
|
||||||
|
<TransactionTime value={transactionTime} />
|
||||||
|
</TransactionColumn>
|
||||||
|
</RowComponent>
|
||||||
|
<TextComponent value={transactionAddress} align='left' />
|
||||||
|
</RowComponent>
|
||||||
|
<ColumnComponent alignItems='flex-end'>
|
||||||
|
<TextComponent
|
||||||
|
value={transactionValueInZec}
|
||||||
|
color={
|
||||||
|
isReceived
|
||||||
|
? theme.colors.transactionReceived
|
||||||
|
: theme.colors.transactionSent
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<TextComponent
|
||||||
|
value={transactionValueInUsd}
|
||||||
|
color={theme.colors.inactiveItem}
|
||||||
|
/>
|
||||||
|
</ColumnComponent>
|
||||||
|
</Wrapper>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,42 @@
|
||||||
|
---
|
||||||
|
name: Transaction Item
|
||||||
|
---
|
||||||
|
|
||||||
|
import { Playground, PropsTable } from 'docz'
|
||||||
|
|
||||||
|
import { TransactionItemComponent } from './transaction-item.js'
|
||||||
|
import { DoczWrapper } from '../theme.js'
|
||||||
|
|
||||||
|
# Transaction Item
|
||||||
|
|
||||||
|
<PropsTable of={TransactionItemComponent} />
|
||||||
|
|
||||||
|
## Sent
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<DoczWrapper>
|
||||||
|
{() => (
|
||||||
|
<TransactionItemComponent
|
||||||
|
type="sent"
|
||||||
|
address="123456789123456789123456789123456789"
|
||||||
|
amount={0.8652}
|
||||||
|
date={new Date().toISOString()}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</DoczWrapper>
|
||||||
|
</Playground>
|
||||||
|
|
||||||
|
## Received
|
||||||
|
|
||||||
|
<Playground>
|
||||||
|
<DoczWrapper>
|
||||||
|
{() => (
|
||||||
|
<TransactionItemComponent
|
||||||
|
type="received"
|
||||||
|
address="123456789123456789123456789123456789"
|
||||||
|
amount={1.7891}
|
||||||
|
date={new Date().toISOString()}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</DoczWrapper>
|
||||||
|
</Playground>
|
|
@ -1,11 +1,13 @@
|
||||||
// @flow
|
// @flow
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { IoIosMore } from 'react-icons/io';
|
|
||||||
|
|
||||||
import { TextComponent } from './text';
|
import { TextComponent } from './text';
|
||||||
import { RowComponent } from './row';
|
import { RowComponent } from './row';
|
||||||
import { DropdownComponent } from './dropdown';
|
import { DropdownComponent } from './dropdown';
|
||||||
|
import MenuIcon from '../assets/images/menu_icon.svg';
|
||||||
|
|
||||||
|
import formatNumber from '../utils/formatNumber';
|
||||||
|
|
||||||
import theme from '../theme';
|
import theme from '../theme';
|
||||||
|
|
||||||
|
@ -15,13 +17,13 @@ const Wrapper = styled.div`
|
||||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
padding: 37px 45px;
|
padding: 37px 45px;
|
||||||
margin: 20px;
|
margin-top: 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const AllAddresses = styled(TextComponent)`
|
const AllAddresses = styled(TextComponent)`
|
||||||
margin-bottom: 2.5px;
|
margin-bottom: 2.5px;
|
||||||
font-size: 0.625em;
|
font-size: ${props => `${props.theme.fontSize.text}em`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ValueBox = styled.div`
|
const ValueBox = styled.div`
|
||||||
|
@ -48,9 +50,12 @@ const SeeMoreButton = styled.button`
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
outline: none;
|
outline: none;
|
||||||
|
border-style: solid;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-color: ${props => (props.isOpen ? props.theme.colors.activeItem : props.theme.colors.text)};
|
border-color: ${props => (props.isOpen
|
||||||
|
? props.theme.colors.activeItem
|
||||||
|
: props.theme.colors.inactiveItem)};
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -63,44 +68,78 @@ const SeeMoreButton = styled.button`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const SeeMoreIcon = styled.img`
|
||||||
|
width: 25px;
|
||||||
|
height: 25px;
|
||||||
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
total: number,
|
total: number,
|
||||||
shielded: number,
|
shielded: number,
|
||||||
transparent: number,
|
transparent: number,
|
||||||
dollarValue: number,
|
zecPrice: number,
|
||||||
addresses: string[],
|
addresses: string[],
|
||||||
};
|
};
|
||||||
|
|
||||||
const formatNumber = number => number.toLocaleString('de-DE');
|
|
||||||
|
|
||||||
export const WalletSummaryComponent = ({
|
export const WalletSummaryComponent = ({
|
||||||
total, shielded, transparent, dollarValue, addresses,
|
total,
|
||||||
|
shielded,
|
||||||
|
transparent,
|
||||||
|
zecPrice,
|
||||||
|
addresses,
|
||||||
}: Props) => (
|
}: Props) => (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<DropdownComponent
|
<DropdownComponent
|
||||||
label='All Addresses'
|
label='All Addresses'
|
||||||
renderTrigger={(toggleVisibility, isOpen) => (
|
renderTrigger={(toggleVisibility, isOpen) => (
|
||||||
<SeeMoreButton onClick={toggleVisibility} isOpen={isOpen}>
|
<SeeMoreButton onClick={toggleVisibility} isOpen={isOpen}>
|
||||||
<IoIosMore color={theme.colors.text} size={15} />
|
<SeeMoreIcon src={MenuIcon} alt='Menu Icon' />
|
||||||
</SeeMoreButton>
|
</SeeMoreButton>
|
||||||
)}
|
)}
|
||||||
options={addresses.map(addr => ({ label: addr, onClick: x => x }))}
|
options={addresses.map(addr => ({ label: addr, onClick: x => x }))}
|
||||||
/>
|
/>
|
||||||
<AllAddresses value='ALL ADDRESSES' isBold />
|
<AllAddresses value='ALL ADDRESSES' isBold />
|
||||||
<ValueBox>
|
<ValueBox>
|
||||||
<TextComponent size='2.625em' value={`ZEC ${formatNumber(total)}`} isBold />
|
<TextComponent
|
||||||
<USDValue value={`USD $${formatNumber(total * dollarValue)}`} size='1.750em' />
|
size={theme.fontSize.zecValueBase * 2.5}
|
||||||
|
value={`ZEC ${formatNumber({ value: total })}`}
|
||||||
|
isBold
|
||||||
|
/>
|
||||||
|
<USDValue
|
||||||
|
value={`USD $${formatNumber({ value: total * zecPrice })}`}
|
||||||
|
size={theme.fontSize.zecValueBase * 2}
|
||||||
|
/>
|
||||||
</ValueBox>
|
</ValueBox>
|
||||||
<RowComponent>
|
<RowComponent>
|
||||||
<ValueBox>
|
<ValueBox>
|
||||||
<ShieldedValue value='● SHIELDED' isBold size='0.625em' />
|
<ShieldedValue
|
||||||
<TextComponent value={`ZEC ${formatNumber(shielded)}`} isBold size='1.125em' />
|
value='● SHIELDED'
|
||||||
<USDValue value={`USD $${formatNumber(shielded * dollarValue)}`} size='0.750em' />
|
isBold
|
||||||
|
size={theme.fontSize.text * 0.8}
|
||||||
|
/>
|
||||||
|
<TextComponent
|
||||||
|
value={`ZEC ${formatNumber({ value: shielded })}`}
|
||||||
|
isBold
|
||||||
|
size={theme.fontSize.zecValueBase}
|
||||||
|
/>
|
||||||
|
<USDValue
|
||||||
|
value={`USD $${formatNumber({ value: shielded * zecPrice })}`}
|
||||||
|
/>
|
||||||
</ValueBox>
|
</ValueBox>
|
||||||
<ValueBox>
|
<ValueBox>
|
||||||
<Label value='● TRANSPARENT' isBold size='0.625em' />
|
<Label
|
||||||
<TextComponent value={`ZEC ${formatNumber(transparent)}`} isBold size='1.125em' />
|
value='● TRANSPARENT'
|
||||||
<USDValue value={`USD $${formatNumber(transparent * dollarValue)}`} size='0.750em' />
|
isBold
|
||||||
|
size={theme.fontSize.text * 0.8}
|
||||||
|
/>
|
||||||
|
<TextComponent
|
||||||
|
value={`ZEC ${formatNumber({ value: transparent })}`}
|
||||||
|
isBold
|
||||||
|
size={theme.fontSize.zecValueBase}
|
||||||
|
/>
|
||||||
|
<USDValue
|
||||||
|
value={`USD $${formatNumber({ value: transparent * zecPrice })}`}
|
||||||
|
/>
|
||||||
</ValueBox>
|
</ValueBox>
|
||||||
</RowComponent>
|
</RowComponent>
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
|
|
|
@ -17,7 +17,13 @@ import { DoczWrapper } from '../theme.js'
|
||||||
<DoczWrapper>
|
<DoczWrapper>
|
||||||
{() => (
|
{() => (
|
||||||
<div style={{ width: '700px' }}>
|
<div style={{ width: '700px' }}>
|
||||||
<WalletSummaryComponent total={5000} shielded={2500} transparent={2500} dollarValue={56} />
|
<WalletSummaryComponent
|
||||||
|
total={5000}
|
||||||
|
shielded={2500}
|
||||||
|
transparent={2500}
|
||||||
|
dollarValue={56}
|
||||||
|
addresses={['12345678asdaas9', '98asdasd765asd4sad321']}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</DoczWrapper>
|
</DoczWrapper>
|
||||||
|
|
|
@ -9,6 +9,7 @@ type State = {
|
||||||
|
|
||||||
type Props = {};
|
type Props = {};
|
||||||
|
|
||||||
|
/* eslint-disable max-len */
|
||||||
export const withDaemonStatusCheck = <PassedProps: {}>(
|
export const withDaemonStatusCheck = <PassedProps: {}>(
|
||||||
WrappedComponent: ComponentType<PassedProps>,
|
WrappedComponent: ComponentType<PassedProps>,
|
||||||
): ComponentType<$Diff<PassedProps, Props>> => class extends Component<PassedProps, State> {
|
): ComponentType<$Diff<PassedProps, Props>> => class extends Component<PassedProps, State> {
|
||||||
|
@ -44,7 +45,9 @@ export const withDaemonStatusCheck = <PassedProps: {}>(
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (this.state.isRunning) {
|
const { isRunning } = this.state;
|
||||||
|
|
||||||
|
if (isRunning) {
|
||||||
return <WrappedComponent {...this.props} {...this.state} />;
|
return <WrappedComponent {...this.props} {...this.state} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
// @flow
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
export const ZCashLogo = () => (
|
||||||
|
<svg xmlns='http://www.w3.org/2000/svg' viewBox='-75 -10 175 175'>
|
||||||
|
<defs>
|
||||||
|
<style>{'.a{ fill:#040508; }'}</style>
|
||||||
|
</defs>
|
||||||
|
<path
|
||||||
|
className='a'
|
||||||
|
d='M541.425,662.318v4.555h-7.678v5.678H545.5l-11.751,16v4.261h7.678v4.665h4.563v-4.665h7.577v-5.666H541.788l11.777-16v-4.273h-7.577v-4.555Z'
|
||||||
|
transform='translate(-533.747 -662.318)'
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
|
@ -1,7 +1,8 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
export const DASHBOARD_ROUTE = '/';
|
export const DASHBOARD_ROUTE = '/';
|
||||||
|
export const CONSOLE_ROUTE = '/console';
|
||||||
export const SEND_ROUTE = '/send';
|
export const SEND_ROUTE = '/send';
|
||||||
export const RECEIVE_ROUTE = '/receive';
|
export const RECEIVE_ROUTE = '/receive';
|
||||||
|
export const TRANSACTIONS_ROUTE = '/transactions';
|
||||||
export const SETTINGS_ROUTE = '/settings';
|
export const SETTINGS_ROUTE = '/settings';
|
||||||
export const CONSOLE_ROUTE = '/console';
|
|
||||||
|
|
|
@ -1,28 +1,57 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
import DashboardIcon from '../assets/images/dashboard_icon.svg';
|
||||||
|
import DashboardIconActive from '../assets/images/dashboard_icon_active.svg';
|
||||||
|
import ConsoleIcon from '../assets/images/console_icon.svg';
|
||||||
|
import ConsoleIconActive from '../assets/images/console_icon_active.svg';
|
||||||
|
import SendIcon from '../assets/images/send_icon.svg';
|
||||||
|
import SendIconActive from '../assets/images/send_icon_active.svg';
|
||||||
|
import ReceiveIcon from '../assets/images/receive_icon.svg';
|
||||||
|
import ReceiveIconActive from '../assets/images/receive_icon_active.svg';
|
||||||
|
import TransactionsIcon from '../assets/images/transactions_icon.svg';
|
||||||
|
import TransactionsIconActive from '../assets/images/transactions_icon_active.svg';
|
||||||
|
import SettingsIcon from '../assets/images/settings_icon.svg';
|
||||||
|
import SettingsIconActive from '../assets/images/settings_icon_active.svg';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
DASHBOARD_ROUTE, SEND_ROUTE, RECEIVE_ROUTE, SETTINGS_ROUTE, CONSOLE_ROUTE,
|
DASHBOARD_ROUTE,
|
||||||
|
SEND_ROUTE,
|
||||||
|
RECEIVE_ROUTE,
|
||||||
|
SETTINGS_ROUTE,
|
||||||
|
CONSOLE_ROUTE,
|
||||||
|
TRANSACTIONS_ROUTE,
|
||||||
} from './routes';
|
} from './routes';
|
||||||
|
|
||||||
export const MENU_OPTIONS = [
|
export const MENU_OPTIONS = [
|
||||||
{
|
{
|
||||||
label: 'Dashboard',
|
label: 'Dashboard',
|
||||||
route: DASHBOARD_ROUTE,
|
route: DASHBOARD_ROUTE,
|
||||||
|
// eslint-disable-next-line
|
||||||
|
icon: (isActive: boolean) => isActive ? DashboardIconActive : DashboardIcon,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Send',
|
label: 'Send',
|
||||||
route: SEND_ROUTE,
|
route: SEND_ROUTE,
|
||||||
|
icon: (isActive: boolean) => (isActive ? SendIconActive : SendIcon),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Receive',
|
label: 'Receive',
|
||||||
route: RECEIVE_ROUTE,
|
route: RECEIVE_ROUTE,
|
||||||
|
icon: (isActive: boolean) => (isActive ? ReceiveIconActive : ReceiveIcon),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Console',
|
label: 'Transactions',
|
||||||
route: CONSOLE_ROUTE,
|
route: TRANSACTIONS_ROUTE,
|
||||||
|
// eslint-disable-next-line
|
||||||
|
icon: (isActive: boolean) => isActive ? TransactionsIconActive : TransactionsIcon,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: 'Settings',
|
label: 'Settings',
|
||||||
route: SETTINGS_ROUTE,
|
route: SETTINGS_ROUTE,
|
||||||
|
icon: (isActive: boolean) => (isActive ? SettingsIconActive : SettingsIcon),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: 'Console',
|
||||||
|
route: CONSOLE_ROUTE,
|
||||||
|
icon: (isActive: boolean) => (isActive ? ConsoleIconActive : ConsoleIcon),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
@ -2,9 +2,17 @@
|
||||||
|
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import eres from 'eres';
|
import eres from 'eres';
|
||||||
|
import flow from 'lodash.flow';
|
||||||
|
import groupBy from 'lodash.groupby';
|
||||||
|
import dateFns from 'date-fns';
|
||||||
import { DashboardView } from '../views/dashboard';
|
import { DashboardView } from '../views/dashboard';
|
||||||
import rpc from '../../services/api';
|
import rpc from '../../services/api';
|
||||||
import { loadWalletSummary, loadWalletSummarySuccess, loadWalletSummaryError } from '../redux/modules/wallet';
|
import store from '../../config/electron-store';
|
||||||
|
import {
|
||||||
|
loadWalletSummary,
|
||||||
|
loadWalletSummarySuccess,
|
||||||
|
loadWalletSummaryError,
|
||||||
|
} from '../redux/modules/wallet';
|
||||||
|
|
||||||
import type { AppState } from '../types/app-state';
|
import type { AppState } from '../types/app-state';
|
||||||
import type { Dispatch } from '../types/redux';
|
import type { Dispatch } from '../types/redux';
|
||||||
|
@ -15,8 +23,9 @@ const mapStateToProps = ({ walletSummary }: AppState) => ({
|
||||||
transparent: walletSummary.transparent,
|
transparent: walletSummary.transparent,
|
||||||
error: walletSummary.error,
|
error: walletSummary.error,
|
||||||
isLoading: walletSummary.isLoading,
|
isLoading: walletSummary.isLoading,
|
||||||
dollarValue: walletSummary.dollarValue,
|
zecPrice: walletSummary.zecPrice,
|
||||||
addresses: walletSummary.addresses,
|
addresses: walletSummary.addresses,
|
||||||
|
transactions: walletSummary.transactions,
|
||||||
});
|
});
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch: Dispatch) => ({
|
const mapDispatchToProps = (dispatch: Dispatch) => ({
|
||||||
|
@ -29,14 +38,35 @@ const mapDispatchToProps = (dispatch: Dispatch) => ({
|
||||||
|
|
||||||
const [addressesErr, addresses] = await eres(rpc.z_listaddresses());
|
const [addressesErr, addresses] = await eres(rpc.z_listaddresses());
|
||||||
|
|
||||||
|
// eslint-disable-next-line
|
||||||
if (addressesErr) return dispatch(loadWalletSummaryError({ error: addressesErr.message }));
|
if (addressesErr) return dispatch(loadWalletSummaryError({ error: addressesErr.message }));
|
||||||
|
|
||||||
|
const [transactionsErr, transactions = []] = await eres(
|
||||||
|
rpc.listtransactions(),
|
||||||
|
);
|
||||||
|
|
||||||
|
if (transactionsErr) {
|
||||||
|
return dispatch(
|
||||||
|
loadWalletSummaryError({ error: transactionsErr.message }),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
dispatch(
|
dispatch(
|
||||||
loadWalletSummarySuccess({
|
loadWalletSummarySuccess({
|
||||||
transparent: walletSummary.transparent,
|
transparent: walletSummary.transparent,
|
||||||
total: walletSummary.total,
|
total: walletSummary.total,
|
||||||
shielded: walletSummary.private,
|
shielded: walletSummary.private,
|
||||||
addresses,
|
addresses,
|
||||||
|
transactions: flow([
|
||||||
|
arr => arr.map(transaction => ({
|
||||||
|
type: transaction.category,
|
||||||
|
date: new Date(transaction.time * 1000).toISOString(),
|
||||||
|
address: transaction.address,
|
||||||
|
amount: Math.abs(transaction.amount),
|
||||||
|
})),
|
||||||
|
arr => groupBy(arr, obj => dateFns.format(obj.date, 'MMM DD, YYYY')),
|
||||||
|
])(transactions),
|
||||||
|
zecPrice: store.get('ZEC_DOLLAR_PRICE'),
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,17 +1,5 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import { SidebarComponent } from '../components/sidebar';
|
import { SidebarComponent } from '../components/sidebar';
|
||||||
|
|
||||||
const mapStateToProps = (state: Object) => ({
|
export const SidebarContainer = SidebarComponent;
|
||||||
todos: state.todos,
|
|
||||||
});
|
|
||||||
|
|
||||||
// const mapDispatchToProps = (dispatch: Dispatch) => ({
|
|
||||||
// addTodo: text => dispatch(addTodo(text)),
|
|
||||||
// });
|
|
||||||
|
|
||||||
export const SidebarContainer = connect(
|
|
||||||
mapStateToProps,
|
|
||||||
// mapDispatchToProps,
|
|
||||||
)(SidebarComponent);
|
|
||||||
|
|
|
@ -9,7 +9,9 @@ import { createRootReducer } from './modules/reducer';
|
||||||
|
|
||||||
export const history = createBrowserHistory();
|
export const history = createBrowserHistory();
|
||||||
|
|
||||||
const shouldEnableDevTools = (process.env.NODE_ENV !== 'production' || process.env.NODE_ENV !== 'staging') && window.devToolsExtension;
|
const shouldEnableDevTools = (process.env.NODE_ENV !== 'production'
|
||||||
|
|| process.env.NODE_ENV !== 'staging')
|
||||||
|
&& window.devToolsExtension;
|
||||||
|
|
||||||
export const configureStore = (initialState: Object) => {
|
export const configureStore = (initialState: Object) => {
|
||||||
const middleware = applyMiddleware(thunk, routerMiddleware(history));
|
const middleware = applyMiddleware(thunk, routerMiddleware(history));
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
import type { Action } from '../../types/redux';
|
import type { Action } from '../../types/redux';
|
||||||
|
import type { Transaction } from '../../components/transaction-item';
|
||||||
|
|
||||||
// Actions
|
// Actions
|
||||||
export const LOAD_WALLET_SUMMARY = 'LOAD_WALLET_SUMMARY';
|
export const LOAD_WALLET_SUMMARY = 'LOAD_WALLET_SUMMARY';
|
||||||
|
@ -17,11 +18,15 @@ export const loadWalletSummarySuccess = ({
|
||||||
shielded,
|
shielded,
|
||||||
transparent,
|
transparent,
|
||||||
addresses,
|
addresses,
|
||||||
|
transactions,
|
||||||
|
zecPrice,
|
||||||
}: {
|
}: {
|
||||||
total: number,
|
total: number,
|
||||||
shielded: number,
|
shielded: number,
|
||||||
transparent: number,
|
transparent: number,
|
||||||
addresses: string[],
|
addresses: string[],
|
||||||
|
transactions: { [day: string]: Transaction[] },
|
||||||
|
zecPrice: number,
|
||||||
}) => ({
|
}) => ({
|
||||||
type: LOAD_WALLET_SUMMARY_SUCCESS,
|
type: LOAD_WALLET_SUMMARY_SUCCESS,
|
||||||
payload: {
|
payload: {
|
||||||
|
@ -29,6 +34,8 @@ export const loadWalletSummarySuccess = ({
|
||||||
shielded,
|
shielded,
|
||||||
transparent,
|
transparent,
|
||||||
addresses,
|
addresses,
|
||||||
|
transactions,
|
||||||
|
zecPrice,
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -43,8 +50,9 @@ export type State = {
|
||||||
transparent: number,
|
transparent: number,
|
||||||
error: string | null,
|
error: string | null,
|
||||||
isLoading: boolean,
|
isLoading: boolean,
|
||||||
dollarValue: number,
|
zecPrice: number,
|
||||||
addresses: [],
|
addresses: [],
|
||||||
|
transactions: { [day: string]: Transaction[] },
|
||||||
};
|
};
|
||||||
|
|
||||||
const initialState = {
|
const initialState = {
|
||||||
|
@ -53,8 +61,9 @@ const initialState = {
|
||||||
transparent: 0,
|
transparent: 0,
|
||||||
error: null,
|
error: null,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
dollarValue: 0,
|
zecPrice: 0,
|
||||||
addresses: [],
|
addresses: [],
|
||||||
|
transactions: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
export default (state: State = initialState, action: Action) => {
|
export default (state: State = initialState, action: Action) => {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Route, Switch } from 'react-router-dom';
|
import { Route, Switch, type Location } from 'react-router-dom';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
import { ScrollTopComponent } from './scroll-top';
|
import { ScrollTopComponent } from './scroll-top';
|
||||||
|
@ -13,25 +13,48 @@ import { SettingsView } from '../views/settings';
|
||||||
import { NotFoundView } from '../views/not-found';
|
import { NotFoundView } from '../views/not-found';
|
||||||
import { ConsoleView } from '../views/console';
|
import { ConsoleView } from '../views/console';
|
||||||
import { LayoutComponent } from '../components/layout';
|
import { LayoutComponent } from '../components/layout';
|
||||||
|
import { HeaderComponent } from '../components/header';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
DASHBOARD_ROUTE, SEND_ROUTE, RECEIVE_ROUTE, SETTINGS_ROUTE, CONSOLE_ROUTE,
|
DASHBOARD_ROUTE,
|
||||||
|
SEND_ROUTE,
|
||||||
|
RECEIVE_ROUTE,
|
||||||
|
SETTINGS_ROUTE,
|
||||||
|
CONSOLE_ROUTE,
|
||||||
} from '../constants/routes';
|
} from '../constants/routes';
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
const FullWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ContentWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const RouterComponent = () => (
|
const getTitle = (path: string) => {
|
||||||
<Wrapper>
|
if (path === '/') return 'Dashboard';
|
||||||
<SidebarContainer />
|
|
||||||
|
return path.replace('/', '');
|
||||||
|
};
|
||||||
|
|
||||||
|
export const RouterComponent = ({ location }: { location: Location }) => (
|
||||||
|
<FullWrapper>
|
||||||
|
<HeaderComponent title={getTitle(location.pathname)} />
|
||||||
|
<ContentWrapper>
|
||||||
|
<SidebarContainer location={location} />
|
||||||
<ScrollTopComponent>
|
<ScrollTopComponent>
|
||||||
{/* $FlowFixMe */}
|
{/* $FlowFixMe */}
|
||||||
<LayoutComponent>
|
<LayoutComponent>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route exact path={DASHBOARD_ROUTE} component={DashboardContainer} />
|
<Route
|
||||||
|
exact
|
||||||
|
path={DASHBOARD_ROUTE}
|
||||||
|
component={DashboardContainer}
|
||||||
|
/>
|
||||||
<Route path={SEND_ROUTE} component={SendView} />
|
<Route path={SEND_ROUTE} component={SendView} />
|
||||||
<Route path={RECEIVE_ROUTE} component={ReceiveView} />
|
<Route path={RECEIVE_ROUTE} component={ReceiveView} />
|
||||||
<Route path={SETTINGS_ROUTE} component={SettingsView} />
|
<Route path={SETTINGS_ROUTE} component={SettingsView} />
|
||||||
|
@ -40,5 +63,6 @@ export const RouterComponent = () => (
|
||||||
</Switch>
|
</Switch>
|
||||||
</LayoutComponent>
|
</LayoutComponent>
|
||||||
</ScrollTopComponent>
|
</ScrollTopComponent>
|
||||||
</Wrapper>
|
</ContentWrapper>
|
||||||
|
</FullWrapper>
|
||||||
);
|
);
|
||||||
|
|
40
app/theme.js
|
@ -9,15 +9,32 @@ import { DARK } from './constants/themes';
|
||||||
|
|
||||||
const darkOne = '#7B00DD';
|
const darkOne = '#7B00DD';
|
||||||
const lightOne = '#ffffff';
|
const lightOne = '#ffffff';
|
||||||
const brandOne = '#624cda';
|
const brandOne = '#000';
|
||||||
const brandTwo = '#a6ede2';
|
const brandTwo = '#3B3B3F';
|
||||||
const activeItem = '#F5CB00';
|
const activeItem = '#F5CB00';
|
||||||
const text = '#FFF';
|
const text = '#FFF';
|
||||||
const cardBackgroundColor = '#000';
|
const cardBackgroundColor = '#000';
|
||||||
|
const sidebarLogoGradientBegin = '#F4B728';
|
||||||
|
const sidebarLogoGradientEnd = '#FFE240';
|
||||||
|
const sidebarHoveredItem = '#1C1C1C';
|
||||||
|
const sidebarHoveredItemLabel = '#969696';
|
||||||
|
const background = '#212124';
|
||||||
|
const transactionSent = '#FF6C6C';
|
||||||
|
const transactionReceived = '#6AEAC0';
|
||||||
|
const transactionsDate = '#777777';
|
||||||
|
|
||||||
const appTheme = {
|
const appTheme = {
|
||||||
mode: DARK,
|
mode: DARK,
|
||||||
fontFamily: 'PT Sans',
|
fontFamily: 'PT Sans',
|
||||||
|
fontWeight: {
|
||||||
|
bold: 700,
|
||||||
|
default: 400,
|
||||||
|
},
|
||||||
|
fontSize: {
|
||||||
|
title: 1.25,
|
||||||
|
text: 0.84375,
|
||||||
|
zecValueBase: 1.125,
|
||||||
|
},
|
||||||
colors: {
|
colors: {
|
||||||
primary: theme('mode', {
|
primary: theme('mode', {
|
||||||
light: lightOne,
|
light: lightOne,
|
||||||
|
@ -29,15 +46,24 @@ const appTheme = {
|
||||||
}),
|
}),
|
||||||
sidebarBg: brandOne,
|
sidebarBg: brandOne,
|
||||||
sidebarItem: brandTwo,
|
sidebarItem: brandTwo,
|
||||||
sidebarItemActive: lightOne,
|
sidebarItemActive: activeItem,
|
||||||
|
sidebarHoveredItem,
|
||||||
|
sidebarHoveredItemLabel,
|
||||||
cardBackgroundColor,
|
cardBackgroundColor,
|
||||||
text,
|
text,
|
||||||
activeItem,
|
activeItem,
|
||||||
|
inactiveItem: brandTwo,
|
||||||
|
sidebarLogoGradientBegin,
|
||||||
|
sidebarLogoGradientEnd,
|
||||||
|
background,
|
||||||
|
transactionSent,
|
||||||
|
transactionReceived,
|
||||||
|
transactionsDate,
|
||||||
},
|
},
|
||||||
size: {
|
sidebarWidth: '200px',
|
||||||
title: 18,
|
headerHeight: '60px',
|
||||||
paragraph: 12,
|
layoutPaddingLeft: '50px',
|
||||||
},
|
layoutPaddingRight: '45px',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const GlobalStyle = createGlobalStyle`
|
export const GlobalStyle = createGlobalStyle`
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
export default ({ value, append = '' }: { value: number, append?: string }) => `${append}${(value || 0).toLocaleString('de-DE')}`;
|
|
@ -0,0 +1,6 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
export default (address: string = '') => `${address.substr(0, 20)}...${address.substr(
|
||||||
|
address.length - 10,
|
||||||
|
address.length,
|
||||||
|
)}`;
|
|
@ -24,10 +24,12 @@ export class ConsoleView extends Component<Props, State> {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
const { log } = this.state;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='dashboard'>
|
<div className='dashboard'>
|
||||||
{this.state.log
|
{log
|
||||||
&& this.state.log.split('\n').map(item => (
|
&& log.split('\n').map(item => (
|
||||||
<Fragment key={`${item.slice(0, 10)}`}>
|
<Fragment key={`${item.slice(0, 10)}`}>
|
||||||
{item}
|
{item}
|
||||||
<br />
|
<br />
|
||||||
|
|
|
@ -3,8 +3,11 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { WalletSummaryComponent } from '../components/wallet-summary';
|
import { WalletSummaryComponent } from '../components/wallet-summary';
|
||||||
|
import { TransactionDailyComponent } from '../components/transaction-daily';
|
||||||
import { withDaemonStatusCheck } from '../components/with-daemon-status-check';
|
import { withDaemonStatusCheck } from '../components/with-daemon-status-check';
|
||||||
|
|
||||||
|
import type { Transaction } from '../components/transaction-item';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
getSummary: () => void,
|
getSummary: () => void,
|
||||||
total: number,
|
total: number,
|
||||||
|
@ -12,32 +15,56 @@ type Props = {
|
||||||
transparent: number,
|
transparent: number,
|
||||||
error: string | null,
|
error: string | null,
|
||||||
isLoading: boolean,
|
isLoading: boolean,
|
||||||
dollarValue: number,
|
zecPrice: number,
|
||||||
addresses: string[],
|
addresses: string[],
|
||||||
|
transactions: { [day: string]: Transaction[] },
|
||||||
};
|
};
|
||||||
|
|
||||||
export class Dashboard extends React.Component<Props> {
|
export class Dashboard extends React.Component<Props> {
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
/* eslint-disable-next-line */
|
||||||
this.props.getSummary();
|
this.props.getSummary();
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (this.props.error) {
|
const {
|
||||||
return this.props.error;
|
error,
|
||||||
|
isLoading,
|
||||||
|
total,
|
||||||
|
shielded,
|
||||||
|
transparent,
|
||||||
|
zecPrice,
|
||||||
|
addresses,
|
||||||
|
transactions,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const days = Object.keys(transactions);
|
||||||
|
|
||||||
|
if (error) {
|
||||||
|
return error;
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='dashboard'>
|
<div className='dashboard'>
|
||||||
{this.props.isLoading ? (
|
{isLoading ? (
|
||||||
'Loading'
|
'Loading'
|
||||||
) : (
|
) : (
|
||||||
|
<div>
|
||||||
<WalletSummaryComponent
|
<WalletSummaryComponent
|
||||||
total={this.props.total}
|
total={total}
|
||||||
shielded={this.props.shielded}
|
shielded={shielded}
|
||||||
transparent={this.props.transparent}
|
transparent={transparent}
|
||||||
dollarValue={this.props.dollarValue}
|
zecPrice={zecPrice}
|
||||||
addresses={this.props.addresses}
|
addresses={addresses}
|
||||||
/>
|
/>
|
||||||
|
{days.map(day => (
|
||||||
|
<TransactionDailyComponent
|
||||||
|
transactionsDate={day}
|
||||||
|
transactions={transactions[day]}
|
||||||
|
zecPrice={zecPrice}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -19,16 +19,36 @@ import log from './logger';
|
||||||
|
|
||||||
const queue = new Queue({ concurrency: 1, autoStart: false });
|
const queue = new Queue({ concurrency: 1, autoStart: false });
|
||||||
|
|
||||||
const httpClient = got.extend({ baseUrl: 'https://z.cash/downloads/', retry: 3, useElectronNet: true });
|
const httpClient = got.extend({
|
||||||
|
baseUrl: 'https://z.cash/downloads/',
|
||||||
|
retry: 3,
|
||||||
|
useElectronNet: true,
|
||||||
|
});
|
||||||
|
|
||||||
const FILES: Array<{ name: string, hash: string }> = [
|
const FILES: Array<{ name: string, hash: string }> = [
|
||||||
{ name: 'sprout-proving.key', hash: '8bc20a7f013b2b58970cddd2e7ea028975c88ae7ceb9259a5344a16bc2c0eef7' },
|
{
|
||||||
{ name: 'sprout-verifying.key', hash: '4bd498dae0aacfd8e98dc306338d017d9c08dd0918ead18172bd0aec2fc5df82' },
|
name: 'sprout-proving.key',
|
||||||
{ name: 'sapling-spend.params', hash: '8e48ffd23abb3a5fd9c5589204f32d9c31285a04b78096ba40a79b75677efc13' },
|
hash: '8bc20a7f013b2b58970cddd2e7ea028975c88ae7ceb9259a5344a16bc2c0eef7',
|
||||||
{ name: 'sapling-output.params', hash: '2f0ebbcbb9bb0bcffe95a397e7eba89c29eb4dde6191c339db88570e3f3fb0e4' },
|
},
|
||||||
{ name: 'sprout-groth16.params', hash: 'b685d700c60328498fbde589c8c7c484c722b788b265b72af448a5bf0ee55b50' },
|
{
|
||||||
|
name: 'sprout-verifying.key',
|
||||||
|
hash: '4bd498dae0aacfd8e98dc306338d017d9c08dd0918ead18172bd0aec2fc5df82',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'sapling-spend.params',
|
||||||
|
hash: '8e48ffd23abb3a5fd9c5589204f32d9c31285a04b78096ba40a79b75677efc13',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'sapling-output.params',
|
||||||
|
hash: '2f0ebbcbb9bb0bcffe95a397e7eba89c29eb4dde6191c339db88570e3f3fb0e4',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'sprout-groth16.params',
|
||||||
|
hash: 'b685d700c60328498fbde589c8c7c484c722b788b265b72af448a5bf0ee55b50',
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
// eslint-disable-next-line max-len
|
||||||
const checkSha256 = (pathToFile: string, expectedHash: string) => new Promise((resolve, reject) => {
|
const checkSha256 = (pathToFile: string, expectedHash: string) => new Promise((resolve, reject) => {
|
||||||
fs.readFile(pathToFile, (err, file) => {
|
fs.readFile(pathToFile, (err, file) => {
|
||||||
if (err) return reject(new Error(err));
|
if (err) return reject(new Error(err));
|
||||||
|
@ -39,6 +59,7 @@ const checkSha256 = (pathToFile: string, expectedHash: string) => new Promise((r
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// eslint-disable-next-line max-len
|
||||||
const downloadFile = ({ file, pathToSave }): Promise<*> => new Promise((resolve, reject) => {
|
const downloadFile = ({ file, pathToSave }): Promise<*> => new Promise((resolve, reject) => {
|
||||||
log(`Downloading ${file.name}...`);
|
log(`Downloading ${file.name}...`);
|
||||||
|
|
||||||
|
@ -50,7 +71,9 @@ const downloadFile = ({ file, pathToSave }): Promise<*> => new Promise((resolve,
|
||||||
log(`SHA256 validation for file ${file.name} succeeded!`);
|
log(`SHA256 validation for file ${file.name} succeeded!`);
|
||||||
resolve(file.name);
|
resolve(file.name);
|
||||||
} else {
|
} else {
|
||||||
reject(new Error(`SHA256 validation failed for file: ${file.name}`));
|
reject(
|
||||||
|
new Error(`SHA256 validation failed for file: ${file.name}`),
|
||||||
|
);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})
|
})
|
||||||
|
@ -61,7 +84,9 @@ const downloadFile = ({ file, pathToSave }): Promise<*> => new Promise((resolve,
|
||||||
let missingDownloadParam = false;
|
let missingDownloadParam = false;
|
||||||
|
|
||||||
export default (): Promise<*> => new Promise((resolve, reject) => {
|
export default (): Promise<*> => new Promise((resolve, reject) => {
|
||||||
const firstRunProcess = cp.spawn(path.join(getBinariesPath(), 'win', 'first-run.bat'));
|
const firstRunProcess = cp.spawn(
|
||||||
|
path.join(getBinariesPath(), 'win', 'first-run.bat'),
|
||||||
|
);
|
||||||
firstRunProcess.stdout.on('data', data => log(data.toString()));
|
firstRunProcess.stdout.on('data', data => log(data.toString()));
|
||||||
firstRunProcess.stderr.on('data', data => reject(data.toString()));
|
firstRunProcess.stderr.on('data', data => reject(data.toString()));
|
||||||
|
|
||||||
|
@ -70,20 +95,33 @@ export default (): Promise<*> => new Promise((resolve, reject) => {
|
||||||
|
|
||||||
await Promise.all(
|
await Promise.all(
|
||||||
FILES.map(async (file) => {
|
FILES.map(async (file) => {
|
||||||
const pathToSave = path.join(app.getPath('userData'), '..', 'ZcashParams', file.name);
|
const pathToSave = path.join(
|
||||||
|
app.getPath('userData'),
|
||||||
|
'..',
|
||||||
|
'ZcashParams',
|
||||||
|
file.name,
|
||||||
|
);
|
||||||
|
|
||||||
const [cannotAccess] = await eres(util.promisify(fs.access)(pathToSave, fs.constants.F_OK));
|
const [cannotAccess] = await eres(
|
||||||
|
util.promisify(fs.access)(pathToSave, fs.constants.F_OK),
|
||||||
|
);
|
||||||
|
|
||||||
if (cannotAccess) {
|
if (cannotAccess) {
|
||||||
missingDownloadParam = true;
|
missingDownloadParam = true;
|
||||||
|
// eslint-disable-next-line max-len
|
||||||
queue.add(() => downloadFile({ file, pathToSave }).then(() => log(`Download ${file.name} finished!`)));
|
queue.add(() => downloadFile({ file, pathToSave }).then(() => log(`Download ${file.name} finished!`)));
|
||||||
} else {
|
} else {
|
||||||
const isValid = await checkSha256(pathToSave, file.hash);
|
const isValid = await checkSha256(pathToSave, file.hash);
|
||||||
if (isValid) {
|
if (isValid) {
|
||||||
log(`${file.name} already is in ${pathToSave}...`);
|
log(`${file.name} already is in ${pathToSave}...`);
|
||||||
} else {
|
} else {
|
||||||
log(`File: ${file.name} failed in the SHASUM validation, downloading again...`);
|
log(
|
||||||
|
`File: ${
|
||||||
|
file.name
|
||||||
|
} failed in the SHASUM validation, downloading again...`,
|
||||||
|
);
|
||||||
queue.add(() => {
|
queue.add(() => {
|
||||||
|
// eslint-disable-next-line max-len
|
||||||
downloadFile({ file, pathToSave }).then(() => log(`Download ${file.name} finished!`));
|
downloadFile({ file, pathToSave }).then(() => log(`Download ${file.name} finished!`));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,5 +3,8 @@ import path from 'path';
|
||||||
/* eslint-disable-next-line import/no-extraneous-dependencies */
|
/* eslint-disable-next-line import/no-extraneous-dependencies */
|
||||||
import isDev from 'electron-is-dev';
|
import isDev from 'electron-is-dev';
|
||||||
|
|
||||||
// $FlowFixMe
|
/* eslint-disable operator-linebreak */
|
||||||
export default () => (isDev ? path.join(__dirname, '..', '..', './bin') : path.join(process.resourcesPath, 'bin'));
|
export default () => (isDev
|
||||||
|
? path.join(__dirname, '..', '..', './bin')
|
||||||
|
: // $FlowFixMe
|
||||||
|
path.join(process.resourcesPath, 'bin'));
|
||||||
|
|
|
@ -8,5 +8,7 @@ import runUnixFetchParams from './fetch-unix-params';
|
||||||
export default (): Promise<*> => {
|
export default (): Promise<*> => {
|
||||||
log('Fetching params');
|
log('Fetching params');
|
||||||
|
|
||||||
return os.platform() === 'win32' ? fetchWindowsParams() : runUnixFetchParams();
|
return os.platform() === 'win32'
|
||||||
|
? fetchWindowsParams()
|
||||||
|
: runUnixFetchParams();
|
||||||
};
|
};
|
||||||
|
|
|
@ -35,13 +35,20 @@ const getDaemonOptions = ({ username, password }) => {
|
||||||
`-rpcuser=${username}`,
|
`-rpcuser=${username}`,
|
||||||
`-rpcpassword=${password}`,
|
`-rpcpassword=${password}`,
|
||||||
];
|
];
|
||||||
return isDev ? defaultOptions.concat(['-testnet', '-addnode=testnet.z.cash']) : defaultOptions;
|
return isDev
|
||||||
|
? defaultOptions.concat(['-testnet', '-addnode=testnet.z.cash'])
|
||||||
|
: defaultOptions;
|
||||||
};
|
};
|
||||||
|
|
||||||
let resolved = false;
|
let resolved = false;
|
||||||
|
|
||||||
|
// eslint-disable-next-line
|
||||||
const runDaemon: () => Promise<?ChildProcess> = () => new Promise(async (resolve, reject) => {
|
const runDaemon: () => Promise<?ChildProcess> = () => new Promise(async (resolve, reject) => {
|
||||||
const processName = path.join(getBinariesPath(), getOsFolder(), getDaemonName());
|
const processName = path.join(
|
||||||
|
getBinariesPath(),
|
||||||
|
getOsFolder(),
|
||||||
|
getDaemonName(),
|
||||||
|
);
|
||||||
|
|
||||||
const [err] = await eres(fetchParams());
|
const [err] = await eres(fetchParams());
|
||||||
|
|
||||||
|
@ -76,9 +83,13 @@ const runDaemon: () => Promise<?ChildProcess> = () => new Promise(async (resolve
|
||||||
store.set('rpcpassword', rpcCredentials.password);
|
store.set('rpcpassword', rpcCredentials.password);
|
||||||
}
|
}
|
||||||
|
|
||||||
const childProcess = cp.spawn(processName, getDaemonOptions(rpcCredentials), {
|
const childProcess = cp.spawn(
|
||||||
|
processName,
|
||||||
|
getDaemonOptions(rpcCredentials),
|
||||||
|
{
|
||||||
stdio: ['ignore', 'pipe', 'pipe'],
|
stdio: ['ignore', 'pipe', 'pipe'],
|
||||||
});
|
},
|
||||||
|
);
|
||||||
|
|
||||||
childProcess.stdout.on('data', (data) => {
|
childProcess.stdout.on('data', (data) => {
|
||||||
if (mainWindow) mainWindow.webContents.send('zcashd-log', data.toString());
|
if (mainWindow) mainWindow.webContents.send('zcashd-log', data.toString());
|
||||||
|
|
|
@ -13,6 +13,8 @@ import eres from 'eres';
|
||||||
import { registerDebugShortcut } from '../utils/debug-shortcut';
|
import { registerDebugShortcut } from '../utils/debug-shortcut';
|
||||||
import runDaemon from './daemon/zcashd-child-process';
|
import runDaemon from './daemon/zcashd-child-process';
|
||||||
import zcashLog from './daemon/logger';
|
import zcashLog from './daemon/logger';
|
||||||
|
import getZecPrice from '../services/zec-price';
|
||||||
|
import store from './electron-store';
|
||||||
|
|
||||||
let mainWindow: BrowserWindowType;
|
let mainWindow: BrowserWindowType;
|
||||||
let updateAvailable: boolean = false;
|
let updateAvailable: boolean = false;
|
||||||
|
@ -37,9 +39,9 @@ const createWindow = () => {
|
||||||
|
|
||||||
autoUpdater.on('download-progress', progress => showStatus(
|
autoUpdater.on('download-progress', progress => showStatus(
|
||||||
/* eslint-disable-next-line max-len */
|
/* eslint-disable-next-line max-len */
|
||||||
`Download speed: ${progress.bytesPerSecond} - Downloaded ${progress.percent}% (${progress.transferred}/${
|
`Download speed: ${progress.bytesPerSecond} - Downloaded ${
|
||||||
progress.total
|
progress.percent
|
||||||
})`,
|
}% (${progress.transferred}/${progress.total})`,
|
||||||
));
|
));
|
||||||
autoUpdater.on('update-downloaded', () => {
|
autoUpdater.on('update-downloaded', () => {
|
||||||
updateAvailable = true;
|
updateAvailable = true;
|
||||||
|
@ -58,10 +60,18 @@ const createWindow = () => {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
getZecPrice().then((obj) => {
|
||||||
|
store.set('ZEC_DOLLAR_PRICE', obj.USD);
|
||||||
|
});
|
||||||
|
|
||||||
mainWindow.setVisibleOnAllWorkspaces(true);
|
mainWindow.setVisibleOnAllWorkspaces(true);
|
||||||
registerDebugShortcut(app, mainWindow);
|
registerDebugShortcut(app, mainWindow);
|
||||||
|
|
||||||
mainWindow.loadURL(isDev ? 'http://0.0.0.0:8080/' : `file://${path.join(__dirname, '../build/index.html')}`);
|
mainWindow.loadURL(
|
||||||
|
isDev
|
||||||
|
? 'http://0.0.0.0:8080/'
|
||||||
|
: `file://${path.join(__dirname, '../build/index.html')}`,
|
||||||
|
);
|
||||||
|
|
||||||
exports.app = app;
|
exports.app = app;
|
||||||
exports.mainWindow = mainWindow;
|
exports.mainWindow = mainWindow;
|
||||||
|
|
|
@ -45,7 +45,6 @@
|
||||||
"css-loader": "^1.0.1",
|
"css-loader": "^1.0.1",
|
||||||
"docz": "^0.12.13",
|
"docz": "^0.12.13",
|
||||||
"docz-plugin-css": "^0.11.0",
|
"docz-plugin-css": "^0.11.0",
|
||||||
"electron": "^3.0.10",
|
|
||||||
"electron-builder": "^20.36.2",
|
"electron-builder": "^20.36.2",
|
||||||
"electron-icon-maker": "^0.0.4",
|
"electron-icon-maker": "^0.0.4",
|
||||||
"electron-is-dev": "^1.0.1",
|
"electron-is-dev": "^1.0.1",
|
||||||
|
@ -88,17 +87,20 @@
|
||||||
"@babel/register": "^7.0.0",
|
"@babel/register": "^7.0.0",
|
||||||
"autoprefixer": "^9.3.1",
|
"autoprefixer": "^9.3.1",
|
||||||
"connected-react-router": "^5.0.1",
|
"connected-react-router": "^5.0.1",
|
||||||
|
"date-fns": "^1.30.1",
|
||||||
|
"electron": "^3.0.10",
|
||||||
"electron-store": "^2.0.0",
|
"electron-store": "^2.0.0",
|
||||||
"eres": "^1.0.1",
|
"eres": "^1.0.1",
|
||||||
"got": "^9.3.2",
|
"got": "^9.3.2",
|
||||||
"history": "^4.7.2",
|
"history": "^4.7.2",
|
||||||
|
"lodash.flow": "^3.5.0",
|
||||||
|
"lodash.groupby": "^4.6.0",
|
||||||
"p-queue": "^3.0.0",
|
"p-queue": "^3.0.0",
|
||||||
"process-exists": "^3.1.0",
|
"process-exists": "^3.1.0",
|
||||||
"qrcode.react": "^0.8.0",
|
"qrcode.react": "^0.8.0",
|
||||||
"react": "^16.6.0",
|
"react": "^16.6.0",
|
||||||
"react-click-outside": "tj/react-click-outside",
|
"react-click-outside": "tj/react-click-outside",
|
||||||
"react-dom": "^16.6.0",
|
"react-dom": "^16.6.0",
|
||||||
"react-icons": "^3.2.2",
|
|
||||||
"react-popover": "^0.5.10",
|
"react-popover": "^0.5.10",
|
||||||
"react-redux": "^5.0.7",
|
"react-redux": "^5.0.7",
|
||||||
"react-router-dom": "^4.2.2",
|
"react-router-dom": "^4.2.2",
|
||||||
|
|
|
@ -745,8 +745,8 @@ export type APIMethods = {
|
||||||
z_exportwallet: (filename: string) => Promise<string>,
|
z_exportwallet: (filename: string) => Promise<string>,
|
||||||
z_getbalance: (address: string, minconf?: number) => Promise<number>,
|
z_getbalance: (address: string, minconf?: number) => Promise<number>,
|
||||||
z_getnewaddress: (type: string) => Promise<string>,
|
z_getnewaddress: (type: string) => Promise<string>,
|
||||||
z_getoperationresult: (operationid: string) => Promise<Object[]>,
|
z_getoperationresult: (operationid?: string[]) => Promise<Object[]>,
|
||||||
z_getoperationstatus: (operationid: string) => Promise<Object[]>,
|
z_getoperationstatus: (operationid?: string[]) => Promise<Object[]>,
|
||||||
z_gettotalbalance: (
|
z_gettotalbalance: (
|
||||||
minconf?: number,
|
minconf?: number,
|
||||||
includeWatchonly?: boolean,
|
includeWatchonly?: boolean,
|
||||||
|
|
|
@ -0,0 +1,31 @@
|
||||||
|
// @flow
|
||||||
|
import { net } from 'electron';
|
||||||
|
|
||||||
|
type Payload = {
|
||||||
|
[currency: string]: number,
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
WARNING:
|
||||||
|
Just a super fast way to get the zec price
|
||||||
|
*/
|
||||||
|
export default (currencies: string[] = ['USD']): Promise<Payload> => new Promise((resolve, reject) => {
|
||||||
|
const ENDPOINT = `https://min-api.cryptocompare.com/data/price?fsym=ZEC&tsyms=${currencies.join(
|
||||||
|
',',
|
||||||
|
)}&api_key=b6162b068ff9f8fe2872070b791146b06d186e83d5e52e49dcaa42ef8d1d3875`;
|
||||||
|
|
||||||
|
const request = net.request(ENDPOINT);
|
||||||
|
request.on('response', (response) => {
|
||||||
|
let data = '';
|
||||||
|
/* eslint-disable-next-line no-return-assign */
|
||||||
|
response.on('data', chunk => (data += chunk));
|
||||||
|
response.on('end', () => {
|
||||||
|
try {
|
||||||
|
resolve(JSON.parse(data));
|
||||||
|
} catch (err) {
|
||||||
|
reject(err);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
request.end();
|
||||||
|
});
|
20
yarn.lock
|
@ -4080,6 +4080,11 @@ date-fns@^1.23.0:
|
||||||
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
|
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
|
||||||
integrity sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw==
|
integrity sha512-lbTXWZ6M20cWH8N9S6afb0SBm6tMk+uUg6z3MqHPKE9atmsY3kJkTm8vKe93izJ2B2+q5MV990sM2CHgtAZaOw==
|
||||||
|
|
||||||
|
date-fns@^1.30.1:
|
||||||
|
version "1.30.1"
|
||||||
|
resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
|
||||||
|
integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
|
||||||
|
|
||||||
date-now@^0.1.4:
|
date-now@^0.1.4:
|
||||||
version "0.1.4"
|
version "0.1.4"
|
||||||
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
|
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
|
||||||
|
@ -8866,11 +8871,21 @@ lodash.flattendepth@^4.7.0:
|
||||||
resolved "https://registry.yarnpkg.com/lodash.flattendepth/-/lodash.flattendepth-4.7.0.tgz#b4d2d14fc7d9c53deb96642eb616fff22a60932f"
|
resolved "https://registry.yarnpkg.com/lodash.flattendepth/-/lodash.flattendepth-4.7.0.tgz#b4d2d14fc7d9c53deb96642eb616fff22a60932f"
|
||||||
integrity sha1-tNLRT8fZxT3rlmQuthb/8ipgky8=
|
integrity sha1-tNLRT8fZxT3rlmQuthb/8ipgky8=
|
||||||
|
|
||||||
|
lodash.flow@^3.5.0:
|
||||||
|
version "3.5.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
|
||||||
|
integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
|
||||||
|
|
||||||
lodash.get@^4.4.2:
|
lodash.get@^4.4.2:
|
||||||
version "4.4.2"
|
version "4.4.2"
|
||||||
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
|
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
|
||||||
integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
|
integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
|
||||||
|
|
||||||
|
lodash.groupby@^4.6.0:
|
||||||
|
version "4.6.0"
|
||||||
|
resolved "https://registry.yarnpkg.com/lodash.groupby/-/lodash.groupby-4.6.0.tgz#0b08a1dcf68397c397855c3239783832df7403d1"
|
||||||
|
integrity sha1-Cwih3PaDl8OXhVwyOXg4Mt90A9E=
|
||||||
|
|
||||||
lodash.isarguments@^3.0.0:
|
lodash.isarguments@^3.0.0:
|
||||||
version "3.1.0"
|
version "3.1.0"
|
||||||
resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
|
resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
|
||||||
|
@ -11653,11 +11668,6 @@ react-hot-loader@4.3.6:
|
||||||
react-lifecycles-compat "^3.0.4"
|
react-lifecycles-compat "^3.0.4"
|
||||||
shallowequal "^1.0.2"
|
shallowequal "^1.0.2"
|
||||||
|
|
||||||
react-icons@^3.2.2:
|
|
||||||
version "3.2.2"
|
|
||||||
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.2.2.tgz#7b1dc795004a119a35175e62ecef91e5c9c90962"
|
|
||||||
integrity sha512-0DiXTcECUNoMvze2zcFwYYrHAFgQ2rBM0+HIHfaECKRfE1NZYwfuUSbwyg9s1uVPuy7o/KqQKSwBGMWQFvdrhQ==
|
|
||||||
|
|
||||||
react-imported-component@^5.2.3:
|
react-imported-component@^5.2.3:
|
||||||
version "5.2.3"
|
version "5.2.3"
|
||||||
resolved "https://registry.yarnpkg.com/react-imported-component/-/react-imported-component-5.2.3.tgz#7771b72d2814c5ba2839489e2cdc5d033637c045"
|
resolved "https://registry.yarnpkg.com/react-imported-component/-/react-imported-component-5.2.3.tgz#7771b72d2814c5ba2839489e2cdc5d033637c045"
|
||||||
|
|