kylefang/connect
1
0
Fork 0
mirror of https://github.com/zhigang1992/connect.git synced 2026-04-23 20:51:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: support relative app icons in appDetails, closes #348

Browse Source
This commit is contained in:
Hank Stoever
2020-06-29 11:24:53 -04:00
parent c5800aeb34
commit 40f27dcb64
6 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/app/src/common/hooks/useAppDetails.tsx
View File

@@ -1,9 +1,9 @@
import { useSelector } from 'react-redux';
import { selectAppName, selectAppIcon, selectAppURL } from '@store/onboarding/selectors';
import { selectAppName, selectFullAppIcon, selectAppURL } from '@store/onboarding/selectors';
export const useAppDetails = () => {
const name = useSelector(selectAppName);
const icon = useSelector(selectAppIcon);
const icon = useSelector(selectFullAppIcon);
const url = useSelector(selectAppURL);
return { name, icon, url };

4
packages/app/src/components/app-icon/index.tsx
View File

@@ -4,10 +4,10 @@ import { useSelector } from 'react-redux';
import { Image } from '@components/image';
import { AppState } from '@store';
import { selectAppName, selectAppIcon } from '@store/onboarding/selectors';
import { selectAppName, selectFullAppIcon } from '@store/onboarding/selectors';
export const AppIcon = ({ ...rest }: BoxProps) => {
const appIcon = useSelector((state: AppState) => selectAppIcon(state));
const appIcon = useSelector((state: AppState) => selectFullAppIcon(state));
const appName = useSelector((state: AppState) => selectAppName(state));
return (
<Box size={['48px', '78px']} mx="auto" {...rest}>

11
packages/app/src/components/connected-screen-header.tsx
View File

@@ -1,16 +1,11 @@
import React from 'react';
import { ScreenHeader as BaseScreenHeader, ScreenHeaderProps } from '@blockstack/connect';
import { selectAppIcon, selectAppName } from '@store/onboarding/selectors';
import { selectFullAppIcon, selectAppName } from '@store/onboarding/selectors';
import { useSelector } from 'react-redux';
export const ScreenHeader = (props: ScreenHeaderProps) => {
const name = useSelector(selectAppName);
const icon = useSelector(selectAppIcon);
const appDetails = {
name,
icon,
};
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-ignore
const icon = useSelector(selectFullAppIcon);
const appDetails = name && icon ? { name, icon } : undefined;
return <BaseScreenHeader appDetails={appDetails} hideIcon={props.hideIcon || !icon} {...props} />;
};

4
packages/app/src/store/onboarding/actions.ts
View File

@@ -19,7 +19,7 @@ import { AppState } from '@store';
import {
selectDecodedAuthRequest,
selectAuthRequest,
selectAppIcon,
selectFullAppIcon,
selectAppName,
selectCurrentScreen,
} from './selectors';
@@ -153,7 +153,7 @@ export function doFinishSignIn(
const decodedAuthRequest = selectDecodedAuthRequest(state);
const authRequest = selectAuthRequest(state);
const wallet = selectCurrentWallet(state);
const appIcon = selectAppIcon(state);
const appIcon = selectFullAppIcon(state);
const appName = selectAppName(state);
if (!decodedAuthRequest || !authRequest || !identities || !wallet) {
console.error('Uh oh! Finished onboarding without auth info.');

16
packages/app/src/store/onboarding/selectors.ts
View File

@@ -21,3 +21,19 @@ export const selectAppURL = (state: AppState) => state.onboarding.appURL;
export const selectOnboardingProgress = (state: AppState) => state.onboarding.onboardingInProgress;
export const selectOnboardingPath = (state: AppState) => state.onboarding.onboardingPath;
/**
* Select the fully qualified app icon. This allows developers to pass
* a relative icon path in their `appDetails`.
*/
export const selectFullAppIcon = (state: AppState) => {
let icon = selectAppIcon(state);
const authRequest = selectDecodedAuthRequest(state);
const absoluteURLPattern = /^https?:\/\//i;
if (authRequest?.redirect_uri && icon && !absoluteURLPattern.test(icon)) {
const url = new URL(authRequest.redirect_uri);
url.pathname = icon;
icon = url.toString();
}
return icon;
};

2
packages/test-app/components/app.tsx
View File

@@ -4,7 +4,7 @@ import { ThemeProvider, Box, theme, Text, Flex, CSSReset, Button, Stack } from '
import { Connect, AuthOptions, useConnect } from '@blockstack/connect';
import { UserSession, AppConfig } from 'blockstack';
const icon = `${document.location.origin}/assets/messenger-app-icon.png`;
const icon = '/assets/messenger-app-icon.png';
let authOrigin = process.env.AUTH_ORIGIN || 'http://localhost:8080';
// In order to have deploy previews use the same version of the authenticator,
// we detect if this is a 'deploy preview' and change the origin to point to the