kylefang/connect
1
0
Fork 0
mirror of https://github.com/zhigang1992/connect.git synced 2026-01-12 22:46:28 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: assets

Browse Source
This commit is contained in:
fbwoolf
2021-06-09 12:56:45 -05:00
parent dd500c5716
commit ec2e1cc5d4
11 changed files with 88 additions and 201 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/connect-react/src/react/hooks/use-connect.ts
View File

@@ -28,9 +28,8 @@ const useConnectDispatch = () => {
};
export const useConnect = () => {
const { isOpen, isAuthenticating, authData, authOptions, userSession } = useContext(
ConnectContext
);
const { isOpen, isAuthenticating, authData, authOptions, userSession } =
useContext(ConnectContext);
const dispatch = useConnectDispatch();

4
packages/connect-ui/src/components/modal/assets/close-icon.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7 7.00011L17 17.0001" stroke="#242629" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 7L7 17" stroke="#242629" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 326 B

27
packages/connect-ui/src/components/modal/assets/close-icon.tsx
View File

@@ -1,27 +0,0 @@
import { h } from '@stencil/core';
export const CloseIcon = ({ onClick }: { onClick: () => void }) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
onClick={onClick}
>
<path
d="M7 7.00011L17 17.0001"
stroke="#242629"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M17 7L7 17"
stroke="#242629"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
);

49
packages/connect-ui/src/components/modal/assets/key-and-keyhole.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 248 KiB

134
packages/connect-ui/src/components/modal/assets/key-and-keyhole.tsx
View File

File diff suppressed because one or more lines are too long

17
packages/connect-ui/src/components/modal/assets/stacks-icon.svg Normal file
View File

