feat(nc-android): sync with nc desktop (new design) (#2971)

* feat(nc-android): fit the design to mobile * refactor(nc-android): resync with nc desktop * fix(nc-android): tauri version * refactor(nc-android): resync with nc desktop (rust) * chore(nc-android): format code * chore(nc-android): bump version
2023-02-09 14:26:19 +01:00
parent 37187c79cc
commit c5866db137
56 changed files with 8862 additions and 923 deletions
@@ -99,9 +99,9 @@ checksum = "4b46cbb362ab8752921c97e041f5e366ee6297bd428a31275b9fcf1e380f7299"

 [[package]]
 name = "anyhow"
-version = "1.0.68"
+version = "1.0.69"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2cb2f989d18dd141ab8ae82f64d1a8cdd37e0840f73a406896cf5e99502fab61"
+checksum = "224afbd727c3d6e4b90103ece64b8d1b67fbb1973b1046c2281eed3f3803f800"

 [[package]]
 name = "arrayref"
@@ -138,9 +138,9 @@ dependencies = [

 [[package]]
 name = "async-trait"
-version = "0.1.63"
+version = "0.1.64"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "eff18d764974428cf3a9328e23fc5c986f5fbed46e6cd4cdf42544df5d297ec1"
+checksum = "1cd7fce9ba8c3c042128ce72d8b2ddbf3a05747efb67ea0313c635e10bda47a2"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -459,7 +459,7 @@ name = "build-information"
 version = "0.1.0"
 dependencies = [
 "serde",
- "vergen 7.5.0",
+ "vergen 7.5.1",
 ]

 [[package]]
@@ -482,9 +482,9 @@ checksum = "14c189c53d098945499cdfa7ecc63567cf3886b3332b312a5b4585d8d3a6a610"

 [[package]]
 name = "bytes"
-version = "1.3.0"
+version = "1.4.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "dfb24e866b15a1af2a1b663f10c6b6b8f397a84aadb828f12e5b289ec23a3a3c"
+checksum = "89b2fd2a0dcf38d7971e2194b6b6eebab45ae01067456a7fd93d5547a61b70be"

 [[package]]
 name = "cast"
@@ -494,9 +494,9 @@ checksum = "37b2a672a2cb129a2e41c10b1224bb368f9f37a2b16b612598138befd7b37eb5"

 [[package]]
 name = "cc"
-version = "1.0.78"
+version = "1.0.79"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a20104e2335ce8a659d6dd92a51a767a0c062599c73b343fd152cb401e828c3d"
+checksum = "50d30906286121d95be3d479533b458f87493b30a4b5f79a607db8f5d11aa91f"
 dependencies = [
 "jobserver",
 ]
@@ -629,9 +629,9 @@ dependencies = [

 [[package]]
 name = "clap"
-version = "4.1.3"
+version = "4.1.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d8d93d855ce6a0aa87b8473ef9169482f40abaa2e9e0993024c35c902cbd5920"
+checksum = "f13b9c79b5d1dd500d20ef541215a6423c75829ef43117e1b4d17fd8af0b5d76"
 dependencies = [
 "bitflags",
 "clap_derive",
@@ -648,7 +648,7 @@ version = "4.1.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3d6540eedc41f8a5a76cf3d8d458057dcdf817be4158a55b5f861f7a5483de75"
 dependencies = [
- "clap 4.1.3",
+ "clap 4.1.4",
 ]

 [[package]]
@@ -657,7 +657,7 @@ version = "4.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "cf0c76d8fcf782a1102ccfcd10ca8246e7fdd609c1cd6deddbb96cb638e9bb5c"
 dependencies = [
- "clap 4.1.3",
+ "clap 4.1.4",
 "clap_complete",
 ]

@@ -667,7 +667,7 @@ version = "4.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "684a277d672e91966334af371f1a7b5833f9aa00b07c84e92fbce95e00208ce8"
 dependencies = [
- "heck 0.4.0",
+ "heck 0.4.1",
 "proc-macro-error",
 "proc-macro2",
 "quote",
@@ -818,7 +818,7 @@ dependencies = [
 name = "completions"
 version = "0.1.0"
 dependencies = [
- "clap 4.1.3",
+ "clap 4.1.4",
 "clap_complete",
 "clap_complete_fig",
 ]
@@ -978,9 +978,9 @@ dependencies = [

 [[package]]
 name = "cosmwasm-derive"
-version = "1.1.9"
+version = "1.2.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6fca30d51f7e5fbfa6440d8b10d7df0231bdf77e97fd3fe5d0cb79cc4822e50c"
+checksum = "d5abeeb891e6d0098402e4d3d042f90451db52651d2fe14b170e69a1dd3e4115"
 dependencies = [
 "syn",
 ]
@@ -1022,9 +1022,9 @@ dependencies = [

 [[package]]
 name = "crc"
-version = "3.0.0"
+version = "3.0.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "53757d12b596c16c78b83458d732a5d1a17ab3f53f2f7412f6fb57cc8a140ab3"
+checksum = "86ec7a15cbe22e59248fc7eadb1907dab5ba09372595da4d73dd805ed4417dfe"
 dependencies = [
 "crc-catalog 2.2.0",
 ]
@@ -1055,7 +1055,7 @@ name = "credential"
 version = "0.1.0"
 dependencies = [
 "bip39",
- "clap 4.1.3",
+ "clap 4.1.4",
 "coconut-interface",
 "completions",
 "config",
@@ -1471,9 +1471,9 @@ dependencies = [

 [[package]]
 name = "cxx"
-version = "1.0.87"
+version = "1.0.89"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "b61a7545f753a88bcbe0a70de1fcc0221e10bfc752f576754fa91e663db1622e"
+checksum = "bc831ee6a32dd495436e317595e639a587aa9907bef96fe6e6abc290ab6204e9"
 dependencies = [
 "cc",
 "cxxbridge-flags",
@@ -1483,9 +1483,9 @@ dependencies = [

 [[package]]
 name = "cxx-build"
-version = "1.0.87"
+version = "1.0.89"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f464457d494b5ed6905c63b0c4704842aba319084a0a3561cdc1359536b53200"
+checksum = "94331d54f1b1a8895cd81049f7eaaaef9d05a7dcb4d1fd08bf3ff0806246789d"
 dependencies = [
 "cc",
 "codespan-reporting",
@@ -1498,15 +1498,15 @@ dependencies = [

 [[package]]
 name = "cxxbridge-flags"
-version = "1.0.87"
+version = "1.0.89"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "43c7119ce3a3701ed81aca8410b9acf6fc399d2629d057b87e2efa4e63a3aaea"
+checksum = "48dcd35ba14ca9b40d6e4b4b39961f23d835dbb8eed74565ded361d93e1feb8a"

 [[package]]
 name = "cxxbridge-macro"
-version = "1.0.87"
+version = "1.0.89"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "65e07508b90551e610910fa648a1878991d367064997a596135b86df30daf07e"
+checksum = "81bbeb29798b407ccd82a3324ade1a7286e0d29851475990b612670f6f5124d2"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -1568,7 +1568,7 @@ dependencies = [
 "hashbrown 0.12.3",
 "lock_api",
 "once_cell",
- "parking_lot_core 0.9.6",
+ "parking_lot_core 0.9.7",
 ]

 [[package]]
@@ -1762,9 +1762,9 @@ dependencies = [

 [[package]]
 name = "either"
-version = "1.8.0"
+version = "1.8.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "90e5c1c8368803113bf0c9584fc495a58b86dc8a29edbf8fe877d21d9507e797"
+checksum = "7fcaabb2fef8c910e7f4c7ce9f67a1283a1715879a7c230ca9d6d1ae31f16d91"

 [[package]]
 name = "elliptic-curve"
@@ -1786,9 +1786,9 @@ dependencies = [

 [[package]]
 name = "encoding_rs"
-version = "0.8.31"
+version = "0.8.32"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "9852635589dc9f9ea1b6fe9f05b50ef208c85c834a562f0c6abb1c475736ec2b"
+checksum = "071a31f4ee85403370b58aca746f01041ede6f0da2730960ad001edc2b71b394"
 dependencies = [
 "cfg-if",
 ]
@@ -1895,7 +1895,7 @@ name = "explorer-api"
 version = "1.1.8"
 dependencies = [
 "chrono",
- "clap 4.1.3",
+ "clap 4.1.4",
 "contracts-common",
 "dotenv",
 "humantime-serde",
@@ -2006,7 +2006,7 @@ dependencies = [
 "futures-core",
 "futures-sink",
 "pin-project",
- "spin 0.9.4",
+ "spin 0.9.5",
 ]

 [[package]]
@@ -2059,9 +2059,9 @@ checksum = "e6d5a32815ae3f33302d95fdcb2ce17862f8c65363dcfd29360480ba1001fc9c"

 [[package]]
 name = "futures"
-version = "0.3.25"
+version = "0.3.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "38390104763dc37a5145a53c29c63c1290b5d316d6086ec32c293f6736051bb0"
+checksum = "13e2792b0ff0340399d58445b88fd9770e3489eff258a4cbc1523418f12abf84"
 dependencies = [
 "futures-channel",
 "futures-core",
@@ -2074,9 +2074,9 @@ dependencies = [

 [[package]]
 name = "futures-channel"
-version = "0.3.25"
+version = "0.3.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "52ba265a92256105f45b719605a571ffe2d1f0fea3807304b522c1d778f79eed"
+checksum = "2e5317663a9089767a1ec00a487df42e0ca174b61b4483213ac24448e4664df5"
 dependencies = [
 "futures-core",
 "futures-sink",
@@ -2084,15 +2084,15 @@ dependencies = [

 [[package]]
 name = "futures-core"
-version = "0.3.25"
+version = "0.3.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "04909a7a7e4633ae6c4a9ab280aeb86da1236243a77b694a49eacd659a4bd3ac"
+checksum = "ec90ff4d0fe1f57d600049061dc6bb68ed03c7d2fbd697274c41805dcb3f8608"

 [[package]]
 name = "futures-executor"
-version = "0.3.25"
+version = "0.3.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7acc85df6714c176ab5edf386123fafe217be88c0840ec11f199441134a074e2"
+checksum = "e8de0a35a6ab97ec8869e32a2473f4b1324459e14c29275d14b10cb1fd19b50e"
 dependencies = [
 "futures-core",
 "futures-task",
@@ -2112,15 +2112,15 @@ dependencies = [

 [[package]]
 name = "futures-io"
-version = "0.3.25"
+version = "0.3.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "00f5fb52a06bdcadeb54e8d3671f8888a39697dcb0b81b23b55174030427f4eb"
+checksum = "bfb8371b6fb2aeb2d280374607aeabfc99d95c72edfe51692e42d3d7f0d08531"

 [[package]]
 name = "futures-macro"
-version = "0.3.25"
+version = "0.3.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "bdfb8ce053d86b91919aad980c220b1fb8401a9394410e1c289ed7e66b61835d"
+checksum = "95a73af87da33b5acf53acfebdc339fe592ecf5357ac7c0a7734ab9d8c876a70"
 dependencies = [
 "proc-macro2",
 "quote",
@@ -2129,21 +2129,21 @@ dependencies = [

 [[package]]
 name = "futures-sink"
-version = "0.3.25"
+version = "0.3.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "39c15cf1a4aa79df40f1bb462fb39676d0ad9e366c2a33b590d7c66f4f81fcf9"
+checksum = "f310820bb3e8cfd46c80db4d7fb8353e15dfff853a127158425f31e0be6c8364"

 [[package]]
 name = "futures-task"
-version = "0.3.25"
+version = "0.3.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2ffb393ac5d9a6eaa9d3fdf37ae2776656b706e200c8e16b1bdb227f5198e6ea"
+checksum = "dcf79a1bf610b10f42aea489289c5a2c478a786509693b80cd39c44ccd936366"

 [[package]]
 name = "futures-util"
-version = "0.3.25"
+version = "0.3.26"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "197676987abd2f9cadff84926f410af1c183608d36641465df73ae8211dc65d6"
+checksum = "9c1d6de3acfef38d2be4b1f543f553131788603495be83da675e180c8d6b7bd1"
 dependencies = [
 "futures-channel",
 "futures-core",
@@ -2295,19 +2295,6 @@ dependencies = [
 "polyval",
 ]

-[[package]]
-name = "git2"
-version = "0.15.0"
-source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2994bee4a3a6a51eb90c218523be382fd7ea09b16380b9312e9dbe955ff7c7d1"
-dependencies = [
- "bitflags",
- "libc",
- "libgit2-sys",
- "log",
- "url",
-]
-
 [[package]]
 name = "git2"
 version = "0.16.1"
@@ -2496,9 +2483,9 @@ dependencies = [

 [[package]]
 name = "heck"
-version = "0.4.0"
+version = "0.4.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "2540771e65fc8cb83cd6e8a237f70c319bd5c29f78ed1084ba5d50eeac86f7f9"
+checksum = "95505c38b4572b2d910cecb0281560f54b440a19336cbbcb27bf6ce6adc6f5a8"
 dependencies = [
 "unicode-segmentation",
 ]
@@ -2521,6 +2508,12 @@ dependencies = [
 "libc",
 ]

+[[package]]
+name = "hermit-abi"
+version = "0.3.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "fed44880c466736ef9a5c5b5facefb5ed0785676d0c02d612db14e54f0d84286"
+
 [[package]]
 name = "hex"
 version = "0.4.3"
@@ -2650,9 +2643,9 @@ dependencies = [

 [[package]]
 name = "hyper"
-version = "0.14.23"
+version = "0.14.24"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "034711faac9d2166cb1baf1a2fb0b60b1f277f8492fd72176c17f3515e1abd3c"
+checksum = "5e011372fa0b68db8350aa7a248930ecc7839bf46d8485577d69f117a75f164c"
 dependencies = [
 "bytes",
 "futures-channel",
@@ -2839,12 +2832,12 @@ dependencies = [

 [[package]]
 name = "io-lifetimes"
-version = "1.0.4"
+version = "1.0.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "e7d6c6f8c91b4b9ed43484ad1a938e393caf35960fce7f82a040497207bd8e9e"
+checksum = "1abeb7a0dd0f8181267ff8adc397075586500b81b28a73e8a0208b00fc170fb3"
 dependencies = [
 "libc",
- "windows-sys",
+ "windows-sys 0.45.0",
 ]

 [[package]]
@@ -2873,14 +2866,14 @@ dependencies = [

 [[package]]
 name = "is-terminal"
-version = "0.4.2"
+version = "0.4.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "28dfb6c8100ccc63462345b67d1bbc3679177c75ee4bf59bf29c8b1d110b8189"
+checksum = "22e18b0a45d56fe973d6db23972bf5bc46f988a4a2385deac9cc29572f09daef"
 dependencies = [
- "hermit-abi 0.2.6",
+ "hermit-abi 0.3.1",
 "io-lifetimes",
 "rustix",
- "windows-sys",
+ "windows-sys 0.45.0",
 ]

 [[package]]
@@ -3215,7 +3208,7 @@ dependencies = [
 "libc",
 "log",
 "wasi 0.11.0+wasi-snapshot-preview1",
- "windows-sys",
+ "windows-sys 0.42.0",
 ]

 [[package]]
@@ -3298,7 +3291,7 @@ dependencies = [
 "log",
 "memchr",
 "mime",
- "spin 0.9.4",
+ "spin 0.9.5",
 "tokio",
 "tokio-util",
 "version_check",
@@ -3447,7 +3440,7 @@ dependencies = [
 "bs58",
 "build-information",
 "cfg-if",
- "clap 4.1.3",
+ "clap 4.1.4",
 "coconut-bandwidth-contract-common",
 "coconut-dkg-common",
 "coconut-interface",
@@ -3543,7 +3536,7 @@ dependencies = [
 "base64 0.13.1",
 "bip39",
 "bs58",
- "clap 4.1.3",
+ "clap 4.1.4",
 "clap_complete",
 "clap_complete_fig",
 "dotenv",
@@ -3567,7 +3560,7 @@ dependencies = [
 "bip39",
 "bs58",
 "cfg-if",
- "clap 4.1.3",
+ "clap 4.1.4",
 "coconut-bandwidth-contract-common",
 "coconut-dkg-common",
 "comfy-table",
@@ -3598,7 +3591,7 @@ name = "nym-client"
 version = "1.1.8"
 dependencies = [
 "build-information",
- "clap 4.1.3",
+ "clap 4.1.4",
 "client-connections",
 "client-core",
 "coconut-interface",
@@ -3643,7 +3636,7 @@ dependencies = [
 "bip39",
 "bs58",
 "build-information",
- "clap 4.1.3",
+ "clap 4.1.4",
 "coconut-interface",
 "colored",
 "completions",
@@ -3693,7 +3686,7 @@ dependencies = [
 "atty",
 "bs58",
 "build-information",
- "clap 4.1.3",
+ "clap 4.1.4",
 "colored",
 "completions",
 "config",
@@ -3736,7 +3729,7 @@ version = "1.1.8"
 dependencies = [
 "async-trait",
 "build-information",
- "clap 4.1.3",
+ "clap 4.1.4",
 "client-connections",
 "completions",
 "dirs",
@@ -3826,7 +3819,7 @@ name = "nym-socks5-client"
 version = "1.1.8"
 dependencies = [
 "build-information",
- "clap 4.1.3",
+ "clap 4.1.4",
 "client-connections",
 "client-core",
 "coconut-interface",
@@ -4199,7 +4192,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "3742b2c103b9f06bc9fff0a37ff4912935851bee6d36f3c02bcc755bcfec228f"
 dependencies = [
 "lock_api",
- "parking_lot_core 0.9.6",
+ "parking_lot_core 0.9.7",
 ]

 [[package]]
@@ -4218,15 +4211,15 @@ dependencies = [

 [[package]]
 name = "parking_lot_core"
-version = "0.9.6"
+version = "0.9.7"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ba1ef8814b5c993410bb3adfad7a5ed269563e4a2f90c41f5d85be7fb47133bf"
+checksum = "9069cbb9f99e3a5083476ccb29ceb1de18b9118cafa53e90c9551235de2b9521"
 dependencies = [
 "cfg-if",
 "libc",
 "redox_syscall",
 "smallvec 1.10.0",
- "windows-sys",
+ "windows-sys 0.45.0",
 ]

 [[package]]
@@ -4320,9 +4313,9 @@ checksum = "478c572c3d73181ff3c2539045f6eb99e5491218eae919370993b890cdbdd98e"

 [[package]]
 name = "pest"
-version = "2.5.3"
+version = "2.5.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4257b4a04d91f7e9e6290be5d3da4804dd5784fafde3a497d73eb2b4a158c30a"
+checksum = "028accff104c4e513bad663bbcd2ad7cfd5304144404c31ed0a77ac103d00660"
 dependencies = [
 "thiserror",
 "ucd-trie",
@@ -4330,9 +4323,9 @@ dependencies = [

 [[package]]
 name = "pest_derive"
-version = "2.5.3"
+version = "2.5.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "241cda393b0cdd65e62e07e12454f1f25d57017dcc514b1514cd3c4645e3a0a6"
+checksum = "2ac3922aac69a40733080f53c1ce7f91dcf57e1a5f6c52f421fadec7fbdc4b69"
 dependencies = [
 "pest",
 "pest_generator",
@@ -4340,9 +4333,9 @@ dependencies = [

 [[package]]
 name = "pest_generator"
-version = "2.5.3"
+version = "2.5.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "46b53634d8c8196302953c74d5352f33d0c512a9499bd2ce468fc9f4128fa27c"
+checksum = "d06646e185566b5961b4058dd107e0a7f56e77c3f484549fb119867773c0f202"
 dependencies = [
 "pest",
 "pest_meta",
@@ -4353,9 +4346,9 @@ dependencies = [

 [[package]]
 name = "pest_meta"
-version = "2.5.3"
+version = "2.5.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0ef4f1332a8d4678b41966bb4cc1d0676880e84183a1ecc3f4b69f03e99c7a51"
+checksum = "e6f60b2ba541577e2a0c307c8f39d1439108120eb7903adeb6497fa880c59616"
 dependencies = [
 "once_cell",
 "pest",
@@ -4504,9 +4497,9 @@ dependencies = [

 [[package]]
 name = "proc-macro2"
-version = "1.0.50"
+version = "1.0.51"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "6ef7d57beacfaf2d8aee5937dab7b7f28de3cb8b1828479bb5de2a7106f2bae2"
+checksum = "5d727cae5b39d21da60fa540906919ad737832fe0b1c165da3a34d6548c849d6"
 dependencies = [
 "unicode-ident",
 ]
@@ -5178,16 +5171,16 @@ dependencies = [

 [[package]]
 name = "rustix"
-version = "0.36.7"
+version = "0.36.8"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "d4fdebc4b395b7fbb9ab11e462e20ed9051e7b16e42d24042c776eca0ac81b03"
+checksum = "f43abb88211988493c1abb44a70efa56ff0ce98f233b7b276146f1f3f7ba9644"
 dependencies = [
 "bitflags",
 "errno",
 "io-lifetimes",
 "libc",
 "linux-raw-sys",
- "windows-sys",
+ "windows-sys 0.45.0",
 ]

 [[package]]
@@ -5263,7 +5256,7 @@ version = "0.1.21"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "713cfb06c7059f3588fb8044c0fad1d09e3c01d225e25b9220dbfdcf16dbb1b3"
 dependencies = [
- "windows-sys",
+ "windows-sys 0.42.0",
 ]

 [[package]]
@@ -5344,9 +5337,9 @@ dependencies = [

 [[package]]
 name = "security-framework"
-version = "2.8.0"
+version = "2.8.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "645926f31b250a2dca3c232496c2d898d91036e45ca0e97e0e2390c54e11be36"
+checksum = "a332be01508d814fed64bf28f798a146d73792121129962fdf335bb3c49a4254"
 dependencies = [
 "bitflags",
 "core-foundation",
@@ -5424,9 +5417,9 @@ dependencies = [

 [[package]]
 name = "serde_bytes"
-version = "0.11.8"
+version = "0.11.9"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "718dc5fff5b36f99093fc49b280cfc96ce6fc824317783bff5a1fed0c7a64819"
+checksum = "416bda436f9aab92e02c8e10d49a15ddd339cea90b6e340fe51ed97abb548294"
 dependencies = [
 "serde",
 ]
@@ -5465,9 +5458,9 @@ dependencies = [

 [[package]]
 name = "serde_json"
-version = "1.0.91"
+version = "1.0.93"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "877c235533714907a8c2464236f5c4b2a17262ef1bd71f38f35ea592c8da6883"
+checksum = "cad406b69c91885b5107daf2c29572f6c8cdb3c66826821e286c533490c0bc76"
 dependencies = [
 "itoa 1.0.5",
 "ryu",
@@ -5673,7 +5666,7 @@ version = "0.7.4"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "475b3bbe5245c26f2d8a6f62d67c1f30eb9fffeccee721c45d162c3ebbdf81b2"
 dependencies = [
- "heck 0.4.0",
+ "heck 0.4.1",
 "proc-macro2",
 "quote",
 "syn",
@@ -5731,9 +5724,9 @@ checksum = "6e63cff320ae2c57904679ba7cb63280a3dc4613885beafb148ee7bf9aa9042d"

 [[package]]
 name = "spin"
-version = "0.9.4"
+version = "0.9.5"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7f6002a767bff9e83f8eeecf883ecb8011875a21ae8da43bffb817a57e78cc09"
+checksum = "7dccf47db1b41fa1573ed27ccf5e08e3ca771cb994f776668c5ebda893b248fc"
 dependencies = [
 "lock_api",
 ]
@@ -5848,7 +5841,7 @@ dependencies = [
 "byteorder",
 "bytes",
 "chrono",
- "crc 3.0.0",
+ "crc 3.0.1",
 "crossbeam-queue",
 "dotenvy",
 "either",
@@ -5891,7 +5884,7 @@ checksum = "bc0fba2b0cae21fc00fe6046f8baa4c7fcb49e379f0f592b04696607f69ed2e1"
 dependencies = [
 "dotenv",
 "either",
- "heck 0.4.0",
+ "heck 0.4.1",
 "once_cell",
 "proc-macro2",
 "quote",
@@ -5910,7 +5903,7 @@ checksum = "b850fa514dc11f2ee85be9d055c512aa866746adfacd1cb42d867d68e6a5b0d9"
 dependencies = [
 "dotenvy",
 "either",
- "heck 0.4.0",
+ "heck 0.4.1",
 "once_cell",
 "proc-macro2",
 "quote",
@@ -6031,7 +6024,7 @@ version = "0.24.3"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "1e385be0d24f186b4ce2f9982191e7101bb737312ad61c1f2f984f34bcf85d59"
 dependencies = [
- "heck 0.4.0",
+ "heck 0.4.1",
 "proc-macro2",
 "quote",
 "rustversion",
@@ -6072,9 +6065,9 @@ dependencies = [

 [[package]]
 name = "sync_wrapper"
-version = "0.1.1"
+version = "0.1.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "20518fe4a4c9acf048008599e464deb21beeae3d3578418951a189c235a7a9a8"
+checksum = "2047c6ded9c721764247e62cd3b03c09ffc529b2ba5b10ec482ae507a4a70160"

 [[package]]
 name = "synstructure"
@@ -6335,9 +6328,9 @@ dependencies = [

 [[package]]
 name = "tokio"
-version = "1.24.2"
+version = "1.25.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "597a12a59981d9e3c38d216785b0c37399f6e415e8d0712047620f189371b0bb"
+checksum = "c8e00990ebabbe4c14c08aca901caed183ecd5c09562a12c824bb53d3c3fd3af"
 dependencies = [
 "autocfg 1.1.0",
 "bytes",
@@ -6351,7 +6344,7 @@ dependencies = [
 "socket2",
 "tokio-macros",
 "tracing",
- "windows-sys",
+ "windows-sys 0.42.0",
 ]

 [[package]]
@@ -6377,9 +6370,9 @@ dependencies = [

 [[package]]
 name = "tokio-native-tls"
-version = "0.3.0"
+version = "0.3.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "f7d995660bd2b7f8c1568414c1126076c13fbb725c40112dc0120b78eb9b717b"
+checksum = "bbae76ab933c85776efabc971569dd6119c580d8f5d448769dec1764bf796ef2"
 dependencies = [
 "native-tls",
 "tokio",
@@ -6820,9 +6813,9 @@ dependencies = [

 [[package]]
 name = "unicode-segmentation"
-version = "1.10.0"
+version = "1.10.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0fdbf052a0783de01e944a6ce7a8cb939e295b1e7be835a1112c3b9a7f047a5a"
+checksum = "1dd624098567895118886609431a7c3b8f516e41d30e0643f03d94592a147e36"

 [[package]]
 name = "unicode-width"
@@ -6945,7 +6938,7 @@ dependencies = [
 "chrono",
 "enum-iterator 0.8.1",
 "getset",
- "git2 0.16.1",
+ "git2",
 "rustc_version 0.4.0",
 "rustversion",
 "thiserror",
@@ -6953,15 +6946,15 @@ dependencies = [

 [[package]]
 name = "vergen"
-version = "7.5.0"
+version = "7.5.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "571b69f690c855821462709b6f41d42ceccc316fbd17b60bd06d06928cfe6a99"
+checksum = "f21b881cd6636ece9735721cf03c1fe1e774fe258683d084bb2812ab67435749"
 dependencies = [
 "anyhow",
 "cfg-if",
 "enum-iterator 1.2.0",
 "getset",
- "git2 0.15.0",
+ "git2",
 "rustc_version 0.4.0",
 "rustversion",
 "thiserror",
@@ -7255,6 +7248,30 @@ dependencies = [
 "windows_x86_64_msvc 0.42.1",
 ]

+[[package]]
+name = "windows-sys"
+version = "0.45.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "75283be5efb2831d37ea142365f009c02ec203cd29a3ebecbc093d52315b66d0"
+dependencies = [
+ "windows-targets",
+]
+
+[[package]]
+name = "windows-targets"
+version = "0.42.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8e2522491fbfcd58cc84d47aeb2958948c4b8982e9a2d8a2a35bbaed431390e7"
+dependencies = [
+ "windows_aarch64_gnullvm",
+ "windows_aarch64_msvc 0.42.1",
+ "windows_i686_gnu 0.42.1",
+ "windows_i686_msvc 0.42.1",
+ "windows_x86_64_gnu 0.42.1",
+ "windows_x86_64_gnullvm",
+ "windows_x86_64_msvc 0.42.1",
+]
+
 [[package]]
 name = "windows_aarch64_gnullvm"
 version = "0.42.1"
@@ -18,6 +18,7 @@ use client_core::client::key_manager::KeyManager;
 use client_core::config::persistence::key_pathfinder::ClientKeyPathfinder;
 use futures::channel::mpsc;
 use futures::StreamExt;
+#[cfg(not(feature = "mobile"))]
 use gateway_client::bandwidth::BandwidthController;
 use log::*;
 use nymsphinx::addressing::clients::Recipient;
@@ -69,6 +70,7 @@ impl NymClient {
        }
    }

+    #[cfg(not(feature = "mobile"))]
    async fn create_bandwidth_controller(config: &Config) -> BandwidthController<QueryNyxdClient> {
        let details = network_defaults::NymNetworkDetails::new_from_env();
        let mut client_config = validator_client::Config::try_from_nym_network_details(&details)
@@ -43,7 +43,7 @@
    "react-error-boundary": "^3.1.3",
    "react-hook-form": "^7.14.2",
    "react-markdown": "^8.0.4",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^6.7.0",
    "semver": "^6.3.0",
    "yup": "^0.32.9"
  },
@@ -58,7 +58,7 @@
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
    "@storybook/react": "^6.5.15",
    "@svgr/webpack": "^6.1.1",
-    "@tauri-apps/cli": "^2.0.0-alpha.1",
+    "@tauri-apps/cli": "^2.0.0-alpha.2",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^12.0.0",
    "@types/jest": "^27.0.1",
@@ -1,6 +1,6 @@
 [package]
 name = "nym-connect-android"
-version = "1.1.7"
+version = "1.1.9"
 description = "nym-connect for Android"
 authors = ["Nym Technologies SA"]
 license = ""
@@ -16,8 +16,8 @@ rust-version = "1.58"
 crate-type = ["staticlib", "cdylib", "rlib"]

 [build-dependencies]
-# tauri-build = { version = "2.0.0-alpha.0", features = [] }
-tauri-build = {  git = "https://github.com/tauri-apps/tauri", branch = "next", features = [] }
+tauri-build = { version = "2.0.0-alpha.1", features = [] }
+# tauri-build = {  git = "https://github.com/tauri-apps/tauri", branch = "next", features = [] }

 [dependencies]
 anyhow = "1.0"
@@ -38,7 +38,8 @@ serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
 serde_repr = "0.1"
 tap = "1.0.1"
-tauri = { git = "https://github.com/tauri-apps/tauri", branch = "next", features = ["clipboard-write-text", "native-tls-vendored", "notification-all", "shell-open", "system-tray", "window-close", "window-minimize", "window-start-dragging"] }
+# tauri = { git = "https://github.com/tauri-apps/tauri", branch = "next", features = ["clipboard-write-text", "native-tls-vendored", "notification-all", "shell-open", "system-tray", "window-close", "window-minimize", "window-start-dragging"] }
+tauri = { version = "2.0.0-alpha.3", features = ["clipboard-write-text", "native-tls-vendored", "notification-all", "shell-open", "system-tray", "window-close", "window-minimize", "window-start-dragging"] }
 tendermint-rpc = "0.23.0"
 thiserror = "1.0"
 tokio = { version = "1.24.1", features = ["sync", "time"] }
@@ -46,6 +47,8 @@ url = "2.2"
 yaml-rust = "0.4"

 client-core = { path = "../../clients/client-core" }
+nym-api-requests = { path = "../../nym-api/nym-api-requests" }
+contracts-common = { path = "../../common/cosmwasm-smart-contracts/contracts-common"}
 config-common = { path = "../../common/config", package = "config" }
 crypto = { path = "../../common/crypto" }
 logging = { path = "../../common/logging"}
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="grey_900">#212121</color>
+    <color name="grey_900">#1d2125</color>
    <color name="grey_800">#424242</color>
  <color name="green_500">#4caf50</color>
  <color name="green_900">#1b5e20</color>
@@ -1,3 +1,3 @@
 fn main() {
-    tauri_build::build()
+    tauri_build::build();
 }
@@ -51,9 +51,9 @@ pub enum BackendError {
    InitializationPanic,
    #[error("could not get config id before gateway is set")]
    CouldNotGetIdWithoutGateway,
-    #[error("could initialize without gateway set")]
+    #[error("could not initialize without gateway set")]
    CouldNotInitWithoutGateway,
-    #[error("could initialize without service provider set")]
+    #[error("could not initialize without service provider set")]
    CouldNotInitWithoutServiceProvider,
    #[error("could not get file name")]
    CouldNotGetFilename,
@@ -66,14 +66,18 @@ impl AppBuilder {
            .invoke_handler(tauri::generate_handler![
                crate::config::get_config_file_location,
                crate::config::get_config_id,
-                crate::operations::connection::status::get_connection_status,
                crate::operations::connection::connect::get_gateway,
                crate::operations::connection::connect::get_service_provider,
                crate::operations::connection::connect::set_gateway,
                crate::operations::connection::connect::set_service_provider,
                crate::operations::connection::connect::start_connecting,
                crate::operations::connection::disconnect::start_disconnecting,
+                crate::operations::connection::status::get_connection_health_check_status,
+                crate::operations::connection::status::get_connection_status,
+                crate::operations::connection::status::get_gateway_connection_status,
+                crate::operations::connection::status::start_connection_health_check_task,
                crate::operations::directory::get_services,
+                crate::operations::directory::get_gateways_detailed,
                crate::operations::export::export_keys,
            ])
            .setup(move |app| {
@@ -1,21 +1,35 @@
 use itertools::Itertools;

 use crate::error::Result;
-use crate::models::{DirectoryService, HarbourMasterService, PagedResult};
+use crate::models::{
+    DirectoryService, DirectoryServiceProvider, HarbourMasterService, PagedResult,
+};
+use contracts_common::types::Percent;
+use nym_api_requests::models::GatewayBondAnnotated;

 static SERVICE_PROVIDER_WELLKNOWN_URL: &str =
    "https://nymtech.net/.wellknown/connect/service-providers.json";

 static HARBOUR_MASTER_URL: &str = "https://harbourmaster.nymtech.net/v1/services/?size=100";

+static GATEWAYS_DETAILED_URL: &str =
+    "https://validator.nymtech.net/api/v1/status/gateways/detailed";
+
 #[tauri::command]
-pub async fn get_services() -> Result<Vec<DirectoryService>> {
+pub async fn get_services() -> Result<Vec<DirectoryServiceProvider>> {
    log::trace!("Fetching services");
-    let res = reqwest::get(SERVICE_PROVIDER_WELLKNOWN_URL)
+    let services_res = reqwest::get(SERVICE_PROVIDER_WELLKNOWN_URL)
        .await?
        .json::<Vec<DirectoryService>>()
        .await?;
-    log::trace!("Received: {:#?}", res);
+    log::trace!("Received: {:#?}", services_res);
+
+    log::trace!("Fetching gateways");
+    let gateway_res = reqwest::get(GATEWAYS_DETAILED_URL)
+        .await?
+        .json::<Vec<GatewayBondAnnotated>>()
+        .await?;
+    log::trace!("Received: {:#?}", gateway_res);

    // TODO: get paged
    log::trace!("Fetching active services");
@@ -27,7 +41,7 @@ pub async fn get_services() -> Result<Vec<DirectoryService>> {

    let mut filtered: Vec<DirectoryService> = vec![];

-    for service in &res {
+    for service in &services_res {
        let items: _ = service
            .items
            .clone()
@@ -47,5 +61,32 @@ pub async fn get_services() -> Result<Vec<DirectoryService>> {
        })
    }

-    Ok(filtered)
+    let perf_threshold = Percent::from_percentage_value(90).unwrap();
+
+    // Use only services that are active AND have a performance of >= 90%
+    let services_with_good_performance: Vec<DirectoryServiceProvider> = filtered
+        .iter_mut()
+        .fold(vec![], |mut acc, sp| {
+            acc.append(&mut sp.items);
+            acc
+        })
+        .into_iter()
+        .filter(|sp| {
+            gateway_res.iter().any(|gateway| {
+                gateway.gateway_bond.gateway.identity_key == sp.gateway
+                    && gateway.performance >= perf_threshold
+            })
+        })
+        .collect();
+
+    Ok(services_with_good_performance)
+}
+
+#[tauri::command]
+pub async fn get_gateways_detailed() -> Result<Vec<GatewayBondAnnotated>> {
+    let res = reqwest::get(GATEWAYS_DETAILED_URL)
+        .await?
+        .json::<Vec<GatewayBondAnnotated>>()
+        .await?;
+    Ok(res)
 }
@@ -174,17 +174,6 @@ impl State {
    ) -> Result<(task::StatusReceiver, ExitStatusReceiver)> {
        self.set_state(ConnectionStatusKind::Connecting, window);

-        // Setup configuration by writing to file
-        //if let Err(err) = self.init_config().await {
-        //    log::error!("Failed to initialize: {err}");
-
-        //    // Wait a little to give the user some rudimentary feedback that the click actually
-        //    // registered.
-        //    tokio::time::sleep(Duration::from_secs(1)).await;
-        //    self.set_state(ConnectionStatusKind::Disconnected, window);
-        //    return Err(err);
-        //}
-
        let res = self.init_config().await;
        match &res {
            Ok(_) => {}
@@ -1,7 +1,7 @@
 {
  "package": {
    "productName": "nym-connect-android",
-    "version": "1.1.7"
+    "version": "1.1.9"
  },
  "build": {
    "distDir": "../dist",
@@ -1,94 +0,0 @@
-import React, { useEffect } from 'react';
-import { DateTime } from 'luxon';
-import { forage } from '@tauri-apps/tauri-forage';
-import { ConnectionStatusKind } from './types';
-import { useClientContext } from './context/main';
-import { DefaultLayout } from './layouts/DefaultLayout';
-import { ConnectedLayout } from './layouts/ConnectedLayout';
-import { HelpGuideLayout } from './layouts/HelpGuideLayout';
-import { useTauriEvents } from './utils';
-
-export const App: FCWithChildren = () => {
-  const context = useClientContext();
-  const [busy, setBusy] = React.useState<boolean>();
-  const [showInfoModal, setShowInfoModal] = React.useState(false);
-  useTauriEvents('help://clear-storage', (_event) => {
-    console.log('About to clear local storage...');
-    // clear local storage
-    try {
-      forage.clear()();
-      console.log('Local storage cleared');
-    } catch (e) {
-      console.error('Failed to clear local storage', e);
-    }
-  });
-
-  const handleConnectClick = React.useCallback(async () => {
-    const currentStatus = context.connectionStatus;
-    if (currentStatus === ConnectionStatusKind.connected || currentStatus === ConnectionStatusKind.disconnected) {
-      setBusy(true);
-
-      // eslint-disable-next-line default-case
-      switch (currentStatus) {
-        case ConnectionStatusKind.disconnected:
-          await context.startConnecting();
-          context.setConnectedSince(DateTime.now());
-          break;
-        case ConnectionStatusKind.connected:
-          await context.startDisconnecting();
-          context.setConnectedSince(undefined);
-          break;
-      }
-      setBusy(false);
-    }
-  }, [context.connectionStatus]);
-
-  useEffect(() => {
-    if (context.connectionStatus === ConnectionStatusKind.connected) setShowInfoModal(true);
-  }, [context.connectionStatus]);
-
-  if (context.showHelp) return <HelpGuideLayout />;
-
-  if (
-    context.connectionStatus === ConnectionStatusKind.disconnected ||
-    context.connectionStatus === ConnectionStatusKind.connecting
-  ) {
-    return (
-      <DefaultLayout
-        error={context.error}
-        clearError={context.clearError}
-        status={context.connectionStatus}
-        busy={busy}
-        onConnectClick={handleConnectClick}
-        services={context.services}
-      />
-    );
-  }
-
-  return (
-    <ConnectedLayout
-      showInfoModal={showInfoModal}
-      handleCloseInfoModal={() => setShowInfoModal(false)}
-      status={context.connectionStatus}
-      busy={busy}
-      onConnectClick={handleConnectClick}
-      ipAddress="127.0.0.1"
-      port={1080}
-      gatewayPerformance={context.gatewayPerformance}
-      connectedSince={context.connectedSince}
-      serviceProvider={context.serviceProvider}
-      stats={[
-        {
-          label: 'in:',
-          totalBytes: 1024,
-          rateBytesPerSecond: 1024 * 1024 * 1024 + 10,
-        },
-        {
-          label: 'out:',
-          totalBytes: 1024 * 1024 * 1024 * 1024 * 20,
-          rateBytesPerSecond: 1024 * 1024 + 10,
-        },
-      ]}
-    />
-  );
-};
@@ -6,8 +6,8 @@ export const AppVersion = () => {
  const { appVersion } = useClientContext();

  return (
-    <Box sx={{ display: 'grid', width: '100%', justifyContent: 'center' }}>
-      <Box fontSize="small" sx={{ mb: 4, color: 'grey.600' }}>
+    <Box sx={{ display: 'flex', width: '100%', justifyContent: 'center' }}>
+      <Box fontSize="small" sx={{ color: 'grey.600' }}>
        Version {appVersion}
      </Box>
    </Box>
@@ -1,20 +1,21 @@
 import React from 'react';
 import { Box } from '@mui/material';
+import { useLocation } from 'react-router-dom';
 import { CustomTitleBar } from './CustomTitleBar';
-import { AppVersion } from './AppVersion';

-export const AppWindowFrame: FCWithChildren = ({ children }) => (
-  <Box
-    sx={{
-      display: 'grid',
-      borderRadius: '12px',
-      gridTemplateRows: '40px 1fr 30px',
-      height: '100vh',
-      overflowY: 'hidden',
-    }}
-  >
-    <CustomTitleBar />
-    <Box style={{ padding: '16px' }}>{children}</Box>
-    <AppVersion />
-  </Box>
-);
+export const AppWindowFrame: FCWithChildren = ({ children }) => {
+  const location = useLocation();
+
+  return (
+    <Box
+      sx={{
+        display: 'grid',
+        gridTemplateRows: '40px 1fr',
+        height: '100vh',
+      }}
+    >
+      <CustomTitleBar path={location.pathname} />
+      <Box style={{ padding: '16px' }}>{children}</Box>
+    </Box>
+  );
+};
@@ -10,13 +10,13 @@ const getStatusFillColor = (status: ConnectionStatusKind, hover: boolean, isErro
  }

  switch (status) {
-    case ConnectionStatusKind.disconnected:
+    case 'disconnected':
      if (hover) {
        return '#FFFF33';
      }
      return '#FFE600';
-    case ConnectionStatusKind.connecting:
-    case ConnectionStatusKind.disconnecting:
+    case 'connecting':
+    case 'disconnecting':
      return '#FFE600';
    default:
      // connected
@@ -29,11 +29,11 @@ const getStatusFillColor = (status: ConnectionStatusKind, hover: boolean, isErro

 const getStatusText = (status: ConnectionStatusKind, hover: boolean): string => {
  switch (status) {
-    case ConnectionStatusKind.disconnected:
+    case 'disconnected':
      return 'Connect';
-    case ConnectionStatusKind.connecting:
+    case 'connecting':
      return 'Connecting';
-    case ConnectionStatusKind.disconnecting:
+    case 'disconnecting':
      return 'Connected';
    default:
      // connected
@@ -89,7 +89,7 @@ export const ConnectionButton: FCWithChildren<{
            <circle cx="131" cy="131" r="64" stroke={statusFillColor} strokeWidth="2" />
          </g>
          <circle cx="131" cy="131" r="73.5" stroke={statusFillColor} strokeOpacity="0.5" />
-          {status === ConnectionStatusKind.connected && hover ? (
+          {status === 'connected' && hover ? (
            <path
              d="M120.217 119.833C120.217 117.838 121.838 116.217 123.833 116.217H128.5V114H123.833C120.613 114 118 116.613 118 119.833C118 123.053 120.613 125.667 123.833 125.667H128.5V123.45H123.833C121.838 123.45 120.217 121.828 120.217 119.833ZM127 121H136.333V118.667H127V121ZM139.5 114H134.833V116.217H139.505C141.5 116.217 143.117 117.838 143.117 119.833C143.117 121.828 141.495 123.45 139.5 123.45H134.833V125.667H139.5C142.72 125.667 145.333 123.053 145.333 119.833C145.333 116.613 142.72 114 139.5 114Z"
              fill="white"
@@ -1,34 +1,67 @@
 import React from 'react';
 import { Box, CircularProgress, Tooltip, Typography } from '@mui/material';
 import { DateTime } from 'luxon';
+import { ErrorOutline, InfoOutlined } from '@mui/icons-material';
 import { ConnectionStatusKind, GatewayPerformance } from '../types';
 import { ServiceProvider } from '../types/directory';
-import { ServiceProviderInfo } from './ServiceProviderInfo';
+import { GatwayWarningInfo, ServiceProviderInfo } from './TooltipInfo';

-const FONT_SIZE = '10px';
+const FONT_SIZE = '14px';
 const FONT_WEIGHT = '600';
 const FONT_STYLE = 'normal';

 const ConnectionStatusContent: FCWithChildren<{
  status: ConnectionStatusKind;
-}> = ({ status }) => {
+  serviceProvider?: ServiceProvider;
+  gatewayError: boolean;
+}> = ({ status, serviceProvider, gatewayError }) => {
+  if (gatewayError) {
+    return (
+      <Tooltip title={serviceProvider ? <GatwayWarningInfo /> : undefined}>
+        <Box
+          display="flex"
+          alignItems="center"
+          gap={0.5}
+          justifyContent="center"
+          sx={{ cursor: 'pointer' }}
+          color="warning.main"
+        >
+          <ErrorOutline sx={{ fontSize: 14 }} />
+          <Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE} fontSize={FONT_SIZE} textAlign="center">
+            Gateway has issues
+          </Typography>
+        </Box>
+      </Tooltip>
+    );
+  }
  switch (status) {
-    case ConnectionStatusKind.connected:
+    case 'connected':
      return (
-        <Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE} fontSize="14px">
-          Connected to
+        <Tooltip title={serviceProvider ? <ServiceProviderInfo serviceProvider={serviceProvider} /> : undefined}>
+          <Box display="flex" alignItems="center" gap={0.5} justifyContent="center" sx={{ cursor: 'pointer' }}>
+            <InfoOutlined sx={{ fontSize: 14 }} />
+            <Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE} fontSize={FONT_SIZE} textAlign="center">
+              Connected to Nym Mixnet
+            </Typography>
+          </Box>
+        </Tooltip>
+      );
+    case 'disconnected':
+      return (
+        <Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE} textAlign="center" fontSize={FONT_SIZE}>
+          Connect to the mixnet
        </Typography>
      );
-    case ConnectionStatusKind.disconnecting:
+    case 'disconnecting':
      return (
        <Box display="flex" alignItems="center" justifyContent="center">
          <CircularProgress size={FONT_SIZE} color="inherit" />
-          <Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE} ml={1}>
+          <Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE}>
            Disconnecting...
          </Typography>
        </Box>
      );
-    case ConnectionStatusKind.connecting:
+    case 'connecting':
      return (
        <Box display="flex" alignItems="center" justifyContent="center">
          <CircularProgress size={FONT_SIZE} color="inherit" />
@@ -37,20 +70,7 @@ const ConnectionStatusContent: FCWithChildren<{
          </Typography>
        </Box>
      );
-    case ConnectionStatusKind.disconnected:
-      return (
-        <Typography
-          fontWeight={FONT_WEIGHT}
-          fontStyle={FONT_STYLE}
-          ml={1}
-          textTransform="uppercase"
-          textAlign="center"
-          fontSize={FONT_SIZE}
-          sx={{ wordSpacing: 3, letterSpacing: 2 }}
-        >
-          You are not protected
-        </Typography>
-      );
+
    default:
      return null;
  }
@@ -62,29 +82,15 @@ export const ConnectionStatus: FCWithChildren<{
  connectedSince?: DateTime;
  serviceProvider?: ServiceProvider;
 }> = ({ status, serviceProvider, gatewayPerformance }) => {
-  const color =
-    status === ConnectionStatusKind.connected || status === ConnectionStatusKind.disconnecting
-      ? '#21D072'
-      : 'warning.main';
+  const color = status === 'connected' || status === 'disconnecting' ? '#21D072' : 'white';

  return (
-    <>
-      <Box color={color} fontSize={FONT_SIZE} sx={{ mb: 1 }}>
-        {status === ConnectionStatusKind.connected && gatewayPerformance !== 'Good' ? (
-          <Typography fontWeight={FONT_WEIGHT} fontStyle={FONT_STYLE} textAlign="left" color="primary">
-            Gateway has issues
-          </Typography>
-        ) : (
-          <ConnectionStatusContent status={status} />
-        )}
-      </Box>
-      {serviceProvider ? (
-        <Tooltip title={<ServiceProviderInfo serviceProvider={serviceProvider} />}>
-          <Box sx={{ cursor: 'pointer' }}>
-            {serviceProvider && <Typography>{serviceProvider.description}</Typography>}
-          </Box>
-        </Tooltip>
-      ) : null}
-    </>
+    <Box color={color} sx={{ mb: 2 }}>
+      <ConnectionStatusContent
+        status={status}
+        serviceProvider={serviceProvider}
+        gatewayError={gatewayPerformance !== 'Good'}
+      />
+    </Box>
  );
 };
@@ -1,8 +1,8 @@
 import React from 'react';
-import { ArrowBack, HelpOutline } from '@mui/icons-material';
-import { Box, IconButton } from '@mui/material';
+import { ArrowBack, Menu } from '@mui/icons-material';
+import { Box, IconButton, Typography } from '@mui/material';
 import { NymWordmark } from '@nymproject/react/logo/NymWordmark';
-import { useClientContext } from 'src/context/main';
+import { useNavigate } from 'react-router-dom';

 const customTitleBarStyles = {
  titlebar: {
@@ -19,25 +19,36 @@ const customTitleBarStyles = {

 const CustomButton = ({ Icon, onClick }: { Icon: React.JSXElementConstructor<any>; onClick: () => void }) => (
  <IconButton size="small" onClick={onClick} sx={{ padding: 0 }}>
-    <Icon style={{ fontSize: 16 }} />
+    <Icon style={{ fontSize: 24 }} />
  </IconButton>
 );

-export const CustomTitleBar = () => {
-  const { showHelp, handleShowHelp } = useClientContext();
-  return (
-    <Box data-tauri-drag-region style={customTitleBarStyles.titlebar}>
-      {/* set width to keep logo centered */}
-      <Box sx={{ width: '40px' }}>
-        <CustomButton
-          Icon={!showHelp ? HelpOutline : ArrowBack}
-          onClick={() => {
-            handleShowHelp();
-          }}
-        />
-      </Box>
-
-      <NymWordmark width={36} />
-    </Box>
-  );
+const MenuIcon = () => {
+  const navigate = useNavigate();
+  return <CustomButton Icon={Menu} onClick={() => navigate('/menu')} />;
 };
+
+const ArrowBackIcon = () => {
+  const navigate = useNavigate();
+  return <CustomButton Icon={ArrowBack} onClick={() => navigate(-1)} />;
+};
+
+const getTitleIcon = (path: string) => {
+  if (path !== '/') {
+    const title = path.split('/').slice(-1);
+    return (
+      <Typography textTransform="capitalize" fontWeight={700}>
+        {title}
+      </Typography>
+    );
+  }
+  return <NymWordmark width={36} />;
+};
+
+export const CustomTitleBar = ({ path = '/' }: { path?: string }) => (
+  <Box data-tauri-drag-region style={customTitleBarStyles.titlebar}>
+    {/* set width to keep logo centered */}
+    <Box sx={{ width: '40px' }}>{path === '/' ? <MenuIcon /> : <ArrowBackIcon />}</Box>
+    {getTitleIcon(path)}
+  </Box>
+);
@@ -0,0 +1,13 @@
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+
+export const ExperimentalWarning = () => (
+  <Box sx={{ color: 'grey.600' }}>
+    <Typography fontSize="12px" textAlign="center">
+      This is experimental software.
+    </Typography>
+    <Typography fontSize="12px" textAlign="center">
+      Do not rely on it for strong anonymity (yet).
+    </Typography>
+  </Box>
+);
@@ -6,24 +6,26 @@ import { StepIndicator } from './HelpPageStepIndicator';

 export const HelpPage = ({
  step,
+  totalSteps,
  description,
  img,
  onNext,
  onPrev,
 }: {
  step: number;
+  totalSteps: number;
  description: string;
  img: any;
  onNext?: () => void;
  onPrev?: () => void;
 }) => (
  <Stack justifyContent="space-between" sx={{ height: '100%' }}>
-    <Stack gap={3}>
+    <Stack gap={2}>
      <StepIndicator step={step} />
      <Typography variant="body2" color="white" fontWeight="bold">
-        How to connect guide {step}/4
+        How to connect guide {step}/{totalSteps}
      </Typography>
-      <Typography variant="body2" sx={{ color: 'grey.400' }}>
+      <Typography variant="body2" sx={{ color: 'grey.400' }} textAlign="left">
        {description}
      </Typography>
      <HelpImage img={img} imageDescription="select a provider" />
@@ -1,5 +1,5 @@
 import React from 'react';

-export const HelpImage = ({ img, imageDescription }: { img: any; imageDescription: string }) => (
-  <img src={img} alt={imageDescription} />
+export const HelpImage = ({ img, imageDescription }: { img: string; imageDescription: string }) => (
+  <img src={img} alt={imageDescription} width="100%" />
 );
@@ -1,15 +1,14 @@
-import { Box } from '@mui/material';
 import React from 'react';
+import { Box } from '@mui/material';

 const Step = ({ highlight }: { highlight: boolean }) => (
-  <Box sx={{ width: '48px', height: '1px', bgcolor: highlight ? 'nym.highlight' : 'grey.600' }} />
+  <Box sx={{ width: '65px', height: '1px', bgcolor: highlight ? 'nym.highlight' : 'grey.600' }} />
 );

 export const StepIndicator = ({ step }: { step: number }) => (
-  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-evenly' }}>
+  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
    <Step highlight />
    <Step highlight={step >= 2} />
    <Step highlight={step >= 3} />
-    <Step highlight={step >= 4} />
  </Box>
 );
@@ -18,7 +18,7 @@ const styles = {
 const ModalTitle = ({ title, withCloseIcon }: { title: string; withCloseIcon: boolean }) => (
  <Box textAlign="center" mt={withCloseIcon ? -2 : 0}>
    <ErrorOutline sx={{ color: 'warning.main' }} />
-    <Typography variant="body2" textAlign="center" sx={{ color: 'warning.main' }}>
+    <Typography variant="body2" textAlign="center" sx={{ color: 'warning.main', my: 1 }}>
      {title}
    </Typography>
  </Box>
@@ -27,7 +27,7 @@ const ModalTitle = ({ title, withCloseIcon }: { title: string; withCloseIcon: bo
 const ModalBody = ({ description, children }: { description: string; children?: React.ReactElement }) => (
  <Box textAlign="center" mt={1}>
    {children}
-    <Typography fontSize="small" sx={{ mt: 1, overflowWrap: 'anywhere', color: 'grey.300' }}>
+    <Typography fontSize="small" sx={{ mt: 1, overflowWrap: 'anywhere', color: 'grey.400' }}>
      {description}
    </Typography>
  </Box>
@@ -1,8 +1,11 @@
 import React from 'react';
-import { Box, Button, Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 import { InfoModal } from './InfoModal';
 import { CopyToClipboard } from './CopyToClipboard';

+const FONT_SIZE = '12px';
+const FONT_COLOR = 'grey.400';
+
 export const IpAddressAndPortModal = ({
  show,
  ipAddress,
@@ -16,12 +19,15 @@ export const IpAddressAndPortModal = ({
 }) => (
  <InfoModal
    show={show}
-    title="Almost there"
-    description="Copy these values to the proxy settings in your application"
-    Action={<Button onClick={onClose}>Done</Button>}
+    title="You are half way there"
+    description="Check NymConnect menu for supported apps"
+    onClose={onClose}
  >
    <Box sx={{ mt: 1 }}>
-      <Typography fontSize="14px" sx={{ color: 'grey.600' }}>
+      <Typography fontSize={FONT_SIZE} color={FONT_COLOR} sx={{ my: 2 }}>
+        Paste below values in the proxy settings of your app
+      </Typography>
+      <Typography fontSize={FONT_SIZE} sx={{ color: 'grey.600' }}>
        Socks5 address
      </Typography>
      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -29,7 +35,7 @@ export const IpAddressAndPortModal = ({
        <CopyToClipboard text={ipAddress} iconButton light />
      </Box>

-      <Typography fontSize="14px" sx={{ color: 'grey.600', mt: 2 }}>
+      <Typography fontSize={FONT_SIZE} sx={{ color: 'grey.600', mt: 2 }}>
        Port
      </Typography>
      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
@@ -1,97 +0,0 @@
-import React, { FC, useEffect, useRef, useState } from 'react';
-import type { UnlistenFn } from '@tauri-apps/api/event';
-import { listen } from '@tauri-apps/api/event';
-import { Box, Paper, Chip, Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material';
-
-// see https://github.com/tauri-apps/tauri-plugin-log/blob/dev/webview-src/index.ts#L4
-enum LogLevel {
-  Trace = 1,
-  Debug,
-  Info,
-  Warn,
-  Error,
-}
-
-const getLogLevelName = (value: LogLevel) => {
-  switch (value) {
-    case LogLevel.Trace:
-      return 'Trace';
-    case LogLevel.Debug:
-      return 'Debug';
-    case LogLevel.Info:
-      return 'Info';
-    case LogLevel.Warn:
-      return 'Warn';
-    case LogLevel.Error:
-      return 'Error';
-    default:
-      return 'Unknown';
-  }
-};
-
-// see https://github.com/tauri-apps/tauri-plugin-log/blob/dev/webview-src/index.ts#L147
-interface RecordPayload {
-  level: LogLevel;
-  message: string;
-}
-
-export const LogViewer: FC = () => {
-  const unlisten = useRef<UnlistenFn>();
-  const messages = useRef<RecordPayload[]>([]);
-  const [messageCount, setMessageCount] = useState(0);
-
-  useEffect(() => {
-    listen('log://log', (event) => {
-      console.log(event.payload);
-      const payload = event.payload as RecordPayload;
-      messages.current.unshift(payload);
-      setMessageCount((prev) => prev + 1);
-    }).then((fn) => {
-      unlisten.current = fn;
-    });
-
-    return () => {
-      if (unlisten.current) {
-        unlisten.current();
-      }
-    };
-  }, []);
-
-  return (
-    <Box sx={{ height: '100vh', width: '100vw', display: 'grid', gridTemplateRows: '1fr auto' }}>
-      <Box sx={{ overflowY: 'hidden', p: 2 }}>
-        <TableContainer component={Paper} sx={{ maxHeight: '100%' }}>
-          <Table size="small" stickyHeader>
-            <TableHead>
-              <TableRow>
-                <TableCell>Severity</TableCell>
-                <TableCell>Log message</TableCell>
-              </TableRow>
-            </TableHead>
-            <TableBody>
-              {messages.current.map((m) => (
-                <TableRow sx={{ '&:last-child td, &:last-child th': { border: 0 } }}>
-                  <TableCell sx={{ padding: 1 }}>
-                    <Chip label={getLogLevelName(m.level)} variant="outlined" size="small" />
-                  </TableCell>
-                  <TableCell sx={{ padding: 1, fontFamily: 'Monospace' }}>{m.message}</TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </TableContainer>
-      </Box>
-      <Box
-        sx={{
-          p: 1,
-          textAlign: 'right',
-          fontSize: 'small',
-          borderTop: '2px solid',
-          borderTopColor: (theme) => theme.palette.divider,
-        }}
-      >
-        {messageCount} log entries since opening this window
-      </Box>
-    </Box>
-  );
-};
@@ -0,0 +1,132 @@
+import React from 'react';
+import { ConnectionStatusKind } from 'src/types';
+
+const getStatusFillColor = (status: ConnectionStatusKind, hover: boolean, isError: boolean): string => {
+  if (isError && hover) {
+    return '#21D072';
+  }
+  if (isError) {
+    return '#40475C';
+  }
+
+  switch (status) {
+    case 'disconnected':
+      if (hover) {
+        return '#FFF';
+      }
+      return '#BBB';
+    case 'connecting':
+      return '#FFF';
+    case 'disconnecting':
+      return '#FFF';
+    default:
+      // connected
+      if (hover) {
+        return '#E43E3E';
+      }
+      return '#21D072';
+  }
+};
+
+export const PowerButton: FCWithChildren<{
+  onClick?: (status: ConnectionStatusKind) => void;
+  isError?: boolean;
+  disabled?: boolean;
+  status: ConnectionStatusKind;
+  busy?: boolean;
+}> = ({ onClick, disabled, status, isError }) => {
+  const [hover, setHover] = React.useState<boolean>(false);
+
+  const handleClick = () => {
+    if (disabled === true) {
+      return;
+    }
+    if (onClick) {
+      onClick(status);
+    }
+  };
+
+  const statusFillColor = getStatusFillColor(status, hover, Boolean(isError));
+
+  return (
+    <svg
+      width="190"
+      height="190"
+      viewBox="0 0 200 200"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      onClick={handleClick}
+      style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
+      onMouseEnter={() => !disabled && setHover(true)}
+      onMouseLeave={() => !disabled && setHover(false)}
+    >
+      <g transform="translate(-30, -25) ">
+        <circle cx={131} cy={131} r={70} strokeWidth={2} stroke={statusFillColor} filter="url(#blur)" opacity="0.6" />
+        <circle cx={131} cy={131} r={22} strokeWidth={1} stroke={statusFillColor} filter="url(#blur)" opacity="0.3" />
+        <circle opacity={0.6} cx={131} cy={131} r={68.5} stroke={statusFillColor} />
+        <g filter="url(#filter1_d_944_9033)">
+          <circle cx={131} cy={131} r={64} fill="url(#paint1_radial_944_9033)" />
+          <circle cx={131} cy={131} r={63} stroke={statusFillColor} strokeWidth={2} />
+        </g>
+        <g opacity={0.5} filter="url(#filter2_f_944_9033)">
+          <g clipPath="url(#clip0_944_9033)">
+            <path
+              d="M131 113C129.9 113 129 113.9 129 115V131C129 132.1 129.9 133 131 133C132.1 133 133 132.1 133 131V115C133 113.9 132.1 113 131 113ZM141.28 118.72C140.5 119.5 140.52 120.72 141.26 121.5C143.52 123.9 144.92 127.1 145 130.64C145.18 138.3 138.84 144.9 131.18 144.98C123.36 145.1 117 138.8 117 131C117 127.32 118.42 123.98 120.74 121.48C121.48 120.7 121.48 119.48 120.72 118.72C119.92 117.92 118.62 117.94 117.86 118.76C114.96 121.84 113.14 125.94 113 130.48C112.72 140.24 120.66 148.68 130.42 148.98C140.62 149.3 149 141.12 149 130.98C149 126.24 147.16 121.96 144.16 118.76C143.4 117.94 142.08 117.92 141.28 118.72Z"
+              stroke={statusFillColor}
+            />
+          </g>
+        </g>
+        <g clipPath="url(#clip1_944_9033)">
+          <path
+            d="M131 113C129.9 113 129 113.9 129 115V131C129 132.1 129.9 133 131 133C132.1 133 133 132.1 133 131V115C133 113.9 132.1 113 131 113ZM141.28 118.72C140.5 119.5 140.52 120.72 141.26 121.5C143.52 123.9 144.92 127.1 145 130.64C145.18 138.3 138.84 144.9 131.18 144.98C123.36 145.1 117 138.8 117 131C117 127.32 118.42 123.98 120.74 121.48C121.48 120.7 121.48 119.48 120.72 118.72C119.92 117.92 118.62 117.94 117.86 118.76C114.96 121.84 113.14 125.94 113 130.48C112.72 140.24 120.66 148.68 130.42 148.98C140.62 149.3 149 141.12 149 130.98C149 126.24 147.16 121.96 144.16 118.76C143.4 117.94 142.08 117.92 141.28 118.72Z"
+            fill={statusFillColor}
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter0_f_944_9033"
+            x={0}
+            y={0}
+            width={240}
+            height={240}
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation={40} result="effect1_foregroundBlur_944_9033" />
+          </filter>
+          <filter
+            id="filter1_d_944_9033"
+            x={52}
+            y={58}
+            width={158}
+            height={158}
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_944_9033" />
+            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_944_9033" result="shape" />
+          </filter>
+          <filter
+            id="filter2_f_944_9033"
+            x={97}
+            y={97}
+            width={68}
+            height={68}
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity={0} result="BackgroundImageFix" />
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+            <feGaussianBlur stdDeviation={5} result="effect1_foregroundBlur_944_9033" />
+          </filter>
+          <filter id="blur">
+            <feGaussianBlur stdDeviation="5" />
+          </filter>
+        </defs>
+      </g>
+    </svg>
+  );
+};
@@ -0,0 +1,124 @@
+import React, { useCallback } from 'react';
+import { ConnectionStatusKind } from 'src/types';
+import './power-button.css';
+
+const getStatusFillColor = (status: ConnectionStatusKind, hover: boolean, isError: boolean): string => {
+  if (isError && hover) {
+    return '#21D072';
+  }
+  if (isError) {
+    return '#40475C';
+  }
+
+  switch (status) {
+    case 'disconnected':
+      if (hover) {
+        return '#FFF';
+      }
+      return '#BBB';
+    case 'connecting':
+      return '#FFF';
+    case 'disconnecting':
+      return '#FFF';
+    default:
+      // connected
+      if (hover) {
+        return '#E43E3E';
+      }
+      return '#21D072';
+  }
+};
+
+export const PowerButton: FCWithChildren<{
+  onClick?: (status: ConnectionStatusKind) => void;
+  isError?: boolean;
+  disabled?: boolean;
+  status: ConnectionStatusKind;
+  busy?: boolean;
+}> = ({ onClick, disabled, status, isError }) => {
+  const [hover, setHover] = React.useState<boolean>(false);
+
+  const handleClick = () => {
+    if (disabled === true) {
+      return;
+    }
+    if (onClick) {
+      onClick(status);
+    }
+  };
+
+  const statusFillColor = getStatusFillColor(status, hover, Boolean(isError));
+
+  const getClassName = useCallback(() => {
+    if (hover) {
+      switch (status) {
+        case 'disconnected':
+          return 'expand';
+        default:
+          return 'contract';
+      }
+    }
+    if (!hover) {
+      switch (status) {
+        case 'connected':
+          return 'expand';
+        default:
+          return 'contract';
+      }
+    }
+    return 'contract';
+  }, [status, hover]);
+
+  const buttonPulse = () => {
+    if (status === 'connecting' || status === 'disconnecting') return 'pulse';
+    return undefined;
+  };
+
+  return (
+    <svg
+      width="190"
+      height="190"
+      viewBox="0 0 200 200"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      onClick={handleClick}
+      style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}
+      onMouseEnter={() => !disabled && setHover(true)}
+      onMouseLeave={() => !disabled && setHover(false)}
+    >
+      <g transform="translate(-30, -25) ">
+        <circle cx={131} cy={131} r={75} strokeWidth={4} stroke={statusFillColor} filter="url(#blur)" opacity="0.6" />
+        <circle cx={131} cy={131} r={25} strokeWidth={2} stroke={statusFillColor} filter="url(#blur)" opacity="0.5" />
+        <g id="Button power">
+          <circle cx="131" cy="131" r="68.5" stroke={statusFillColor} strokeWidth="0.5" />
+          <circle id="ring-one" className={getClassName()} cx="131" cy="131" r="73" stroke={statusFillColor} />
+          <circle id="ring-two" className={getClassName()} cx="131" cy="131" r="77" stroke={statusFillColor} />
+          <circle id="ring-three" className={getClassName()} cx="131" cy="131" r="81" stroke={statusFillColor} />
+          <circle id="ring-four" className={getClassName()} cx="131" cy="131" r="85" stroke={statusFillColor} />
+          <g id="button bg">
+            <circle cx="131" cy="131" r="63" stroke={statusFillColor} strokeWidth="3" className={buttonPulse()} />
+          </g>
+          <g id="Power icon">
+            <g id="Icon">
+              <g id="Group 672_2">
+                <g id="power_settings_new_black_24dp (1) 1_2" clipPath="url(#clip1_944_8739)">
+                  <path
+                    id="Vector_2"
+                    d="M131 113C129.9 113 129 113.9 129 115V131C129 132.1 129.9 133 131 133C132.1 133 133 132.1 133 131V115C133 113.9 132.1 113 131 113ZM141.28 118.72C140.5 119.5 140.52 120.72 141.26 121.5C143.52 123.9 144.92 127.1 145 130.64C145.18 138.3 138.84 144.9 131.18 144.98C123.36 145.1 117 138.8 117 131C117 127.32 118.42 123.98 120.74 121.48C121.48 120.7 121.48 119.48 120.72 118.72C119.92 117.92 118.62 117.94 117.86 118.76C114.96 121.84 113.14 125.94 113 130.48C112.72 140.24 120.66 148.68 130.42 148.98C140.62 149.3 149 141.12 149 130.98C149 126.24 147.16 121.96 144.16 118.76C143.4 117.94 142.08 117.92 141.28 118.72Z"
+                    fill={statusFillColor}
+                    className={buttonPulse()}
+                  />
+                </g>
+              </g>
+            </g>
+          </g>
+        </g>
+        <defs>
+          <filter id="blur" width="200%" height="200%" x="-50%" y="-50%">
+            <feGaussianBlur stdDeviation="12.5" />
+          </filter>
+        </defs>
+      </g>
+    </svg>
+  );
+};
@@ -0,0 +1,72 @@
+#ring-expand {
+  animation-name: rings-expand;
+  animation-duration: 0.4s;
+  animation-timing-function: ease-in-out;
+  animation-play-state: paused;
+}
+
+#ring-one.expand {
+  opacity: 0.3;
+  transition: opacity 0.1s ease-in-out;
+}
+
+#ring-two.expand {
+  opacity: 0.2;
+  transition: opacity 0.2s ease-in-out;
+}
+
+#ring-three.expand {
+  opacity: 0.1;
+  transition: opacity 0.3s ease-in-out;
+}
+
+#ring-four.expand {
+  opacity: 0.05;
+  transition: opacity 0.4s ease-in-out;
+}
+
+#ring-one.contract {
+  opacity: 0;
+  transition: opacity 0.4s;
+  transition-delay: 0.1s;
+}
+
+#ring-two.contract {
+  opacity: 0;
+  transition: opacity 0.3s;
+  transition-delay: 0.1s;
+}
+
+#ring-three.contract {
+  opacity: 0;
+  transition: opacity 0.1s;
+  transition-delay: 0.1s;
+}
+
+#ring-four.contract {
+  opacity: 0;
+  transition: opacity 0.1s;
+  transition-delay: 0.1s;
+}
+
+circle,
+path {
+  transition: stroke 0.5s, fill 0.5s;
+}
+
+.pulse {
+  animation-name: pulse;
+  animation-duration: 0.5s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+@keyframes pulse {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0.3;
+  }
+}
@@ -7,14 +7,23 @@ export const ServiceProviderInfo = ({ serviceProvider }: { serviceProvider: Serv
    <Typography variant="body2" fontWeight="bold">
      Connection info
    </Typography>
-    <Typography variant="caption">{serviceProvider.description}</Typography>
    <Divider />
    <Typography variant="caption" fontWeight="bold">
      Gateway <Typography variant="caption">{serviceProvider.gateway}</Typography>
    </Typography>
    <Divider />
    <Typography variant="caption" fontWeight="bold">
-      Provider <Typography variant="caption">{serviceProvider.address.slice(0, 35)}...</Typography>
+      Service provider <Typography variant="caption">{serviceProvider.address.slice(0, 35)}...</Typography>
    </Typography>
  </Stack>
 );
+
+export const GatwayWarningInfo = () => (
+  <Stack gap={1} sx={{ wordWrap: 'break-word', maxWidth: 150, p: 1 }}>
+    <Typography variant="body2" fontWeight="bold" color="warning.main">
+      Connection issue
+    </Typography>
+    <Divider />
+    <Typography variant="caption">Try disconnecting and connecting again</Typography>
+  </Stack>
+);
@@ -1,17 +1,12 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, useRef } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { DateTime } from 'luxon';
 import { invoke } from '@tauri-apps/api';
-import type { UnlistenFn } from '@tauri-apps/api/event';
-import { listen } from '@tauri-apps/api/event';
-import { forage } from '@tauri-apps/tauri-forage';
 import { Error } from 'src/types/error';
-import { TauriEvent } from 'src/types/event';
 import { getVersion } from '@tauri-apps/api/app';
+import { useEvents } from 'src/hooks/events';
 import { ConnectionStatusKind, GatewayPerformance } from '../types';
 import { ConnectionStatsItem } from '../components/ConnectionStats';
-import { ServiceProvider, Services } from '../types/directory';
-
-const TAURI_EVENT_STATUS_CHANGED = 'app:connection-status-changed';
+import { ServiceProvider } from '../types/directory';

 type ModeType = 'light' | 'dark';

@@ -21,19 +16,17 @@ export type TClientContext = {
  connectionStatus: ConnectionStatusKind;
  connectionStats?: ConnectionStatsItem[];
  connectedSince?: DateTime;
-  services?: Services;
-  serviceProvider?: ServiceProvider;
-  showHelp: boolean;
  error?: Error;
  gatewayPerformance: GatewayPerformance;
+  selectedProvider?: ServiceProvider;
+  showInfoModal: boolean;
  setMode: (mode: ModeType) => void;
  clearError: () => void;
-  handleShowHelp: () => void;
  setConnectionStatus: (connectionStatus: ConnectionStatusKind) => void;
  setConnectionStats: (connectionStats: ConnectionStatsItem[] | undefined) => void;
  setConnectedSince: (connectedSince: DateTime | undefined) => void;
-  setServiceProvider: (serviceProvider?: ServiceProvider) => void;
-
+  setShowInfoModal: (show: boolean) => void;
+  setRandomSerivceProvider: () => void;
  startConnecting: () => Promise<void>;
  startDisconnecting: () => Promise<void>;
 };
@@ -42,28 +35,38 @@ export const ClientContext = createContext({} as TClientContext);

 export const ClientContextProvider: FCWithChildren = ({ children }) => {
  const [mode, setMode] = useState<ModeType>('dark');
-  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatusKind>(ConnectionStatusKind.disconnected);
+  const [connectionStatus, setConnectionStatus] = useState<ConnectionStatusKind>(ConnectionStatusKind.connected);
  const [connectionStats, setConnectionStats] = useState<ConnectionStatsItem[]>();
  const [connectedSince, setConnectedSince] = useState<DateTime>();
-  const [services, setServices] = React.useState<Services>([]);
-  const [serviceProvider, setRawServiceProvider] = React.useState<ServiceProvider>();
-  const [showHelp, setShowHelp] = useState(false);
+  const [selectedProvider, setSelectedProvider] = React.useState<ServiceProvider>();
+  const [serviceProviders, setServiceProviders] = React.useState<ServiceProvider[]>();
  const [error, setError] = useState<Error>();
  const [appVersion, setAppVersion] = useState<string>();
  const [gatewayPerformance, setGatewayPerformance] = useState<GatewayPerformance>('Good');
+  const [showInfoModal, setShowInfoModal] = useState(false);

  const getAppVersion = async () => {
    const version = await getVersion();
-    setAppVersion(version);
+    return version;
  };

-  const timerId = useRef<NodeJS.Timeout>();
+  const initialiseApp = async () => {
+    const services = await invoke('get_services');
+    const AppVersion = await getAppVersion();
+    console.log(services);
+
+    setAppVersion(AppVersion);
+    setServiceProviders(services as ServiceProvider[]);
+  };
+
+  useEvents({
+    onError: (e) => setError(e),
+    onGatewayPerformanceChange: (performance) => setGatewayPerformance(performance),
+    onStatusChange: (status) => setConnectionStatus(status),
+  });

  useEffect(() => {
-    invoke('get_services').then((result) => {
-      setServices(result as Services);
-    });
-    getAppVersion();
+    initialiseApp();
  }, []);

  useEffect(() => {
@@ -74,49 +77,6 @@ export const ClientContextProvider: FCWithChildren = ({ children }) => {
    })();
  }, []);

-  useEffect(() => {
-    const unlisten: UnlistenFn[] = [];
-
-    // TODO: fix typings
-    listen(TAURI_EVENT_STATUS_CHANGED, (event) => {
-      const { status } = event.payload as any;
-      console.log(TAURI_EVENT_STATUS_CHANGED, { status, event });
-      setConnectionStatus(status);
-    })
-      .then((result) => {
-        unlisten.push(result);
-      })
-      .catch((e) => console.log(e));
-
-    listen('socks5-event', (e: TauriEvent) => {
-      console.log(e);
-
-      setError(e.payload);
-    }).then((result) => {
-      unlisten.push(result);
-    });
-
-    listen('socks5-status-event', (e: TauriEvent) => {
-      if (e.payload.message.includes('slow')) {
-        setGatewayPerformance('Poor');
-
-        if (timerId.current) {
-          clearTimeout(timerId.current);
-        }
-
-        timerId.current = setTimeout(() => {
-          setGatewayPerformance('Good');
-        }, 10000);
-      }
-    }).then((result) => {
-      unlisten.push(result);
-    });
-
-    return () => {
-      unlisten.forEach((unsubscribe) => unsubscribe());
-    };
-  }, []);
-
  const startConnecting = useCallback(async () => {
    try {
      await invoke('start_connecting');
@@ -129,64 +89,33 @@ export const ClientContextProvider: FCWithChildren = ({ children }) => {
  const startDisconnecting = useCallback(async () => {
    try {
      await invoke('start_disconnecting');
-      setGatewayPerformance('Good');
    } catch (e) {
      console.log(e);
    }
  }, []);

-  const setSpInStorage = async (sp: ServiceProvider) => {
-    await forage.setItem({
-      key: 'nym-connect-sp',
-      value: sp,
-    } as any)();
-  };
-
-  const setServiceProvider = useCallback(async (newServiceProvider?: ServiceProvider) => {
-    await invoke('set_gateway', { gateway: newServiceProvider?.gateway });
-    await invoke('set_service_provider', { serviceProvider: newServiceProvider?.address });
+  const setServiceProvider = async (newServiceProvider?: ServiceProvider) => {
    if (newServiceProvider) {
-      await setSpInStorage(newServiceProvider);
-    }
-    setRawServiceProvider(newServiceProvider);
-  }, []);
-
-  const getSpFromStorage = async () => {
-    try {
-      const spFromStorage = await forage.getItem({ key: 'nym-connect-sp' })();
-      if (spFromStorage) {
-        setRawServiceProvider(spFromStorage);
-        setServiceProvider(spFromStorage);
-      }
-    } catch (e) {
-      console.warn(e);
+      await invoke('set_gateway', { gateway: newServiceProvider.gateway });
+      await invoke('set_service_provider', { serviceProvider: newServiceProvider.address });
    }
  };

-  const handleShowHelp = () => setShowHelp((show) => !show);
+  const getRandomSPFromList = (services: ServiceProvider[]) => {
+    const randomSelection = services[Math.floor(Math.random() * services.length)];
+    return randomSelection;
+  };
+
+  const setRandomSerivceProvider = async () => {
+    if (serviceProviders) {
+      const randomServiceProvider = getRandomSPFromList(serviceProviders);
+      await setServiceProvider(randomServiceProvider);
+      setSelectedProvider(randomServiceProvider);
+    }
+  };

  const clearError = () => setError(undefined);

-  useEffect(() => {
-    const validityCheck = async () => {
-      if (services.length > 0 && serviceProvider) {
-        const isValid = services.some(({ items }) => items.some(({ id }) => id === serviceProvider.id));
-        if (!isValid) {
-          console.warn('invalid SP, cleaning local storage');
-          await forage.removeItem({
-            key: 'nym-connect-sp',
-          })();
-          setRawServiceProvider(undefined);
-        }
-      }
-    };
-    validityCheck();
-  }, [services, serviceProvider]);
-
-  useEffect(() => {
-    getSpFromStorage();
-  }, []);
-
  const contextValue = useMemo(
    () => ({
      mode,
@@ -197,31 +126,28 @@ export const ClientContextProvider: FCWithChildren = ({ children }) => {
      connectionStatus,
      setConnectionStatus,
      connectionStats,
+      showInfoModal,
      setConnectionStats,
+      selectedProvider,
      connectedSince,
      setConnectedSince,
+      setRandomSerivceProvider,
      startConnecting,
      startDisconnecting,
-      services,
-      serviceProvider,
-      setServiceProvider,
-      showHelp,
-      handleShowHelp,
      gatewayPerformance,
+      setShowInfoModal,
    }),
    [
-      appVersion,
      mode,
      appVersion,
      error,
+      showInfoModal,
      connectedSince,
-      showHelp,
      connectionStatus,
      connectionStats,
      connectedSince,
-      services,
-      serviceProvider,
      gatewayPerformance,
+      selectedProvider,
    ],
  );

@@ -6,19 +6,18 @@ const mockValues: TClientContext = {
  appVersion: 'v1.x.x',
  mode: 'dark',
  connectionStatus: ConnectionStatusKind.disconnected,
-  services: [],
-  showHelp: false,
-  serviceProvider: { id: '1', description: 'Keybase service provider', gateway: 'abc123', address: '123abc' },
+  selectedProvider: { id: '1', description: 'Keybase service provider', gateway: 'abc123', address: '123abc' },
  gatewayPerformance: 'Good',
+  showInfoModal: false,
+  setShowInfoModal: () => {},
  setMode: () => {},
  clearError: () => {},
-  handleShowHelp: () => {},
  setConnectedSince: () => {},
  setConnectionStats: () => {},
  setConnectionStatus: () => {},
-  setServiceProvider: () => {},
  startConnecting: async () => {},
  startDisconnecting: async () => {},
+  setRandomSerivceProvider: () => {},
 };

 export const MockProvider: FCWithChildren<{
@@ -0,0 +1,68 @@
+import { useEffect, useRef } from 'react';
+import { listen, UnlistenFn } from '@tauri-apps/api/event';
+import { ConnectionStatusKind, GatewayPerformance } from 'src/types';
+import { Error } from 'src/types/error';
+import { TauriEvent } from 'src/types/event';
+
+const TAURI_EVENT_STATUS_CHANGED = 'app:connection-status-changed';
+
+export const useEvents = ({
+  onError,
+  onStatusChange,
+  onGatewayPerformanceChange,
+}: {
+  onError: (error: Error) => void;
+  onStatusChange: (status: ConnectionStatusKind) => void;
+  onGatewayPerformanceChange: (status: GatewayPerformance) => void;
+}) => {
+  const timerId = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    const unlisten: UnlistenFn[] = [];
+
+    // TODO: fix typings
+    listen(TAURI_EVENT_STATUS_CHANGED, (event) => {
+      const { status } = event.payload as any;
+      console.log(TAURI_EVENT_STATUS_CHANGED, { status, event });
+      onStatusChange(status);
+    })
+      .then((result) => {
+        unlisten.push(result);
+      })
+      .catch((e) => console.log(e));
+
+    listen('socks5-event', (e: TauriEvent) => {
+      console.log(e);
+      onError(e.payload);
+    }).then((result) => {
+      unlisten.push(result);
+    });
+
+    listen('socks5-status-event', (e: TauriEvent) => {
+      if (e.payload.message.includes('slow')) {
+        onGatewayPerformanceChange('Poor');
+
+        if (timerId?.current) {
+          clearTimeout(timerId.current);
+        }
+
+        timerId.current = setTimeout(() => {
+          onGatewayPerformanceChange('Good');
+        }, 10000);
+      }
+    }).then((result) => {
+      unlisten.push(result);
+    });
+
+    listen('socks5-connection-fail-event', (e: TauriEvent) => {
+      onError({ title: 'Connection failed', message: `${e.payload.message} - Please disconnect and reconnect.` });
+      onGatewayPerformanceChange('Poor');
+    }).then((result) => {
+      unlisten.push(result);
+    });
+
+    return () => {
+      unlisten.forEach((unsubscribe) => unsubscribe());
+    };
+  }, []);
+};
@@ -1,11 +1,13 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { ErrorBoundary } from 'react-error-boundary';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { GlobalStyles } from '@mui/material';
 import { ClientContextProvider } from './context/main';
 import { ErrorFallback } from './components/Error';
 import { NymMixnetTheme } from './theme';
-import { App } from './App';
 import { AppWindowFrame } from './components/AppWindowFrame';
+import { AppRoutes } from './routes';

 const elem = document.getElementById('root');

@@ -13,13 +15,16 @@ if (elem) {
  const root = createRoot(elem);
  root.render(
    <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <ClientContextProvider>
-        <NymMixnetTheme mode="dark">
-          <AppWindowFrame>
-            <App />
-          </AppWindowFrame>
-        </NymMixnetTheme>
-      </ClientContextProvider>
+      <Router>
+        <ClientContextProvider>
+          <GlobalStyles styles={{ html: { borderRadius: 10 } }} />
+          <NymMixnetTheme mode="dark">
+            <AppWindowFrame>
+              <AppRoutes />
+            </AppWindowFrame>
+          </NymMixnetTheme>
+        </ClientContextProvider>
+      </Router>
    </ErrorBoundary>,
  );
 }
@@ -1,59 +0,0 @@
-import React from 'react';
-import { Box, Divider, Stack } from '@mui/material';
-import { DateTime } from 'luxon';
-import { IpAddressAndPortModal } from 'src/components/IpAddressAndPortModal';
-import { ConnectionTimer } from 'src/components/ConntectionTimer';
-import { ConnectionStatus } from '../components/ConnectionStatus';
-import { ConnectionStatusKind, GatewayPerformance } from '../types';
-import { ConnectionStatsItem } from '../components/ConnectionStats';
-import { ConnectionButton } from '../components/ConnectionButton';
-import { IpAddressAndPort } from '../components/IpAddressAndPort';
-import { ServiceProvider } from '../types/directory';
-
-export const ConnectedLayout: FCWithChildren<{
-  status: ConnectionStatusKind;
-  gatewayPerformance: GatewayPerformance;
-  stats: ConnectionStatsItem[];
-  ipAddress: string;
-  port: number;
-  connectedSince?: DateTime;
-  busy?: boolean;
-  showInfoModal: boolean;
-  isError?: boolean;
-  handleCloseInfoModal: () => void;
-  onConnectClick?: (status: ConnectionStatusKind) => void;
-  serviceProvider?: ServiceProvider;
-}> = ({
-  status,
-  gatewayPerformance,
-  showInfoModal,
-  handleCloseInfoModal,
-  ipAddress,
-  port,
-  connectedSince,
-  busy,
-  isError,
-  serviceProvider,
-  onConnectClick,
-}) => (
-  <>
-    <IpAddressAndPortModal show={showInfoModal} onClose={handleCloseInfoModal} ipAddress={ipAddress} port={port} />
-    <Box pb={1}>
-      <ConnectionStatus
-        status={ConnectionStatusKind.connected}
-        serviceProvider={serviceProvider}
-        gatewayPerformance={gatewayPerformance}
-      />
-    </Box>
-    <Divider sx={{ my: 2 }} />
-    <Box sx={{ mb: 3 }}>
-      <IpAddressAndPort label="Socks5 address" ipAddress={ipAddress} port={port} />
-    </Box>
-    {/* <ConnectionStats stats={stats} /> */}
-    <ConnectionTimer connectedSince={connectedSince} />
-
-    <Stack mt={3} direction="row" justifyContent="center" alignItems="center">
-      <ConnectionButton status={status} busy={busy} onClick={onConnectClick} isError={isError} />
-    </Stack>
-  </>
-);
@@ -0,0 +1,24 @@
+import { Box, Stack } from '@mui/material';
+import React from 'react';
+
+export const ConnectionLayout = ({
+  TopContent,
+  ConnectButton,
+  BottomContent,
+}: {
+  TopContent: React.ReactNode;
+  ConnectButton: React.ReactNode;
+  BottomContent: React.ReactNode;
+}) => (
+  <Stack direction="column" spacing={1} minHeight="100%" justifyContent="space-around" mt="-40px" mb="-40px">
+    <Stack direction="column" height="24%" justifyContent="end">
+      {TopContent}
+    </Stack>
+    <Box display="flex" justifyContent="center" alignItems="center">
+      {ConnectButton}
+    </Box>
+    <Stack direction="column" justifySelf="flex-start" flexGrow={1}>
+      {BottomContent}
+    </Stack>
+  </Stack>
+);
@@ -1,49 +0,0 @@
-import React from 'react';
-import { Box, Stack, Typography } from '@mui/material';
-import { ConnectionStatus } from 'src/components/ConnectionStatus';
-import { ConnectionTimer } from 'src/components/ConntectionTimer';
-import { InfoModal } from 'src/components/InfoModal';
-import { Error } from 'src/types/error';
-import { ConnectionButton } from '../components/ConnectionButton';
-import { ServiceSelector } from '../components/ServiceSelector';
-import { useClientContext } from '../context/main';
-import { ConnectionStatusKind } from '../types';
-import { Services } from '../types/directory';
-
-export const DefaultLayout: FCWithChildren<{
-  error?: Error;
-  status: ConnectionStatusKind;
-  services?: Services;
-  busy?: boolean;
-  isError?: boolean;
-  clearError: () => void;
-  onConnectClick?: (status: ConnectionStatusKind) => void;
-}> = ({ status, error, services, busy, isError, onConnectClick, clearError }) => {
-  const context = useClientContext();
-
-  return (
-    <Box pt={1}>
-      {error && <InfoModal show title={error.title} description={error.message} onClose={clearError} />}
-      <ConnectionStatus status={ConnectionStatusKind.disconnected} />
-      <Box px={2}>
-        <Typography fontWeight="400" fontSize="16px" textAlign="center" pt={2}>
-          Connect to the Nym <br /> mixnet for privacy.
-        </Typography>
-        <Typography textAlign="center" fontSize="small" sx={{ color: 'grey.500' }}>
-          This is experimental software. Do not rely on it for strong anonymity (yet).
-        </Typography>
-      </Box>
-      <ServiceSelector services={services} onChange={context.setServiceProvider} currentSp={context.serviceProvider} />
-      <ConnectionTimer />
-      <Stack mt={3} direction="row" justifyContent="center" alignItems="center">
-        <ConnectionButton
-          status={status}
-          disabled={context.serviceProvider === undefined}
-          busy={busy}
-          isError={isError}
-          onClick={onConnectClick}
-        />
-      </Stack>
-    </Box>
-  );
-};
@@ -1,70 +0,0 @@
-import React, { useState } from 'react';
-import { HelpPage } from 'src/components/HelpPage';
-import { Button, Link, Stack } from '@mui/material';
-import Image1 from '../assets/help-step-one.png';
-import Image2 from '../assets/help-step-two.png';
-import Image3 from '../assets/help-step-three.png';
-import Image4 from '../assets/help-step-four.png';
-
-export const HelpGuideLayout = () => {
-  const [step, setStep] = useState(0);
-
-  if (step === 1)
-    return (
-      <HelpPage
-        step={step}
-        description="Select your service provider from the dropdown menu."
-        img={Image1}
-        onNext={() => setStep(2)}
-      />
-    );
-
-  if (step === 2)
-    return (
-      <HelpPage
-        step={step}
-        description="Click yellow button and connect to a service provider."
-        img={Image2}
-        onPrev={() => setStep(1)}
-        onNext={() => setStep(3)}
-      />
-    );
-
-  if (step === 3)
-    return (
-      <HelpPage
-        step={step}
-        description="Click on IP and Port to copy their values to the clipboard."
-        img={Image3}
-        onPrev={() => setStep(2)}
-        onNext={() => setStep(4)}
-      />
-    );
-
-  if (step === 4)
-    return (
-      <HelpPage
-        step={step}
-        description="Go to the settings of your selected app, under Proxy select run via SOCKS5 proxy then paste the IP and Port values given by NymConnect."
-        img={Image4}
-        onPrev={() => setStep(3)}
-      />
-    );
-
-  return (
-    <Stack gap={1}>
-      <Button variant="text" color="inherit" onClick={() => setStep(1)}>
-        How to connect guide
-      </Button>
-      <Button
-        LinkComponent={Link}
-        variant="text"
-        color="inherit"
-        href="https://nymtech.net/docs/stable/quickstart/nym-connect/"
-        target="_blank"
-      >
-        Docs
-      </Button>
-    </Stack>
-  );
-};
@@ -0,0 +1,82 @@
+import React from 'react';
+import { Box, Stack } from '@mui/material';
+import { DateTime } from 'luxon';
+import { IpAddressAndPortModal } from 'src/components/IpAddressAndPortModal';
+import { ConnectionTimer } from 'src/components/ConntectionTimer';
+import { ConnectionStatus } from 'src/components/ConnectionStatus';
+import { ConnectionStatusKind, GatewayPerformance } from 'src/types';
+import { ConnectionStatsItem } from 'src/components/ConnectionStats';
+import { IpAddressAndPort } from 'src/components/IpAddressAndPort';
+import { ServiceProvider } from 'src/types/directory';
+import { ExperimentalWarning } from 'src/components/ExperimentalWarning';
+import { ConnectionLayout } from 'src/layouts/ConnectionLayout';
+import { PowerButton } from 'src/components/PowerButton/PowerButton';
+import { Error } from 'src/types/error';
+import { InfoModal } from 'src/components/InfoModal';
+
+export const Connected: FCWithChildren<{
+  error?: Error;
+  status: ConnectionStatusKind;
+  showInfoModal: boolean;
+  gatewayPerformance: GatewayPerformance;
+  stats: ConnectionStatsItem[];
+  ipAddress: string;
+  port: number;
+  connectedSince?: DateTime;
+  busy?: boolean;
+  isError?: boolean;
+  serviceProvider?: ServiceProvider;
+  clearError: () => void;
+  onConnectClick: (status: ConnectionStatusKind) => void;
+  closeInfoModal: () => void;
+}> = ({
+  error,
+  status,
+  showInfoModal,
+  gatewayPerformance,
+  ipAddress,
+  port,
+  connectedSince,
+  busy,
+  isError,
+  serviceProvider,
+  clearError,
+  onConnectClick,
+  closeInfoModal,
+}) => (
+  <>
+    {error && <InfoModal show title={error.title} description={error.message} onClose={clearError} />}
+    <IpAddressAndPortModal show={showInfoModal} onClose={closeInfoModal} ipAddress={ipAddress} port={port} />
+    <ConnectionLayout
+      TopContent={
+        <Box>
+          <ConnectionStatus
+            status={ConnectionStatusKind.connected}
+            gatewayPerformance={gatewayPerformance}
+            serviceProvider={serviceProvider}
+          />
+          <ConnectionTimer connectedSince={connectedSince} />
+        </Box>
+      }
+      ConnectButton={
+        <PowerButton
+          status={status}
+          busy={busy}
+          onClick={onConnectClick}
+          isError={isError}
+          disabled={status === 'disconnecting'}
+        />
+      }
+      BottomContent={
+        <Stack justifyContent="space-between" height="100%" alignItems="center" mt={2}>
+          <Box sx={{ mb: 2, minWidth: 200 }}>
+            <IpAddressAndPort label="Socks5 address" ipAddress={ipAddress} port={port} />
+          </Box>
+          <Box justifySelf="end">
+            <ExperimentalWarning />
+          </Box>
+        </Stack>
+      }
+    />
+  </>
+);
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Stack, Typography } from '@mui/material';
+import { ConnectionStatus } from 'src/components/ConnectionStatus';
+import { ConnectionTimer } from 'src/components/ConntectionTimer';
+import { InfoModal } from 'src/components/InfoModal';
+import { Error } from 'src/types/error';
+import { ExperimentalWarning } from 'src/components/ExperimentalWarning';
+import { ServiceProvider, Services } from 'src/types/directory';
+import { ConnectionStatusKind } from 'src/types';
+import { PowerButton } from 'src/components/PowerButton/PowerButton';
+import { Box } from '@mui/system';
+import { ConnectionLayout } from 'src/layouts/ConnectionLayout';
+
+export const Disconnected: FCWithChildren<{
+  error?: Error;
+  status: ConnectionStatusKind;
+  services?: Services;
+  busy?: boolean;
+  isError?: boolean;
+  serviceProvider?: ServiceProvider;
+  clearError: () => void;
+  onConnectClick: (status: ConnectionStatusKind) => void;
+}> = ({ status, error, onConnectClick, clearError }) => (
+  <>
+    {error && <InfoModal show title={error.title} description={error.message} onClose={clearError} />}
+    <ConnectionLayout
+      TopContent={
+        <Box>
+          <ConnectionStatus status={ConnectionStatusKind.disconnected} gatewayPerformance="Good" />
+          <ConnectionTimer />
+        </Box>
+      }
+      ConnectButton={<PowerButton onClick={onConnectClick} status={status} disabled={status === 'connecting'} />}
+      BottomContent={
+        <Stack justifyContent="space-between" height="100%" alignItems="center" mt={2}>
+          <Box sx={{ mb: 3, minWidth: 200 }}>
+            <Typography
+              fontWeight={600}
+              textTransform="uppercase"
+              textAlign="center"
+              fontSize="12px"
+              sx={{ wordSpacing: 1.5, letterSpacing: 1.5 }}
+              color="warning.main"
+            >
+              You are not protected
+            </Typography>
+          </Box>
+          <Box justifySelf="end">
+            <ExperimentalWarning />
+          </Box>
+        </Stack>
+      }
+    />
+  </>
+);
@@ -0,0 +1,92 @@
+import React from 'react';
+import { Stack } from '@mui/material';
+import { forage } from '@tauri-apps/tauri-forage';
+import { DateTime } from 'luxon';
+import { useClientContext } from 'src/context/main';
+import { useTauriEvents } from 'src/utils';
+import { Connected } from './Connected';
+import { Disconnected } from './Disconnected';
+
+export const ConnectionPage = () => {
+  const context = useClientContext();
+  const [busy, setBusy] = React.useState<boolean>();
+
+  useTauriEvents('help://clear-storage', (_event) => {
+    console.log('About to clear local storage...');
+    // clear local storage
+    try {
+      forage.clear()();
+      console.log('Local storage cleared');
+    } catch (e) {
+      console.error('Failed to clear local storage', e);
+    }
+  });
+
+  const handleConnectClick = async () => {
+    const currentStatus = context.connectionStatus;
+    if (currentStatus === 'connected' || currentStatus === 'disconnected') {
+      setBusy(true);
+      // eslint-disable-next-line default-case
+      switch (currentStatus) {
+        case 'disconnected':
+          await context.setRandomSerivceProvider();
+          await context.startConnecting();
+          context.setConnectedSince(DateTime.now());
+          context.setShowInfoModal(true);
+          break;
+        case 'connected':
+          await context.startDisconnecting();
+          context.setConnectedSince(undefined);
+          break;
+      }
+      setBusy(false);
+    }
+  };
+
+  const closeInfoModal = () => context.setShowInfoModal(false);
+
+  if (context.connectionStatus === 'connected')
+    return (
+      <Stack height="100%" justifyContent="center">
+        <Connected
+          error={context.error}
+          clearError={context.clearError}
+          status={context.connectionStatus}
+          showInfoModal={context.showInfoModal}
+          busy={busy}
+          onConnectClick={handleConnectClick}
+          ipAddress="127.0.0.1"
+          port={1080}
+          gatewayPerformance={context.gatewayPerformance}
+          connectedSince={context.connectedSince}
+          serviceProvider={context.selectedProvider}
+          closeInfoModal={closeInfoModal}
+          stats={[
+            {
+              label: 'in:',
+              totalBytes: 1024,
+              rateBytesPerSecond: 1024 * 1024 * 1024 + 10,
+            },
+            {
+              label: 'out:',
+              totalBytes: 1024 * 1024 * 1024 * 1024 * 20,
+              rateBytesPerSecond: 1024 * 1024 + 10,
+            },
+          ]}
+        />
+      </Stack>
+    );
+
+  return (
+    <Stack height="100%" justifyContent="center">
+      <Disconnected
+        busy={busy}
+        error={context.error}
+        onConnectClick={handleConnectClick}
+        clearError={context.clearError}
+        status={context.connectionStatus}
+        serviceProvider={context.selectedProvider}
+      />
+    </Stack>
+  );
+};
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Divider, Typography } from '@mui/material';
+import { Box } from '@mui/system';
+
+const appsSchema = {
+  messagingApps: ['Telegram', 'Keybase'],
+  wallets: ['Blockstream', 'Electrum'],
+};
+
+export const CompatibleApps = () => (
+  <Box>
+    <Typography fontSize="small" color="grey.600" sx={{ mb: 2 }}>
+      Supported apps
+    </Typography>
+    <Typography color="nym.highlight" sx={{ mb: 2 }}>
+      Messaging apps
+    </Typography>
+
+    <Divider sx={{ mb: 2 }} />
+
+    <Box sx={{ mb: 4 }}>
+      {appsSchema.messagingApps.map((app) => (
+        <Typography variant="body2" color="grey.400" sx={{ mb: 2 }} key={app}>
+          {app}
+        </Typography>
+      ))}
+    </Box>
+    <Typography color="nym.highlight" sx={{ mb: 2 }}>
+      Wallets
+    </Typography>
+
+    <Divider sx={{ mb: 2 }} />
+
+    <Box sx={{ mb: 4 }}>
+      {appsSchema.wallets.map((wallet) => (
+        <Typography variant="body2" color="grey.400" sx={{ mb: 2 }} key={wallet}>
+          {wallet}
+        </Typography>
+      ))}
+    </Box>
+  </Box>
+);
@@ -0,0 +1,47 @@
+import React, { useState } from 'react';
+import { HelpPage } from 'src/components/HelpPage';
+import Image1 from '../../assets/help-step-one.png';
+import Image2 from '../../assets/help-step-two.png';
+import Image4 from '../../assets/help-step-four.png';
+
+export const HelpGuide = () => {
+  const [step, setStep] = useState(1);
+  const TOTAL_STEPS = 3;
+
+  if (step === 1)
+    return (
+      <HelpPage
+        step={step}
+        totalSteps={TOTAL_STEPS}
+        description="Click button and connect 
+        to a Nym mixnet."
+        img={Image1}
+        onNext={() => setStep(2)}
+      />
+    );
+
+  if (step === 2)
+    return (
+      <HelpPage
+        step={step}
+        totalSteps={TOTAL_STEPS}
+        description="Click on IP and Port to copy their values to the clipboard."
+        img={Image2}
+        onPrev={() => setStep(1)}
+        onNext={() => setStep(3)}
+      />
+    );
+
+  if (step === 3)
+    return (
+      <HelpPage
+        step={step}
+        totalSteps={TOTAL_STEPS}
+        description="Go to settings in your app, select run via SOCKS5 proxy and paste the IP and Port values given by NymConnect."
+        img={Image4}
+        onPrev={() => setStep(2)}
+      />
+    );
+
+  return null;
+};
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Apps, HelpOutline } from '@mui/icons-material';
+import { Stack, Link, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
+import { Link as RouterLink } from 'react-router-dom';
+import { AppVersion } from 'src/components/AppVersion';
+
+const menuSchema = [
+  { title: 'Supported apps', icon: Apps, path: 'apps' },
+  { title: 'How to connect guide', icon: HelpOutline, path: 'guide' },
+];
+
+export const Menu = () => (
+  <Stack justifyContent="space-between" height="100%">
+    <List dense disablePadding>
+      {menuSchema.map((item) => (
+        <Link component={RouterLink} to={item.path} underline="none" color="white">
+          <ListItem disablePadding>
+            <ListItemButton>
+              <ListItemIcon sx={{ minWidth: 25 }}>
+                <item.icon sx={{ fontSize: '12px' }} />
+              </ListItemIcon>{' '}
+              <ListItemText>{item.title}</ListItemText>
+            </ListItemButton>
+          </ListItem>
+        </Link>
+      ))}
+    </List>
+    <AppVersion />
+  </Stack>
+);
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { ConnectionPage } from 'src/pages/connection';
+import { Menu } from 'src/pages/menu';
+import { CompatibleApps } from 'src/pages/menu/Apps';
+import { HelpGuide } from 'src/pages/menu/Guide';
+
+export const AppRoutes = () => (
+  <Routes>
+    <Route index path="/" element={<ConnectionPage />} />
+    <Route path="menu">
+      <Route index element={<Menu />} />
+      <Route path="apps" element={<CompatibleApps />} />
+      <Route path="guide" element={<HelpGuide />} />
+    </Route>
+  </Routes>
+);
@@ -2,11 +2,11 @@ import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Box } from '@mui/material';
 import { DateTime } from 'luxon';
+import { Disconnected } from 'src/pages/connection/Disconnected';
+import { Connected } from 'src/pages/connection/Connected';
+import { ConnectionStatusKind } from 'src/types';
 import { AppWindowFrame } from '../components/AppWindowFrame';
 import { useClientContext } from '../context/main';
-import { ConnectionStatusKind } from '../types';
-import { DefaultLayout } from '../layouts/DefaultLayout';
-import { ConnectedLayout } from '../layouts/ConnectedLayout';
 import { Services } from '../types/directory';

 export default {
@@ -36,15 +36,15 @@ export const Mock: ComponentStory<typeof AppWindowFrame> = () => {
  ];
  const handleConnectClick = React.useCallback(() => {
    const oldStatus = context.connectionStatus;
-    if (oldStatus === ConnectionStatusKind.connected || oldStatus === ConnectionStatusKind.disconnected) {
+    if (oldStatus === 'connected' || oldStatus === 'disconnected') {
      setBusy(true);

      // eslint-disable-next-line default-case
      switch (oldStatus) {
-        case ConnectionStatusKind.disconnected:
+        case 'disconnected':
          context.setConnectionStatus(ConnectionStatusKind.connecting);
          break;
-        case ConnectionStatusKind.connected:
+        case 'connected':
          context.setConnectionStatus(ConnectionStatusKind.disconnecting);
          break;
      }
@@ -52,11 +52,11 @@ export const Mock: ComponentStory<typeof AppWindowFrame> = () => {
      setTimeout(() => {
        // eslint-disable-next-line default-case
        switch (oldStatus) {
-          case ConnectionStatusKind.disconnected:
+          case 'disconnected':
            context.setConnectedSince(DateTime.now());
            context.setConnectionStatus(ConnectionStatusKind.connected);
            break;
-          case ConnectionStatusKind.connected:
+          case 'connected':
            context.setConnectionStatus(ConnectionStatusKind.disconnected);
            break;
        }
@@ -72,7 +72,7 @@ export const Mock: ComponentStory<typeof AppWindowFrame> = () => {
    return (
      <Box width={width} height={height}>
        <AppWindowFrame>
-          <DefaultLayout
+          <Disconnected
            status={context.connectionStatus}
            busy={busy}
            onConnectClick={handleConnectClick}
@@ -86,10 +86,11 @@ export const Mock: ComponentStory<typeof AppWindowFrame> = () => {

  return (
    <AppWindowFrame>
-      <ConnectedLayout
+      <Connected
+        clearError={() => {}}
        gatewayPerformance="Good"
        showInfoModal={false}
-        handleCloseInfoModal={() => undefined}
+        closeInfoModal={() => undefined}
        status={context.connectionStatus}
        busy={busy}
        onConnectClick={handleConnectClick}
@@ -2,23 +2,27 @@ import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Box } from '@mui/material';
 import { DateTime } from 'luxon';
-import { ConnectedLayout } from '../layouts/ConnectedLayout';
-import { ConnectionStatusKind } from '../types';
+import { Connected } from 'src/pages/connection/Connected';
+import { ConnectionStatusKind } from 'src/types';
+
+const onClick = () => undefined;

 export default {
  title: 'Layouts/ConnectedLayout',
-  component: ConnectedLayout,
-} as ComponentMeta<typeof ConnectedLayout>;
+  component: Connected,
+} as ComponentMeta<typeof Connected>;

-export const Default: ComponentStory<typeof ConnectedLayout> = () => (
+export const Default: ComponentStory<typeof Connected> = () => (
  <Box p={2} width={242} sx={{ bgcolor: 'nym.background.dark' }}>
-    <ConnectedLayout
-      showInfoModal={false}
+    <Connected
+      clearError={() => {}}
      gatewayPerformance="Good"
-      handleCloseInfoModal={() => undefined}
+      showInfoModal={false}
+      closeInfoModal={() => undefined}
      status={ConnectionStatusKind.connected}
      connectedSince={DateTime.now()}
      ipAddress="127.0.0.1"
+      serviceProvider={{ id: 'service 1', description: 'good services', address: 'abc123', gateway: '8910xyz' }}
      port={1080}
      stats={[
        {
@@ -32,6 +36,7 @@ export const Default: ComponentStory<typeof ConnectedLayout> = () => (
          rateBytesPerSecond: 1024 * 1024 + 10,
        },
      ]}
+      onConnectClick={onClick}
    />
  </Box>
 );
@@ -1,7 +1,7 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ConnectionStatusKind } from 'src/types';
 import { ConnectionButton } from '../components/ConnectionButton';
-import { ConnectionStatusKind } from '../types';

 export default {
  title: 'Components/ConnectionButton',
@@ -1,23 +1,30 @@
 import React from 'react';
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { Box } from '@mui/material';
-import { DefaultLayout } from '../layouts/DefaultLayout';
+import { Disconnected } from 'src/pages/connection/Disconnected';
 import { ConnectionStatusKind } from '../types';

 export default {
  title: 'Layouts/DefaultLayout',
-  component: DefaultLayout,
-} as ComponentMeta<typeof DefaultLayout>;
+  component: Disconnected,
+} as ComponentMeta<typeof Disconnected>;

-export const Default: ComponentStory<typeof DefaultLayout> = () => (
+const onClick = () => undefined;
+
+export const Default: ComponentStory<typeof Disconnected> = () => (
  <Box p={1} width={230} sx={{ bgcolor: 'nym.background.dark' }}>
-    <DefaultLayout status={ConnectionStatusKind.disconnected} clearError={() => {}} error={undefined} />
+    <Disconnected
+      status={ConnectionStatusKind.disconnected}
+      clearError={() => {}}
+      error={undefined}
+      onConnectClick={onClick}
+    />
  </Box>
 );

-export const WithServices: ComponentStory<typeof DefaultLayout> = () => (
+export const WithServices: ComponentStory<typeof Disconnected> = () => (
  <Box p={1} width={230} sx={{ bgcolor: 'nym.background.dark' }}>
-    <DefaultLayout
+    <Disconnected
      status={ConnectionStatusKind.disconnected}
      services={[
        {
@@ -28,6 +35,7 @@ export const WithServices: ComponentStory<typeof DefaultLayout> = () => (
      ]}
      clearError={() => {}}
      error={undefined}
+      onConnectClick={onClick}
    />
  </Box>
 );
@@ -0,0 +1,29 @@
+import React from 'react';
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { PowerButton } from 'src/components/PowerButton/PowerButton';
+import { ConnectionStatusKind } from 'src/types';
+
+export default {
+  title: 'Components/PowerButton',
+  component: PowerButton,
+} as ComponentMeta<typeof PowerButton>;
+
+export const Disconnected: ComponentStory<typeof PowerButton> = () => (
+  <PowerButton status={ConnectionStatusKind.disconnected} />
+);
+
+export const Connecting: ComponentStory<typeof PowerButton> = () => (
+  <PowerButton status={ConnectionStatusKind.connecting} disabled />
+);
+
+export const Connected: ComponentStory<typeof PowerButton> = () => (
+  <PowerButton status={ConnectionStatusKind.connected} />
+);
+
+export const Disconnecting: ComponentStory<typeof PowerButton> = () => (
+  <PowerButton status={ConnectionStatusKind.disconnecting} disabled />
+);
+
+export const Disabled: ComponentStory<typeof PowerButton> = () => (
+  <PowerButton status={ConnectionStatusKind.disconnected} disabled />
+);
@@ -20,7 +20,7 @@ import {
 */
 const nymPalette: NymPalette = {
  /** emphasises important elements */
-  highlight: '#FB6E4E',
+  highlight: '#21D072',
  success: '#21D073',
  info: '#60D7EF',
  warning: '#FFE600',
@@ -1112,7 +1112,7 @@
  dependencies:
    regenerator-runtime "^0.13.11"

-"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.13":
+"@babel/runtime@^7.1.2":
  version "7.18.6"
  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.6.tgz#6a1ef59f838debd670421f8c7f2cbb8da9751580"
  integrity sha512-t9wi7/AW6XtKahAe20Yw0/mMljKq0B1r2fPdvaAdV/KPDZewFXdaaa6K7lxmZBZ8FBNpCiAT6iHPmd6QO9bKfQ==
@@ -4441,90 +4441,90 @@
  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-1.2.3.tgz#dae9142e683c00199f4d7e088f22b564b08b9cac"
  integrity sha512-phJN3fN8FtZZwqXg08bcxfq1+X1JSDglLvRxOxB7VWPq+O5SuB8uLyssjJsu+PIhyZZnIhTGdjhzLSFhSXfLsw==

-"@tauri-apps/cli-darwin-arm64@2.0.0-alpha.1":
-  version "2.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-2.0.0-alpha.1.tgz#f555cedc5573f99c697136c335c1a81b1c195498"
-  integrity sha512-FCkki6IHWfMmRKhBVGctcg0C+ZLsNSrItNd2+qSpUgCgxQep67kClWG1kzkydMBrIgg9lc4TzzK/bSPcXTEstg==
+"@tauri-apps/cli-darwin-arm64@2.0.0-alpha.2":
+  version "2.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-2.0.0-alpha.2.tgz#0af2c077b80778ac4d138a0d42a5f406fcc205ee"
+  integrity sha512-Wu5QdZUgh0DEE0b3EKdJRkZzFoVngezxgvncQlMdXNaiKjdT767K2fB0XvQps+ycbtVLbUlG15jAwPZbWqRYGw==

 "@tauri-apps/cli-darwin-x64@1.2.3":
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-1.2.3.tgz#c6f84a11a1a7800e3e8e22c8fa5b95d0b3d1f802"
  integrity sha512-jFZ/y6z8z6v4yliIbXKBXA7BJgtZVMsITmEXSuD6s5+eCOpDhQxbRkr6CA+FFfr+/r96rWSDSgDenDQuSvPAKw==

-"@tauri-apps/cli-darwin-x64@2.0.0-alpha.1":
-  version "2.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-2.0.0-alpha.1.tgz#80604120cf9c85df48882711721759878c4bacef"
-  integrity sha512-cmnJzgWgCvau8iH8ZjQKmmjIaEWaLNDTIhOe8z21//GsR3Zd5TbyoPuNtH2Kysn05ijJQHOKbqyfV20C7cQCBQ==
+"@tauri-apps/cli-darwin-x64@2.0.0-alpha.2":
+  version "2.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-2.0.0-alpha.2.tgz#e82f01e53dabb23c700f82e904e36ac0ee635f38"
+  integrity sha512-e5VLsT/exSW1swUWkhCEAQ/fM8mZaUMoGeyESYtO7VfTNVglS0j+VfQ9a8taRxtOkajDZmqMDvmii4tA5I1Bbw==

 "@tauri-apps/cli-linux-arm-gnueabihf@1.2.3":
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-1.2.3.tgz#ecccec4c255ab32903fb36e1c746ed7b4eff0d1d"
  integrity sha512-C7h5vqAwXzY0kRGSU00Fj8PudiDWFCiQqqUNI1N+fhCILrzWZB9TPBwdx33ZfXKt/U4+emdIoo/N34v3TiAOmQ==

-"@tauri-apps/cli-linux-arm-gnueabihf@2.0.0-alpha.1":
-  version "2.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-2.0.0-alpha.1.tgz#c50ece6db88c013ab9ea8f2ac020d63765b9b4ec"
-  integrity sha512-IVJLTOV/kHAFFthPww1Jz67KerbYjf9Oe1TQFEqzhEKgFgpYMx+WGhm//VIDeoc2MYc9Ku4AnJkCSHpyG0OosQ==
+"@tauri-apps/cli-linux-arm-gnueabihf@2.0.0-alpha.2":
+  version "2.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-2.0.0-alpha.2.tgz#866000663c66abd8ae88682c0f6cf03734ca7c6e"
+  integrity sha512-+/emaFpDPuqnTIyh+WcDqCbzc/SoREFfLDyumqdnFjRU1Uvc2Z9Eo/sMVnfuUw5vDMc2EPzYtT3uiZGez65ZTA==

 "@tauri-apps/cli-linux-arm64-gnu@1.2.3":
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-1.2.3.tgz#c3915de83a8fbe6f406eaa0b524a17c091a9a2cd"
  integrity sha512-buf1c8sdkuUzVDkGPQpyUdAIIdn5r0UgXU6+H5fGPq/Xzt5K69JzXaeo6fHsZEZghbV0hOK+taKV4J0m30UUMQ==

-"@tauri-apps/cli-linux-arm64-gnu@2.0.0-alpha.1":
-  version "2.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-2.0.0-alpha.1.tgz#edddb4dd1e327617aa42ceda8b5402c5d12212a7"
-  integrity sha512-q7gArWxc77KkhHy5vbdrwYdxtE3zXoc9MR1Y4ueKadpXxIjvT68CC+AJ1OM2hBggnWRzD0aJ0H/Y+4Da/Y9jYA==
+"@tauri-apps/cli-linux-arm64-gnu@2.0.0-alpha.2":
+  version "2.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-2.0.0-alpha.2.tgz#157a893fa2d36e56ec16de213ed2d0a9b209833c"
+  integrity sha512-UHAyqt8fFbp9MEbUHSiEKjJC98w/Dta3r9auE70K+/uNpt9pnP/lGturDWWAJagRIFwYKPyqSEqL5qFcKadYqw==

 "@tauri-apps/cli-linux-arm64-musl@1.2.3":
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.2.3.tgz#40f9f7cf0b4088964661fd412eff7310cb4ac605"
  integrity sha512-x88wPS9W5xAyk392vc4uNHcKBBvCp0wf4H9JFMF9OBwB7vfd59LbQCFcPSu8f0BI7bPrOsyHqspWHuFL8ojQEA==

-"@tauri-apps/cli-linux-arm64-musl@2.0.0-alpha.1":
-  version "2.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.0.0-alpha.1.tgz#bdaa2fc08c5dd675fa9d09fb0a6c308357e01c2c"
-  integrity sha512-gdP6w1on1V80zTwMJQ1S/ucYqIvhdjpUMCswlCw33uQS/CMeYhdJYt1aSIDACBWo/IwkCF3MLeeFkK1QLwJLmg==
+"@tauri-apps/cli-linux-arm64-musl@2.0.0-alpha.2":
+  version "2.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-2.0.0-alpha.2.tgz#452fb06b5c563500206ba4a8cd5d979b1a3c71de"
+  integrity sha512-3euwm11RWvmTX+ISR/Y+N0TaWTJCRIj1pDgB+r2ZptRKlVTMNTJZDTXQlyJKcWEpi1azlbdxAzRvhN8NrgDmyA==

 "@tauri-apps/cli-linux-x64-gnu@1.2.3":
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-1.2.3.tgz#0b3e4c1fda6205dbe872f4b69506669476f60591"
  integrity sha512-ZMz1jxEVe0B4/7NJnlPHmwmSIuwiD6ViXKs8F+OWWz2Y4jn5TGxWKFg7DLx5OwQTRvEIZxxT7lXHi5CuTNAxKg==

-"@tauri-apps/cli-linux-x64-gnu@2.0.0-alpha.1":
-  version "2.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-2.0.0-alpha.1.tgz#ddb4fc39c0d3bd47d9ad581ecefff6a1e2e518fa"
-  integrity sha512-ZvSrO52Fa4pVbR7u0BWrroDMsmtRayry3bYnGMkPX/USplKiGG0IXnwcmgaMK0QaXMDSumoSxuINixV5QqjPZA==
+"@tauri-apps/cli-linux-x64-gnu@2.0.0-alpha.2":
+  version "2.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-2.0.0-alpha.2.tgz#155c7ab8c4c2b319bca38580e77bc6f6ffc2d664"
+  integrity sha512-ijJ8Wij5mVd9p6lXQ+pXoFlx3Iv1JS1KQTeySICds43xzE8esGp5+HXRXDwWqQLdVmtI77P5VRIe2ssXiaeDUg==

 "@tauri-apps/cli-linux-x64-musl@1.2.3":
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-1.2.3.tgz#edcf8f53da50337a2e763d4fda750ef56124036c"
  integrity sha512-B/az59EjJhdbZDzawEVox0LQu2ZHCZlk8rJf85AMIktIUoAZPFbwyiUv7/zjzA/sY6Nb58OSJgaPL2/IBy7E0A==

-"@tauri-apps/cli-linux-x64-musl@2.0.0-alpha.1":
-  version "2.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-2.0.0-alpha.1.tgz#2ce270c2cc1f9ea6f8882df8106c2f5bfbff0c9a"
-  integrity sha512-KtIrVtK9gDcWCNHs3kST6UWrHbnNNbKzVcVC4dgX59zBPta3TrjGs4nAIkbHPyX8hbWx+6IuuqvRnp9KTCfE+A==
+"@tauri-apps/cli-linux-x64-musl@2.0.0-alpha.2":
+  version "2.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-2.0.0-alpha.2.tgz#9965b076965bc8faf5623c9f67724ebeb9a197e7"
+  integrity sha512-sg8OTQfG/zJ4+6MA/+hk08hVb57iJn5VZDzBb3o6IpJ0cwtM8YDNv5C+6HWttBuxsn4oEoYxGml/FvowMfsOCg==

 "@tauri-apps/cli-win32-ia32-msvc@1.2.3":
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-1.2.3.tgz#0592d3e4eee4685674579ba897eef1469c6f1cfe"
  integrity sha512-ypdO1OdC5ugNJAKO2m3sb1nsd+0TSvMS9Tr5qN/ZSMvtSduaNwrcZ3D7G/iOIanrqu/Nl8t3LYlgPZGBKlw7Ng==

-"@tauri-apps/cli-win32-ia32-msvc@2.0.0-alpha.1":
-  version "2.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-2.0.0-alpha.1.tgz#959563af5e3c5b2e53cca303feb7dac3e6f844a1"
-  integrity sha512-NqI3wMO/ASnmwNW9DObzVfT4ldSEa1WzZ++JJxwBKqyriWdSUmCLx0KqttxlgGALqeECrd/BKIQijg7mt4mpxw==
+"@tauri-apps/cli-win32-ia32-msvc@2.0.0-alpha.2":
+  version "2.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-2.0.0-alpha.2.tgz#808447504cdb22a2d998ac79810cf1035c710a03"
+  integrity sha512-R1AmO3GEm97ptM0tjxZjZ1fLnxzN3ZeOEKc85nR7ayqVqKVhMu+dhq5lKa/Y3GdMUR6Yj9GoCnaLp2xy4bV6JQ==

 "@tauri-apps/cli-win32-x64-msvc@1.2.3":
  version "1.2.3"
  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-1.2.3.tgz#89f0cc36e11e56564161602cd6add155cc7b0dfb"
  integrity sha512-CsbHQ+XhnV/2csOBBDVfH16cdK00gNyNYUW68isedmqcn8j+s0e9cQ1xXIqi+Hue3awp8g3ImYN5KPepf3UExw==

-"@tauri-apps/cli-win32-x64-msvc@2.0.0-alpha.1":
-  version "2.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-2.0.0-alpha.1.tgz#03f47d60abc77c0269d8c2728696d3aa64926f98"
-  integrity sha512-cvAkOWtY9G07nbrhjmyqobZxj/kQxzZXscCXvqORx+i0GXuG8n7MR54GJQKQeQpnMNNBLi+YcQtWBLOYRqweAw==
+"@tauri-apps/cli-win32-x64-msvc@2.0.0-alpha.2":
+  version "2.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-2.0.0-alpha.2.tgz#f7890a94cd8a0cc70faa831046ca8d8576a357d9"
+  integrity sha512-cLJJWxCdvvQP+I0B4h6h0TMMNYISoatQu57QVxPqypbkC/lK/ljjrbD5nu7M9wTFBkLkCTGyMC7N99esCmgIBQ==

 "@tauri-apps/cli@^1.0.5", "@tauri-apps/cli@^1.2.2":
  version "1.2.3"
@@ -4541,20 +4541,20 @@
    "@tauri-apps/cli-win32-ia32-msvc" "1.2.3"
    "@tauri-apps/cli-win32-x64-msvc" "1.2.3"

-"@tauri-apps/cli@^2.0.0-alpha.1":
-  version "2.0.0-alpha.1"
-  resolved "https://registry.yarnpkg.com/@tauri-apps/cli/-/cli-2.0.0-alpha.1.tgz#395c2fe670a487cb2f718c7b4014f2d08cfaa7f3"
-  integrity sha512-My83jBHU7BZpbaUVZkVHoYIqqLvhVBDxi/m5NWoAu81DP/kSjPQs5D87oWhWtOnuM6pJT5s+letKNPs9y4KM2Q==
+"@tauri-apps/cli@^2.0.0-alpha.2":
+  version "2.0.0-alpha.2"
+  resolved "https://registry.yarnpkg.com/@tauri-apps/cli/-/cli-2.0.0-alpha.2.tgz#bef242ce3c8b286f0ab74595c5e069b0ce7c5b4f"
+  integrity sha512-M5o2ESOv9jGr7oIDl3sR3Q5++DXSW4xyfxzKCyu1JVGlOc+C9Q4y0dbKhlpd0wPCAxRa0ikbfu7z8qfEhHSpVQ==
  optionalDependencies:
-    "@tauri-apps/cli-darwin-arm64" "2.0.0-alpha.1"
-    "@tauri-apps/cli-darwin-x64" "2.0.0-alpha.1"
-    "@tauri-apps/cli-linux-arm-gnueabihf" "2.0.0-alpha.1"
-    "@tauri-apps/cli-linux-arm64-gnu" "2.0.0-alpha.1"
-    "@tauri-apps/cli-linux-arm64-musl" "2.0.0-alpha.1"
-    "@tauri-apps/cli-linux-x64-gnu" "2.0.0-alpha.1"
-    "@tauri-apps/cli-linux-x64-musl" "2.0.0-alpha.1"
-    "@tauri-apps/cli-win32-ia32-msvc" "2.0.0-alpha.1"
-    "@tauri-apps/cli-win32-x64-msvc" "2.0.0-alpha.1"
+    "@tauri-apps/cli-darwin-arm64" "2.0.0-alpha.2"
+    "@tauri-apps/cli-darwin-x64" "2.0.0-alpha.2"
+    "@tauri-apps/cli-linux-arm-gnueabihf" "2.0.0-alpha.2"
+    "@tauri-apps/cli-linux-arm64-gnu" "2.0.0-alpha.2"
+    "@tauri-apps/cli-linux-arm64-musl" "2.0.0-alpha.2"
+    "@tauri-apps/cli-linux-x64-gnu" "2.0.0-alpha.2"
+    "@tauri-apps/cli-linux-x64-musl" "2.0.0-alpha.2"
+    "@tauri-apps/cli-win32-ia32-msvc" "2.0.0-alpha.2"
+    "@tauri-apps/cli-win32-x64-msvc" "2.0.0-alpha.2"

 "@tauri-apps/tauri-forage@^1.0.0-beta.2":
  version "1.0.0-beta.2"
@@ -10715,18 +10715,6 @@ hex-rgb@^4.1.0:
  resolved "https://registry.yarnpkg.com/hex-rgb/-/hex-rgb-4.3.0.tgz#af5e974e83bb2fefe44d55182b004ec818c07776"
  integrity sha512-Ox1pJVrDCyGHMG9CFg1tmrRUMRPRsAWYc/PinY0XzJU4K7y7vjNoLKIQ7BR5UJMCxNN8EM1MNDmHWA/B3aZUuw==

-history@^4.9.0:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
-  integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    loose-envify "^1.2.0"
-    resolve-pathname "^3.0.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-    value-equal "^1.0.1"
-
 hmac-drbg@^1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"
@@ -10736,7 +10724,7 @@ hmac-drbg@^1.0.1:
    minimalistic-assert "^1.0.0"
    minimalistic-crypto-utils "^1.0.1"

-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
  version "3.3.2"
  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -11697,11 +11685,6 @@ is-wsl@^2.1.1, is-wsl@^2.2.0:
  dependencies:
    is-docker "^2.0.0"

-isarray@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
-  integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
-
 isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
  version "1.0.0"
  resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -12969,7 +12952,7 @@ longest-streak@^3.0.0:
  resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-3.1.0.tgz#62fa67cd958742a1574af9f39866364102d90cd4"
  integrity sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==

-loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.1.0, loose-envify@^1.4.0:
  version "1.4.0"
  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -15078,13 +15061,6 @@ path-to-regexp@0.1.7:
  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
  integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==

-path-to-regexp@^1.7.0:
-  version "1.8.0"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-1.8.0.tgz#887b3ba9d84393e87a0a0b9f4cb756198b53548a"
-  integrity sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==
-  dependencies:
-    isarray "0.0.1"
-
 path-type@^1.0.0:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/path-type/-/path-type-1.1.0.tgz#59c44f7ee491da704da415da5a4070ba4f8fe441"
@@ -16060,7 +16036,7 @@ react-is@17.0.2, react-is@^17.0.1, react-is@^17.0.2:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
  integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==

-react-is@^16.10.2, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
+react-is@^16.10.2, react-is@^16.13.1, react-is@^16.7.0:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -16136,34 +16112,6 @@ react-router-dom@6, react-router-dom@^6.7.0:
    "@remix-run/router" "1.3.0"
    react-router "6.7.0"

-react-router-dom@^5.2.0:
-  version "5.3.4"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.3.4.tgz#2ed62ffd88cae6db134445f4a0c0ae8b91d2e5e6"
-  integrity sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==
-  dependencies:
-    "@babel/runtime" "^7.12.13"
-    history "^4.9.0"
-    loose-envify "^1.3.1"
-    prop-types "^15.6.2"
-    react-router "5.3.4"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-
-react-router@5.3.4:
-  version "5.3.4"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.3.4.tgz#8ca252d70fcc37841e31473c7a151cf777887bb5"
-  integrity sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==
-  dependencies:
-    "@babel/runtime" "^7.12.13"
-    history "^4.9.0"
-    hoist-non-react-statics "^3.1.0"
-    loose-envify "^1.3.1"
-    path-to-regexp "^1.7.0"
-    prop-types "^15.6.2"
-    react-is "^16.6.0"
-    tiny-invariant "^1.0.2"
-    tiny-warning "^1.0.0"
-
 react-router@6.7.0:
  version "6.7.0"
  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.7.0.tgz#db262684c13b5c2970694084ae9e8531718a0681"
@@ -16742,11 +16690,6 @@ resolve-from@^5.0.0:
  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
  integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==

-resolve-pathname@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-3.0.0.tgz#99d02224d3cf263689becbb393bc560313025dcd"
-  integrity sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==
-
 resolve-url@^0.2.1:
  version "0.2.1"
  resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -18180,12 +18123,7 @@ timers-browserify@^2.0.4:
  dependencies:
    setimmediate "^1.0.4"

-tiny-invariant@^1.0.2:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
-  integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
-
-tiny-warning@^1.0.0, tiny-warning@^1.0.2:
+tiny-warning@^1.0.2:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -18985,11 +18923,6 @@ validate-npm-package-name@^3.0.0:
  dependencies:
    builtins "^1.0.3"

-value-equal@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-1.0.1.tgz#1e0b794c734c5c0cade179c437d356d931a34d6c"
-  integrity sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==
-
 vary@~1.1.2:
  version "1.1.2"
  resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"