From 4cc2d8c2c12fc58d6f9ad79f523fb40f24d68c3a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 31 Oct 2022 13:16:21 +0000
Subject: [PATCH 01/16] chore(develop): release 2.17.0

---
 CHANGELOG.md | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 package.json |  2 +-
 2 files changed, 99 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a4db9e097..b77eb28f9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,103 @@
 # Changelog
 
+## [2.17.0](https://github.com/hypha-dao/dho-web-client/compare/v2.16.0...v2.17.0) (2022-10-31)
+
+
+### Features
+
+* add "edit" button for active documents ([#1567](https://github.com/hypha-dao/dho-web-client/issues/1567)) ([#1583](https://github.com/hypha-dao/dho-web-client/issues/1583)) ([adda57c](https://github.com/hypha-dao/dho-web-client/commit/adda57c80d72dab3a33af064d4708b50fa5aa812))
+* add cash claims flag ([#1490](https://github.com/hypha-dao/dho-web-client/issues/1490)) ([962e104](https://github.com/hypha-dao/dho-web-client/commit/962e104bd59e86bca749aa2c764498655f40c3db))
+* add delete button to comments ([#1543](https://github.com/hypha-dao/dho-web-client/issues/1543)) ([#1581](https://github.com/hypha-dao/dho-web-client/issues/1581)) ([9c1f574](https://github.com/hypha-dao/dho-web-client/commit/9c1f57467a315b2e0cb0f596e0f7bc00e3fb0c5f))
+* add portrait tablet design ([#1724](https://github.com/hypha-dao/dho-web-client/issues/1724)) ([831769d](https://github.com/hypha-dao/dho-web-client/commit/831769de6d79f85888226dae1bf410d16035c866))
+* added "delete proposal" button to staging proposals ([#1520](https://github.com/hypha-dao/dho-web-client/issues/1520)) ([#1538](https://github.com/hypha-dao/dho-web-client/issues/1538)) ([7d48d6f](https://github.com/hypha-dao/dho-web-client/commit/7d48d6fcb94fb5f0d904f4bd2755d89167f91e55))
+* **base banner:** add split prop ([#1726](https://github.com/hypha-dao/dho-web-client/issues/1726)) ([5cbe69f](https://github.com/hypha-dao/dho-web-client/commit/5cbe69fea2d5c16aa4d5f8c2bd47c90d3bc44e88))
+* **configuration page:** add ability to navigate to tab via query ([#1650](https://github.com/hypha-dao/dho-web-client/issues/1650)) ([6603c85](https://github.com/hypha-dao/dho-web-client/commit/6603c857e48671be7f779141d7faf53c26d45497))
+* **configuration page:** add dao name field ([#1626](https://github.com/hypha-dao/dho-web-client/issues/1626)) ([0fe4f60](https://github.com/hypha-dao/dho-web-client/commit/0fe4f604b5e2998fe2183685860aff6368acd53f))
+* **configuration page:** change router url on url change ([#1630](https://github.com/hypha-dao/dho-web-client/issues/1630)) ([d6a060f](https://github.com/hypha-dao/dho-web-client/commit/d6a060fbf76a92224737e0d9af86b2558579eb5f))
+* **configuration:** add dynamic explore banner ([#1588](https://github.com/hypha-dao/dho-web-client/issues/1588)) ([34ced1b](https://github.com/hypha-dao/dho-web-client/commit/34ced1b0ec1e2a9450e21530818fdbfbe0a1e444))
+* **dao-proposal-stage:** add type edit ([#1589](https://github.com/hypha-dao/dho-web-client/issues/1589)) ([3504910](https://github.com/hypha-dao/dho-web-client/commit/3504910527f0d0606197817220d605d134cb07ec))
+* **dao:** read cash claim enable from backend ([#1610](https://github.com/hypha-dao/dho-web-client/issues/1610)) ([92db2d7](https://github.com/hypha-dao/dho-web-client/commit/92db2d7a2551ba7441cd59aefa0e9f2013cdc2ca))
+* disabled cash claims for hypha ([#1531](https://github.com/hypha-dao/dho-web-client/issues/1531)) ([61f1261](https://github.com/hypha-dao/dho-web-client/commit/61f12619d0bfd45066b29db51bd1c15f8768baa0))
+* **explore page:** show dao creation wizard to hypha members only ([#1514](https://github.com/hypha-dao/dho-web-client/issues/1514)) ([925cf02](https://github.com/hypha-dao/dho-web-client/commit/925cf020b4c3c95b7a1e4eb2cda56d6a8682fc3e))
+* **members:** add enrol limit based on plan ([#1705](https://github.com/hypha-dao/dho-web-client/issues/1705)) ([f4672d5](https://github.com/hypha-dao/dho-web-client/commit/f4672d5e31b16a59812e4e48c33380c5a4f32ec2))
+* mobile screens ([#1671](https://github.com/hypha-dao/dho-web-client/issues/1671)) ([9e32eb3](https://github.com/hypha-dao/dho-web-client/commit/9e32eb348d86d545839d5e7a7b1a0363159cdb39))
+* **mobile:** add widget bottom more button ([#1756](https://github.com/hypha-dao/dho-web-client/issues/1756)) ([8fbe5bb](https://github.com/hypha-dao/dho-web-client/commit/8fbe5bb9a3c40169b8899b2f3207fd8a2ee2f3a1))
+* **plan manager:** add downgrade plan flow ([#1695](https://github.com/hypha-dao/dho-web-client/issues/1695)) ([0fd064c](https://github.com/hypha-dao/dho-web-client/commit/0fd064c1ada96ff0ff240d0a50156b8e4991acca))
+* **plan manager:** hide manager if plan not activated ([#1713](https://github.com/hypha-dao/dho-web-client/issues/1713)) ([32bc739](https://github.com/hypha-dao/dho-web-client/commit/32bc7391698606ce2db75c9d0eb094c035f2161c))
+* **plan page:** sort plans and offers ([#1727](https://github.com/hypha-dao/dho-web-client/issues/1727)) ([7864748](https://github.com/hypha-dao/dho-web-client/commit/786474818af10e75572acfb0172c467ea6c59fbe))
+* plan-manager ([#1680](https://github.com/hypha-dao/dho-web-client/issues/1680)) ([9143b96](https://github.com/hypha-dao/dho-web-client/commit/9143b966151cf48f79937c054e704561f046a051))
+* **profile card:** swap cities with local time for timezone ([#1704](https://github.com/hypha-dao/dho-web-client/issues/1704)) ([97a2483](https://github.com/hypha-dao/dho-web-client/commit/97a248303005051532ceb2a1141887adf821d479))
+* **proposals:** add pull interval for the published proposals ([#1575](https://github.com/hypha-dao/dho-web-client/issues/1575)) ([62ac339](https://github.com/hypha-dao/dho-web-client/commit/62ac33975300f5fdbd56348145302bdbf2a7456e))
+* **proposals:** add pull interval to auto refresh ([#1529](https://github.com/hypha-dao/dho-web-client/issues/1529)) ([7163dad](https://github.com/hypha-dao/dho-web-client/commit/7163dada7cc512ceb9de80a3b79cdecf573a9bdc))
+* **treasury page:** add mobile design ([#1763](https://github.com/hypha-dao/dho-web-client/issues/1763)) ([3b73585](https://github.com/hypha-dao/dho-web-client/commit/3b7358544ccff0124c323157fce1865f52dfeb13))
+* **validation:** add max min validators ([0dcf006](https://github.com/hypha-dao/dho-web-client/commit/0dcf0064f343411613738ad0bebb038f2f348aae))
+* **widget:** add "titleSize" prop ([#1762](https://github.com/hypha-dao/dho-web-client/issues/1762)) ([606698c](https://github.com/hypha-dao/dho-web-client/commit/606698c690a56ed0050b33bf4f1d924e848c8b84))
+
+
+### Bug Fixes
+
+* badge proposal details and formatting issues ([#1551](https://github.com/hypha-dao/dho-web-client/issues/1551)) ([33b755e](https://github.com/hypha-dao/dho-web-client/commit/33b755e035cc17202fbfdf9f52bcd130587dff14))
+* **changelog:** change relase notes for 2.10 ([#1546](https://github.com/hypha-dao/dho-web-client/issues/1546)) ([6eccb13](https://github.com/hypha-dao/dho-web-client/commit/6eccb13e7c86030e9bd41afbdb45468dc3d44c3a))
+* character max length in creating description for proposal ([#1555](https://github.com/hypha-dao/dho-web-client/issues/1555)) ([#1573](https://github.com/hypha-dao/dho-web-client/issues/1573)) ([6c881e8](https://github.com/hypha-dao/dho-web-client/commit/6c881e8541fce64b4232226968870e467c3863f1))
+* code improvements ([#1674](https://github.com/hypha-dao/dho-web-client/issues/1674)) ([ed58641](https://github.com/hypha-dao/dho-web-client/commit/ed5864178befb482c4b61ecad7e7ead68035d388))
+* **comment input:** disable commenting for non-members ([#1698](https://github.com/hypha-dao/dho-web-client/issues/1698)) ([#1748](https://github.com/hypha-dao/dho-web-client/issues/1748)) ([e9d20e4](https://github.com/hypha-dao/dho-web-client/commit/e9d20e46bd587ca37c2042ca6dcd036f6254d5d3))
+* **configuration page:** remove pattern slip and disable announcement edit for non admins  ([#1530](https://github.com/hypha-dao/dho-web-client/issues/1530)) ([2ec524f](https://github.com/hypha-dao/dho-web-client/commit/2ec524f53217dffa05a90c63ae293f14be643c83))
+* **configuration page:** send url only if changed ([#1656](https://github.com/hypha-dao/dho-web-client/issues/1656)) ([892c501](https://github.com/hypha-dao/dho-web-client/commit/892c501a17a1cfeee5ba5365a81ec5ff992ffede))
+* current dao in left menu (dao switcher) has been hidden ([#1544](https://github.com/hypha-dao/dho-web-client/issues/1544)) ([#1565](https://github.com/hypha-dao/dho-web-client/issues/1565)) ([04dca98](https://github.com/hypha-dao/dho-web-client/commit/04dca98e9cfa64934f790b474e13f3f13fb5e46d))
+* **dho card:** add fixed height card sections ([#1725](https://github.com/hypha-dao/dho-web-client/issues/1725)) ([8f7218f](https://github.com/hypha-dao/dho-web-client/commit/8f7218ff5c61eb10a948b38b6627cb683a21b400))
+* **dho selector:** set theme after switching dao ([#1694](https://github.com/hypha-dao/dho-web-client/issues/1694)) ([85cd159](https://github.com/hypha-dao/dho-web-client/commit/85cd1596d1306a0ca77a4f6bb10f796aeec0337c))
+* enable deferred button for archived assignments [#1489](https://github.com/hypha-dao/dho-web-client/issues/1489) ([#1534](https://github.com/hypha-dao/dho-web-client/issues/1534)) ([a29b231](https://github.com/hypha-dao/dho-web-client/commit/a29b231aba7097fa69f65013ffb070d033dbe31b))
+* **env:** add HYPHA_CONTRACT to build env ([#1687](https://github.com/hypha-dao/dho-web-client/issues/1687)) ([8e3e656](https://github.com/hypha-dao/dho-web-client/commit/8e3e656f4861f1943a5bc36dca28e3fad97ecee1))
+* **filter-widget:** set width to be same on all screens ([#1542](https://github.com/hypha-dao/dho-web-client/issues/1542)) ([#1586](https://github.com/hypha-dao/dho-web-client/issues/1586)) ([1a15f85](https://github.com/hypha-dao/dho-web-client/commit/1a15f857d1e31d9cfbc173aead1f93baeff7d0be))
+* fix wrong titles and salary tag for search items ([#1513](https://github.com/hypha-dao/dho-web-client/issues/1513)) ([#1540](https://github.com/hypha-dao/dho-web-client/issues/1540)) ([c32b3aa](https://github.com/hypha-dao/dho-web-client/commit/c32b3aa0c19a24c1da10a961bd961fdec485c137))
+* fixed color for CTA buttons ([#1522](https://github.com/hypha-dao/dho-web-client/issues/1522)) ([#1560](https://github.com/hypha-dao/dho-web-client/issues/1560)) ([3f29e32](https://github.com/hypha-dao/dho-web-client/commit/3f29e32fa7183d20659844eb8efb4e25ae9b2bcc))
+* fixed displaying members cards on tablet ([c70f0ea](https://github.com/hypha-dao/dho-web-client/commit/c70f0ea966c59338fa9d5c5c21ab52c32af6ac3a))
+* fixed filter on the search page, added missing filter types ([#1415](https://github.com/hypha-dao/dho-web-client/issues/1415)) ([#1537](https://github.com/hypha-dao/dho-web-client/issues/1537)) ([7ad7515](https://github.com/hypha-dao/dho-web-client/commit/7ad751570faea7797f4d1a477c68e80c2d7db75e))
+* fixed filter tablet view on explore page ([6e218ae](https://github.com/hypha-dao/dho-web-client/commit/6e218ae4043f75d0555d4a66c672c592de050192))
+* fixed tablet view on proposal list page ([cc08499](https://github.com/hypha-dao/dho-web-client/commit/cc08499c7c4475ab8f9507b8d81b5b8e768ca377))
+* fixed wallet link in profile page ([#1647](https://github.com/hypha-dao/dho-web-client/issues/1647)) ([#1717](https://github.com/hypha-dao/dho-web-client/issues/1717)) ([6271708](https://github.com/hypha-dao/dho-web-client/commit/6271708d9b31015a3a57352992d7ae1d669dc7ea))
+* fixed widgets links in home and organisation pages ([#1550](https://github.com/hypha-dao/dho-web-client/issues/1550)) ([#1564](https://github.com/hypha-dao/dho-web-client/issues/1564)) ([c600166](https://github.com/hypha-dao/dho-web-client/commit/c600166b8334046b9fd84333d018e779019c770f))
+* hide badge multiplier ([#1476](https://github.com/hypha-dao/dho-web-client/issues/1476)) ([#1535](https://github.com/hypha-dao/dho-web-client/issues/1535)) ([c498dbb](https://github.com/hypha-dao/dho-web-client/commit/c498dbb76549621b3a0afb36b47a5d93bd090560))
+* **loading spinner:** add missing loaders ([#1746](https://github.com/hypha-dao/dho-web-client/issues/1746)) ([801a74e](https://github.com/hypha-dao/dho-web-client/commit/801a74e685823c2d4b296c3b8c3a39ed70accace))
+* **mobile:** dho layout ([d0703a1](https://github.com/hypha-dao/dho-web-client/commit/d0703a15073052801ffcaacd38d1f05dec404924))
+* **mobile:** enable correct login flow on iOS devices ([#1734](https://github.com/hypha-dao/dho-web-client/issues/1734)) ([09fcf6c](https://github.com/hypha-dao/dho-web-client/commit/09fcf6c2a3d42a64a398098f89cb296b39b6dd22))
+* **mobile:** proposal list mobileFilterStyles ([796e088](https://github.com/hypha-dao/dho-web-client/commit/796e088014786b1aab6018fb6c98169728e497b0))
+* **mobile:** proposal page tablet ([3049c63](https://github.com/hypha-dao/dho-web-client/commit/3049c63f95c61d1b65514ab1f18ed562856f45b6))
+* **mobile:** search columns ([#1681](https://github.com/hypha-dao/dho-web-client/issues/1681)) ([9a71a85](https://github.com/hypha-dao/dho-web-client/commit/9a71a8507bef9480bdc2202661780172978cd4fe))
+* **mobile:** tablet organization page ([c9979ff](https://github.com/hypha-dao/dho-web-client/commit/c9979ffc53bdea0fff7c77c58eef4f9a9718c1e3))
+* **mobile:** tamblet members page ([1f4e7c9](https://github.com/hypha-dao/dho-web-client/commit/1f4e7c9ff81a872e9bee8d3dc25b31802aba0d88))
+* **mobile:** top navigation ([47ecb9f](https://github.com/hypha-dao/dho-web-client/commit/47ecb9fcd5b34bd36d8245aaf65cefdd98e4550c))
+* **mobile:** various UI bugs ([#1757](https://github.com/hypha-dao/dho-web-client/issues/1757)) ([3c0eaf4](https://github.com/hypha-dao/dho-web-client/commit/3c0eaf44d624a0846864ea405edff5cadcc4efa0))
+* **mobile:** voting history alignment ([#1693](https://github.com/hypha-dao/dho-web-client/issues/1693)) ([24f4ae9](https://github.com/hypha-dao/dho-web-client/commit/24f4ae9d6d8fc18ef99cb137f287c3f7350fc6b2))
+* **mobile:** voting history columns ([ca546fb](https://github.com/hypha-dao/dho-web-client/commit/ca546fb48cd58f1ccf774cfde4fa0b1a3206562f))
+* **plan manager:** add plan manger improvements ([#1691](https://github.com/hypha-dao/dho-web-client/issues/1691)) ([111c44b](https://github.com/hypha-dao/dho-web-client/commit/111c44b9e2c9df2f4402b52f6e8b1556aa6487cd))
+* **plan manager:** enable enrollment if the plan is not activated ([#1741](https://github.com/hypha-dao/dho-web-client/issues/1741)) ([c982887](https://github.com/hypha-dao/dho-web-client/commit/c982887171aba3eb49c90ccc228ef35342727e3f))
+* **profile card:** add even padding on members page ([#1700](https://github.com/hypha-dao/dho-web-client/issues/1700)) ([9e136cc](https://github.com/hypha-dao/dho-web-client/commit/9e136cca0c118914245a16e84dc2d403d620a75f))
+* **profile card:** display correct data ([#1740](https://github.com/hypha-dao/dho-web-client/issues/1740)) ([c309531](https://github.com/hypha-dao/dho-web-client/commit/c309531bf07d98971bbf506cd32251424e947fb9))
+* **profile card:** remove double props on widget-editable ([#1712](https://github.com/hypha-dao/dho-web-client/issues/1712)) ([6aeddff](https://github.com/hypha-dao/dho-web-client/commit/6aeddfff774e5241e8b8bdf06eae99f92c3b6c25))
+* **proposal creation:** add cut off icons for long titles ([#1643](https://github.com/hypha-dao/dho-web-client/issues/1643)) ([162f805](https://github.com/hypha-dao/dho-web-client/commit/162f8054278ebccbc71c0b6550602dba71093333))
+* **proposal creation:** make start dates clickable only ([#1387](https://github.com/hypha-dao/dho-web-client/issues/1387)) ([#1594](https://github.com/hypha-dao/dho-web-client/issues/1594)) ([691d89d](https://github.com/hypha-dao/dho-web-client/commit/691d89d58548d10fae519eaff375a70b883a6f55))
+* **proposal creation:** url not loading property ([#1624](https://github.com/hypha-dao/dho-web-client/issues/1624)) ([743492a](https://github.com/hypha-dao/dho-web-client/commit/743492a386fe18c2d9be491ad7df96ac30aa828b))
+* proposal description max length ([#1496](https://github.com/hypha-dao/dho-web-client/issues/1496)) ([20f0d46](https://github.com/hypha-dao/dho-web-client/commit/20f0d46bc11f8b5469e9db914e0ed81ee0bcbff6))
+* **proposals page:** add correct href for "Learn more" button ([#1645](https://github.com/hypha-dao/dho-web-client/issues/1645)) ([#1716](https://github.com/hypha-dao/dho-web-client/issues/1716)) ([118bc44](https://github.com/hypha-dao/dho-web-client/commit/118bc447f6fddddae9d00d8389aa18034cec4ba0))
+* **proposal:** voting widget pagination ([#1541](https://github.com/hypha-dao/dho-web-client/issues/1541)) ([#1577](https://github.com/hypha-dao/dho-web-client/issues/1577)) ([697ba46](https://github.com/hypha-dao/dho-web-client/commit/697ba462592d2e66850ba613dd0a0715f1b7ee43))
+* **register:** add correct indentation ([#1728](https://github.com/hypha-dao/dho-web-client/issues/1728)) ([5718da6](https://github.com/hypha-dao/dho-web-client/commit/5718da69da4f21ad1c895252131db398c9ff15f3))
+* remove console.log ([#1715](https://github.com/hypha-dao/dho-web-client/issues/1715)) ([47fce01](https://github.com/hypha-dao/dho-web-client/commit/47fce019f91180dee0ec2a7ef646a714749e023e))
+* remove console.log ([#1719](https://github.com/hypha-dao/dho-web-client/issues/1719)) ([ba9b8bd](https://github.com/hypha-dao/dho-web-client/commit/ba9b8bdb121ae2c80af967734c4b6b0c7f6479cf))
+* remove decimals from numbers ([#1597](https://github.com/hypha-dao/dho-web-client/issues/1597)) ([#1615](https://github.com/hypha-dao/dho-web-client/issues/1615)) ([ca3dff8](https://github.com/hypha-dao/dho-web-client/commit/ca3dff82c554639489e3092f2047a9fb9aa1d9aa))
+* remove padding top for dashboard pages ([#1524](https://github.com/hypha-dao/dho-web-client/issues/1524)) ([#1587](https://github.com/hypha-dao/dho-web-client/issues/1587)) ([1bce19f](https://github.com/hypha-dao/dho-web-client/commit/1bce19f783654b25e3f0c2c6013b1cc08e61e41d))
+* revert to claim all with multiple transaction ([#1509](https://github.com/hypha-dao/dho-web-client/issues/1509)) ([2e1ed55](https://github.com/hypha-dao/dho-web-client/commit/2e1ed55fb7f21c3b35f56ca418ba40d3e7499710))
+* select options in filter widget has been fixed ([#1523](https://github.com/hypha-dao/dho-web-client/issues/1523), [#1556](https://github.com/hypha-dao/dho-web-client/issues/1556)) ([#1580](https://github.com/hypha-dao/dho-web-client/issues/1580)) ([8c927bb](https://github.com/hypha-dao/dho-web-client/commit/8c927bbd8b2b8d449acec26bc434a9362153174b))
+* show dynamic deferred on active and archived proposals ([#1578](https://github.com/hypha-dao/dho-web-client/issues/1578)) ([d895d70](https://github.com/hypha-dao/dho-web-client/commit/d895d7020ef78919de618efb197062a80d0495fd))
+* small fix in router ([#1749](https://github.com/hypha-dao/dho-web-client/issues/1749)) ([846c889](https://github.com/hypha-dao/dho-web-client/commit/846c889e6fc38e95a17bac5459c5e9ebe3e72213))
+* **style:** add specificity for rounded border q-input ([d36f94e](https://github.com/hypha-dao/dho-web-client/commit/d36f94ef2a0a92a0c75b445c4279ca3e39e3e8b4))
+* **tablet:** organizational assets page ([44d0bf6](https://github.com/hypha-dao/dho-web-client/commit/44d0bf63cf6a5a21d6755bcf53db620992b22c30))
+* **tablet:** proposal detail styles ([dd45277](https://github.com/hypha-dao/dho-web-client/commit/dd45277cc0e413794c9bc4330653df9c626a78d2))
+* **tablet:** search results ([5bae255](https://github.com/hypha-dao/dho-web-client/commit/5bae25568336bfdb83b9ed69659f9331a975a3d0))
+* **treasury page:** add even padding ([#1701](https://github.com/hypha-dao/dho-web-client/issues/1701)) ([8e94491](https://github.com/hypha-dao/dho-web-client/commit/8e944916900a888fa5fec13e002874f47e264ca3))
+* **wallet page:** improve design ([#1593](https://github.com/hypha-dao/dho-web-client/issues/1593)) ([9ab69db](https://github.com/hypha-dao/dho-web-client/commit/9ab69dbe0835db418f9d2c9daa9913fa515e14c5))
+* warning about character max from description has been removed ([#1555](https://github.com/hypha-dao/dho-web-client/issues/1555)) ([#1563](https://github.com/hypha-dao/dho-web-client/issues/1563)) ([571f374](https://github.com/hypha-dao/dho-web-client/commit/571f37485c15985e0e5564af0a4bcebe16923f76))
+
 ## [2.16.0](https://github.com/hypha-dao/dho-web-client/compare/v2.15.0...v2.16.0) (2022-10-24)
 
 
diff --git a/package.json b/package.json
index e7e07a670..abe3bbc21 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "dho-web-client",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "Governance, payroll and treasury tools for distributed HUMAN organizations (DHO)",
   "productName": "Hypha DHO",
   "author": "Max <max@digitalscarcity.io>",

From 54ba485690a332fbde05fa5aa43e0c4f15c17ebd Mon Sep 17 00:00:00 2001
From: Arsenije Savic <arsenijesavic@me.com>
Date: Mon, 31 Oct 2022 09:14:03 -0600
Subject: [PATCH 02/16] build(staging): change telos endpoint var

---
 .github/workflows/deploy-staging.yml | 2 +-
 src/store/profiles/actions.js        | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/.github/workflows/deploy-staging.yml b/.github/workflows/deploy-staging.yml
index 3f784bd0c..9fb230438 100644
--- a/.github/workflows/deploy-staging.yml
+++ b/.github/workflows/deploy-staging.yml
@@ -37,7 +37,7 @@ jobs:
           DOCUMENTATION: 'https://notepad.hypha.earth/5dC66nNXRVGpb1aTHaRJXw'
           DGRAPH_URL: 'https://alpha.tekit.io'
           DGRAPH_ROOT_HASH: '52a7ff82bd6f53b31285e97d6806d886eefb650e79754784e9d923d3df347c91'
-          TELOS_ENDPOINTS: 'https://api.telosfoundation.io'
+          TELOS_ENDPOINTS: 'https://mainnet.telos.net'
           TLOSTO_SEEDS: 'tlosto.seeds'
           SUPPLY_CONTRACT: 'voice.hypha'
           GRAPHQL_URI: 'https://alpha-dhomn.tekit.io/graphql'
diff --git a/src/store/profiles/actions.js b/src/store/profiles/actions.js
index 563beef1c..8adc94330 100644
--- a/src/store/profiles/actions.js
+++ b/src/store/profiles/actions.js
@@ -204,7 +204,6 @@ export const getTokensAmounts = async function (context, account) {
 }
 
 export const getHyphaBalance = async function (context, account) {
-  // https://api.telosfoundation.io/
   const req = await this.$axios.post(`${this.$apiUrl}/v1/chain/get_currency_balance`, {
     account,
     code: this.$config.contracts.hypha,

From 733fe33de876a60c480c0718dde6093d94bc27b3 Mon Sep 17 00:00:00 2001
From: Evgeni B <evgeni.biryuk.hypha@gmail.com>
Date: Tue, 1 Nov 2022 17:00:53 +0300
Subject: [PATCH 03/16] fix(router): allow only authorised users onto proposal
 creation page (#1769)

---
 src/components/navigation/profile-sidebar.vue | 3 ++-
 src/components/navigation/quick-links.vue     | 7 ++++---
 src/layouts/MultiDhoLayout.vue                | 2 +-
 src/router/routes.js                          | 6 +++---
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/navigation/profile-sidebar.vue b/src/components/navigation/profile-sidebar.vue
index 4996aae88..74e0362e2 100644
--- a/src/components/navigation/profile-sidebar.vue
+++ b/src/components/navigation/profile-sidebar.vue
@@ -18,6 +18,7 @@ export default {
     daoName: String,
     isMember: Boolean,
     isMobile: Boolean,
+    isAuthenticated: Boolean,
     profile: {
       type: Object
     }
@@ -41,7 +42,7 @@ export default {
         .h-b3.text-body(v-if="profile && !compact") {{ '@' + profile.username }}
       sidebar-news(:username="profile.username" :daoName="daoName" :announcement="announcement" v-if="!compact" :isMember="isMember")
       //- quick-actions //- Commented for MVP
-      quick-links.q-py-sm(:username="profile.username" :isMember="isMember" :compact="compact" @onClick="isMobile && $emit('close')")
+      quick-links.q-py-sm(:username="profile.username" :isMember="isMember" :isAuthenticated="isAuthenticated" :compact="compact" @onClick="isMobile && $emit('close')")
 </template>
 
 <style lang="stylus" scoped>
diff --git a/src/components/navigation/quick-links.vue b/src/components/navigation/quick-links.vue
index 63f4ae370..bf76fe275 100644
--- a/src/components/navigation/quick-links.vue
+++ b/src/components/navigation/quick-links.vue
@@ -7,7 +7,8 @@ export default {
   props: {
     compact: Boolean,
     isMember: Boolean,
-    username: String
+    username: String,
+    isAuthenticated: Boolean
   },
 
   data: function () {
@@ -50,7 +51,7 @@ export default {
 .quick-links.full-width(:style="cssVars")
   .row.q-col-gutter-xs.justify-center-items-center
     .col-6(:class="{ 'col-12': compact, 'flex': !compact }").justify-end
-      q-btn.button-square.items-end(@click.native="$emit('onClick')" :to="isMember ? { name: 'proposal-create', params: { dhoname: daoSettings.url } } : {}" rounded unelevated :color="isActiveRoute('proposal-create') ? 'primary' : 'internal-bg'" :text-color="isActiveRoute('proposal-create') ? 'internal-bg' : 'primary'" :disabled="!isMember")
+      q-btn.button-square.items-end(@click.native="$emit('onClick')" :to="isAuthenticated ? { name: 'proposal-create', params: { dhoname: daoSettings.url } } : {}" rounded unelevated :color="isActiveRoute('proposal-create') ? 'primary' : 'internal-bg'" :text-color="isActiveRoute('proposal-create') ? 'internal-bg' : 'primary'" :disabled="!isAuthenticated")
         .column.items-center
           q-icon.q-pa-xs(size="md" name="fas fa-file-medical")
           .text-caption.text-no-wrap.text-bold New Proposal
@@ -60,7 +61,7 @@ export default {
           q-icon.q-pa-xs( size="md" name="far fa-user")
           .text-caption.text-no-wrap.text-bold My Profile
     .col-6(:class="{ 'col-12': compact, 'flex': !compact }").justify-end
-      q-btn.button-square(@click="changeRoute('wallet',{username})" rounded unelevated :color="isActiveRoute('wallet') ? 'primary' : 'internal-bg'" :text-color="isActiveRoute('wallet') ? 'internal-bg' : 'primary'" :disabled="!isMember")
+      q-btn.button-square(@click="changeRoute('wallet',{username})" rounded unelevated :color="isActiveRoute('wallet') ? 'primary' : 'internal-bg'" :text-color="isActiveRoute('wallet') ? 'internal-bg' : 'primary'" :disabled="!isAuthenticated")
         .column.items-center
           q-icon.q-pa-xs(size="md" name="fas fa-wallet")
           .text-caption.text-no-wrap.text-bold My Wallet
diff --git a/src/layouts/MultiDhoLayout.vue b/src/layouts/MultiDhoLayout.vue
index 540d0aee5..7086ccbba 100644
--- a/src/layouts/MultiDhoLayout.vue
+++ b/src/layouts/MultiDhoLayout.vue
@@ -313,7 +313,7 @@ q-layout(:style="{ 'min-height': 'inherit' }" :view="'lHr Lpr lFr'" ref="layout"
   q-drawer(v-model="right" side="right" :width="$q.screen.gt.lg ? 370 : ($q.screen.md ? 400 : ($q.screen.gt.sm ?  140 : $q.screen.width))" v-if="$q.screen.gt.lg || account || !$q.screen.gt.sm" persistent :show-if-above="false").full-width
     .row.full-width.full-height.flex.items-center.justify-center(v-if="loadingAccount")
       loading-spinner(size="120px")
-    profile-sidebar(v-if="account" :profile="profile" :announcement="announcement" :daoName="daoName" @close="right = false" :isMember="isMember" :compact="!$q.screen.gt.lg && $q.screen.gt.md" :isMobile="!$q.screen.gt.md")
+    profile-sidebar(v-if="account" :profile="profile" :announcement="announcement" :daoName="daoName" @close="right = false" :isMember="isMember" :isAuthenticated="isAuthenticated" :compact="!$q.screen.gt.lg && $q.screen.gt.md" :isMobile="!$q.screen.gt.md")
     profile-sidebar-guest(v-if="!account && ($q.screen.gt.lg || !$q.screen.gt.sm) && !loadingAccount" :daoName="daoName" @close="right = false" :registrationEnabled="daoSettings.registrationEnabled")
   q-footer.bg-white(v-if="$q.screen.lt.lg" :style="{ height: '74px' }")
     bottom-navigation
diff --git a/src/router/routes.js b/src/router/routes.js
index 113975c34..e081d3ca3 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -120,7 +120,7 @@ const routes = [
               },
               props: true,
               requiresAuth: true,
-              requiresAuthMember: true,
+              // requiresAuthMember: true,
               title: 'Create Proposal'
             },
             component: () => import('pages/proposals/ProposalCreate.vue')
@@ -230,8 +230,8 @@ const routes = [
             }
           },
           title: 'Wallet',
-          requiresAuth: true,
-          requiresAuthMember: true
+          requiresAuth: true
+          // requiresAuthMember: true
         },
         component: () => import('pages/profiles/Wallet.vue'),
         props: true

From f2288841dca307c5c072498c30045858d0a5cb78 Mon Sep 17 00:00:00 2001
From: Evgeni B <evgeni.biryuk.hypha@gmail.com>
Date: Tue, 1 Nov 2022 17:01:39 +0300
Subject: [PATCH 04/16] fix(search): some search items were not showing up
 (#1633) (#1771)

---
 src/pages/search/components/result.vue | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/pages/search/components/result.vue b/src/pages/search/components/result.vue
index 2b4f64590..f49f184b1 100644
--- a/src/pages/search/components/result.vue
+++ b/src/pages/search/components/result.vue
@@ -136,11 +136,17 @@ export default {
       if (this.type === 'withdrawed') tags.push({ color: 'negative', label: 'Withdrawn', text: 'white' })
 
       if (this.type === 'Payout') {
-        const [usdAmount] = this.salary.split(' ')
-        return [
-          { color: 'primary', label: 'Generic Contribution' },
-          { color: 'primary', outline: true, label: `${this.getFormatedTokenAmount(usdAmount, 3, 0)} HUSD` }
-        ]
+        if (this.salary) {
+          const [usdAmount] = this.salary.split(' ')
+          return [
+            { color: 'primary', label: 'Generic Contribution' },
+            { color: 'primary', outline: true, label: `${this.getFormatedTokenAmount(usdAmount, 3, 0)} HUSD` }
+          ]
+        } else {
+          return [
+            { color: 'primary', label: 'Generic Contribution' }
+          ]
+        }
       }
 
       if (this.type === 'Assignment' || this.type === 'Edit') {
@@ -169,11 +175,8 @@ export default {
       }
 
       if (this.type === 'Role') {
-        const [amount] = this.salary.split(' ')
-        const band = this.getSalaryBucket(amount)
         return [
-          { color: 'primary', label: ' Role Archetype' },
-          { color: 'primary', outline: true, label: `${band} ${this.getFormatedTokenAmount(amount, 3, 0)}` }
+          { color: 'primary', label: ' Role Archetype' }
         ]
       }
 

From a95d752294006b72570ee5a40dad44584539cc95 Mon Sep 17 00:00:00 2001
From: Arsenije Savic <arsenijesavic@me.com>
Date: Wed, 2 Nov 2022 14:54:58 -0600
Subject: [PATCH 05/16] feat: dao-launcher (#1772)

---
 .../organization/create-dho-widget.vue        |    2 +-
 src/layouts/CreateLayout.vue                  |   50 +
 src/layouts/DhoSelector.vue                   |   15 +-
 src/pages/onboarding/create.vue               | 1350 +++++++----------
 src/query/dao-created.gql                     |   74 +
 src/router/index.js                           |    6 -
 src/router/routes.js                          |    8 +-
 src/store/dao/actions.js                      |  126 +-
 8 files changed, 736 insertions(+), 895 deletions(-)
 create mode 100644 src/layouts/CreateLayout.vue
 create mode 100644 src/query/dao-created.gql

diff --git a/src/components/organization/create-dho-widget.vue b/src/components/organization/create-dho-widget.vue
index ea16f053e..e5aea8042 100644
--- a/src/components/organization/create-dho-widget.vue
+++ b/src/components/organization/create-dho-widget.vue
@@ -10,5 +10,5 @@ export default {
 <template lang="pug">
 widget.q-my-md.position-relative(title="Create your DHO")
   .text-ellipsis.text-body.q-my-xl Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-  q-btn.q-mt-xl.q-px-lg(rounded color="primary" no-caps @click="$router.push({ name: 'dho-creation' })") New DHO
+  q-btn.q-mt-xl.q-px-lg(rounded color="primary" no-caps @click="$router.push({ name: 'dao-launcher' })") New DHO
 </template>
diff --git a/src/layouts/CreateLayout.vue b/src/layouts/CreateLayout.vue
new file mode 100644
index 000000000..54c94754a
--- /dev/null
+++ b/src/layouts/CreateLayout.vue
@@ -0,0 +1,50 @@
+<script>
+export default {
+  name: 'create-layout',
+  computed: {
+    title () {
+      if (this.$route.meta) {
+        const { title } = this.$route.meta
+        return title
+      }
+      return null
+    },
+    subtitle () {
+      if (this.$route.meta) {
+        const { subtitle } = this.$route.meta
+        return subtitle
+      }
+      return null
+    },
+    link () {
+      if (this.$route.meta) {
+        const { link } = this.$route.meta
+        return link
+      }
+      return []
+    }
+  },
+
+  methods: {
+    onBack () { this.$EventBus.$emit('global:nav:back') }
+  }
+}
+</script>
+
+<template lang="pug">
+q-layout.bg-white(view="lHr LpR fFf" ref="layout")
+    q-page-container
+        //- q-scroll-area.full-height(:thumb-style=" { 'border-radius': '6px' }" ref="scrollArea")
+        .full-height.full-width.fixed-full.bg-internal-bg(:style="'padding: 15px; padding-bottom: 300px; overflow-y: scroll; z-index: 7777;'")
+          header.flex.row.justify-between
+            q-btn(unelevated rounded padding="12px" icon="fas fa-arrow-left"  size="sm" :color="'white'" text-color="'primary'" @click="onBack")
+            .h-h6.text-bold.flex.items-center {{title}}
+            q-btn(unelevated rounded padding="12px" icon="fas fa-times"  size="sm" :color="'white'" text-color="'primary'" :to="{ name: 'dashboard'}")
+          section.q-mt-md
+            router-view
+
+</template>
+
+<style lang="sass" scoped>
+
+</style>
diff --git a/src/layouts/DhoSelector.vue b/src/layouts/DhoSelector.vue
index 9b66f6cdb..36e7c862f 100644
--- a/src/layouts/DhoSelector.vue
+++ b/src/layouts/DhoSelector.vue
@@ -2,9 +2,10 @@
 export default {
   name: 'dho-selector',
   components: {
+    CreateLayout: () => import('./CreateLayout.vue'),
+    LoginLayout: () => import('./LoginLayout.vue'),
     MultiDhoLayout: () => import('./MultiDhoLayout.vue'),
-    ProposalLayout: () => import('./ProposalLayout.vue'),
-    LoginLayout: () => import('./LoginLayout.vue')
+    ProposalLayout: () => import('./ProposalLayout.vue')
   },
 
   props: {
@@ -56,8 +57,8 @@ export default {
       skip () {
         return !this.dhoname || !this.daoRegexp
       },
-      fetchPolicy: 'no-cache',
-      pollInterval: 1000 // THIS IS JUST TEMPORARY UNTIL GRAPHQL SUBSCRIPTION IS READY
+      fetchPolicy: 'no-cache'
+      // pollInterval: 1000 // THIS IS JUST TEMPORARY UNTIL GRAPHQL SUBSCRIPTION IS READY
     },
 
     dho: {
@@ -102,15 +103,17 @@ export default {
       return undefined
     },
 
+    useCreateLayout () { return this.$q.screen.lt.md && this.$route.meta && this.$route.meta.layout && this.$route.meta.layout.mobile === 'create' },
     useMobileProposalLayout () { return this.$q.screen.lt.md && this.$route.meta && this.$route.meta.layout === 'proposal' }
   }
 }
 </script>
 <template lang="pug">
 .dho-selector
-  proposal-layout(v-if="useMobileProposalLayout && $q.platform.is.desktop")
-  multi-dho-layout(v-if="!isLoginRoute" :dho="dho" :daoName="dhoname")
+  create-layout(v-if="useCreateLayout")
   login-layout(v-if="isLoginRoute")
+  multi-dho-layout(v-if="!isLoginRoute" :dho="dho" :daoName="dhoname")
+  proposal-layout(v-if="useMobileProposalLayout && $q.platform.is.desktop")
 </template>
 
 <style scoped lang="stylus">
diff --git a/src/pages/onboarding/create.vue b/src/pages/onboarding/create.vue
index 2230e41ad..37f026b7c 100644
--- a/src/pages/onboarding/create.vue
+++ b/src/pages/onboarding/create.vue
@@ -1,7 +1,9 @@
 <script>
+import { Notify, copyToClipboard } from 'quasar'
 import { mapActions, mapGetters } from 'vuex'
 import { validation } from '~/mixins/validation'
 import pick from '~/utils/pick.js'
+import ipfsy from '~/utils/ipfsy'
 
 const duration = {
   data () {
@@ -23,7 +25,6 @@ const duration = {
 
   computed: {
     isCustomPeriodDuration () { return this.isCustomDuration(this.form.periodDurationSec) },
-
     isCustomVotingDuration () { return this.isCustomDuration(this.form.votingDurationSec) }
   }
 }
@@ -117,15 +118,26 @@ const options = {
   }
 }
 
+function getRandomEOSName () {
+  function choices (population, k) {
+    const out = []
+    for (let i = 0; i < k; i++) {
+      out.push(population[Math.floor(population.length * Math.random())])
+    }
+    return out.join('')
+  }
+  const alphabet = 'abcdefghijklmnopqrstuvwxyz12345'
+  return choices(alphabet, 12)
+}
+
 export default {
-  name: 'dho-creation',
+  name: 'dao-launcher',
   mixins: [validation, options, duration],
   components: {
-    ButtonRadio: () => import('~/components/common/button-radio.vue'),
     CreationStepper: () => import('~/components/proposals/creation-stepper.vue'),
-    CustomPeriodInput: () => import('~/components/form/custom-period-input.vue'),
     InputFileIpfs: () => import('~/components/ipfs/input-file-ipfs.vue'),
-    IpfsImageViewer: () => import('~/components/ipfs/ipfs-image-viewer.vue'),
+    LoadingSpinner: () => import('~/components/common/loading-spinner.vue'),
+
     Widget: () => import('~/components/common/widget.vue')
 
   },
@@ -134,946 +146,634 @@ export default {
     return {
       activeStepIndex: 0,
       steps: [
-        { index: 0, label: 'General Info', key: 'GENERAL_INFO' },
-        { index: 1, label: 'Token', key: 'TOKEN' },
-        { index: 2, label: 'Launch Team', key: 'LAUNCH_TEAM' },
-        // { index: 3, label: 'Voting', key: 'VOTING' },
-        // { index: 4, label: 'Compensation', key: 'COMPENSATION' },
-        // { index: 5, label: 'Templates', key: 'TEMPLATES' },
-        { index: 6, label: 'Design', key: 'DESIGN' }
+        { index: 1, label: 'DAO Identity', key: 'IDENTITY' },
+        { index: 2, label: 'Token', key: 'TOKEN' },
+        { index: 3, label: 'Design', key: 'DESIGN' }
       ],
 
+      dao: null,
+
       error: null,
-      loading: false,
-      submitting: false,
+      state: 'DRAFTING', // DRAFTING, CREATING, CREATED, ADDING_ADMINS, FINISHED
 
       form: {
-        // # STEP 1
-        name: '',
+        // #
+        name: getRandomEOSName(), // used internally to differentiate the DAO's. 12 characters, alphanumeric a-z, 1-5 lowercase
         title: '',
         description: '',
 
-        // # STEP 2
+        // #
         template: -1, // i.e docId of the dao, -1 no template
 
-        // # STEP 3
-        reward_token: null, // Utility token
+        // #
+        // Utility token (aka reward_token = utilityDigits utilitySymbol)
+        utilityName: null,
         utilitySymbol: null,
         utilityDigits: 3, // 1.000
         utilityAmount: -1, // i.e 100000 or -1 for infinite supply
-        utilityValue: 0,
-        voice_token: null, // Voice token
+        utilityValue: '1', // The equivalent value of 1 token in USD
+        // Voice token (aka voice_token = voiceDigits voiceSymbol)
         voiceSymbol: 'VOICE',
         voiceDigits: 3, // 1.000
-        peg_token: null, // Treasury token
+        // Treasury token (aka peg_token = treasuryDigits treasurySymbol)
+        treasuryName: null,
         treasurySymbol: null,
         treasuryDigits: 3, // 1.000
         use_seeds: false,
 
-        // # STEP 4
-        members: [{ name: '', email: '', account: '', discord: '' }],
+        // #
+        member: '',
+        members: [],
 
-        // # STEP 5
+        // #
         votingDurationSec: 604800, // 1 week
         periodDurationSec: 604800, // 1 week
         votingAlignmentPercent: 80, // 80% of yes votes
         votingQuorumPercent: 20, // 20% of people needs to vote
 
-        // # STEP 6
+        // #
         utilityTokenMultiplier: 1,
         voiceTokenMultiplier: 2,
         treasuryTokenMultiplier: 1,
 
-        salaries: [{ name: 'Band 1', value: 0 }],
+        // salaries: [{ name: 'Band 1', value: 0 }],
 
-        // # STEP 7
+        // #
         logo: '',
         primaryColor: '#242f5d',
-        secondaryColor: '#3f64ee'
+        secondaryColor: '#3f64ee',
+        textColor: '#ffffff'
       }
     }
   },
 
   computed: {
     ...mapGetters('accounts', ['account']),
-    ...mapGetters('profiles', ['isConnected']),
 
     activeStep () { return this.steps[this.activeStepIndex].key },
-    lastStep () { return this.activeStepIndex === this.steps.length - 1 }
+    isLastStep () { return this.activeStepIndex === this.steps.length - 1 }
   },
 
   watch: {
-    'form.name': {
+    'form.title': {
       deep: true,
       handler (value) {
         // compute treasury symbol
-        if (value.length > 3) {
-          this.form.treasurySymbol = `${value[0]}${value[1]}${value[value.length - 1]}`.toUpperCase()
+        if (value.length >= 3) {
+          const _tokenName = `${value[0]}${value[1]}${value[value.length - 1]}`.toUpperCase()
+          this.form.treasuryName = _tokenName
+          this.form.treasurySymbol = _tokenName
         }
-        // setup title
-        this.title = value
       }
     }
+
   },
 
   methods: {
-    ...mapActions('dao', ['createDAO']),
+    ...mapActions('dao', ['createDAO', 'addAdmins']),
+    ...mapActions('profiles', ['getPublicProfile']),
+
+    isState (states) { return states.includes(this.state) },
+
+    ipfsy,
+
+    async isCurrentStepValid () {
+      const dataForStep = {
+        0: { ...pick(this.form, ['title', 'description']) },
+        1: { ...pick(this.form, ['utilityName', 'utilitySymbol', 'utilityDigits', 'utilityAmount', 'utilityValue', 'voiceSymbol', 'voiceDigits', 'treasuryName', 'treasurySymbol', 'treasuryDigits']) },
+        2: { ...pick(this.form, ['members']) },
+        3: { ...pick(this.form, ['logo', 'primaryColor', 'secondaryColor']) }
+      }
 
-    capitalizeFirstLetter: (str) => {
-      return (
-        str.charAt(0).toUpperCase() +
-        str.replace('_', ' ').toLowerCase().slice(1)
+      return await this.validate(
+        dataForStep[this.activeStepIndex]
       )
     },
 
-    async onPrevStep () {
+    async onPreviousStep () {
+      this.error = null
+
       if (this.activeStepIndex >= 0) {
         this.activeStepIndex = this.activeStepIndex - 1
       }
     },
 
     async onNextStep () {
-      if (!(await this.canSubmit())) {
+      this.error = null
+
+      if (!(await this.isCurrentStepValid())) {
         return
       }
 
-      if (this.lastStep) {
-        try {
-          this.submitting = true
-          await this.createDAO({ data: { ...this.form, onboarder_account: this.account } })
-        } catch (error) {
-          this.error = error
-        }
-      } else {
+      if (this.activeStepIndex <= this.steps.length) {
         this.activeStepIndex = this.activeStepIndex + 1
       }
+    },
 
-      this.submitting = false
+    async onSubmit () {
+      this.state = 'CREATING'
+
+      try {
+        await this.createDAO({ data: { ...this.form, onboarder_account: this.account } })
+
+        const query = await this.$apollo.watchQuery({
+          query: require('~/query/dao-created.gql'),
+          variables: { regexp: '/^' + this.form.name + '$/i' },
+          pollInterval: 100
+        })
+
+        query.subscribe(({ data, loading }) => {
+          if (data.queryDao.length > 0) {
+            const [result] = data.queryDao
+            if (result) {
+              this.dao = { ...result }
+              this.state = 'CREATED'
+              query.stopPolling()
+            }
+          }
+        })
+      } catch (error) {
+        this.error = error
+
+        Notify.create({
+          color: 'negative',
+          icon: 'fas fa-exclamation-circle',
+          message: error.message,
+          position: 'bottom',
+          timeout: 4000,
+          actions: [
+            { icon: 'fas fa-times', color: 'white', handler: () => { /* ... */ } }
+          ]
+        })
+
+        this.state = 'DRAFTING'
+      }
     },
 
-    async canSubmit () {
-      const dataForValidation = {
-        0: { ...pick(this.form, ['title', 'description']) },
-        1: { ...pick(this.form, ['utilitySymbol', 'utilityDigits', 'utilityAmount', 'utilityValue', 'voiceSymbol', 'voiceDigits', 'treasurySymbol', 'treasuryDigits']) },
-        2: { ...pick(this.form, ['members']) },
-        3: { ...pick(this.form, ['logo', 'primaryColor', 'secondaryColor']) }
-        // 3: { ...pick(this.form, ['votingDurationSec', 'periodDurationSec', 'votingAlignmentPercent', 'votingQuorumPercent']) },
-        // 4: { ...pick(this.form, ['utilityTokenMultiplier', 'voiceTokenMultiplier', 'treasuryTokenMultiplier', 'salaries']) }
-        // 5: { ...pick(this.form, ['template']) }
-        // 6: { ...pick(this.form, ['design']) },
+    //
+    async onAddAdmin () {
+      try {
+        await this.addAdmins({ daoId: this.dao.docId, users: [...this.form.members.map(_ => _.username)] })
+        this.state = 'FINISHED'
+      } catch (error) {
+        this.error = error
+
+        Notify.create({
+          color: 'negative',
+          icon: 'fas fa-exclamation-circle',
+          message: error.message,
+          position: 'bottom',
+          timeout: 4000,
+          actions: [
+            { icon: 'fas fa-times', color: 'white', handler: () => { /* ... */ } }
+          ]
+        })
       }
+    },
 
-      return await this.validate(
-        dataForValidation[this.activeStepIndex]
-      )
+    async copyToClipboard () {
+      try {
+        await copyToClipboard(`${window.location.host}/${this.form.name}/login`)
+
+        this.$q.notify({
+          color: 'secondary',
+          textColor: 'white',
+          message: 'The link has been copied',
+          icon: 'far fa-copy',
+          timeout: 1000,
+          actions: [{ icon: 'fas fa-times', color: 'white' }]
+        })
+      } catch (error) {
+        this.$q.notify({
+          color: 'negative',
+          textColor: 'white',
+          message: 'Error',
+          timeout: 5000,
+          actions: [{ icon: 'fas fa-times', color: 'white' }]
+        })
+      }
+    },
+
+    async addTeamMember () {
+      const user = await this.getPublicProfile(this.form.member)
+      this.form.members.push({ username: this.form.member, avatar: user ? user?.publicData?.avatar : null, fullName: user ? user?.publicData?.name : null })
+      this.form.member = ''
     }
+  },
+
+  mounted () {
+    this.$EventBus.$on('global:nav:back', this.onPreviousStep)
+  },
 
+  beforeDestroy () {
+    this.$EventBus.$off('global:nav:back')
   }
+
 }
 </script>
 
 <template lang="pug">
-.row.justify-between
-  .column.col-xs-12.col-sm-9.col-md-9.q-pr-md
-    widget
-      //- STEP 1
-      section.row(v-show="activeStep === 'GENERAL_INFO'")
-        label.h-h4 General info
-        p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
-        .row.full-width.justify-between.q-mt-sm
-          .col-12
-            label.h-label Organization name
-            q-input.q-mt-xs.rounded-border(
-              :rules="[rules.required]"
-              dense
-              lazy-rules="ondemand"
-              maxlength="50"
-              outlined
-              placeholder="The display name of your organization (max. 50 character)"
-              ref="name"
-              v-model="form.name"
-            )
-          .col-12
-            label.h-label Organization purpose
-            q-input.q-mt-xs.rounded-border(
-              :input-style="{ 'resize': 'none' }"
-              :rules="[rules.required]"
-              dense
-              lazy-rules="ondemand"
-              outlined
-              placeholder="Briefly explain what your DAO is all about (max. 300 characters)"
-              ref="description"
-              rows='10'
-              type="textarea"
-              v-model="form.description"
-            )
-
-      //- STEP 2
-      section.column.full-width(v-show="activeStep === 'TOKEN'")
-        label.h-h4 Token
-        .row.full-width.justify-between.q-mt-sm
-          .col-12.q-pr-xs
-            label.h-label Name your Token
-            q-input.q-mt-xs.rounded-border(
-                  :debounce="200"
-                  :rules="[rules.required, rules.isTokenAvailable]"
-                  bg-color="white"
-                  dense
-                  lazy-rules="ondemand"
-                  mask="AAAAAAAA"
-                  maxlength="7"
-                  outlined
-                  placeholder="Utility Token Name (max 7 characters, uppercase A-Z)"
-                  ref="utilitySymbol"
-                  rounded
-                  v-model="form.utilitySymbol"
-                )
-        //- .row
-        //-   q-avatar(size='30px').q-mr-xs
-        //-     img(src="~assets/icons/token-utility-icon.svg")
-        //-   label.h-h4 Utility token
-        //- p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-        //- .row.full-width.justify-between.q-mt-sm
-        //-   .col-8.q-pr-xs
-        //-     label.h-label Symbol
-        //-     q-input.q-mt-xs.rounded-border(
-        //-           :debounce="200"
-        //-           :rules="[rules.required]"
-        //-           bg-color="white"
-        //-           dense
-        //-           lazy-rules="ondemand"
-        //-           mask="AAAAAAAA"
-        //-           maxlength="7"
-        //-           outlined
-        //-           placeholder="Max 7 characters uppercase A-Z"
-        //-           ref="utilitySymbol"
-        //-           rounded
-        //-           v-model="form.utilitySymbol"
-        //-         )
-        //-   .col-4
-        //-     label.h-label Number of Digits
-        //-     q-select.q-mt-xs.rounded-border(
-        //-         :options="numberOfDigits"
-        //-         :rules="[rules.required]"
-        //-         bg-color="white"
-        //-         dense
-        //-         emit-value,
-        //-         fill-input
-        //-         hide-selected
-        //-         map-options
-        //-         option-label="label"
-        //-         option-value="value"
-        //-         outlined
-        //-         placeholder=""
-        //-         ref="utilityDigits"
-        //-         rounded
-        //-         use-input
-        //-         v-model='form.utilityDigits'
-        //-       )
-
-        //- .row.full-width.justify-between
-        //-   .col-6.q-pr-xs
-        //-     label.h-label Total amount
-        //-     q-input.q-mt-xs.rounded-border(
-        //-           :debounce="200"
-        //-           :rules="[rules.required]"
-        //-           bg-color="white"
-        //-           dense
-        //-           lazy-rules="ondemand"
-        //-           outlined
-        //-           placeholder=""
-        //-           ref="utilityAmount"
-        //-           rounded
-        //-           type='number'
-        //-           v-model="form.utilityAmount"
-        //-         )
-        //-   .col-6
-        //-     label.h-label Value
-        //-     q-input.q-mt-xs.rounded-border(
-        //-           :debounce="200"
-        //-           :rules="[rules.required]"
-        //-           bg-color="white"
-        //-           dense
-        //-           lazy-rules="ondemand"
-        //-           outlined
-        //-           placeholder=""
-        //-           ref="utilityValue"
-        //-           rounded
-        //-           type='number'
-        //-           v-model="form.utilityValue"
-        //-         )
-
-        //- .row.q-mt-xl
-        //-   .row
-        //-     q-avatar(size='30px').q-mr-xs
-        //-       img(src="~assets/icons/token-voice-icon.svg")
-        //-     label.h-h4 Voice token
-        //-   p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-        //-   .row.full-width.justify-between.q-mt-sm
-        //-     .col-8.q-pr-xs
-        //-       label.h-label Symbol
-        //-       q-input.q-mt-xs.rounded-border(
-        //-             :debounce="200"
-        //-             :rules="[rules.required]"
-        //-             bg-color="white"
-        //-             dense
-        //-             lazy-rules="ondemand"
-        //-             mask="AAAAAAAA"
-        //-             maxlength="7"
-        //-             outlined
-        //-             placeholder="Max 7 characters uppercase A-Z"
-        //-             ref="voiceSymbol"
-        //-             rounded
-        //-             v-model="form.voiceSymbol"
-        //-           )
-        //-     .col-4
-        //-       label.h-label Number of Digits
-        //-       q-select.q-mt-xs.rounded-border(
-        //-           :options="numberOfDigits"
-        //-           :rules="[rules.required]"
-        //-           bg-color="white"
-        //-           dense
-        //-           emit-value,
-        //-           fill-input
-        //-           hide-selected
-        //-           map-options
-        //-           option-label="label"
-        //-           option-value="value"
-        //-           outlined
-        //-           placeholder=""
-        //-           ref="voiceDigits"
-        //-           rounded
-        //-           use-input
-        //-           v-model='form.voiceDigits'
-        //-         )
-
-        //- .row.q-mt-xl
-        //-   .row
-        //-     q-avatar(size='30px').q-mr-xs
-        //-       img(src="~assets/icons/token-treasury-icon.svg")
-        //-     label.h-h4 Treasury token
-        //-   p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-        //-   .row.full-width.justify-between.q-mt-sm
-        //-     .col-8.q-pr-xs
-        //-       label.h-label Symbol
-        //-       q-input.q-mt-xs.rounded-border(
-        //-             :debounce="200"
-        //-             :rules="[rules.required]"
-        //-             bg-color="white"
-        //-             dense
-        //-             lazy-rules="ondemand"
-        //-             mask="AAAAAAAA"
-        //-             maxlength="7"
-        //-             outlined
-        //-             placeholder="Max 7 characters uppercase A-Z"
-        //-             ref="treasurySymbol"
-        //-             rounded
-        //-             v-model="form.treasurySymbol"
-        //-           )
-        //-     .col-4
-        //-       label.h-label Number of Digits
-        //-       q-select.q-mt-xs.rounded-border(
-        //-           :options="numberOfDigits"
-        //-           :rules="[rules.required]"
-        //-           bg-color="white"
-        //-           dense
-        //-           emit-value,
-        //-           fill-input
-        //-           hide-selected
-        //-           map-options
-        //-           option-label="label"
-        //-           option-value="value"
-        //-           outlined
-        //-           placeholder=""
-        //-           ref="treasuryDigits"
-        //-           rounded
-        //-           use-input
-        //-           v-model='form.treasuryDigits'
-        //-         )
-
-        //- .row.q-mt-xl
-        //-   label.h-h4 Additional token
-        //-   p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-        //-   .row.full-width.justify-between.q-mt-sm
-        //-     .row.full-width
-        //-       .row.col
-        //-         q-avatar(size="30px")
-        //-           img(:src="require('~/assets/icons/seeds.png')")
-        //-         div.q-mx-sm.col
-        //-           p.q-pa-none.q-ma-none.font-lato.text-heading.text-xs.text-weight-700 Seeds
-        //-           p.q-pa-none.q-ma-none.font-sans.text-xs(:style="{'color':'#84878E'}") Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-        //-       div
-        //-         q-toggle(v-model="form.use_seeds")
-
-      //- STEP 3
-      section.column.full-width.q-mb-xl(v-show="activeStep === 'LAUNCH_TEAM'")
-        label.h-h4 Launch team
-        p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md The initial launch team is critical for your DAO. The people you list here will have access to configure the DAO, create proposals and enroll other members. Make sure to provide us with the emails of the launch team - in case they do not have a Telos account yet, we can send them a link to create an account. This makes it easier for you and your team to get started from day 1.
-        template(v-for="(member, index) in form.members")
-          .row.full-width.justify-between.q-col-gutter-xs
-            .col-3.q-pr-xs
+q-page.dao-launcher-page
+  .fixed-full.row.justify-center.items-center(v-if="isState(['CREATING'])")
+    loading-spinner(color="primary" size="72px")
+
+  .row.justify-between.q-col-gutter-md.q-mb-xl
+    .col-sm-12.col-md-12.col-lg-9
+      section.row.items-stretch(v-if="isState(['CREATED'])")
+
+        widget.full-width
+          .row.full-width.items-center
+            .col-auto
+              q-avatar(size="160px" color="primary" text-color="white")
+                span(v-show="!form.logo") {{ form.title ? form.title[0] : '' }}
+                img(v-show="form.logo" :src="ipfsy(form.logo)")
+            .col.q-pl-xl
+              label.h-h4 {{ this.form.title }}
+              p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md {{this.form.description}}
+          .row.justify-end.q-mt-md
+              q-btn.q-px-xl(
+                :to="{ name: 'dashboard' }"
+                color="primary"
+                label="Go to Dashboard"
+                no-caps
+                rounded
+                unelevated
+              )
+
+        .row.items-stretch.q-mt-md.q-pr-xs
+          .col-6.q-pr-xs(:style="{'height': 'auto'}")
+            widget
+              .row.justify-between
+                div
+                  p.q-ma-none.h-label.text-h-gray.text-weight-300 Optional Step
+                  label.h-h4 Invite Members
+                  p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md(:style="{'min-height':'48px'}") You’re in the endgame and ready to invite members to your DAO! Just copy the link and you’re good to go.
+                .row.full-width.justify-end
+                  q-btn.q-px-xl(
+                    @click="copyToClipboard"
+                    color="primary"
+                    label="Copy Public Link"
+                    no-caps
+                    outline
+                    rounded
+                    unelevated
+                  )
+          .col-6.q-pl-xs(:style="{'height': 'auto'}")
+            widget
+              .row.justify-between
+                div
+                  p.q-ma-none.h-label.text-h-gray.text-weight-300 Optional Step (telos account required)
+                  label.h-h4 Launch Team
+                  p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md(:style="{'min-height':'48px'}") Create a team of members with Admin rights. By default you will be the only DAO Admin and core member. You will also be able to set-up admins and a core team later.
+                .row.full-width.justify-end
+                  q-btn.q-px-xl(
+                    @click="state = 'ADDING_ADMINS'"
+                    color="primary"
+                    label="Create Launch Team"
+                    no-caps
+                    outline
+                    rounded
+                    unelevated
+                  )
+
+      widget(v-if="isState(['DRAFTING'])")
+        section(v-show="activeStep === 'IDENTITY'")
+          label.h-h4 DAO Identity
+          p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md You can add your DAO’s name, describe its purpose and add a logo. The name and URL can be changed later via settings You can also add the DAO’s goals and the impact it envisions making.
+
+          .row.full-width.justify-between.q-mt-xl
+            .col-7(:class="{ 'full-width': !$q.screen.gt.md, 'q-pr-md': $q.screen.gt.md }")
+              label.h-label Name
+              q-input.q-mt-xs.rounded-border(
+                :rules="[rules.required, rules.min(3)]"
+                dense
+                lazy-rules="ondemand"
+                maxlength="50"
+                outlined
+                placeholder="The display name of your DAO (max. 50 character)"
+                ref="title"
+                v-model="form.title"
+              )
+
+            .col-5(:class="{ 'full-width q-pt-md': !$q.screen.gt.md }")
+              .row.justify-center.items-center
+                .col-auto
+                  q-avatar(:size="$q.screen.gt.md ? '80px' :'60px' " color="primary" text-color="white")
+                    span(v-show="!form.logo") {{ form.title ? form.title[0].toUpperCase() : '' }}
+                    img(v-show="form.logo" :src="ipfsy(form.logo)")
+                .col.q-ml-md
+                  label.h-label Logo / Icon
+                  q-btn.full-width.rounded-border.text-bold.q-mt-xs(
+                    :class="{ 'q-px-xl': $q.screen.gt.md }"
+                    @click="$refs.ipfsInput.chooseFile()"
+                    color="primary"
+                    label="Upload an image"
+                    no-caps
+                    outline
+                    rounded
+                    unelevated
+                  )
+                  input-file-ipfs(
+                    @uploadedFile="form.logo = arguments[0] "
+                    image
+                    ref="ipfsInput"
+                    v-show="false"
+                  )
+
+            .col-12.q-mt-md(:class="{ 'full-width': !$q.screen.gt.md }")
+              label.h-label Purpose
+              q-input.q-mt-xs.rounded-border(
+                :input-style="{ 'resize': 'none' }"
+                :rules="[rules.required]"
+                dense
+                lazy-rules="ondemand"
+                maxlength="300"
+                outlined
+                placeholder="Briefly explain what your DAO is all about (max. 300 characters)"
+                ref="description"
+                rows='10'
+                type="textarea"
+                v-model="form.description"
+              )
+
+        section(v-show="activeStep === 'TOKEN'")
+          .row
+            q-avatar(size='30px').q-mr-xs
+              img(src="~assets/icons/token-utility-icon.svg")
+            label.h-h4 Token
+          p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md A token that represents value within the DAO and lets you access certain services or actions in the DAO.
+
+          .row.full-width.justify-between.q-mt-xl
+            .col-8(:class="{ 'full-width': !$q.screen.gt.md, 'q-pr-md': $q.screen.gt.md }")
               label.h-label Name
-              q-input.q-mt-xs.q-pa-none.rounded-border(
+                q-input.q-mt-xs.rounded-border(
+                      :debounce="200"
+                      :rules="[rules.required, rules.min(1), rules.max(20)]"
+                      bg-color="white"
+                      dense
+                      lazy-rules="ondemand"
+                      maxlength="20"
+                      outlined
+                      placeholder="Max 20 characters. ex. Bitcoin"
+                      ref="utilityName"
+                      rounded
+                      v-model="form.utilityName"
+                    )
+            .col-4(:class="{ 'full-width': !$q.screen.gt.md, '': $q.screen.gt.md }")
+              label.h-label Symbol
+              q-input.q-mt-xs.rounded-border(
                     :debounce="200"
-                    :rules="[rules.required]"
+                    :rules="[rules.required, rules.isTokenAvailable]"
                     bg-color="white"
                     dense
                     lazy-rules="ondemand"
-                    maxlength="50"
+                    mask="AAAAAAAA"
+                    maxlength="7"
                     outlined
-                    placeholder="Type name here"
+                    placeholder="Max 7 characters ex. BTC"
+                    ref="utilitySymbol"
                     rounded
-                    :ref="'members.' + index + '.name'"
-                    v-model="member.name"
+                    v-model="form.utilitySymbol"
                   )
-            .col-3
-              label.h-label Email
-              q-input.q-mt-xs.q-pa-none.rounded-border(
+
+          //- .q-mt-xl
+          //-   .row
+          //-     q-avatar(size='30px').q-mr-xs
+          //-       img(src="~assets/icons/token-treasury-icon.svg")
+          //-     label.h-h4 Cash token
+          //-   p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md A token that can be exchanged for other more liquid tokens (like BTC) from your DAO’s treasury.
+
+          //-   .row.full-width.justify-between.q-mt-xl
+          //-     .col-8.q-pr-xs
+          //-       label.h-label Token name
+          //-         q-input.q-mt-xs.rounded-border(
+          //-               :debounce="200"
+          //-               :rules="[rules.required, rules.min(1), rules.max(20)]"
+          //-               bg-color="white"
+          //-               dense
+          //-               lazy-rules="ondemand"
+          //-               maxlength="20"
+          //-               outlined
+          //-               placeholder="Max 20 characters"
+          //-               ref="treasuryName"
+          //-               rounded
+          //-               v-model="form.treasuryName"
+          //-             )
+          //-     .col-4
+          //-       label.h-label Token symbol
+          //-       q-input.q-mt-xs.rounded-border(
+          //-             :debounce="200"
+          //-             :rules="[rules.required]"
+          //-             bg-color="white"
+          //-             dense
+          //-             lazy-rules="ondemand"
+          //-             mask="AAAAAAAA"
+          //-             maxlength="7"
+          //-             outlined
+          //-             placeholder="Max 7 characters uppercase A-Z"
+          //-             ref="treasurySymbol"
+          //-             rounded
+          //-             v-model="form.treasurySymbol"
+          //-           )
+
+        section(v-show="activeStep === 'DESIGN'")
+          label.h-h4 Design
+          p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md Set up your DAO’s brand color palette here. Choose from a range of colors to give your DAO the personality you think it embodies.
+
+          .row.items-center.q-col-gutter-md.q-mt-xl
+            .col-4(:class="{ 'full-width': !$q.screen.gt.sm }")
+              label.h-label Primary color
+              .row.full-width.q-my-sm.items-center
+                .col-auto.q-mr-xs
+                  q-avatar(size="40px" :style="{'background': form.primaryColor}")
+                    q-popup-proxy(cover transition-show="scale" transition-hide="scale")
+                      q-color(v-model="form.primaryColor")
+                .col
+                  q-input.rounded-border(
                     :debounce="200"
-                    :rules="[rules.required]"
                     bg-color="white"
                     dense
-                    lazy-rules="ondemand"
+                    lazy-rules
                     maxlength="50"
                     outlined
-                    placeholder="Type email here"
+                    placeholder="#9376GJ9"
+                    ref="primaryColor"
                     rounded
-                    :ref="'members.' + index + '.email'"
-                    v-model="member.email"
+                    v-model="form.primaryColor"
                   )
-            .col-3
-              label.h-label Telos/SEEDS account
-              q-input.q-mt-xs.q-pa-none.rounded-border(
+
+            .col-4(:class="{ 'full-width': !$q.screen.gt.sm }")
+              label.h-label Secondary color
+              .row.full-width.q-my-sm.items-center
+                .col-auto.q-mr-xs
+                  q-avatar(size="40px" :style="{'background': form.secondaryColor}")
+                    q-popup-proxy(cover transition-show="scale" transition-hide="scale")
+                      q-color(v-model="form.secondaryColor")
+                .col
+                  q-input.rounded-border(
                     :debounce="200"
-                    :rules="[rules.required]"
                     bg-color="white"
                     dense
-                    lazy-rules="ondemand"
+                    lazy-rules
                     maxlength="50"
                     outlined
-                    placeholder="Type account here"
+                    placeholder="#9376GJ9"
+                    ref="secondaryColor"
                     rounded
-                    :ref="'members.' + index + '.account'"
-                    v-model="member.account"
+                    v-model="form.secondaryColor"
                   )
-            .col-3
-              label.h-label Discord
-              q-input.q-mt-xs.q-pa-none.rounded-border(
+
+            .col-4(:class="{ 'full-width': !$q.screen.gt.sm }")
+              label.h-label Button text color
+              .row.full-width.q-my-sm.items-center
+                .col-auto.q-mr-sm
+                  q-avatar(size="40px" v-bind:style="{'background': form.textColor, 'border': form.textColor === '#ffffff' ? '1px solid #A3A5AA' : ''}")
+                    q-popup-proxy(cover transition-show="scale" transition-hide="scale")
+                      q-color(v-model="form.textColor")
+                .col
+                  q-input.rounded-border(
                     :debounce="200"
-                    :rules="[rules.required]"
                     bg-color="white"
                     dense
-                    lazy-rules="ondemand"
+                    lazy-rules
                     maxlength="50"
                     outlined
-                    placeholder="Type discord here"
+                    placeholder="#ffffff"
+                    ref="textColor"
                     rounded
-                    :ref="'members.' + index + '.discord'"
-                    v-model="member.discord"
+                    v-model="form.textColor"
                   )
-            nav.row.full-width.justify-end.q-mt-xs
-              q-btn(:disable="index === 0" flat color="primary" no-caps padding="none" @click="form.members.splice(index, 1)").text-bold.q-pa-none.q-mr-xs Remove account -
-              q-btn(:disable="form.members.length === 10" v-show="index === form.members.length - 1" flat color="primary" no-caps padding="none" @click="form.members.push({account:'',email:''})").text-bold.q-pa-none.q-ml-lg.q-mr-xs Add more +
-
-      //- STEP 4
-      //- section.row(v-show="activeStep === 'TEMPLATES'")
-      //-   label.h-h4 Templates
-      //-   p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      //-   .row.items-stretch.q-col-gutter-xs.q-mt-md
-      //-     template(v-for="opts in ORGANISATION_TEMPLATES")
-      //-       .col-4
-      //-         button-radio.full-height(
-      //-           :icon="opts.icon"
-      //-           :selected="opts.key === form.template"
-      //-           :title="opts.title"
-      //-           :description="opts.description"
-      //-           :disable="opts.disable"
-      //-           @click="form.template = opts.key"
-      //-         )
-      //-           div.full-width.text-left.q-mt-lg
-      //-             p.font-sans.text-weight-700.text-xs Role Archetypes (3)
-      //-             p.font-sans.text-weight-700.text-xs Salary Bands (7)
-      //-             p.font-sans.text-weight-700.text-xs Badges (5)
-      //-             p.font-sans.text-weight-700.text-xs Policies (9)
-      //-             p.font-sans.text-weight-700.text-xs Treasury (3)
-
-      //-           div.full-width.row.justify-between
-      //-             q-btn.col-6(
-      //-               :color="opts.key === form.template ? 'white' :'primary'"
-      //-               :disable="submitting"
-      //-               :label="opts.key === form.template ? 'Selected' :'Select'"
-      //-               :loading="submitting"
-      //-               :text-color="opts.key === form.template ? 'primary' :'white'"
-      //-               @click="form.template = opts.key"
-      //-               no-caps
-      //-               rounded
-      //-               unelevated
-      //-             )
-      //-             q-btn.col-6(
-      //-               :disable="submitting"
-      //-               @click="form.template = opts.key"
-      //-               color="primary"
-      //-               label="Learn more"
-      //-               no-caps
-      //-               flat
-      //-               rounded
-      //-               unelevated
-      //-               v-show="activeStepIndex > 0"
-      //-             )
-
-      //- STEP 5
-      //- section.column.full-width.q-mb-xl(v-show="activeStep === 'VOTING'")
-      //-   label.h-h4 Voting
-      //-   p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      //-   .row.q-my-xl.full-width
-      //-     .col-8.row.q-pr-sm
-      //-       .row.items-end.full-width
-      //-         label.h-label.full-width Vote duration
-      //-         .q-mt-xs.row.full-width
-      //-           .col-7.row.justify-between.q-mr-sm
-      //-             q-btn.button.text-bold.text-lowercase(
-      //-               :color="form.votingDurationSec === option.value ? 'primary' : 'internal-bg'"
-      //-               :key='index'
-      //-               :text-color="form.votingDurationSec === option.value ? 'white' : 'primary'"
-      //-               @click="form.votingDurationSec = option.value"
-      //-               padding="none"
-      //-               rounded
-      //-               unelevated
-      //-               v-for='(option, index) in durationOptions'
-      //-             ) {{ option.label }}
-      //-           .col-grow
-      //-             custom-period-input(:isActive="isCustomVotingDuration" @selected="form.votingDurationSec = 0" v-model='form.votingDurationSec')
-
-      //-     .col-8.row.q-pr-sm.q-mt-xl
-      //-       .row.items-end.full-width
-      //-         label.h-label.full-width Period duration
-      //-         .q-mt-xs.row.full-width
-      //-           .col-7.row.justify-between.q-mr-sm
-      //-             q-btn.button.text-bold.text-lowercase(
-      //-               :color="form.periodDurationSec === option.value ? 'primary' : 'internal-bg'"
-      //-               :key='index'
-      //-               :text-color="form.periodDurationSec === option.value ? 'white' : 'primary'"
-      //-               @click="form.periodDurationSec = option.value"
-      //-               padding="none"
-      //-               rounded
-      //-               unelevated
-      //-               v-for='(option, index) in durationOptions'
-      //-             ) {{ option.label }}
-      //-           .col-grow
-      //-             custom-period-input(:isActive="isCustomVotingDuration" @selected="form.periodDurationSec = 0" v-model='form.periodDurationSec')
-
-      //-     .col-6.row.q-pl-sm
-      //-       //- .row.items-end.full-width
-      //-       //-   label.h-label.full-width Period duration
-      //-       //-   .q-mt-xs.row.full-width
-      //-       //-     .col-7.row.justify-between.q-mr-sm
-      //-       //-       q-btn.button.text-bold.text-lowercase(
-      //-       //-         :color="form.periodDurationSec === option.value ? 'primary' : 'internal-bg'"
-      //-                           :key='index'
-      //-       //-         :text-color="form.periodDurationSec === option.value ? 'white' : 'primary'"
-      //-       //-         @click="form.periodDurationSec = option.value"
-      //-       //-         padding="none"
-      //-       //-         rounded
-      //-       //-         unelevated
-      //-       //-         v-for='(option, index) in durationOptions'
-      //-       //-       ) {{ option.label }}
-      //-       //-     .col-grow
-      //-       //-       //isSelected, value
-      //-       //-       q-btn.full-width.text-bold(
-      //-       //-         border
-      //-       //-         color='internal-bg'
-      //-       //-         no-caps
-      //-       //-         rounded
-      //-       //-         text-color='primary'
-      //-       //-         unelevated
-      //-       //-         v-show="!isCustomPeriodDuration"
-      //-       //-       ) Custom period
-      //-       //-       div(v-show="isCustomPeriodDuration").bg-primary.text-white.full-width.rounded-border.q-px-sm
-      //-       //-         q-input(borderless v-model="form.periodDurationSec" dense bg-color="primary"
-      //-       //-         placeholder='Type an amount'
-      //-       //-         ).input-amount
-
-      //-   .row.q-mt-xl
-      //-     .col-6.q-pr-sm
-      //-       label.h-label Unity
-      //-       .row.full-width.items-center
-      //-         .col-7.row.q-mr-sm
-      //-           q-slider(
-      //-             :max="100"
-      //-             :min="0"
-      //-             :step="1"
-      //-             color="primary"
-      //-             v-model="form.votingAlignmentPercent"
-      //-           )
-      //-         .col
-      //-           q-input.rounded-border.q-py-sm(
-      //-             :rules="[val => val >= 0 && val <= 100]"
-      //-             dense
-      //-             outlined
-      //-             rounded
-      //-             suffix="%"
-      //-             type="number"
-      //-             v-model.number="form.votingAlignmentPercent"
-      //-           )
-
-      //-     .col-6.q-pl-sm
-      //-       label.h-label Quorum
-      //-       .row.full-width.items-center
-      //-         .col-7.row.q-mr-sm
-      //-           q-slider(
-      //-             :max="100"
-      //-             :min="0"
-      //-             :step="1"
-      //-             color="primary"
-      //-             v-model="form.votingQuorumPercent"
-      //-           )
-      //-         .col
-      //-           q-input.rounded-border.q-py-sm(
-      //-             :rules="[val => val >= 0 && val <= 100]"
-      //-             dense
-      //-             outlined
-      //-             rounded
-      //-             suffix="%"
-      //-             type="number"
-      //-             v-model.number="form.votingQuorumPercent"
-      //-           )
-
-      //-   //- .row.q-mt-sm
-      //-   //-   .col-6.row.q-pr-sm
-      //-   //-     .row.items-end.full-width
-      //-   //-       .label.full-width Decay Period for Voting
-      //-   //-       .q-mt-xs.row.full-width
-      //-   //-         .col-7.row.justify-between.q-mr-sm
-      //-   //-           q-btn.button.text-bold.text-lowercase(
-      //-   //-             :color="form.votingDurationSec === option.value ? 'primary' : 'internal-bg'"
-      //-                       :key='index'
-      //-   //-             :text-color="form.votingDurationSec === option.value ? 'white' : 'primary'"
-      //-   //-             @click="form.votingDurationSec = option.value"
-      //-   //-             padding="none"
-      //-   //-             rounded
-      //-   //-             unelevated
-      //-   //-             v-for='(option, index) in durationOptions'
-      //-   //-           ) {{ option.label }}
-      //-   //-         .col-grow
-      //-   //-           q-btn.full-width.text-bold(
-      //-   //-             border
-      //-   //-             color='internal-bg'
-      //-   //-             no-caps
-      //-   //-             rounded
-      //-   //-             text-color='primary'
-      //-   //-             unelevated
-      //-   //-           ) Custom period
-
-      //- STEP 6
-      //- section.column.full-width.q-mb-xl(v-show="activeStep === 'COMPENSATION'")
-      //-   label.h-h4 Compensation
-      //-   p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-      //-   .row.items-stretch.q-col-gutter-xs.q-my-xl
-      //-     .col-4.row.items-center
-      //-       q-avatar(size='30px' color='primary')
-      //-         img(src="~assets/icons/token-utility-icon.svg")
-      //-       div.q-mx-sm
-      //-         p.q-pa-none.q-ma-none.font-lato.text-heading.text-xs.text-weight-700 Utility token
-      //-         p.q-pa-none.q-ma-none.font-sans.text-xs(:style="{'color':'#84878E'}") Multiplier
-      //-       q-input.q-pa-none.q-ma-none.rounded-border.col-5(
-      //-           :debounce="200"
-      //-           :rules="[rules.required]"
-      //-           bg-color="white"
-      //-           dense
-      //-           lazy-rules="ondemand"
-      //-           maxlength="50"
-      //-           outlined
-      //-           placeholder="1x"
-      //-           ref="utilityTokenMultiplier"
-      //-           rounded
-      //-           suffix="x"
-      //-           v-model="form.utilityTokenMultiplier"
-      //-         )
-      //-     .col-4.row.items-center
-      //-       q-avatar(size='30px' color='primary')
-      //-         img(src="~assets/icons/token-voice-icon.svg")
-      //-       div.q-mx-sm
-      //-         p.q-pa-none.q-ma-none.font-lato.text-heading.text-xs.text-weight-700 Voice token
-      //-         p.q-pa-none.q-ma-none.font-sans.text-xs(:style="{'color':'#84878E'}") Multiplier
-      //-       q-input.q-pa-none.q-ma-none.rounded-border.col-5(
-      //-           :debounce="200"
-      //-           :rules="[rules.required]"
-      //-           bg-color="white"
-      //-           dense
-      //-           lazy-rules="ondemand"
-      //-           maxlength="50"
-      //-           outlined
-      //-           placeholder="1x"
-      //-           ref="voiceTokenMultiplier"
-      //-           rounded
-      //-           suffix="x"
-      //-           v-model="form.voiceTokenMultiplier"
-      //-         )
-      //-     .col-4.row.items-center
-      //-       q-avatar(size='30px' color='primary')
-      //-         img(src="~assets/icons/token-treasury-icon.svg")
-      //-       div.q-mx-sm
-      //-         p.q-pa-none.q-ma-none.font-lato.text-heading.text-xs.text-weight-700 Treasury token
-      //-         p.q-pa-none.q-ma-none.font-sans.text-xs(:style="{'color':'#84878E'}") Multiplier
-      //-       q-input.q-pa-none.q-ma-none.rounded-border.col-5(
-      //-           :debounce="200"
-      //-           :rules="[rules.required]"
-      //-           bg-color="white"
-      //-           dense
-      //-           lazy-rules="ondemand"
-      //-           maxlength="50"
-      //-           outlined
-      //-           placeholder="1x"
-      //-           ref="treasuryTokenMultiplier"
-      //-           rounded
-      //-           suffix="x"
-      //-           v-model="form.treasuryTokenMultiplier"
-      //-         )
-
-      //-   .column.full-width.q-mt-xl
-      //-     label.h-h4 Salary bands
-      //-     p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-      //-   template(v-for="(salary, index) in form.salaries")
-      //-     .row.q-col-gutter-xs.q-mt-sm
-      //-       .col-6
-      //-         label.h-label Name
-      //-         q-input.q-mt-xs.q-pa-none.rounded-border(
-      //-               :debounce="200"
-      //-               :ref="'salaries.' + index + '.name'"
-      //-               :rules="[rules.required]"
-      //-               bg-color="white"
-      //-               dense
-      //-               lazy-rules="ondemand"
-      //-               maxlength="50"
-      //-               outlined
-      //-               rounded
-      //-               v-model="salary.name"
-      //-             )
-      //-       .col-6.row.items-center.q-col-gutter-xs
-      //-         .col-3
-      //-           label.h-label.text-xs.text-weigth-500 Value
-      //-           q-input.q-pa-none.q-mt-xs.rounded-border(
-      //-                 :debounce="200"
-      //-                 :ref="'salaries.' + index + '.value'"
-      //-                 :rules="[rules.required]"
-      //-                 bg-color="white"
-      //-                 dense
-      //-                 lazy-rules="ondemand"
-      //-                 maxlength="50"
-      //-                 outlined
-      //-                 rounded
-      //-                 suffix="$"
-      //-                 v-model="salary.value"
-      //-               )
-
-      //-         .col-3
-      //-           label.h-label.text-xs.text-weigth-500 Utility token
-      //-           q-input.q-pa-none.q-mt-xs.rounded-border(
-      //-                 :debounce="200"
-      //-                 :disable="true"
-      //-                 :value="salary.value * form.utilityTokenMultiplier"
-      //-                 :rules="[rules.required]"
-      //-                 bg-color="white"
-      //-                 dense
-      //-                 lazy-rules="ondemand"
-      //-                 outlined
-      //-                 rounded
-      //-               )
-      //-         .col-3
-      //-           label.h-label.text-xs.text-weigth-500 Treasury token
-      //-           q-input.q-pa-none.q-mt-xs.rounded-border(
-      //-                 :debounce="200"
-      //-                 :disable="true"
-      //-                 :value="salary.value * form.treasuryTokenMultiplier"
-      //-                 :rules="[rules.required]"
-      //-                 bg-color="white"
-      //-                 dense
-      //-                 lazy-rules="ondemand"
-      //-                 outlined
-      //-                 rounded
-      //-               )
-      //-         .col-3
-      //-           label.h-label.text-xs.text-weigth-500 Voice token
-      //-           q-input.q-pa-none.q-mt-xs.rounded-border(
-      //-                 :debounce="200"
-      //-                 :disable="true"
-      //-                 :value="salary.value * form.voiceTokenMultiplier"
-      //-                 :rules="[rules.required]"
-      //-                 bg-color="white"
-      //-                 dense
-      //-                 lazy-rules="ondemand"
-      //-                 outlined
-      //-                 rounded
-      //-               )
-
-      //-     nav.row.full-width.justify-end.q-mt-xs
-      //-       q-btn(:disable="index === 0" flat color="primary" no-caps padding="none" @click="form.salaries.splice(index, 1)").text-bold.q-pa-none.q-mr-xs Remove band -
-      //-       q-btn(v-show="index === form.salaries.length - 1" flat color="primary" no-caps padding="none" @click="form.salaries.push({name: '', value: 0})").text-bold.q-pa-none.q-ml-lg.q-mr-xs Add more +
-
-      //- STEP 7
-      section.column.full-width.q-mb-xl(v-show="activeStep === 'DESIGN'")
-        label.h-h4 Design
-        p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md The logo, copy and colours can be changed later in the configuration page.
-        .row.items-center.q-col-gutter-xs.q-mt-xl
-          .col-4.justify-between
-            .row.full-width
-              .label.full-width Logo
-              .row.full-width.q-my-sm.items-center
-                q-btn.full-width.q-px-xl.rounded-border.text-bold(
-                  @click="$refs.ipfsInput.chooseFile()"
-                  color="primary"
-                  no-caps
-                  outline
+
+            .col-12.row
+              div.full-width
+                label.h-label Preview
+              .row(:class="{ 'full-width q-mt-md': !$q.screen.gt.sm, 'col-auto q-pr-md': $q.screen.gt.sm }")
+                q-avatar.q-mr-xs(size="80px" :style="{'background': form.primaryColor, 'color': form.textColor }")
+                  span() {{ form.title ? form.title[0] : 'D' }}
+
+                q-avatar(size="80px" :style="{'background': form.secondaryColor, 'color': form.textColor }")
+                  span() {{ form.title ? form.title[0] : 'D' }}
+
+              .row(:class="{ 'full-width': !$q.screen.gt.sm, 'col': $q.screen.gt.sm }")
+                .col-4(:class="{ 'full-width q-mt-md': !$q.screen.gt.sm, 'q-pr-md': $q.screen.gt.sm }")
+                  q-btn.q-px-xl.full-width(
+                    :style="{'background': form.primaryColor, 'color': form.textColor}"
+                    label="Primary color"
+                    no-caps
+                    rounded
+                    unelevated
+                  )
+                .col-4(:class="{ 'full-width q-mt-md': !$q.screen.gt.sm, 'q-pr-md': $q.screen.gt.sm }")
+                  q-btn.q-px-xl.full-width(
+                    :style="{'background': form.secondaryColor, 'color': form.textColor }"
+                    label="Secondary color"
+                    no-caps
+                    rounded
+                    unelevated
+                  )
+                .col-4(:class="{ 'full-width q-mt-md': !$q.screen.gt.sm, '': $q.screen.gt.sm }")
+                  q-btn.q-px-xl.full-width(
+                    :style="{'color': form.primaryColor}"
+                    label="Primary color"
+                    no-caps
+                    outline
+                    rounded
+                    unelevated
+                  )
+
+        //- NAVIGATION
+        nav.row.justify-end.q-mt-xl.q-gutter-xs(v-if="!$q.platform.is.mobile")
+          q-btn.q-px-xl(
+            @click="onPreviousStep"
+            color="primary"
+            label="Back"
+            no-caps
+            outline
+            rounded
+            unelevated
+            v-show="activeStepIndex > 0"
+          )
+          q-btn.q-px-xl(
+            @click="onNextStep"
+            color="primary"
+            :label="isLastStep ? 'Publish' : 'Next step'"
+            no-caps
+            rounded
+            unelevated
+            v-if="!isLastStep"
+          )
+
+      widget(v-if="isState(['ADDING_ADMINS','FINISHED'])")
+        label.h-h4 Launch team
+        p.font-sans.text-xs.text-weight-500.text-h-gray.q-mt-md Create a team of core members with admin capacity. By default you are the only DAO administrator and core member. TELOS account is required. If the people you want to invite don’t have a TELOS account, no problem, you can invite them to join your DAO and they will create an account there. Later you can set them as core/administrators directly within the DAO settings.
+
+        .row.full-width.justify-between.q-mt-xl
+          .full-width(v-if="isState(['ADDING_ADMINS'])")
+            label.h-label Telos account
+            q-input.q-mt-xs.q-pa-none.rounded-border(
+                  :debounce="200"
+                  :ref="'member'"
+                  :rules="[rules.required, rules.accountExists]"
+                  bg-color="white"
+                  dense
+                  lazy-rules="ondemand"
+                  maxlength="12"
+                  outlined
+                  placeholder="Type account here and press enter"
                   rounded
-                  unelevated
-                ) Upload an image (max 3MB)
-                input-file-ipfs(
-                  @uploadedFile="form.logo = arguments[0] "
-                  v-show="false"
-                  ref="ipfsInput"
-                  image
+                  v-model="form.member"
+                  v-on:keyup.enter="addTeamMember"
                 )
-
-          .col-4.row
-            .label.full-width UI Primary color
-            .row.full-width.q-my-sm.items-center
-              .col-auto.q-mr-sm
-                q-avatar(size="40px" :style="{'background': form.primaryColor}")
-              .col
-                q-input.rounded-border(
-                      :debounce="200"
-                      bg-color="white"
-                      dense
-                      lazy-rules
-                      maxlength="50"
-                      outlined
-                      placeholder="#9376GJ9"
-                      ref="name"
-                      rounded
-                      v-model="form.primaryColor"
-                    )
-            q-popup-proxy(cover transition-show="scale" transition-hide="scale")
-             q-color(v-model="form.primaryColor")
-
-          .col-4.row
-            .label.full-width UI Secondary color
-            .row.full-width.q-my-sm.items-center
-              .col-auto.q-mr-sm
-                q-avatar(size="40px" :style="{'background': form.secondaryColor}")
-              .col
-                q-input.rounded-border(
-                      :debounce="200"
-                      bg-color="white"
-                      dense
-                      lazy-rules
-                      maxlength="50"
-                      outlined
-                      placeholder="#9376GJ9"
-                      ref="name"
-                      rounded
-                      v-model="form.secondaryColor"
-                    )
-            q-popup-proxy(cover transition-show="scale" transition-hide="scale")
-             q-color(v-model="form.secondaryColor")
-
-        .row.justify-center.items-center.q-col-gutter-xs.q-mt-xl
-          ipfs-image-viewer(
-              :ipfsCid="form.logo"
-              showDefault
-              :defaultLabel="form.title"
-              size="130px"
-            )
-          label.h-h4.full-width.text-center {{ form.title }}
-        .row.full-width.justify-center.items-center.q-mt-xl
-          q-btn.q-px-xl.q-mr-xs(
-            :style="{'background': form.primaryColor}"
-            label="Primary color"
+            nav.row.full-width.justify-end.q-mt-xs
+              q-btn(flat color="primary" no-caps padding="none" @click="addTeamMember").text-bold.q-pa-none.q-ml-lg.q-mr-xs Add to the team +
+
+          .row.full-width.q-mt-xl
+            template(v-for="(member, index) in form.members")
+              .col-4.q-mt-md.q-px-md
+                .q-pa-sm.rounded-border.row.items-center(:style="{'border': '1px solid var(--q-color-primary)'}")
+                  q-avatar.q-mr-xs(size="xl" :style="{'background': form.primaryColor, 'color': form.textColor }")
+                      img(:src="member.avatar" v-if="member.avatar").object-cover
+                      span() {{ member && member.username[0] }}
+                  div
+                    label.h-label {{ member.fullName ? member.fullName : `@${member.username}` }}
+                    p.q-pa-none.q-ma-none.font-sans.text-xs.text-weight-500.text-h-gray(v-if="member.fullName") @{{member.username}}
+
+        nav.row.justify-end.q-mt-xl.q-gutter-xs
+          q-btn.q-px-xl(
+            :to="{ name: 'dashboard' }"
+            color="primary"
+            label="Go to Dashboard"
             no-caps
+            outline
             rounded
-            text-color='white'
             unelevated
           )
-          q-btn.q-px-xl.q-ml-xs(
-            :style="{'background': form.secondaryColor}"
-            label="Secondary color"
+          q-btn.q-px-xl(
+            @click="onAddAdmin"
+            color="primary"
+            label="Save Team"
             no-caps
             rounded
-            text-color='white'
             unelevated
-        )
+            v-if="isState(['ADDING_ADMINS'])"
+          )
 
-        //- .row.items-stretch.q-col-gutter-xs
-        //-   template(v-for="(opts, index) in DESIGN_TEMPLATES")
-        //-     .col-3
-        //-       button-radio.full-height(
-        //-         :hideIcon="true"
-        //-         :selected="form.design === opts.key"
-        //-         :title="opts.title"
-        //-         :description="opts.description"
-        //-         :disable="opts.disable"
-        //-         @click="form.design = opts.key"
-        //-       )
-        //-         .q-mt-md
-        //-           q-avatar(:style="{'background': opts.primaryColor}"   size='32px').bubbles
-        //-             span(v-show="opts.primaryColor === 'white'") ?
-        //-           q-avatar(:style="{'background': opts.secondaryColor}" size='32px').bubbles
-        //-             span(v-show="opts.primaryColor === 'white'") ?
-        //-           q-avatar(size='30px' color="white").bubbles
-        //-             img(v-show="opts.headerPattern !== ''" :src="opts.headerPattern")
-        //-             span(v-show="opts.primaryColor === 'white'") ?
-
-        //- .row.full-width.q-mt-md(v-show="form.design==='CUSTOM'")
-
-      //- ERROR MESSAGES
-      div.row.full-width
-        .text-red.bg-white(v-if="error") {{ error }}
-
-      //- NAVIGATION
-      nav.row.justify-end.q-mt-xl.q-gutter-xs
-        q-btn.q-px-xl(
-          :disable="submitting"
-          @click="onPrevStep"
-          color="primary"
-          label="Back"
-          no-caps
-          outline
-          rounded
-          unelevated
-          v-show="activeStepIndex > 0"
-        )
-        q-btn.q-px-xl(
-          :disable="submitting"
-          :loading="submitting"
-          @click="onNextStep"
-          color="primary"
-          :label="lastStep ? 'Publish' : 'Next step'"
-          no-caps
-          rounded
-          unelevated
+    .col-sm-12.col-md-12.col-lg-3
+      widget(v-if="isState(['CREATED'])")
+        .row
+          q-avatar.q-mr-sm(size='30px' color="white" text-color='primary' :style="{'border': '1px solid var(--q-color-primary)'}")
+            .row.justify-center.items-center.full-width.text-center
+              q-icon(center size='10px' name="fas fa-check")
+          label.h-h4 DAO Published!
+
+      div(v-if="isState(['DRAFTING'])" :style="[$q.platform.is.mobile ? {'border-radius': '25px', 'box-shadow': 'none', 'z-index': '7000', 'position': 'fixed', 'bottom': '-20px', 'left': '0', 'right': '0', 'box-shadow': '0px 0px 26px 0px rgba(0, 0, 41, 0.2)'} : {}]")
+        creation-stepper(
+          :activeStepIndex="activeStepIndex"
+          :steps="steps"
+          @publish="onSubmit"
+          @next="onNextStep"
         )
-
-  .column.col-xs-12.col-sm-3.col-md-3
-    creation-stepper(
-      :activeStepIndex="activeStepIndex"
-      :steps="steps"
-    )
 </template>
 
 <style lang="stylus" scoped>
-
-.bubbles
-  margin-left: -8px;
-  border: 2px solid white;
-
-.button
-  font-size: 13px;
-  width: 40px
-  height: 40px;
-
-.rounded-border
-  border-radius 15px
-
-.rounded-border
-  :first-child
-    border-radius 15px
 </style>
diff --git a/src/query/dao-created.gql b/src/query/dao-created.gql
new file mode 100644
index 000000000..cd4c54510
--- /dev/null
+++ b/src/query/dao-created.gql
@@ -0,0 +1,74 @@
+query activeDao($regexp: String!) {
+  queryDao @cascade(fields: ["settings"]) {
+    docId
+    details_daoName_n
+
+
+    settings(filter: { settings_daoUrl_s: { regexp: $regexp } }) {
+      settings_claimEnabled_i
+      settings_daoUrl_s
+      settings_daoName_n
+      settings_daoTitle_s
+      settings_daoDescription_s
+      settings_governanceTokenContract_n
+      settings_pegToken_a
+      settings_pegTokenContract_n
+      settings_rewardToken_a
+      settings_rewardTokenContract_n
+      settings_rewardToPegRatio_a
+      settings_treasuryContract_n
+      settings_voiceToken_a
+
+      settings_socialChat_s
+
+      settings_proposalsCreationEnabled_i
+      settings_membersApplicationEnabled_i
+      settings_removableBannersEnabled_i
+
+      settings_votingDurationSec_i
+      settings_periodDurationSec_i
+      settings_votingAlignmentX100_i
+      settings_votingQuorumX100_i
+      settings_voiceTokenDecayPeriod_i
+
+      settings_usesSeeds_i
+      settings_isHypha_i
+
+      settings_logo_s
+      settings_extendedLogo_s
+      settings_primaryColor_s
+      settings_secondaryColor_s
+      settings_textColor_s
+      settings_pattern_s
+      settings_patternColor_s
+      settings_patternOpacity_i
+      settings_patternBase64_s
+
+      settings_splashBackgroundImage_s
+
+      settings_dashboardBackgroundImage_s
+      settings_dashboardTitle_s
+      settings_dashboardParagraph_s
+
+      settings_proposalsBackgroundImage_s
+      settings_proposalsTitle_s
+      settings_proposalsParagraph_s
+
+      settings_membersBackgroundImage_s
+      settings_membersTitle_s
+      settings_membersParagraph_s
+
+      settings_organisationBackgroundImage_s
+      settings_organisationTitle_s
+      settings_organisationParagraph_s
+
+      settings_exploreBackgroundImage_s
+      settings_exploreTitle_s
+      settings_exploreParagraph_s
+    }
+
+    memberAggregate {
+      count
+    }      
+  }
+}
diff --git a/src/router/index.js b/src/router/index.js
index d2d49a99f..336b0ddbc 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -24,15 +24,9 @@ export default function ({ store }) {
 
   Router.beforeEach((to, from, next) => {
     const isAuthenticated = localStorage.getItem('autoLogin')
-    const isHypha = store.getters['dao/isHypha']
     const isMember = Boolean(localStorage.getItem('isMember'))
     const daoName = to.params.dhoname
 
-    // Only show dho-creation wizard to the hypha members
-    if (to.name && to.name === 'dho-creation' && !isHypha) {
-      next({ path: `/${daoName}/` })
-    }
-
     // Temporal redirection for hypha explorer page
     if (to.name && to.name === 'root') {
       next({ path: '/hypha/explore' })
diff --git a/src/router/routes.js b/src/router/routes.js
index e081d3ca3..fa0361fb0 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -47,7 +47,7 @@ const routes = [
       },
       {
         path: 'create',
-        name: 'dho-creation',
+        name: 'dao-launcher',
         meta: {
           breadcrumbs: {
             tab: {
@@ -55,8 +55,12 @@ const routes = [
               link: { name: 'explore' }
             }
           },
+          layout: {
+            desktop: 'default',
+            mobile: 'create'
+          },
           title: 'Create a new DHO'
-          // requiresAuth: true
+          // requiresAuth: true,
           // requiresAuthMember: true
         },
         component: () => import('pages/onboarding/create.vue'),
diff --git a/src/store/dao/actions.js b/src/store/dao/actions.js
index 6ef010598..1210f19a1 100644
--- a/src/store/dao/actions.js
+++ b/src/store/dao/actions.js
@@ -1,67 +1,70 @@
-
 import camelToSnakeCase from '~/utils/camelToSnakeCase'
 
 export const createDAO = async function (context, { data }) {
   const actions = [{
     account: this.$config.contracts.dao,
     name: 'createdao',
-    config: [
+    data: {
+      config: [
       // GROUP: details
-      [
-        { label: 'content_group_label', value: ['string', 'details'] },
-        { label: 'dao_name', value: ['name', data?.name] },
-        { label: 'dao_title', value: ['string', data?.name] },
-        { label: 'dao_description', value: ['string', data?.description] },
-
-        { label: 'is_template', value: ['int64', 0] },
-        { label: 'dao_template', value: ['int64', data?.template] },
-
-        { label: 'reward_token', value: ['asset', `${parseFloat(1).toFixed(data?.utilityDigits)} ${data?.utilitySymbol}`] },
-        { label: 'reward_token_max_supply', value: ['asset', `${parseFloat(-1).toFixed(data?.utilityDigits)} ${data?.utilitySymbol}`] },
-        { label: 'reward_to_peg_ratio', value: ['asset', `${parseFloat(1).toFixed(data?.treasuryDigits)} ${data?.treasurySymbol}`] },
-        { label: 'voice_token', value: ['asset', `${parseFloat(1).toFixed(data?.voiceDigits)} ${data?.voiceSymbol}`] },
-        { label: 'peg_token', value: ['asset', `${parseFloat(1).toFixed(data?.treasuryDigits)} ${data?.treasurySymbol}`] },
-        { label: 'use_seeds', value: ['int64', data?.use_seeds ? 1 : 0] },
-
-        { label: 'voting_duration_sec', value: ['int64', data?.votingDurationSec] },
-        { label: 'period_duration_sec', value: ['int64', data?.periodDurationSec] },
-        { label: 'voting_alignment_x100', value: ['int64', data?.votingAlignmentPercent] },
-        { label: 'voting_quorum_x100', value: ['int64', data?.votingQuorumPercent] },
-
-        // TODO
-        { label: 'voice_token_decay_period', value: ['int64', 604800] },
-        { label: 'voice_token_decay_per_period_x10M', value: ['int64', 100000] },
-
-        { label: 'reward_token_multiplier_x100', value: ['int64', data?.utilityTokenMultiplier] },
-        { label: 'voice_token_multiplier_x100', value: ['int64', data?.voiceTokenMultiplier] },
-        { label: 'peg_token_multiplier_x100', value: ['int64', data?.treasuryTokenMultiplier] },
-
-        { label: 'onboarder_account', value: ['name', data?.onboarder_account] }
-      ],
-
-      // GROUP: core members
-      [
-        { label: 'content_group_label', value: ['string', 'core_members'] },
-        // EXAMPLE: { label: 'account', value: ['name', data?.name] }
-        ...data?.members.map(member => ({ label: 'account', value: ['name', member?.account] }))
-      ],
-
-      // GROUP: salary bands
-      [
-        { label: 'content_group_label', value: ['string', 'salary_bands'] },
+        [
+          { label: 'content_group_label', value: ['string', 'details'] },
+          { label: 'dao_name', value: ['name', data?.name] },
+          { label: 'dao_title', value: ['string', data?.title] },
+          { label: 'dao_description', value: ['string', data?.description] },
+
+          { label: 'is_template', value: ['int64', 0] },
+          { label: 'dao_template', value: ['int64', data?.template] },
+
+          //
+          { label: 'reward_token_name', value: ['string', data?.utilityName] },
+          { label: 'reward_token', value: ['asset', `${parseFloat(1).toFixed(data?.utilityDigits)} ${data?.utilitySymbol}`] },
+          { label: 'reward_token_max_supply', value: ['asset', `${parseFloat(-1).toFixed(data?.utilityDigits)} ${data?.utilitySymbol}`] },
+          { label: 'reward_to_peg_ratio', value: ['asset', `${parseFloat(1).toFixed(data?.treasuryDigits)} ${data?.treasurySymbol}`] },
+          { label: 'voice_token', value: ['asset', `${parseFloat(1).toFixed(data?.voiceDigits)} ${data?.voiceSymbol}`] },
+          { label: 'peg_token_name', value: ['string', data?.treasuryName] },
+          { label: 'peg_token', value: ['asset', `${parseFloat(1).toFixed(data?.treasuryDigits)} ${data?.treasurySymbol}`] },
+          { label: 'use_seeds', value: ['int64', data?.use_seeds ? 1 : 0] },
+
+          { label: 'voting_duration_sec', value: ['int64', data?.votingDurationSec] },
+          { label: 'period_duration_sec', value: ['int64', data?.periodDurationSec] },
+          { label: 'voting_alignment_x100', value: ['int64', data?.votingAlignmentPercent] },
+          { label: 'voting_quorum_x100', value: ['int64', data?.votingQuorumPercent] },
+
+          { label: 'voice_token_decay_period', value: ['int64', 604800] },
+          { label: 'voice_token_decay_per_period_x10M', value: ['int64', 100000] },
+
+          { label: 'reward_token_multiplier_x100', value: ['int64', data?.utilityTokenMultiplier] },
+          { label: 'voice_token_multiplier_x100', value: ['int64', data?.voiceTokenMultiplier] },
+          { label: 'peg_token_multiplier_x100', value: ['int64', data?.treasuryTokenMultiplier] },
+
+          { label: 'onboarder_account', value: ['name', data?.onboarder_account] }
+        ],
+
+        // GROUP: core members
+        [
+          { label: 'content_group_label', value: ['string', 'core_members'] }
+          // EXAMPLE: { label: 'account', value: ['name', data?.name] }
+          // ...data?.members.map(member => ({ label: 'account', value: ['name', member?.account] }))
+        ],
+
+        // GROUP: salary bands
+        // [
+        // { label: 'content_group_label', value: ['string', 'salary_bands'] }
         // EXAMPLE: { "label": "Band 1", "value": ["asset", "70000.00 USD"] },
-        ...data.salaries.map(salary => ({ label: salary?.name, value: ['asset', `${parseFloat(salary?.value).toFixed(2)} USD`] }))
-      ],
-
-      // GROUP: design style
-      [
-        { label: 'content_group_label', value: ['string', 'style'] },
-        { label: 'logo', value: ['string', data?.logo] },
-        { label: 'primary_color', value: ['string', data?.primaryColor] },
-        { label: 'secondary_color', value: ['string', data?.secondaryColor] }
+        // ...data.salaries.map(salary => ({ label: salary?.name, value: ['asset', `${parseFloat(salary?.value).toFixed(2)} USD`] }))
+        // ],
+
+        // GROUP: design style
+        [
+          { label: 'content_group_label', value: ['string', 'style'] },
+          { label: 'logo', value: ['string', data?.logo] },
+          { label: 'primary_color', value: ['string', data?.primaryColor] },
+          { label: 'secondary_color', value: ['string', data?.secondaryColor] },
+          { label: 'text_color', value: ['string', data?.textColor] }
+        ]
       ]
-    ]
-
+    }
   }]
 
   return this.$api.signTransaction(actions)
@@ -194,6 +197,19 @@ export const updateDAOSettings = async function (context, { docId, data, alerts,
   return this.$api.signTransaction(actions)
 }
 
+export const addAdmins = async function (context, { daoId, users }) {
+  const actions = [{
+    account: this.$config.contracts.dao,
+    name: 'addadmins',
+    data: {
+      dao_id: daoId,
+      admin_accounts: users
+    }
+  }]
+
+  return this.$api.signTransaction(actions)
+}
+
 export const activateDAOPlan = async function (context, data) {
   const actions = [
     {

From 13a809db09bdf4189d33a0e3bb53a19badc7eaa9 Mon Sep 17 00:00:00 2001
From: Evgeni B <evgeni.biryuk.hypha@gmail.com>
Date: Wed, 2 Nov 2022 23:55:40 +0300
Subject: [PATCH 06/16] fix(proposals): date display for props with staging
 status (#1668) (#1774)

---
 src/components/proposals/proposal-card.vue  |  8 +++----
 src/query/proposals/dao-proposals-stage.gql |  3 +++
 src/utils/proposal-parsing.js               | 24 ++++++++++++++++++---
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/components/proposals/proposal-card.vue b/src/components/proposals/proposal-card.vue
index bf724ba1a..8cbc1a6c5 100644
--- a/src/components/proposals/proposal-card.vue
+++ b/src/components/proposals/proposal-card.vue
@@ -137,8 +137,8 @@ widget.cursor-pointer.card(
                 size="20px"
               )
             .row.items-center.q-ml-sm(v-if="list")
-              q-icon(v-show="status !== 'drafted'" name="fas fa-hourglass-half")
-              .h-b2.text-center.text-body.q-ml-xs.q-mr-md.q-mr-xxxl(v-show="status !== 'drafted'") {{ timeLeftString() }}
+              q-icon(name="fas fa-hourglass-half")
+              .h-b2.text-center.text-body.q-ml-xs.q-mr-md.q-mr-xxxl {{ timeLeftString() }}
               q-icon(name="far fa-comment-alt")
                 .h-b2.text-center.text-body.q-ml-xs {{ getCommentCount() }}
         .col-4(v-show="status !== 'drafted'" :class="{ 'col-12': card }")
@@ -155,8 +155,8 @@ widget.cursor-pointer.card(
             .col-1
         .col-12(v-if="card").justify-between
           .row.items-center.float-left
-              q-icon(v-show="status !== 'drafted'" name="fas fa-hourglass-half" size="11px")
-              .h-b2.text-center.text-body.q-ml-xs(v-show="status !== 'drafted'") {{ timeLeftString() }}
+              q-icon(name="fas fa-hourglass-half" size="11px")
+              .h-b2.text-center.text-body.q-ml-xs {{ timeLeftString() }}
           .row.items-center.float-right
               q-icon(name="far fa-comment-alt")
               .h-b2.text-center.text-body.q-ml-xs {{ getCommentCount() }}
diff --git a/src/query/proposals/dao-proposals-stage.gql b/src/query/proposals/dao-proposals-stage.gql
index c65f3cd02..a0565b954 100644
--- a/src/query/proposals/dao-proposals-stage.gql
+++ b/src/query/proposals/dao-proposals-stage.gql
@@ -102,6 +102,7 @@ query stageProposals($docId: String!, $first: Int!, $offset: Int!) {
         }
         details_startPeriod_i
         details_assignee_n
+        createdDate
         cmntsect {
           docId
           comment {
@@ -123,6 +124,7 @@ query stageProposals($docId: String!, $first: Int!, $offset: Int!) {
         details_ballotAlignment_i
         details_minTimeShareX100_i
         details_owner_n,
+        createdDate,
         creator
         cmntsect {
           docId
@@ -188,6 +190,7 @@ query stageProposals($docId: String!, $first: Int!, $offset: Int!) {
         details_timeShareX100_i
         details_deferredPercX100_i
         details_state_s
+        createdDate
         original {
           ... on Assignbadge {
             details_title_s
diff --git a/src/utils/proposal-parsing.js b/src/utils/proposal-parsing.js
index 85f605b77..4b2dc7ad8 100644
--- a/src/utils/proposal-parsing.js
+++ b/src/utils/proposal-parsing.js
@@ -31,6 +31,12 @@ export function quorum (proposal, supply) {
 export function unity (proposal, supply) {
   return voting(proposal, supply).unity
 }
+export function createdDate (proposal) {
+  return proposal?.createdDate
+}
+export function state (proposal) {
+  return proposal?.details_state_s
+}
 export function icon (proposal) {
   if (proposal.__typename === 'Suspend') proposal = proposal.suspend[0]
   if (proposal.__typename === 'Assignbadge') return proposal.badge[0].details_icon_s
@@ -38,7 +44,8 @@ export function icon (proposal) {
   return proposal.details_icon_s
 }
 export function votingTimeLeft (proposal) {
-  const end = new Date(`${proposal.ballot_expiration_t}`).getTime(proposal)
+  const date = proposal.ballot_expiration_t ? proposal.ballot_expiration_t : proposal.createdDate
+  const end = new Date(`${date}`).getTime(proposal)
   const now = Date.now(proposal)
   const t = end - now
   return t
@@ -72,12 +79,23 @@ export function timeLeftString (proposal, long = false) {
     }
   }
   if (long) {
-    const end = new Date(expiration(proposal))
+    const end = proposal.ballot_expiration_t ? new Date(expiration(proposal)) : new Date(createdDate(proposal))
     const format = date.formatDate(end, 'MMM D,YYYY')
     return `On ${format}`
+  } else if (state(proposal) === 'drafted') {
+    const now = new Date()
+    const end = proposal.ballot_expiration_t ? new Date(expiration(proposal)) : new Date(createdDate(proposal))
+    let diff = date.getDateDiff(now, end, 'days')
+    if (diff === 0) {
+      diff = date.getDateDiff(now, end, 'hours')
+      diff += diff === 1 ? ' hour' : ' hours'
+    } else {
+      diff += diff === 1 ? ' day' : ' days'
+    }
+    return `Created ${diff} ago`
   } else {
     const now = new Date()
-    const end = new Date(expiration(proposal))
+    const end = proposal.ballot_expiration_t ? new Date(expiration(proposal)) : new Date(createdDate(proposal))
     let diff = date.getDateDiff(now, end, 'days')
     if (diff === 0) {
       diff = date.getDateDiff(now, end, 'hours')

From 94d740cc0f3fa8217569e838ce69f367db125c6f Mon Sep 17 00:00:00 2001
From: Arsenije Savic <arsenijesavic@me.com>
Date: Fri, 4 Nov 2022 12:32:46 -0600
Subject: [PATCH 07/16] fix(members): show become member if not member and
 aplicant

---
 src/layouts/MultiDhoLayout.vue | 8 +++-----
 src/pages/dho/Members.vue      | 7 ++++---
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/layouts/MultiDhoLayout.vue b/src/layouts/MultiDhoLayout.vue
index 7086ccbba..502333654 100644
--- a/src/layouts/MultiDhoLayout.vue
+++ b/src/layouts/MultiDhoLayout.vue
@@ -119,7 +119,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters('accounts', ['isAuthenticated', 'isMember', 'isApplicant', 'account']),
+    ...mapGetters('accounts', ['account', 'isApplicant', 'isAuthenticated', 'isMember']),
     ...mapGetters('dao', ['announcement', 'daoSettings', 'selectedDao', 'selectedDaoPlan']),
     ...mapGetters('search', ['search']),
 
@@ -132,9 +132,7 @@ export default {
       return this.getDaos(member)
     },
 
-    loadingAccount () { return localStorage?.getItem('autoLogin') && !this.account },
-
-    loadingMember () { return localStorage?.getItem('isMember') && !this.accoun }
+    loadingAccount () { return localStorage?.getItem('autoLogin') && !this.account }
   },
 
   methods: {
@@ -301,7 +299,7 @@ q-layout(:style="{ 'min-height': 'inherit' }" :view="'lHr Lpr lFr'" ref="layout"
                       template(v-slot:append v-if="searchInput")
                         q-icon(size="xs" name="fas fa-times" @click="clearSearchInput")
                 guest-menu.q-ml-md(v-if="!account && !loadingAccount" :daoName="daoName")
-                non-member-menu.q-ml-md(v-if="!isMember && !isApplicant && account && !loadingAccount && !loadingMember", :registrationEnabled="daoSettings.registrationEnabled")
+                non-member-menu.q-ml-md(v-if="!isMember && !isApplicant && account && !loadingAccount" :registrationEnabled="daoSettings.registrationEnabled")
                 q-btn.q-ml-lg.q-mr-md(v-if="$q.screen.gt.md && !right && !loadingAccount" flat round @click="right = true")
                   profile-picture(v-bind="profile" size="36px" v-if="account")
                   profile-picture(username="g" size="36px" v-if="!account" textOnly)
diff --git a/src/pages/dho/Members.vue b/src/pages/dho/Members.vue
index 7a1b1c4c5..5c7eb6b74 100644
--- a/src/pages/dho/Members.vue
+++ b/src/pages/dho/Members.vue
@@ -171,7 +171,9 @@ export default {
         listData.unshift(...this.daoApplicants)
       }
       return listData
-    }
+    },
+
+    loadingAccount () { return localStorage?.getItem('autoLogin') && !this.account }
 
   },
 
@@ -385,7 +387,7 @@ q-page.page-members
   )
     template(v-slot:buttons)
       nav.row.items-center
-        div.row.inline.q-pr-md(v-if="!account")
+        div.row.inline.q-pr-md(v-if="!isMember && !isApplicant && account && !loadingAccount")
           q-btn.q-px-lg.h-btn1(
             :disable="!daoSettings.registrationEnabled"
             @click="onApply"
@@ -395,7 +397,6 @@ q-page.page-members
             rounded
             text-color="white"
             unelevated
-            v-if="!account"
           )
           q-tooltip(v-if="!daoSettings.registrationEnabled") Registration is temporarily disabled
         q-btn.q-px-lg.h-btn1(

From 6bc20ca4bcd0a59d6f3fdb3188c75dda64c79483 Mon Sep 17 00:00:00 2001
From: Irving Puga <ipugakn@gmail.com>
Date: Fri, 4 Nov 2022 12:37:14 -0600
Subject: [PATCH 08/16] feat: configured gql subscriptions (#1777)

* Subscription test WIP

* Update yarn.lock

* feat(subscriptions): Add comments subscription

* fix(subscriptions): Add defaultDataIdFromObject

* fix(subscriptions): Add missing docId
---
 package.json                                  |   3 +
 src/apollo/apollo-client-config.js            |  10 +-
 src/apollo/apollo-client-hooks.js             |  34 +++-
 src/pages/proposals/ProposalDetail.vue        |  24 ++-
 src/query/account/dao-admin.gql               |   1 +
 src/query/account/dao-applicant.gql           |   1 +
 src/query/account/dao-enroller.gql            |   1 +
 src/query/account/dao-member.gql              |   1 +
 .../assignments/dao-approved-assignments.gql  |   1 +
 src/query/badges/dao-active-badge-count.gql   |   3 +-
 .../dao-members-active-assignments.gql        |   7 +-
 src/query/members/dao-members-count.gql       |   3 +-
 src/query/payouts/dao-recent-payouts.gql      |   3 +-
 src/query/periods/dao-periods-range.gql       |   1 +
 src/query/profile/profile-assignments.gql     |   1 +
 src/query/profile/profile-stats.gql           |   1 +
 .../proposals/dao-active-proposal-count.gql   |   5 +-
 .../proposals/dao-proposal-detail-subs.gql    | 142 +++++++++++++
 .../proposals/dao-proposals-active-vote.gql   |   1 +
 src/query/proposals/dao-proposals-active.gql  |   1 +
 src/query/proposals/dao-proposals-count.gql   |   1 +
 src/query/proposals/dao-proposals-stage.gql   |   1 +
 src/query/proposals/dao-proposals-subs.gql    | 192 ++++++++++++++++++
 src/query/proposals/proposal-detail.gql       |   1 +
 src/query/proposals/proposals-active.gql      |   2 +
 src/query/quest-start.gql                     |   3 +-
 yarn.lock                                     |  38 +++-
 27 files changed, 469 insertions(+), 13 deletions(-)
 create mode 100644 src/query/proposals/dao-proposal-detail-subs.gql
 create mode 100644 src/query/proposals/dao-proposals-subs.gql

diff --git a/package.json b/package.json
index abe3bbc21..cc473aab4 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
     "@sentry/tracing": "^7.14.2",
     "@sentry/vue": "^7.14.2",
     "@smontero/ppp-client-api": "0.0.43",
+    "apollo-link-ws": "^1.0.20",
+    "apollo-utilities": "^1.3.4",
     "axios": "0.21.1",
     "core-js": "^3.6.5",
     "dgraph-js-http": "^21.3.0",
@@ -33,6 +35,7 @@
     "libphonenumber-js": "^1.10.6",
     "quasar": "1.15.10",
     "showdown": "^1.9.1",
+    "subscriptions-transport-ws": "^0.11.0",
     "turndown": "^7.0.0",
     "ual-anchor": "^1.0.5",
     "ual-seeds": "^1.1.2",
diff --git a/src/apollo/apollo-client-config.js b/src/apollo/apollo-client-config.js
index 5bcae182d..e75a875b5 100644
--- a/src/apollo/apollo-client-config.js
+++ b/src/apollo/apollo-client-config.js
@@ -1,4 +1,4 @@
-import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory'
+import { IntrospectionFragmentMatcher, defaultDataIdFromObject } from 'apollo-cache-inmemory'
 import schema from './schema.json'
 
 export default async function (/* { app, router, store, ssrContext, urlPath, redirect } */) {
@@ -19,7 +19,13 @@ export default async function (/* { app, router, store, ssrContext, urlPath, red
       cacheConfig: {
         fragmentMatcher: new IntrospectionFragmentMatcher({
           introspectionQueryResultData: schema
-        })
+        }),
+        dataIdFromObject: r => {
+          if (r.docId) {
+            return `${r.__typename}:${r.docId}`
+          }
+          return defaultDataIdFromObject(r)
+        }
       },
 
       // additional config for apollo client
diff --git a/src/apollo/apollo-client-hooks.js b/src/apollo/apollo-client-hooks.js
index 1c68691d1..ec1c6b757 100644
--- a/src/apollo/apollo-client-hooks.js
+++ b/src/apollo/apollo-client-hooks.js
@@ -1,6 +1,38 @@
-export async function apolloClientBeforeCreate (/* { apolloClientConfigObj, app, router, store, ssrContext, urlPath, redirect } */) {
+import { HttpLink } from 'apollo-link-http'
+import { split } from 'apollo-link'
+import { WebSocketLink } from 'apollo-link-ws'
+import { getMainDefinition } from 'apollo-utilities'
+
+const httpLink = new HttpLink({
+  // You should use an absolute URL here
+  uri: process.env.GRAPHQL_URI || 'https://alpha-stt.tekit.io/graphql'
+})
+
+// Create the subscription websocket link
+const wsLink = new WebSocketLink({
+  uri: process.env.GRAPHQL_SUBSCRIPTIONS_URI || 'ws://alpha-stts.tekit.io/graphql',
+  options: {
+    reconnect: true
+  }
+})
+
+// using the ability to split links, you can send data to each link
+// depending on what kind of operation is being sent
+const link = split(
+  // split based on operation type
+  ({ query }) => {
+    const definition = getMainDefinition(query)
+    return definition.kind === 'OperationDefinition' &&
+      definition.operation === 'subscription'
+  },
+  wsLink,
+  httpLink
+)
+
+export async function apolloClientBeforeCreate ({ apolloClientConfigObj, app, router, store, ssrContext, urlPath, redirect }) {
   // if needed you can modify here the config object used for apollo client
   // instantiation
+  apolloClientConfigObj.link = link
 }
 
 export async function apolloClientAfterCreate ({ apolloClient, store }/* { apolloClient, app, router, store, ssrContext, urlPath, redirect } */) {
diff --git a/src/pages/proposals/ProposalDetail.vue b/src/pages/proposals/ProposalDetail.vue
index da06338a8..85b1e2a5c 100644
--- a/src/pages/proposals/ProposalDetail.vue
+++ b/src/pages/proposals/ProposalDetail.vue
@@ -52,7 +52,29 @@ export default {
           offset: 0
         }
       },
-      fetchPolicy: 'no-cache'
+      fetchPolicy: 'cache-and-network',
+      subscribeToMore: {
+        document: require('~/query/proposals/dao-proposal-detail-subs.gql'),
+        variables () {
+          return {
+            docId: this.docId
+          }
+        },
+        skip () { return !this.docId },
+        updateQuery: (previousResult, { subscriptionData }) => {
+          if (!subscriptionData.data) {
+            return previousResult
+          }
+          if (!previousResult) {
+            return undefined
+          }
+          // Here, return the new result from the previous with the new data
+          return {
+            ...previousResult,
+            ...subscriptionData
+          }
+        }
+      }
     },
     votesList: {
       query: require('../../query/proposals/dao-proposal-detail.gql'),
diff --git a/src/query/account/dao-admin.gql b/src/query/account/dao-admin.gql
index 4a538db95..043c9a6a4 100644
--- a/src/query/account/dao-admin.gql
+++ b/src/query/account/dao-admin.gql
@@ -1,5 +1,6 @@
 query admin ($daoId: String!, $username: String!) {
   getDao (docId: $daoId) {
+    docId
     admin (filter :{details_member_n: {eq: $username}}){
       docId
     }
diff --git a/src/query/account/dao-applicant.gql b/src/query/account/dao-applicant.gql
index 562576c69..ad44f0ce9 100644
--- a/src/query/account/dao-applicant.gql
+++ b/src/query/account/dao-applicant.gql
@@ -1,5 +1,6 @@
 query applicant ($daoId: String!, $username: String!) {
   getDao (docId: $daoId) {
+    docId
     applicant (filter :{details_member_n: {eq: $username}}){
       docId
     }
diff --git a/src/query/account/dao-enroller.gql b/src/query/account/dao-enroller.gql
index c03e67837..28683abf7 100644
--- a/src/query/account/dao-enroller.gql
+++ b/src/query/account/dao-enroller.gql
@@ -1,5 +1,6 @@
 query enroller ($daoId: String!, $username: String!) {
   getDao (docId: $daoId) {
+    docId
     enroller (filter :{details_member_n: {eq: $username}}){
       docId
     }
diff --git a/src/query/account/dao-member.gql b/src/query/account/dao-member.gql
index 63195e262..566a2def5 100644
--- a/src/query/account/dao-member.gql
+++ b/src/query/account/dao-member.gql
@@ -1,5 +1,6 @@
 query member ($daoId: String!, $username: String!) {
   getDao (docId: $daoId) {
+    docId
     member (filter :{details_member_n: {eq: $username}}){
       docId
     }
diff --git a/src/query/assignments/dao-approved-assignments.gql b/src/query/assignments/dao-approved-assignments.gql
index 83849a51e..e1208a5f0 100644
--- a/src/query/assignments/dao-approved-assignments.gql
+++ b/src/query/assignments/dao-approved-assignments.gql
@@ -1,5 +1,6 @@
 query approvedAssignments ($daoId: String!) {
   getDao(docId:$daoId) {
+    docId
     passedprops(filter: {type: {eq:"Assignment"}}) {
       __typename
       ... on Assignment {
diff --git a/src/query/badges/dao-active-badge-count.gql b/src/query/badges/dao-active-badge-count.gql
index ad8189bf6..c4c8c48b9 100644
--- a/src/query/badges/dao-active-badge-count.gql
+++ b/src/query/badges/dao-active-badge-count.gql
@@ -1,9 +1,10 @@
 query activeBadges ($daoId: String!, $filter: BadgeFilter) {
   getDao (docId: $daoId) {
+    docId
     badgeAggregate (
     filter: $filter
     ) {
       count
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/query/members/dao-members-active-assignments.gql b/src/query/members/dao-members-active-assignments.gql
index 00d14b7df..1441db898 100644
--- a/src/query/members/dao-members-active-assignments.gql
+++ b/src/query/members/dao-members-active-assignments.gql
@@ -1,6 +1,8 @@
 query getActiveAssignments ($daoId: String!) {
   getDao (docId: $daoId) {
+    docId
     role @cascade(fields: ["assignment"]) {
+      docId
       assignment (
         filter: {
           details_state_s: {
@@ -8,10 +10,12 @@ query getActiveAssignments ($daoId: String!) {
           }
         }
       ) {
+        docId
         creator
       }
     }
     badge @cascade(fields: ["assignment"]) {
+      docId
       assignment (
         filter: {
           details_state_s: {
@@ -19,8 +23,9 @@ query getActiveAssignments ($daoId: String!) {
           }
         }
       ) {
+        docId
         creator
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/query/members/dao-members-count.gql b/src/query/members/dao-members-count.gql
index d91c70a93..c06e6e1ae 100644
--- a/src/query/members/dao-members-count.gql
+++ b/src/query/members/dao-members-count.gql
@@ -1,7 +1,8 @@
 query countMembers ($daoId: String!) {
   getDao (docId: $daoId) {
+    docId
     memberAggregate {
       count
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/query/payouts/dao-recent-payouts.gql b/src/query/payouts/dao-recent-payouts.gql
index 86c3681f5..f9b545665 100644
--- a/src/query/payouts/dao-recent-payouts.gql
+++ b/src/query/payouts/dao-recent-payouts.gql
@@ -1,9 +1,10 @@
 query recentPayouts ($daoId: String!, $filter: PayoutFilter) {
   getDao (docId: $daoId) {
+    docId
     payoutAggregate (
     filter: $filter
     ) {
       count
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/query/periods/dao-periods-range.gql b/src/query/periods/dao-periods-range.gql
index da8772248..4c255d00e 100644
--- a/src/query/periods/dao-periods-range.gql
+++ b/src/query/periods/dao-periods-range.gql
@@ -1,5 +1,6 @@
 query periodsRange($daoId: String!, $start: DateTime!, $count: Int!) {
   getDao(docId: $daoId) {
+    docId
     period(
       filter: { details_startTime_t: { ge: $start } }
       first: $count
diff --git a/src/query/profile/profile-assignments.gql b/src/query/profile/profile-assignments.gql
index e9a460961..81a56026f 100644
--- a/src/query/profile/profile-assignments.gql
+++ b/src/query/profile/profile-assignments.gql
@@ -1,5 +1,6 @@
 query queryActivity($username: String!, $daoId: String!, $first: Int, $offset: Int) {
   getDao(docId: $daoId) {
+    docId
     __typename
     votable(filter: {type: {in:["Assignment", "Assignbadge"]}, creator:{eq: $username} }, first:$first, offset: $offset, order: { desc: createdDate} ) {
       __typename
diff --git a/src/query/profile/profile-stats.gql b/src/query/profile/profile-stats.gql
index 3a7100954..52d4f769e 100644
--- a/src/query/profile/profile-stats.gql
+++ b/src/query/profile/profile-stats.gql
@@ -1,5 +1,6 @@
 query getStats($username: String!, $daoId: Int64!, $daoName: String) {
   getDao(docId:$daoName) {
+    docId
     votableAggregate(filter: {type: {in:["Assignment", "Assignbadge"]}, creator: {eq: $username}}){
       count
     }
diff --git a/src/query/proposals/dao-active-proposal-count.gql b/src/query/proposals/dao-active-proposal-count.gql
index ac4748b82..7d5a1dabb 100644
--- a/src/query/proposals/dao-active-proposal-count.gql
+++ b/src/query/proposals/dao-active-proposal-count.gql
@@ -1,14 +1,15 @@
 query proposal ($daoId: String!, $initDate: DateTime!, $finalDate: DateTime!) {
   getDao (docId: $daoId) {
+    docId
     proposalAggregate( filter: {
       createdDate: {
         between: {
           min: $initDate
-          max: $finalDate 
+          max: $finalDate
         }
       }
     }) {
       count
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/query/proposals/dao-proposal-detail-subs.gql b/src/query/proposals/dao-proposal-detail-subs.gql
new file mode 100644
index 000000000..2f05de285
--- /dev/null
+++ b/src/query/proposals/dao-proposal-detail-subs.gql
@@ -0,0 +1,142 @@
+subscription proposal($docId: String!) {
+  getDocument(docId: $docId) {
+    __typename
+    docId
+    creator
+    createdDate
+
+    ... on Payout {
+      cmntsect {
+        docId
+        comment {
+          id: docId
+          author: comment_author_n
+          content: comment_content_s
+          createdDate
+          deletedStatus: comment_deleted_i
+
+          reactions: reaction {
+            reactionlnkrAggregate {
+              count
+            }
+
+            reactionlnkr {
+              author: details_member_n
+            }
+          }
+
+          commentAggregate {
+            count
+          }
+        }
+      }
+    }
+
+    ... on Edit {
+      cmntsect {
+        docId
+        comment {
+          id: docId
+          author: comment_author_n
+          content: comment_content_s
+          createdDate
+          deletedStatus: comment_deleted_i
+
+          reactions: reaction {
+            reactionlnkrAggregate {
+              count
+            }
+
+            reactionlnkr {
+              author: details_member_n
+            }
+          }
+
+          commentAggregate {
+            count
+          }
+        }
+      }
+    }
+    ... on Assignment {
+      cmntsect {
+        docId
+        comment {
+          id: docId
+          author: comment_author_n
+          content: comment_content_s
+          createdDate
+          deletedStatus: comment_deleted_i
+
+          reactions: reaction {
+            reactionlnkrAggregate {
+              count
+            }
+
+            reactionlnkr {
+              author: details_member_n
+            }
+          }
+
+          commentAggregate {
+            count
+          }
+        }
+      }
+    }
+
+    ... on Assignbadge {
+      cmntsect {
+        docId
+        comment {
+          id: docId
+          author: comment_author_n
+          content: comment_content_s
+          createdDate
+          deletedStatus: comment_deleted_i
+
+          reactions: reaction {
+            reactionlnkrAggregate {
+              count
+            }
+
+            reactionlnkr {
+              author: details_member_n
+            }
+          }
+
+          commentAggregate {
+            count
+          }
+        }
+      }
+    }
+
+    ... on Role {
+      cmntsect {
+        docId
+        comment {
+          id: docId
+          author: comment_author_n
+          content: comment_content_s
+          createdDate
+          deletedStatus: comment_deleted_i
+
+          reactions: reaction {
+            reactionlnkrAggregate {
+              count
+            }
+
+            reactionlnkr {
+              author: details_member_n
+            }
+          }
+
+          commentAggregate {
+            count
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/query/proposals/dao-proposals-active-vote.gql b/src/query/proposals/dao-proposals-active-vote.gql
index e9e2f596b..3a59998df 100644
--- a/src/query/proposals/dao-proposals-active-vote.gql
+++ b/src/query/proposals/dao-proposals-active-vote.gql
@@ -1,6 +1,7 @@
 query proposals ($docId: String!, $user: String, $first: Int!, $offset: Int!) {
   queryDao (filter: { docId: { eq: $docId }}) {
     details_daoName_n
+    docId
     proposal ( first: $first offset: $offset order: { desc: createdDate }) {
       docId
       __typename
diff --git a/src/query/proposals/dao-proposals-active.gql b/src/query/proposals/dao-proposals-active.gql
index 8fa1f9552..a357a774d 100644
--- a/src/query/proposals/dao-proposals-active.gql
+++ b/src/query/proposals/dao-proposals-active.gql
@@ -1,6 +1,7 @@
 query proposals ($name: String!, $first: Int!, $offset: Int!) {
   queryDao (filter: { details_daoName_n: { eq: $name }}) {
     details_daoName_n
+    docId
     proposal (
       first: $first
       offset: $offset
diff --git a/src/query/proposals/dao-proposals-count.gql b/src/query/proposals/dao-proposals-count.gql
index cf8790900..66f4bd2d2 100644
--- a/src/query/proposals/dao-proposals-count.gql
+++ b/src/query/proposals/dao-proposals-count.gql
@@ -1,5 +1,6 @@
 query proposals ($docId: String!) {
   queryDao (filter: { docId: { eq: $docId }}) {
+    docId
     proposalAggregate {
         count
     }
diff --git a/src/query/proposals/dao-proposals-stage.gql b/src/query/proposals/dao-proposals-stage.gql
index a0565b954..77662055c 100644
--- a/src/query/proposals/dao-proposals-stage.gql
+++ b/src/query/proposals/dao-proposals-stage.gql
@@ -1,6 +1,7 @@
 query stageProposals($docId: String!, $first: Int!, $offset: Int!) {
   queryDao(filter: { docId: { eq: $docId } }) {
     details_daoName_n
+    docId
     stagingprop(first: $first, offset: $offset, order: { desc: createdDate }) {
       docId
       type
diff --git a/src/query/proposals/dao-proposals-subs.gql b/src/query/proposals/dao-proposals-subs.gql
new file mode 100644
index 000000000..15f36b5c5
--- /dev/null
+++ b/src/query/proposals/dao-proposals-subs.gql
@@ -0,0 +1,192 @@
+subscription proposals ($docId: String!, $user: String, $first: Int!, $offset: Int!) {
+  queryDao (filter: { docId: { eq: $docId }}) {
+    details_daoName_n
+    docId
+    proposal (
+      first: $first
+      offset: $offset
+      order: {
+        desc: createdDate
+      }
+    ) {
+      docId
+      __typename
+      ... on Assignbadge {
+        details_title_s
+        details_description_s
+        details_state_s
+        details_badge_i
+        creator
+        createdDate
+        ballot_expiration_t
+        start {
+          details_startTime_t
+        }
+        details_ballotQuorum_i
+        details_ballotSupply_a
+        details_ballotAlignment_i
+        details_assignee_n
+      }
+      ... on Assignment {
+        creator
+        claimed {
+          docId
+        }
+        ballot_expiration_t
+        details_title_s
+        details_description_s
+        details_assignee_n
+        details_periodCount_i
+        start {
+          details_startTime_t
+        }
+        details_pegSalaryPerPeriod_a
+        details_rewardSalaryPerPeriod_a
+        details_voiceSalaryPerPeriod_a
+        details_timeShareX100_i
+        lastimeshare {
+          details_timeShareX100_i
+        }
+        details_deferredPercX100_i
+        details_state_s
+        role {
+          ... on Role {
+            details_title_s
+            details_annualUsdSalary_a
+            details_minDeferredX100_i
+          }
+        }
+        details_ballotQuorum_i
+        details_ballotSupply_a
+        details_ballotAlignment_i
+        details_assignee_n
+      }
+      ... on Edit {
+        creator
+        details_ballotTitle_s
+        details_ballotDescription_s
+        ballot_expiration_t
+        details_assignee_n
+        details_periodCount_i
+        details_ballotQuorum_i
+        details_ballotSupply_a
+        details_ballotAlignment_i
+        details_timeShareX100_i
+        details_deferredPercX100_i
+        details_state_s
+        original {
+          details_title_s
+          details_description_s
+          claimed {
+            docId
+          }
+          start {
+            details_startTime_t
+          }
+          details_pegSalaryPerPeriod_a
+          details_rewardSalaryPerPeriod_a
+          details_voiceSalaryPerPeriod_a
+          role {
+            ... on Role {
+              details_title_s
+              details_annualUsdSalary_a
+              details_minDeferredX100_i
+            }
+          }
+        }
+      }
+      ... on Role {
+        details_title_s
+        ballot_expiration_t
+        details_annualUsdSalary_a
+        details_title_s
+        creator
+        createdDate
+        details_ballotQuorum_i
+        details_ballotSupply_a
+        details_ballotAlignment_i
+      }
+      ... on Payout {
+        details_pegAmount_a
+        details_rewardAmount_a
+        details_voiceAmount_a
+        details_description_s
+        details_title_s
+        ballot_expiration_t
+        details_voiceAmount_a
+        creator
+        createdDate
+        details_ballotQuorum_i
+        details_ballotSupply_a
+        details_ballotAlignment_i
+        details_owner_n
+      }
+      ... on Badge {
+        details_description_s
+        details_title_s
+        ballot_expiration_t
+        creator
+        createdDate
+        details_ballotQuorum_i
+        details_ballotSupply_a
+        details_ballotAlignment_i
+        system_proposer_n
+      }
+      ... on Suspend {
+        details_description_s
+        details_title_s
+        ballot_expiration_t
+        details_state_s
+        creator
+        createdDate
+        details_ballotQuorum_i
+        details_ballotSupply_a
+        details_ballotAlignment_i
+      }
+      ... on Votable {
+        pass: voteAggregate (filter: {
+          vote_vote_s: {
+          regexp: "/.*pass*./"
+        }
+        }) {
+        count
+        }
+        abstain: voteAggregate (filter: {
+          vote_vote_s: {
+            regexp: "/.*abstain*./"
+          }
+        }) {
+          count
+        }
+        fail: voteAggregate (filter: {
+          vote_vote_s: {
+            regexp: "/.*fail*./"
+          }
+        }) {
+          count
+        }
+        votetally {
+          ... on VoteTally {
+            pass_votePower_a
+            fail_votePower_a
+            abstain_votePower_a
+          }
+        }
+        vote (
+          filter: {
+            vote_voter_n: {
+              eq: $user
+            }
+          }
+        ) {
+          ... on Vote {
+           	vote_date_t
+            vote_voter_n
+            vote_vote_s
+            vote_votePower_a
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/query/proposals/proposal-detail.gql b/src/query/proposals/proposal-detail.gql
index 5684e2fba..732644aa6 100644
--- a/src/query/proposals/proposal-detail.gql
+++ b/src/query/proposals/proposal-detail.gql
@@ -3,6 +3,7 @@ query proposal ($hash: String!) {
     creator
     createdDate
     __typename
+    docId
     ... on Payout {
       ballot_expiration_t
       details_title_s
diff --git a/src/query/proposals/proposals-active.gql b/src/query/proposals/proposals-active.gql
index 476d88dcd..88f14267f 100644
--- a/src/query/proposals/proposals-active.gql
+++ b/src/query/proposals/proposals-active.gql
@@ -2,8 +2,10 @@
 query proposals ($hash: String!, $after: DateTime!) {
   getDho (hash: $hash) {
     hash
+    docId
     proposal (filter: { createdDate: { ge: $after } }, order: { desc: createdDate }) {
       hash
+      docId
       creator
       createdDate
       __typename
diff --git a/src/query/quest-start.gql b/src/query/quest-start.gql
index 62f9867f1..3b7feecf2 100644
--- a/src/query/quest-start.gql
+++ b/src/query/quest-start.gql
@@ -1,7 +1,8 @@
 query questStart($daoId: String!) {
   getDao (docId: $daoId) {
+    docId
     queststartAggregate {
       count
     }
   }
-}
\ No newline at end of file
+}
diff --git a/yarn.lock b/yarn.lock
index 63f54f671..e55ae8224 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4205,6 +4205,14 @@ apollo-link-http@^1.5.16:
     apollo-link-http-common "^0.2.16"
     tslib "^1.9.3"
 
+apollo-link-ws@^1.0.20:
+  version "1.0.20"
+  resolved "https://registry.yarnpkg.com/apollo-link-ws/-/apollo-link-ws-1.0.20.tgz#dfad44121f8445c6d7b7f8101a1b24813ba008ed"
+  integrity sha512-mjSFPlQxmoLArpHBeUb2Xj+2HDYeTaJqFGOqQ+I8NVJxgL9lJe84PDWcPah/yMLv3rB7QgBDSuZ0xoRFBPlySw==
+  dependencies:
+    apollo-link "^1.2.14"
+    tslib "^1.9.3"
+
 apollo-link@^1.0.0, apollo-link@^1.2.13, apollo-link@^1.2.14:
   version "1.2.14"
   resolved "https://registry.yarnpkg.com/apollo-link/-/apollo-link-1.2.14.tgz#3feda4b47f9ebba7f4160bef8b977ba725b684d9"
@@ -4738,6 +4746,11 @@ babel-walk@3.0.0-canary-5:
   dependencies:
     "@babel/types" "^7.9.6"
 
+backo2@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/backo2/-/backo2-1.0.2.tgz#31ab1ac8b129363463e35b3ebb69f4dfcfba7947"
+  integrity sha512-zj6Z6M7Eq+PBZ7PQxl5NT665MvJdAkzp0f60nAJ+sLaSCBPMwVak5ZegFbgVCzFcCJTKFoMizvM5Ld7+JrRJHA==
+
 bail@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
@@ -7733,6 +7746,11 @@ eventemitter2@^6.4.3:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.5.tgz#97380f758ae24ac15df8353e0cc27f8b95644655"
   integrity sha512-bXE7Dyc1i6oQElDG0jMRZJrRAn9QR2xyyFGmBdZleNmyQX0FqGYmhZIrIrpPfm/w//LTo4tVQGOGQcGCb5q9uw==
 
+eventemitter3@^3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-3.1.2.tgz#2d3d48f9c346698fce83a85d7d664e98535df6e7"
+  integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
+
 eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -10358,7 +10376,7 @@ it-to-stream@^1.0.0:
     p-fifo "^1.0.0"
     readable-stream "^3.6.0"
 
-iterall@^1.2.2:
+iterall@^1.2.1, iterall@^1.2.2:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.3.0.tgz#afcb08492e2915cbd8a0884eb93a8c94d0d72fea"
   integrity sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==
@@ -15292,6 +15310,17 @@ stylus@0.54.8:
     semver "^6.3.0"
     source-map "^0.7.3"
 
+subscriptions-transport-ws@^0.11.0:
+  version "0.11.0"
+  resolved "https://registry.yarnpkg.com/subscriptions-transport-ws/-/subscriptions-transport-ws-0.11.0.tgz#baf88f050cba51d52afe781de5e81b3c31f89883"
+  integrity sha512-8D4C6DIH5tGiAIpp5I0wD/xRlNiZAPGHygzCe7VzyzUoxHtawzjNAY9SUTXU05/EY2NMY9/9GF0ycizkXr1CWQ==
+  dependencies:
+    backo2 "^1.0.2"
+    eventemitter3 "^3.1.0"
+    iterall "^1.2.1"
+    symbol-observable "^1.0.4"
+    ws "^5.2.0 || ^6.0.0 || ^7.0.0"
+
 sumchecker@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"
@@ -15356,7 +15385,7 @@ svgo@^1.0.0:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-symbol-observable@^1.0.2, symbol-observable@^1.1.0:
+symbol-observable@^1.0.2, symbol-observable@^1.0.4, symbol-observable@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
@@ -17055,6 +17084,11 @@ write-file-webpack-plugin@4.5.1:
     moment "^2.22.1"
     write-file-atomic "^2.3.0"
 
+"ws@^5.2.0 || ^6.0.0 || ^7.0.0":
+  version "7.5.9"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
+  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
+
 ws@^6.2.1:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/ws/-/ws-6.2.2.tgz#dd5cdbd57a9979916097652d78f1cc5faea0c32e"

From 6fe460b13b3959adb60f66ac5d398e7e1d246a41 Mon Sep 17 00:00:00 2001
From: Evgeni B <evgeni.biryuk.hypha@gmail.com>
Date: Fri, 4 Nov 2022 21:38:11 +0300
Subject: [PATCH 09/16] fix(treasury): sorting search results in treasury page
 (#1773) (#1779)

---
 src/pages/dho/Treasury.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/dho/Treasury.vue b/src/pages/dho/Treasury.vue
index e5fac2a82..2be1a7d73 100644
--- a/src/pages/dho/Treasury.vue
+++ b/src/pages/dho/Treasury.vue
@@ -171,7 +171,7 @@ export default {
         this.redemptionsFiltered = [...this.redemptions.filter(r => parseFloat(r.amount_paid) < parseFloat(r.amount_requested))].reverse()
       }
       if (this.search) {
-        this.redemptionsFiltered = [...this.redemptionsFiltered.filter(r => r.requestor.includes(this.search))].reverse()
+        this.redemptionsFiltered = [...this.redemptionsFiltered.filter(r => r.requestor.includes(this.search))]
       }
     },
     async getTokens () {

From 8d2e412bdc53f6ba2fae58bc3560c1d01e93de4c Mon Sep 17 00:00:00 2001
From: Arsenije Savic <arsenijesavic@me.com>
Date: Fri, 4 Nov 2022 12:41:43 -0600
Subject: [PATCH 10/16] fix(profile card): add correct time formating

---
 src/components/profiles/profile-card.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/profiles/profile-card.vue b/src/components/profiles/profile-card.vue
index 6cd71d9a3..13cd60d0b 100644
--- a/src/components/profiles/profile-card.vue
+++ b/src/components/profiles/profile-card.vue
@@ -118,9 +118,9 @@ export default {
         const selectedTimeZone = profile ? profile.publicData.timeZone : 'utc'
         const tz = this.timeZonesOptions.find(v => v.value === selectedTimeZone)
         this.timezone = tz.text.replace('(', '').replace(/\).*$/, '')
-        this.time = new Date(new Date().toLocaleString('en-US', { timeZone: tz.utc[0] })).toLocaleTimeString()
+        this.time = new Date(new Date().toLocaleString('en-US', { timeZone: tz.utc[0] })).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
         setInterval(() => {
-          this.time = new Date(new Date().toLocaleString('en-US', { timeZone: tz.utc[0] })).toLocaleTimeString()
+          this.time = new Date(new Date().toLocaleString('en-US', { timeZone: tz.utc[0] })).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
         }, 1000)
 
         if (supplyTokens && this.voiceToken.token && supplyTokens[this.voiceToken.token]) {

From 2e6052f93905c8cc5ee88bb61f6430955ebc19a3 Mon Sep 17 00:00:00 2001
From: Arsenije Savic <arsenijesavic@me.com>
Date: Fri, 4 Nov 2022 13:05:18 -0600
Subject: [PATCH 11/16] fix(safari): show correct border radius

---
 src/components/common/base-banner.vue    |  1 +
 src/components/profiles/profile-card.vue |  1 +
 src/css/quasar-classes-override.styl     | 11 +++++++----
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/common/base-banner.vue b/src/components/common/base-banner.vue
index f00eba7f4..aca5f5fe9 100644
--- a/src/components/common/base-banner.vue
+++ b/src/components/common/base-banner.vue
@@ -113,5 +113,6 @@ export default {
 
 .rounded-corners
   border-radius 32px
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
 
 </style>
diff --git a/src/components/profiles/profile-card.vue b/src/components/profiles/profile-card.vue
index 6cd71d9a3..f45346493 100644
--- a/src/components/profiles/profile-card.vue
+++ b/src/components/profiles/profile-card.vue
@@ -344,6 +344,7 @@ widget-editable(
   height 140px
   border-radius 50%
   overflow hidden
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
 
 .name-text
   text-overflow ellipsis
diff --git a/src/css/quasar-classes-override.styl b/src/css/quasar-classes-override.styl
index 64100cd2a..9caaaa59c 100644
--- a/src/css/quasar-classes-override.styl
+++ b/src/css/quasar-classes-override.styl
@@ -137,9 +137,9 @@ a, a:hover, a:focus
   color var(--q-color-primary) !important
   .q-btn
     color var(--q-color-secondary)
-    outline-color var(--q-color-secondary) !important
-    outline-width 1px !important
-    outline-style solid !important
+    border: 1px solid  var(--q-color-secondary);
+    border-radius: 50% !important
+
   .bg-primary
     background var(--q-color-secondary) !important
 
@@ -166,4 +166,7 @@ a, a:hover, a:focus
 .q-date__range:before
   opacity 0.7 !important
   background-color var(--q-color-primary)!important
-  color white !important
\ No newline at end of file
+  color white !important
+
+.q-avatar
+  -webkit-mask-image: -webkit-radial-gradient(white, black);  
\ No newline at end of file

From 4f546e2d75f11d7590bf4677730468d04148637a Mon Sep 17 00:00:00 2001
From: Evgeni B <evgeni.biryuk.hypha@gmail.com>
Date: Mon, 7 Nov 2022 15:28:58 +0300
Subject: [PATCH 12/16] fix(proposal): change label from USD to USDE (#1736,
 #1745) (#1786)

---
 src/components/proposals/proposal-card-chips.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/proposals/proposal-card-chips.vue b/src/components/proposals/proposal-card-chips.vue
index 472d619cb..02f6741f4 100644
--- a/src/components/proposals/proposal-card-chips.vue
+++ b/src/components/proposals/proposal-card-chips.vue
@@ -134,7 +134,7 @@ export default {
       if (this.compensation) {
         const usdAmount = Number.parseFloat(this.compensation.amount.split(' ')[0])
         result.push(
-          { color: 'primary', outline: true, label: `${this.getFormatedTokenAmount(usdAmount, 3, 0)} USD`, tooltip: this.compensation.tooltip })
+          { color: 'primary', outline: true, label: `${this.getFormatedTokenAmount(usdAmount, 3, 0)} USDE`, tooltip: this.compensation.tooltip })
       }
 
       if (this.salary) {

From a51cc8509c551ce637d8ffc0c8a1edfe9aad4ae6 Mon Sep 17 00:00:00 2001
From: Evgeni B <evgeni.biryuk.hypha@gmail.com>
Date: Mon, 7 Nov 2022 15:29:32 +0300
Subject: [PATCH 13/16] fix(design): hide layout scrollbar (#1638) (#1787)

---
 src/layouts/MultiDhoLayout.vue | 2 +-
 src/layouts/ProposalLayout.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/MultiDhoLayout.vue b/src/layouts/MultiDhoLayout.vue
index 502333654..4cfeacd0e 100644
--- a/src/layouts/MultiDhoLayout.vue
+++ b/src/layouts/MultiDhoLayout.vue
@@ -259,7 +259,7 @@ q-layout(:style="{ 'min-height': 'inherit' }" :view="'lHr Lpr lFr'" ref="layout"
   q-page-container.bg-white.window-height.q-py-md(:class="{ 'q-pr-md': $q.screen.gt.md, 'q-px-xs': !$q.screen.gt.md}")
     .scroll-background.bg-internal-bg.content.full-height
       q-resize-observer(@resize="onContainerResize")
-      q-scroll-area.full-height(:thumb-style=" { 'border-radius': '6px' }" ref="scrollArea" :class="{ 'q-px-md': !$q.screen.gt.sm}")
+      q-scroll-area.full-height(:thumb-style=" { 'opacity': '0' }" ref="scrollArea" :class="{ 'q-px-md': !$q.screen.gt.sm}")
         .row.full-width
           .col.margin-min(v-if="$q.screen.gt.sm")
           .col-auto(:class="{'full-width': !$q.screen.gt.sm}")
diff --git a/src/layouts/ProposalLayout.vue b/src/layouts/ProposalLayout.vue
index b73ff2bef..61dc11b17 100644
--- a/src/layouts/ProposalLayout.vue
+++ b/src/layouts/ProposalLayout.vue
@@ -63,7 +63,7 @@ q-layout(:style="{ 'min-height': 'inherit' }" :view="'lHr Lpr lFr'" ref="layout"
     top-navigation(:profile="profile" @toggle-sidebar="right = true")
   q-page-container.bg-white.window-height(:class="{ 'q-pr-md': $q.screen.gt.sm }")
     .bg-internal-bg.content.full-height(:style="{ 'padding-bottom': '210px' }")
-      q-scroll-area.full-height(:thumb-style=" { 'border-radius': '6px' }")
+      q-scroll-area.full-height(:thumb-style=" { 'opacity': '0' }")
         .row.full-width
           .col.margin-min
           .col-auto

From 6763ff5810fd9e998b2620a8c579172699b2660b Mon Sep 17 00:00:00 2001
From: Evgeni B <evgeni.biryuk.hypha@gmail.com>
Date: Mon, 7 Nov 2022 15:30:56 +0300
Subject: [PATCH 14/16] fix(design): added save and reset buttons for mobile
 filter (#1678) (#1788)

---
 .../filters/filter-widget-mobile.vue          |  2 +-
 src/components/filters/filter-widget.vue      | 28 ++++++++++++++++++-
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/components/filters/filter-widget-mobile.vue b/src/components/filters/filter-widget-mobile.vue
index 3592ce610..cca67cc78 100644
--- a/src/components/filters/filter-widget-mobile.vue
+++ b/src/components/filters/filter-widget-mobile.vue
@@ -20,7 +20,7 @@ transition(name="slide")
   .container
     .top-buttons.q-ma-md
       q-btn(color="internal-bg" text-color="primary" rounded unelevated size="sm" padding="12px" icon="fas fa-times" @click="$emit('close')")
-    filter-widget(v-bind="{ ...$props, ...$attrs, ...$slots }" v-on = "$listeners" :showViewSelector="false").full-height
+    filter-widget(v-bind="{ ...$props, ...$attrs, ...$slots }" v-on = "$listeners" :showViewSelector="false" @close-window="$emit('close')").full-height
     .bottom-buttons
 </template>
 
diff --git a/src/components/filters/filter-widget.vue b/src/components/filters/filter-widget.vue
index 6c7822c54..beb45f269 100644
--- a/src/components/filters/filter-widget.vue
+++ b/src/components/filters/filter-widget.vue
@@ -82,6 +82,16 @@ export default {
     },
     clearSearchInput () {
       this.textFilter = ''
+    },
+    resetFilters () {
+      this.circle = this.circleArray?.[this.circleDefault]
+      this.sort = this.optionArray?.[this.defaultOption]
+      this.toggle = this.toggleDefault
+      this.textFilter = null
+      this.filters.forEach(tag => {
+        tag.enabled = false
+      })
+      this.clearSearchInput()
     }
   },
 
@@ -151,7 +161,23 @@ widget(title="Filters")
       .row.items-center.justify-between.q-mt-sm(v-if="showToggle")
         .h-b2 {{ toggleLabel }}
         q-toggle(v-model="toggle" color="primary" keep-color)
-
+      template(v-if="$q.screen.lt.md")
+        q-btn.q-my-sm.q-px-sm.full-width(
+          :class="'btn-primary-active'"
+          label="Save filters"
+          no-caps
+          rounded
+          unelevated
+          @click="$emit('close-window')"
+        )
+        q-btn.q-px-sm.full-width(
+          :class="'internal-bg'"
+          label="Reset filters"
+          no-caps
+          rounded
+          unelevated
+          @click="resetFilters"
+        )
 </template>
 
 <style lang="stylus" scoped>

From 5c5abc29ac64c9361681f6a805506868c05b5e5f Mon Sep 17 00:00:00 2001
From: Evgeni B <evgeni.biryuk.hypha@gmail.com>
Date: Mon, 7 Nov 2022 17:47:51 +0300
Subject: [PATCH 15/16] fix(design): loaders for some pages (#1775) (#1784)

* fix(design): loaders for some pages (#1775)

* refactor(proposal): compute loading var

Co-authored-by: Arsenije Savic <arsenijesavic@me.com>
---
 src/pages/proposals/ProposalDetail.vue | 13 +++++++++----
 src/pages/search/Results.vue           |  4 +++-
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/pages/proposals/ProposalDetail.vue b/src/pages/proposals/ProposalDetail.vue
index 85b1e2a5c..bda0d44b9 100644
--- a/src/pages/proposals/ProposalDetail.vue
+++ b/src/pages/proposals/ProposalDetail.vue
@@ -14,7 +14,8 @@ export default {
     ProposalView: () => import('~/components/proposals/proposal-view.vue'),
     VoterList: () => import('~/components/proposals/voter-list.vue'),
     Voting: () => import('~/components/proposals/voting.vue'),
-    Widget: () => import('~/components/common/widget.vue')
+    Widget: () => import('~/components/common/widget.vue'),
+    LoadingSpinner: () => import('~/components/common/loading-spinner.vue')
   },
 
   props: {
@@ -158,7 +159,9 @@ export default {
 
     isDefaultBadgeMultiplier () {
       return true
-    }
+    },
+
+    loading () { return this.$apollo.queries.proposal.loading }
   },
 
   async created () {
@@ -568,7 +571,8 @@ export default {
     .h-h6.text-bold.flex.items-center(:style="'margin: 0 auto;'") Proposal details
     q-btn(unelevated rounded padding="12px" icon="fas fa-times"  size="sm" :color="'white'" text-color="'primary'" :to="{ name: 'proposals'}")
     q-card.main-card(:style="'border-radius: 25px; box-shadow: none; margin-top: 15px; width: 100%; margin-bottom: 300px;'")
-      .row(v-if="!$apollo.queries.proposal") Loading...
+      div(v-if="loading" class="row justify-center q-my-md")
+        loading-spinner(color="primary" size="72px")
       .row(v-else-if="proposal")
         .col-12.col-lg-9
           proposal-item.bottom-no-rounded(
@@ -645,7 +649,8 @@ export default {
       .bottom-rounded.shadow-up-7.fixed-bottom.z-top(v-if="$q.screen.lt.lg")
         voting(v-if="proposalParsing.status(proposal) !== 'drafted'" :proposal="proposal" :title="null" fixed)
 .proposal-detail.full-width(v-else-if="$q.platform.is.desktop")
-  .row(v-if="!$apollo.queries.proposal") Loading...
+  div(v-if="loading" class="row justify-center q-my-md")
+    loading-spinner(color="primary" size="72px")
   .row(v-else-if="proposal")
     .col-12.col-sm-9
       proposal-item.bottom-no-rounded(
diff --git a/src/pages/search/Results.vue b/src/pages/search/Results.vue
index 89dd92ebc..4d512c64a 100644
--- a/src/pages/search/Results.vue
+++ b/src/pages/search/Results.vue
@@ -399,7 +399,9 @@ export default {
 q-page.page-search-results
   .row.q-mt-sm
     .q-py-md.col-12.col-lg-9(:class="{'q-px-sm': $q.screen.gt.md }")
-      widget(:title="`${results.total ? results.total.value : 0} Results`" )
+      div(v-if="!results.hits" class="row justify-center q-my-md")
+        loading-spinner(color="primary" size="72px")
+      widget(v-else :title="`${results.total ? results.total.value : 0} Results`" )
         div.cursor-pointer(v-for="result in results.hits" @click="onClick(result._source)")
           result(:key = "result.title"
                  :type = "result._source.type"

From 6725f0549d8ae0b05b3f68d63c482d548683deb1 Mon Sep 17 00:00:00 2001
From: Evgeni B <evgeni.biryuk.hypha@gmail.com>
Date: Mon, 7 Nov 2022 17:48:15 +0300
Subject: [PATCH 16/16] fix(design): multi dho layout paddings (#1639) (#1785)

* fix(design): main dho layout paddings (#1639)

* fix: class typo for bg

Co-authored-by: Arsenije Savic <arsenijesavic@me.com>
---
 src/layouts/MultiDhoLayout.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/layouts/MultiDhoLayout.vue b/src/layouts/MultiDhoLayout.vue
index 4cfeacd0e..5b83bad2c 100644
--- a/src/layouts/MultiDhoLayout.vue
+++ b/src/layouts/MultiDhoLayout.vue
@@ -257,12 +257,12 @@ q-layout(:style="{ 'min-height': 'inherit' }" :view="'lHr Lpr lFr'" ref="layout"
   q-header.bg-white(v-if="$q.screen.lt.lg")
     top-navigation(:profile="profile" @toggle-sidebar="right = true" @search="onSearch" :dho="dho" :dhos="getDaos($apolloData.data.member)" :selectedDaoPlan="selectedDaoPlan")
   q-page-container.bg-white.window-height.q-py-md(:class="{ 'q-pr-md': $q.screen.gt.md, 'q-px-xs': !$q.screen.gt.md}")
-    .scroll-background.bg-internal-bg.content.full-height
+    .bg-internal.bg-content.full-height
       q-resize-observer(@resize="onContainerResize")
       q-scroll-area.full-height(:thumb-style=" { 'opacity': '0' }" ref="scrollArea" :class="{ 'q-px-md': !$q.screen.gt.sm}")
         .row.full-width
           .col.margin-min(v-if="$q.screen.gt.sm")
-          .col-auto(:class="{'full-width': !$q.screen.gt.sm}")
+          .col-auto.q-py-md(:class="{'full-width': !$q.screen.gt.sm}")
             .main(:class="{'q-pt-lg': $q.screen.gt.sm, 'full-width': !$q.screen.gt.sm}")
               .row.full-width.items-center.justify-between
                 // navigation-header