Skip to content

Commit

Permalink
Wallet selection design
Browse files Browse the repository at this point in the history
  • Loading branch information
@boo-0x
boo-0x committed Apr 23, 2024
1 parent fc0c05c commit e04a944
Show file tree
Hide file tree
Showing 4 changed files with 21 additions and 125 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
"@fortawesome/free-solid-svg-icons": "^6.1.0",
"@fortawesome/react-fontawesome": "^0.2.0",
"@polkadot/react-identicon": "^2.0.1",
"@reef-chain/util-lib": "^2.4.4",
"@reef-chain/util-lib": "^2.5.1",
"@types/jest": "^27.4.1",
"@types/node": "^17.0.21",
"@types/react": "^18.2.55",
Expand Down
13 changes: 8 additions & 5 deletions src/ui-kit/components/organisms/AccountSelector/AccountSelector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ import { CSSTransition } from "react-transition-group";

import Icon from "./../../atoms/Icon";
import {
faChevronDown,
faChevronUp,
faCircleInfo,
faGlobe,
faWarning,
Expand Down Expand Up @@ -33,6 +35,8 @@ export type Extension = {
installed: boolean;
isSnap?: boolean;
icon?: JSX.Element;
chromeExtensionLink?: string;
firefoxExtensionLink?: string;
};

export type Account = {
Expand Down Expand Up @@ -254,6 +258,9 @@ const AccountSelector = ({
fill
onClick={() => setExtensionDropdown(true)}
>
<Icon className="uik-account-selector__chevron"
icon={isExtensionDropdownOpen ? faChevronUp : faChevronDown}
/>
<span>{selectedExtension?.displayName}</span>
{selectedExtension?.icon && selectedExtension.icon}
</Button>
Expand All @@ -271,12 +278,8 @@ const AccountSelector = ({
>
<span>{extension.displayName}</span>
{extension.icon && extension.icon}
{extension.selected ? (
{extension.selected && (
<Tag color="green" text={strings.selected} />
) : extension.installed ? (
<Tag color="orange" text={strings.select} />
) : (
<Tag color="red" text={strings.install} />
)}
</DropdownItem>
))}
Expand Down
5 changes: 5 additions & 0 deletions src/ui-kit/styles/account-selector.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,11 @@
}
}

.uik-account-selector__chevron {
height: 15px !important;
margin: 0 5px 0 0 !important;
}

.uik-account-selector__title {
font-size: 1.625rem;
line-height: 1.2;
Expand Down
126 changes: 7 additions & 119 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,26 +15,6 @@
"@jridgewell/gen-mapping" "^0.3.5"
"@jridgewell/trace-mapping" "^0.3.24"

"@apollo/client@^3.9.4":
version "3.9.5"
resolved "https://registry.yarnpkg.com/@apollo/client/-/client-3.9.5.tgz#502ec191756a7f44788b5f08cbe7b8de594a7656"
integrity sha512-7y+c8MTPU+hhTwvcGVtMMGIgWduzrvG1mz5yJMRyqYbheBkkky3Lki6ADWVSBXG1lZoOtPYvB2zDgVfKb2HSsw==
dependencies:
"@graphql-typed-document-node/core" "^3.1.1"
"@wry/caches" "^1.0.0"
"@wry/equality" "^0.5.6"
"@wry/trie" "^0.5.0"
graphql-tag "^2.12.6"
hoist-non-react-statics "^3.3.2"
optimism "^0.18.0"
prop-types "^15.7.2"
rehackt "0.0.5"
response-iterator "^0.2.6"
symbol-observable "^4.0.0"
ts-invariant "^0.10.3"
tslib "^2.3.0"
zen-observable-ts "^1.2.5"

"@babel/cli@^7.17.6":
version "7.23.9"
resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.23.9.tgz#06b3e76376ee53f14ac8ac422c884950c69e1b9e"
Expand Down Expand Up @@ -2066,11 +2046,6 @@
dependencies:
prop-types "^15.8.1"

"@graphql-typed-document-node/core@^3.1.1":
version "3.2.0"
resolved "https://registry.yarnpkg.com/@graphql-typed-document-node/core/-/core-3.2.0.tgz#5f3d96ec6b2354ad6d8a28bf216a1d97b5426861"
integrity sha512-mB9oAsNCm9aM3/SOv4YtBMqZbYj10R7dkq8byBqxGY/ncFwhf2oQzMV+LCRlWoDSEBJ3COiR1yeDvMtsoOsuFQ==

"@humanwhocodes/config-array@^0.11.14":
version "0.11.14"
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
Expand Down Expand Up @@ -3242,12 +3217,11 @@
blakejs "~1.2.1"
ethers "~5.5.0"

"@reef-chain/util-lib@^2.4.4":
version "2.4.6"
resolved "https://registry.yarnpkg.com/@reef-chain/util-lib/-/util-lib-2.4.6.tgz#9db2e361f17cdf68ccbbfce8ae5d3177d4f45234"
integrity sha512-CQReCtX76/5HccpaBPqNe+3IkupgQ9wnCtiHeBIXlwRGxYNC611L1rISajGf68lDVucd2eskNZSmWFeoIK9fog==
"@reef-chain/util-lib@^2.5.1":
version "2.5.1"
resolved "https://registry.yarnpkg.com/@reef-chain/util-lib/-/util-lib-2.5.1.tgz#9e3fda83ff6f1b1448a826267334d3703810643e"
integrity sha512-GaZ7o//wKg2uLEVLUT5zxebMinA/SfrQnYrVVUHyeOHG+NNdXStBr+YjEWjK7G7SAk6d1Ii6cEND/nWt0rCgyg==
dependencies:
"@apollo/client" "^3.9.4"
"@metamask/providers" "^14.0.2"
"@polkadot/api" "^10.11.2"
"@polkadot/extension-inject" "^0.46.6"
Expand Down Expand Up @@ -3996,41 +3970,6 @@
optionalDependencies:
prettier "^1.18.2 || ^2.0.0"

"@wry/caches@^1.0.0":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@wry/caches/-/caches-1.0.1.tgz#8641fd3b6e09230b86ce8b93558d44cf1ece7e52"
integrity sha512-bXuaUNLVVkD20wcGBWRyo7j9N3TxePEWFZj2Y+r9OoUzfqmavM84+mFykRicNsBqatba5JLay1t48wxaXaWnlA==
dependencies:
tslib "^2.3.0"

"@wry/context@^0.7.0":
version "0.7.4"
resolved "https://registry.yarnpkg.com/@wry/context/-/context-0.7.4.tgz#e32d750fa075955c4ab2cfb8c48095e1d42d5990"
integrity sha512-jmT7Sb4ZQWI5iyu3lobQxICu2nC/vbUhP0vIdd6tHC9PTfenmRmuIFqktc6GH9cgi+ZHnsLWPvfSvc4DrYmKiQ==
dependencies:
tslib "^2.3.0"

"@wry/equality@^0.5.6":
version "0.5.7"
resolved "https://registry.yarnpkg.com/@wry/equality/-/equality-0.5.7.tgz#72ec1a73760943d439d56b7b1e9985aec5d497bb"
integrity sha512-BRFORjsTuQv5gxcXsuDXx6oGRhuVsEGwZy6LOzRRfgu+eSfxbhUQ9L9YtSEIuIjY/o7g3iWFjrc5eSY1GXP2Dw==
dependencies:
tslib "^2.3.0"

"@wry/trie@^0.4.3":
version "0.4.3"
resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.4.3.tgz#077d52c22365871bf3ffcbab8e95cb8bc5689af4"
integrity sha512-I6bHwH0fSf6RqQcnnXLJKhkSXG45MFral3GxPaY4uAl0LYDZM+YDVDAiU9bYwjTuysy1S0IeecWtmq1SZA3M1w==
dependencies:
tslib "^2.3.0"

"@wry/trie@^0.5.0":
version "0.5.0"
resolved "https://registry.yarnpkg.com/@wry/trie/-/trie-0.5.0.tgz#11e783f3a53f6e4cd1d42d2d1323f5bc3fa99c94"
integrity sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==
dependencies:
tslib "^2.3.0"

abab@^2.0.3, abab@^2.0.5:
version "2.0.6"
resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
Expand Down Expand Up @@ -6934,13 +6873,6 @@ graphemer@^1.4.0:
resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==

graphql-tag@^2.12.6:
version "2.12.6"
resolved "https://registry.yarnpkg.com/graphql-tag/-/graphql-tag-2.12.6.tgz#d441a569c1d2537ef10ca3d1633b48725329b5f1"
integrity sha512-FdSNcu2QQcWnM2VNvSCCDCVS5PpPqpzgFT8+GXzqJuoDd0CBncxCY278u4mhRO7tMgo2JjgJA5aZ+nWSQ/Z+xg==
dependencies:
tslib "^2.1.0"

graphql@^16.8.1:
version "16.8.1"
resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.8.1.tgz#1930a965bef1170603702acdb68aedd3f3cf6f07"
Expand Down Expand Up @@ -7082,7 +7014,7 @@ hmac-drbg@^1.0.1:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"

hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.2:
hoist-non-react-statics@^3.0.0:
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==
Expand Down Expand Up @@ -8918,16 +8850,6 @@ onetime@^5.1.0, onetime@^5.1.2:
dependencies:
mimic-fn "^2.1.0"

optimism@^0.18.0:
version "0.18.0"
resolved "https://registry.yarnpkg.com/optimism/-/optimism-0.18.0.tgz#e7bb38b24715f3fdad8a9a7fc18e999144bbfa63"
integrity sha512-tGn8+REwLRNFnb9WmcY5IfpOqeX2kpaYJ1s6Ae3mn12AeydLkR3j+jSCmVQFoXqU8D41PAJ1RG1rCRNWmNZVmQ==
dependencies:
"@wry/caches" "^1.0.0"
"@wry/context" "^0.7.0"
"@wry/trie" "^0.4.3"
tslib "^2.3.0"

optionator@^0.9.1, optionator@^0.9.3:
version "0.9.3"
resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
Expand Down Expand Up @@ -9337,7 +9259,7 @@ prompts@^2.0.1:
kleur "^3.0.3"
sisteransi "^1.0.5"

prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
prop-types@^15.6.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
Expand Down Expand Up @@ -9651,11 +9573,6 @@ regjsparser@^0.9.1:
dependencies:
jsesc "~0.5.0"

rehackt@0.0.5:
version "0.0.5"
resolved "https://registry.yarnpkg.com/rehackt/-/rehackt-0.0.5.tgz#184c82ea369d5b0b989ede0593ebea8b2bcfb1d6"
integrity sha512-BI1rV+miEkaHj8zd2n+gaMgzu/fKz7BGlb4zZ6HAiY9adDmJMkaDcmuXlJFv0eyKUob+oszs3/2gdnXUrzx2Tg==

reinterval@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/reinterval/-/reinterval-1.1.0.tgz#3361ecfa3ca6c18283380dd0bb9546f390f5ece7"
Expand Down Expand Up @@ -9773,11 +9690,6 @@ resolve@~1.19.0:
is-core-module "^2.1.0"
path-parse "^1.0.6"

response-iterator@^0.2.6:
version "0.2.6"
resolved "https://registry.yarnpkg.com/response-iterator/-/response-iterator-0.2.6.tgz#249005fb14d2e4eeb478a3f735a28fd8b4c9f3da"
integrity sha512-pVzEEzrsg23Sh053rmDUvLSkGXluZio0qu8VT6ukrYuvtjVfCbDZH9d6PGXb8HZfzdNZt8feXv/jvUzlhRgLnw==

responselike@^1.0.2:
version "1.0.2"
resolved "https://registry.yarnpkg.com/responselike/-/responselike-1.0.2.tgz#918720ef3b631c5642be068f15ade5a46f4ba1e7"
Expand Down Expand Up @@ -10361,11 +10273,6 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==

symbol-observable@^4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-4.0.0.tgz#5b425f192279e87f2f9b937ac8540d1984b39205"
integrity sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==

symbol-tree@^3.2.4:
version "3.2.4"
resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
Expand Down Expand Up @@ -10505,13 +10412,6 @@ trim-repeated@^1.0.0:
dependencies:
escape-string-regexp "^1.0.2"

ts-invariant@^0.10.3:
version "0.10.3"
resolved "https://registry.yarnpkg.com/ts-invariant/-/ts-invariant-0.10.3.tgz#3e048ff96e91459ffca01304dbc7f61c1f642f6c"
integrity sha512-uivwYcQaxAucv1CzRp2n/QdYPo4ILf9VXgH19zEIjFx2EJufV16P0JtJVpYHy89DItG6Kwj2oIUjrcK5au+4tQ==
dependencies:
tslib "^2.1.0"

ts-morph@17.0.1:
version "17.0.1"
resolved "https://registry.yarnpkg.com/ts-morph/-/ts-morph-17.0.1.tgz#d85df4fcf9a1fcda1b331d52c00655f381c932d1"
Expand All @@ -10535,7 +10435,7 @@ tslib@^1.8.1:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==

tslib@^2.1.0, tslib@^2.3.0, tslib@^2.6.2:
tslib@^2.1.0, tslib@^2.6.2:
version "2.6.2"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
Expand Down Expand Up @@ -11319,15 +11219,3 @@ z-schema@~5.0.2:
validator "^13.7.0"
optionalDependencies:
commander "^10.0.0"

zen-observable-ts@^1.2.5:
version "1.2.5"
resolved "https://registry.yarnpkg.com/zen-observable-ts/-/zen-observable-ts-1.2.5.tgz#6c6d9ea3d3a842812c6e9519209365a122ba8b58"
integrity sha512-QZWQekv6iB72Naeake9hS1KxHlotfRpe+WGNbNx5/ta+R3DNjVO2bswf63gXlWDcs+EMd7XY8HfVQyP1X6T4Zg==
dependencies:
zen-observable "0.8.15"

zen-observable@0.8.15:
version "0.8.15"
resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==

0 comments on commit e04a944

Please sign in to comment.