@@ -0,0 +1,17 @@
<svg width="133" height="24" viewBox="0 0 133 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#0C0C0D"/>
<path d="M13.7569 13.6058L15.6688 16.5H14.2406L11.9962 13.0995L9.75189 16.5H8.33123L10.2431 13.6134H7.5V12.5176H16.5V13.6058H13.7569Z" fill="white"/>
<path d="M16.5 10.3564V11.4521V11.4597H7.5V10.3564H10.1902L8.30101 7.5H9.72922L11.9962 10.9458L14.2708 7.5H15.699L13.8098 10.3564H16.5Z" fill="white"/>
<path d="M36.9277 18C36.1267 18 35.3713 17.8729 34.6615 17.6188C33.9619 17.3545 33.3688 16.9377 32.8821 16.3685C32.3954 15.7891 32.1014 15.0572 32 14.1728H33.8251C33.9974 14.986 34.3726 15.5705 34.9505 15.9263C35.5284 16.2719 36.1976 16.4447 36.9581 16.4447C37.6982 16.4447 38.2762 16.2922 38.6919 15.9873C39.1177 15.6722 39.3306 15.2147 39.3306 14.615C39.3306 14.1677 39.1988 13.8119 38.9352 13.5476C38.6716 13.2732 38.3421 13.075 37.9466 12.953C37.5512 12.8208 37.0088 12.6785 36.3193 12.526C35.4777 12.3431 34.7984 12.1601 34.2813 11.9771C33.7642 11.784 33.3232 11.479 32.9582 11.0623C32.5931 10.6353 32.4106 10.0508 32.4106 9.30877C32.4106 8.61753 32.5779 8.02287 32.9125 7.52478C33.2471 7.02668 33.7135 6.65057 34.3117 6.39644C34.91 6.13215 35.5943 6 36.3649 6C37.5005 6 38.479 6.29479 39.3002 6.88437C40.1215 7.46379 40.6234 8.33799 40.8059 9.50699H39.0113C38.8592 8.84625 38.5398 8.35832 38.0531 8.0432C37.5766 7.72808 37.0037 7.57052 36.3345 7.57052C35.6653 7.57052 35.1432 7.71283 34.768 7.99746C34.3929 8.27192 34.2053 8.6582 34.2053 9.15629C34.2053 9.54257 34.3269 9.85261 34.5703 10.0864C34.8238 10.3202 35.133 10.4981 35.498 10.6201C35.863 10.7421 36.37 10.8742 37.0189 11.0165C37.901 11.2097 38.6108 11.4079 39.1481 11.6112C39.6957 11.8145 40.1621 12.1499 40.5473 12.6175C40.9326 13.075 41.1253 13.7052 41.1253 14.5083C41.1253 15.5858 40.7552 16.4396 40.015 17.0699C39.285 17.69 38.2559 18 36.9277 18Z" fill="#0C0C0D"/>
<path d="M45.3468 17.817C44.6877 17.817 44.1909 17.6645 43.8563 17.3596C43.5217 17.0546 43.3544 16.5413 43.3544 15.8196V10.7268H42.0465V9.32401H43.3544V6.18297H45.0274V9.32401H46.7916V10.7268H45.0274V15.3774C45.0274 15.7332 45.0781 15.9924 45.1795 16.155C45.2809 16.3177 45.5141 16.399 45.8791 16.399H46.7764V17.817H45.3468Z" fill="#0C0C0D"/>
<path d="M50.5949 17.9848C49.7635 17.9848 49.0943 17.7662 48.5873 17.3291C48.0804 16.8818 47.8269 16.277 47.8269 15.5146C47.8269 14.7319 48.1311 14.1169 48.7394 13.6696C49.1957 13.3342 49.8497 13.0851 50.7014 12.9225L53.4694 12.3888C53.4592 11.7992 53.3021 11.3469 52.9979 11.0318C52.6633 10.6963 52.2172 10.5286 51.6595 10.5286C51.2033 10.5286 50.8028 10.6607 50.458 10.925C50.1234 11.1792 49.9105 11.5248 49.8193 11.9619H48.1615C48.3034 11.0673 48.7039 10.3761 49.363 9.88818C50.022 9.40025 50.7926 9.15629 51.6747 9.15629C52.1715 9.15629 52.638 9.23253 53.0739 9.38501C53.5201 9.52732 53.8952 9.74079 54.1994 10.0254C54.605 10.4015 54.8584 10.8437 54.9598 11.352C55.0714 11.8602 55.1271 12.4447 55.1271 13.1055V17.817H53.4542V16.5667C53.221 16.9632 52.9269 17.2732 52.572 17.4968C52.0651 17.8221 51.406 17.9848 50.5949 17.9848ZM50.9295 16.5972C51.3756 16.5972 51.7812 16.5057 52.1462 16.3227C52.643 16.0686 52.9878 15.7332 53.1804 15.3164C53.3832 14.8895 53.4846 14.3405 53.4846 13.6696L51.0968 14.1423C50.5087 14.2643 50.0829 14.4473 49.8193 14.6912C49.6063 14.9047 49.4999 15.1639 49.4999 15.4689C49.4999 15.8247 49.6266 16.1042 49.8801 16.3075C50.1437 16.5006 50.4935 16.5972 50.9295 16.5972Z" fill="#0C0C0D"/>
<path d="M60.7541 17.9848C59.9329 17.9848 59.2028 17.7967 58.5641 17.4206C57.9354 17.0445 57.4437 16.521 57.0888 15.8501C56.734 15.169 56.5565 14.3964 56.5565 13.5324C56.5565 12.6887 56.734 11.9365 57.0888 11.2757C57.4437 10.615 57.9354 10.0966 58.5641 9.72046C59.2028 9.34435 59.9329 9.15629 60.7541 9.15629C61.7376 9.15629 62.5691 9.41042 63.2484 9.91868C63.9379 10.4269 64.384 11.108 64.5868 11.9619H62.7921C62.64 11.5248 62.3866 11.1842 62.0317 10.9403C61.6768 10.6963 61.251 10.5743 60.7541 10.5743C60.2675 10.5743 59.8365 10.7014 59.4614 10.9555C59.0862 11.1995 58.7922 11.5451 58.5793 11.9924C58.3664 12.4396 58.2599 12.953 58.2599 13.5324C58.2599 14.1321 58.3664 14.6607 58.5793 15.1182C58.7922 15.5756 59.0862 15.9314 59.4614 16.1855C59.8365 16.4396 60.2675 16.5667 60.7541 16.5667C61.2814 16.5667 61.7275 16.4295 62.0925 16.155C62.4677 15.8704 62.7161 15.4943 62.8378 15.0267H64.6476C64.455 15.9416 64.0038 16.6633 63.294 17.1919C62.5944 17.7205 61.7478 17.9848 60.7541 17.9848Z" fill="#0C0C0D"/>
<path d="M67.74 17.817H66.067V6.18297H67.74V12.587L71.1467 9.32401H73.352L69.3977 13.0292L73.6714 17.817H71.527L67.74 13.4867V17.817Z" fill="#0C0C0D"/>
<path d="M77.9983 17.9848C76.9337 17.9848 76.0414 17.7306 75.3216 17.2224C74.6118 16.7039 74.186 15.972 74.044 15.0267H75.7322C75.8539 15.5248 76.1023 15.9111 76.4774 16.1855C76.8627 16.46 77.3697 16.5972 77.9983 16.5972C78.5154 16.5972 78.9311 16.5006 79.2454 16.3075C79.5597 16.1042 79.7169 15.8196 79.7169 15.4536C79.7169 15.169 79.6206 14.9454 79.4279 14.7827C79.2353 14.6099 78.992 14.4778 78.6979 14.3863C78.4039 14.2948 78.0135 14.1982 77.5268 14.0966C76.8577 13.9644 76.3152 13.8272 75.8995 13.6849C75.4838 13.5426 75.1289 13.3088 74.8349 12.9835C74.5408 12.6582 74.3938 12.2109 74.3938 11.6417C74.3938 10.8386 74.6929 10.2236 75.2911 9.7967C75.8894 9.36976 76.6498 9.15629 77.5725 9.15629C78.5256 9.15629 79.3215 9.40534 79.9603 9.90343C80.599 10.3914 80.9944 11.0724 81.1465 11.9466H79.58C79.4584 11.4689 79.2201 11.1131 78.8652 10.8793C78.5103 10.6455 78.0794 10.5286 77.5725 10.5286C77.0858 10.5286 76.7056 10.6201 76.4318 10.8031C76.1581 10.986 76.0212 11.2351 76.0212 11.5502C76.0212 11.8043 76.1124 12.0076 76.2949 12.1601C76.4774 12.3024 76.7005 12.4142 76.9641 12.4956C77.2379 12.5769 77.6181 12.6633 78.1048 12.7548C78.7942 12.8869 79.357 13.0292 79.793 13.1817C80.2289 13.324 80.599 13.568 80.9032 13.9136C81.2175 14.249 81.3747 14.7166 81.3747 15.3164C81.3747 16.1296 81.0756 16.7802 80.4773 17.2681C79.8791 17.7459 79.0528 17.9848 77.9983 17.9848Z" fill="#0C0C0D"/>
<path d="M91.866 17.817H89.4326L86.1931 6.18297H88.079L90.7101 15.8196L93.2196 6.18297H95.2728L97.7974 15.8348L100.413 6.18297H102.299L99.0598 17.817H96.6264L94.2538 8.63787L91.866 17.817Z" fill="#0C0C0D"/>
<path d="M105.082 17.9848C104.25 17.9848 103.581 17.7662 103.074 17.3291C102.567 16.8818 102.314 16.277 102.314 15.5146C102.314 14.7319 102.618 14.1169 103.226 13.6696C103.682 13.3342 104.336 13.0851 105.188 12.9225L107.956 12.3888C107.946 11.7992 107.789 11.3469 107.485 11.0318C107.15 10.6963 106.704 10.5286 106.146 10.5286C105.69 10.5286 105.289 10.6607 104.945 10.925C104.61 11.1792 104.397 11.5248 104.306 11.9619H102.648C102.79 11.0673 103.191 10.3761 103.85 9.88818C104.509 9.40025 105.279 9.15629 106.161 9.15629C106.658 9.15629 107.125 9.23253 107.561 9.38501C108.007 9.52732 108.382 9.74079 108.686 10.0254C109.092 10.4015 109.345 10.8437 109.447 11.352C109.558 11.8602 109.614 12.4447 109.614 13.1055V17.817H107.941V16.5667C107.708 16.9632 107.414 17.2732 107.059 17.4968C106.552 17.8221 105.893 17.9848 105.082 17.9848ZM105.416 16.5972C105.862 16.5972 106.268 16.5057 106.633 16.3227C107.13 16.0686 107.474 15.7332 107.667 15.3164C107.87 14.8895 107.971 14.3405 107.971 13.6696L105.584 14.1423C104.995 14.2643 104.57 14.4473 104.306 14.6912C104.093 14.9047 103.987 15.1639 103.987 15.4689C103.987 15.8247 104.113 16.1042 104.367 16.3075C104.63 16.5006 104.98 16.5972 105.416 16.5972Z" fill="#0C0C0D"/>
<path d="M113.355 17.817C112.696 17.817 112.199 17.6645 111.865 17.3596C111.53 17.0546 111.363 16.5413 111.363 15.8196V6.18297H113.036V15.4079C113.036 15.7637 113.091 16.0178 113.203 16.1703C113.314 16.3227 113.543 16.399 113.887 16.399H114.359V17.817H113.355Z" fill="#0C0C0D"/>
<path d="M117.599 17.817C116.94 17.817 116.443 17.6645 116.109 17.3596C115.774 17.0546 115.607 16.5413 115.607 15.8196V6.18297H117.28V15.4079C117.28 15.7637 117.336 16.0178 117.447 16.1703C117.559 16.3227 117.787 16.399 118.131 16.399H118.603V17.817H117.599Z" fill="#0C0C0D"/>
<path d="M123.403 17.9848C122.582 17.9848 121.852 17.7967 121.213 17.4206C120.574 17.0343 120.077 16.5108 119.722 15.8501C119.367 15.1792 119.19 14.432 119.19 13.6086C119.19 12.8361 119.347 12.1093 119.662 11.4282C119.986 10.7471 120.463 10.1982 121.091 9.78145C121.72 9.36468 122.475 9.15629 123.357 9.15629C124.108 9.15629 124.797 9.31893 125.426 9.64422C126.064 9.9695 126.576 10.4574 126.962 11.108C127.347 11.7484 127.54 12.5311 127.54 13.4562V13.9136H120.893C120.924 14.249 121.005 14.554 121.137 14.8285C121.34 15.3469 121.644 15.7586 122.049 16.0635C122.455 16.3685 122.916 16.521 123.433 16.521C123.971 16.521 124.432 16.3837 124.817 16.1093C125.203 15.8247 125.481 15.4638 125.654 15.0267H127.403C127.119 15.9009 126.637 16.6125 125.958 17.1614C125.289 17.7103 124.437 17.9848 123.403 17.9848ZM125.806 12.5565C125.765 12.2414 125.679 11.972 125.547 11.7484C125.345 11.3621 125.051 11.0673 124.665 10.864C124.29 10.6506 123.874 10.5438 123.418 10.5438C122.942 10.5438 122.521 10.6506 122.156 10.864C121.791 11.0673 121.502 11.3621 121.289 11.7484C121.167 11.9517 121.071 12.2211 121 12.5565H125.806Z" fill="#0C0C0D"/>
<path d="M131.555 17.817C130.896 17.817 130.399 17.6645 130.065 17.3596C129.73 17.0546 129.563 16.5413 129.563 15.8196V10.7268H128.255V9.32401H129.563V6.18297H131.236V9.32401H133V10.7268H131.236V15.3774C131.236 15.7332 131.286 15.9924 131.388 16.155C131.489 16.3177 131.722 16.399 132.087 16.399H132.985V17.817H131.555Z" fill="#0C0C0D"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.2 KiB

15
packages/connect-ui/src/components/modal/assets/stacks-icon.tsx
View File

@@ -1,15 +0,0 @@
import { h } from '@stencil/core';
export const StacksIcon = () => (
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="12" fill="#0C0C0D" />
<path
d="M13.7569 13.6058L15.6688 16.5H14.2406L11.9962 13.0995L9.75189 16.5H8.33123L10.2431 13.6134H7.5V12.5176H16.5V13.6058H13.7569Z"
fill="white"
/>
<path
d="M16.5 10.3564V11.4521V11.4597H7.5V10.3564H10.1902L8.30101 7.5H9.72922L11.9962 10.9458L14.2708 7.5H15.699L13.8098 10.3564H16.5Z"
fill="white"
/>
</svg>
);

20
packages/connect-ui/src/components/modal/modal.scss
View File

@@ -36,9 +36,6 @@
align-items: center;
justify-content: space-between;
padding: 24px;
svg {
cursor: pointer;
}
}
.header-left {
@@ -50,6 +47,10 @@
}
}
.header-right {
cursor: pointer;
}
.modal-content {
display: flex;
flex-direction: column;
@@ -106,6 +107,9 @@
margin: 0px auto;
box-sizing: border-box;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
line-height: 20px;
display: block;
align-items: center;
justify-content: center;
@@ -127,16 +131,6 @@
outline: none;
border: none;
cursor: pointer;
span {
align-items: center;
-webkit-box-pack: center;
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #ffffff;
white-space: nowrap;
}
}
.modal-footer {

14
packages/connect-ui/src/components/modal/modal.tsx
View File

@@ -1,7 +1,7 @@
import { Component, h, Prop, State, Element } from '@stencil/core';
import { CloseIcon } from './assets/close-icon';
import { KeyAndKeyhole } from './assets/key-and-keyhole';
import { StacksIcon } from './assets/stacks-icon';
import CloseIcon from './assets/close-icon.svg';
import KeyAndKeyhole from './assets/key-and-keyhole.svg';
import StacksIcon from './assets/stacks-icon.svg';
import type { AuthOptions } from '@stacks/connect/types/auth';
import { getBrowser } from './extension-util';
@@ -46,14 +46,14 @@ export class Modal {
<div class="modal-body">
<div class="modal-header">
<div class="header-left">
<StacksIcon />
<img src={StacksIcon} />
<span>Stacks Wallet</span>
</div>
<CloseIcon onClick={() => this.handleCloseModal()} />
<img class="header-right" src={CloseIcon} onClick={() => this.handleCloseModal()} />
</div>
<div class="modal-content">
<div class="modal-illustration">
<KeyAndKeyhole />
<img src={KeyAndKeyhole} />
<div class="app-logo">
<img src={this.authOptions.appDetails.icon} />
</div>
@@ -75,7 +75,7 @@ export class Modal {
this.handleDownloadPath(browser);
}}
>
<span>Download Stacks Wallet</span>
Download Stacks Wallet
</button>
</div>
)}

2
packages/connect-ui/src/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Connect UI</title>
<script type="module" src="/build/connect-ui.esm.js"></script>
<script type="module" src="/dist/connect-ui/connect-ui.esm.js"></script>
<script nomodule src="/build/connect-ui.js"></script>
</head>
</html>

2
packages/connect/src/auth.ts
View File

@@ -77,7 +77,7 @@ export const authenticate = async (authOptions: AuthOptions) => {
await userSession.handlePendingSignIn(authResponse);
const token = decodeToken(authResponse);
const payload = token?.payload;
const authResponsePayload = (payload as unknown) as AuthResponsePayload;
const authResponsePayload = payload as unknown as AuthResponsePayload;
onFinish?.({
authResponse,
authResponsePayload,