Skip to content

Commit

Permalink
✨ Improve UX for Liker Land app in-app (#996)
Browse files Browse the repository at this point in the history
  • Loading branch information
nwingt authored Mar 28, 2023
1 parent 6d8b48b commit 453ddeb
Show file tree
Hide file tree
Showing 17 changed files with 273 additions and 177 deletions.
2 changes: 1 addition & 1 deletion src/components/Dialog.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
]"
@click="handleBackdropClick"
/>
<div :class="['fixed w-full max-w-[1920px] mx-auto p-[12px]', panelContainerClass]">
<div :class="['fixed w-full max-w-[1920px] mx-auto p-[12px] phone:mt-[84px]', panelContainerClass]">
<ButtonV2
v-if="hasCloseButton"
:class="[
Expand Down
4 changes: 2 additions & 2 deletions src/components/EventModal/Collect/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<template #top>
<NFTPageOwning
v-if="hasConnectedWallet"
class="mb-[10px]"
class="mb-[10px] phone:mt-0"
:collected-count="userCollectedCount"
/>
</template>
Expand Down Expand Up @@ -84,7 +84,7 @@

<template v-if="!uiTxNFTStatus">
<div class="flex flex-col items-start mb-[28px]">
<Separator class="h-[2px] bg-shade-gray self-center" />
<Separator class="h-[2px] bg-shade-gray self-center phone:hidden" />
<Label
preset="p6"
align="left"
Expand Down
4 changes: 2 additions & 2 deletions src/components/NFTPage/Owning.vue
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
'justify-center',
'items-center',
'w-full',
'py-[16px]',
'my-[34px]',
'py-[16px] phone:py-[8px]',
'my-[32px]',
'border-[2px]',
'border-shade-gray',
{'border-like-cyan-darker': uiTxNFTStatus === 'completed'},
Expand Down
2 changes: 1 addition & 1 deletion src/components/TxModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
:has-close-button="hasCloseButton"
:header-text="headerText"
panel-container-class="phone:max-w-[520px] laptop:w-[520px]"
panel-class="shadow-lg bg-white w-full p-[48px] phone:px-[18px] rounded-[24px]"
panel-class="shadow-lg bg-white w-full p-[48px] phone:p-[18px] rounded-[24px]"
:is-disabled-backdrop-click="true"
@close="$emit('close')"
>
Expand Down
13 changes: 9 additions & 4 deletions src/layouts/default.vue
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
<template>
<div class="flex flex-col items-stretch min-h-screen">
<SiteHeader class="text-like-green" />
<SiteHeader
v-if="!isInInAppBrowser"
class="text-like-green"
/>
<nuxt class="flex-grow" />
<Footer />
<Footer v-if="!isInInAppBrowser" />
<PortalTarget
name="dialog"
multiple
Expand Down Expand Up @@ -36,11 +39,13 @@
</template>

<script>
import alertMixin from '~/mixins/alert';
import { mapActions, mapGetters } from 'vuex';
import alertMixin from '~/mixins/alert';
import inAppMixin from '~/mixins/in-app';
export default {
mixins: [alertMixin],
mixins: [alertMixin, inAppMixin],
computed: {
...mapGetters(['uiIsOpenCollectModal']),
getTimeoutSec() {
Expand Down
24 changes: 13 additions & 11 deletions src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -355,31 +355,39 @@
"nft_portfolio_page_state_creations": "Creations",
"nft_portfolio_page_state_sales": "Total Revenue (LIKE)",
"nft_portfolio_page_state_value": "Asset Value (LIKE)",
"nft_primitive_nft_book": "The trading rule of Liker Land’s Writing NFT is not applicable to this NFT as it is published by a third-party.",
"nft_primitive_disclaimer": "The trading rule of Liker Land’s Writing NFT is not applicable to this NFT as it is published by a third-party.",
"nft_primitive_disclaimer_portfolio": "The trading rule of Liker Land’s Writing NFT is not applicable to these NFT as they are published by a third-party.",
"nft_primitive_nft_book": "The trading rule of Liker Land’s Writing NFT is not applicable to this NFT as it is published by a third-party.",
"nft_share_page_button_portfolio": "View Portfolio",
"nft_share_page_collector_title": "I am what I read. See my Writing NFT collection.",
"nft_share_page_creator_title": "Support me by collecting my work.",
"nft_supply_section_title": "Item Supply",
"nft_widget_button_collect": "Collect Now",
"nft_type_all_NFTs": "All NFTs",
"nft_type_writing_NFT": "Writing NFT",
"nft_type_book": "NFT Book",
"nft_type_other": "Other NFT",
"nft_type_writing_NFT": "Writing NFT",
"nft_widget_button_collect": "Collect Now",
"notification_login_in": "Verify wallet to view notifications",
"notification_login_in_button": "Verify",
"ok": "OK",
"order_menu_by": " By {order}",
"order_menu_collected": "Own",
"order_menu_display_state": "Featured",
"order_menu_price": "Price",
"order_menu_time": "Time",
"order_menu_filter_by": "Filter by",
"order_menu_price": "Price",
"order_menu_sort_by": "Sort by",
"order_menu_time": "Time",
"portfolio_collected_tab_no_item": "Collected NFT will be shown here",
"portfolio_created_tab_no_item": "Created NFT will be shown here",
"portfolio_description": "I am what I read. Explore my collection.",
"portfolio_finding_more_button": "Find more Writing NFT",
"portfolio_follow_hint": "Follow this creator to get informed first about {creator}’s updates.",
"portfolio_follower_export": "Export my follower list",
"portfolio_follower_export_ID": "Liker ID",
"portfolio_follower_export_success": "Export completed!",
"portfolio_follower_export_wallet": "Wallet Address",
"portfolio_follower_no_follower": "There are no followers yet",
"portfolio_follower_title": "My followers",
"portfolio_subscribe_confirm_button": "Confirm",
"portfolio_subscribe_error_alert": "Error occurred when following {creator}: {error}",
"portfolio_subscribe_message": "Are you sure to confirm following {creator}'s Writing NFT updates by {email}?",
Expand Down Expand Up @@ -413,12 +421,6 @@
"portfolio_unsubscribe_message_success": "You have successfully unfollowed {creator}.",
"portfolio_unsubscribe_success_alert": "Successfully unfollowed {creator}",
"portfolio_unsubscribe_title": "Unfollow {creator}",
"portfolio_follower_title": "My followers",
"portfolio_follower_export": "Export my follower list",
"portfolio_follower_no_follower": "There are no followers yet",
"portfolio_follower_export_success": "Export completed!",
"portfolio_follower_export_ID": "Liker ID",
"portfolio_follower_export_wallet": "Wallet Address",
"PortfolioEmptyView.Button": "Become a Civic Liker ",
"PortfolioEmptyView.SuperLiked.Label": "Share your favorite readings",
"PortfolioEmptyView.SuperLiked.Step1": "{button} to get 2 Super Likes daily",
Expand Down
24 changes: 13 additions & 11 deletions src/locales/zh-Hant.json
Original file line number Diff line number Diff line change
Expand Up @@ -345,31 +345,39 @@
"nft_portfolio_page_state_creations": "作品",
"nft_portfolio_page_state_sales": "總銷售額 (LIKE)",
"nft_portfolio_page_state_value": "資產值 (LIKE)",
"nft_primitive_nft_book": "以下 NFT 由第三方發行,不適用於 Liker Land 的 Writing NFT 交易機制。",
"nft_primitive_disclaimer": "以下 NFT 由第三方發行,不適用於 Liker Land 的 Writing NFT 交易機制。",
"nft_primitive_disclaimer_portfolio": "以下 NFT 由第三方發行,不適用於 Liker Land 的 Writing NFT 交易機制。",
"nft_primitive_nft_book": "以下 NFT 由第三方發行,不適用於 Liker Land 的 Writing NFT 交易機制。",
"nft_share_page_button_portfolio": "瀏覽藏品",
"nft_share_page_collector_title": "來看看我的收藏品,令人動容的文字,值得以 Writing NFT 永誌留存。",
"nft_share_page_creator_title": "收集我作品的 Writing NFT 到你的 Web3 書架,支持創作,也令內容永續。",
"nft_supply_section_title": "供應量",
"nft_widget_button_collect": "立即收藏",
"nft_type_all_NFTs": "所有 NFT",
"nft_type_writing_NFT": "Writing NFT",
"nft_type_book": "NFT 書",
"nft_type_other": "其他 NFT",
"nft_type_writing_NFT": "Writing NFT",
"nft_widget_button_collect": "立即收藏",
"notification_login_in": "驗證錢包以讀取通知",
"notification_login_in_button": "驗證",
"ok": "OK",
"order_menu_by": "按{order}",
"order_menu_collected": "擁有",
"order_menu_display_state": "精選",
"order_menu_price": "價格",
"order_menu_time": "時間",
"order_menu_filter_by": "篩選",
"order_menu_price": "價格",
"order_menu_sort_by": "排序",
"order_menu_time": "時間",
"portfolio_collected_tab_no_item": "已收藏的作品將在此展示",
"portfolio_created_tab_no_item": "已創作的作品將在此展示",
"portfolio_description": "我的閱讀清單,構成我的精神面貌。歡迎以文會友。",
"portfolio_finding_more_button": "發現更多佳作",
"portfolio_follow_hint": "追蹤作者以收到有關 {creator} 的更新通知。",
"portfolio_follower_export": "匯出我的追蹤者名單",
"portfolio_follower_export_ID": "Liker ID",
"portfolio_follower_export_success": "匯出成功!",
"portfolio_follower_export_wallet": "Wallet Address",
"portfolio_follower_no_follower": "尚無追蹤我的人",
"portfolio_follower_title": "我的追蹤者",
"portfolio_subscribe_confirm_button": "確認",
"portfolio_subscribe_error_alert": "追蹤 {creator} 時遇到錯誤: {error}",
"portfolio_subscribe_message": "確認登記 {email} 追蹤 {creator} 的 Writing NFT 更新?",
Expand Down Expand Up @@ -403,12 +411,6 @@
"portfolio_unsubscribe_message_success": "已取消追蹤 {creator}。",
"portfolio_unsubscribe_success_alert": "已取消追蹤 {creator}",
"portfolio_unsubscribe_title": "取消追蹤 {creator}",
"portfolio_follower_title": "我的追蹤者",
"portfolio_follower_export": "匯出我的追蹤者名單",
"portfolio_follower_no_follower": "尚無追蹤我的人",
"portfolio_follower_export_success": "匯出成功!",
"portfolio_follower_export_ID": "Liker ID",
"portfolio_follower_export_wallet": "Wallet Address",
"PortfolioEmptyView.Button": "成為讚賞公民",
"PortfolioEmptyView.SuperLiked.Label": "分享最愛的內容",
"PortfolioEmptyView.SuperLiked.Step1": "{button},獲得每天兩次 Super Like 的機會",
Expand Down
29 changes: 29 additions & 0 deletions src/mixins/in-app.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { mapActions, mapGetters } from 'vuex';

import { checkIsLikeCoinApp } from '~/util/client';

import walletLoginMixin from '~/mixins/wallet-login';

export default {
mixins: [walletLoginMixin],
computed: {
...mapGetters(['walletHasLoggedIn']),
isInInAppBrowser() {
return this.$route.query.in_app !== undefined || checkIsLikeCoinApp();
},
},
watch: {
isInInAppBrowser: {
immediate: true,
async handler(isInInAppBrowser) {
if (process.server || !isInInAppBrowser || this.walletHasLoggedIn) {
return;
}
await this.connectWallet();
},
},
},
methods: {
...mapActions(['openConnectWalletModal', 'initWalletAndLogin']),
},
};
40 changes: 40 additions & 0 deletions src/mixins/wallet-login.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { mapActions } from 'vuex';

import { logTrackerEvent } from '~/util/EventLogger';

export default {
methods: {
...mapActions([
'openConnectWalletModal',
'disconnectWallet',
'initWallet',
'initWalletAndLogin',
'initIfNecessary',
'restoreSession',
'signLogin',
]),
async connectWallet({ shouldSkipLogin = false } = {}) {
try {
const connection = await this.openConnectWalletModal({
language: this.$i18n.locale.split('-')[0],
});
if (!connection) return false;
const { method } = connection;
logTrackerEvent(
this,
'user',
`connected_wallet_${method}`,
'connected_wallet',
1
);
return shouldSkipLogin
? this.initWallet(connection)
: this.initWalletAndLogin(connection);
} catch (err) {
// eslint-disable-next-line no-console
console.error(err);
return false;
}
},
},
};
27 changes: 3 additions & 24 deletions src/mixins/wallet.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,10 @@ import { logTrackerEvent } from '~/util/EventLogger';
import { getLikerIdSettingsURL } from '~/util/links';
import { escapeCSVField, downloadCSV } from '~/util/misc';

import walletLoginMixin from './wallet-login';

export default {
mixins: [walletLoginMixin],
computed: {
...mapGetters([
'getAddress',
Expand Down Expand Up @@ -62,34 +65,10 @@ export default {
},
methods: {
...mapActions([
'openConnectWalletModal',
'disconnectWallet',
'initWallet',
'initWalletAndLogin',
'initIfNecessary',
'restoreSession',
'walletFetchLIKEBalance',
'signLogin',
'walletFetchFollowees',
'walletFetchFollowers',
]),
async connectWallet({ shouldSkipLogin = false } = {}) {
const connection = await this.openConnectWalletModal({
language: this.$i18n.locale.split('-')[0],
});
if (!connection) return false;
const { method } = connection;
logTrackerEvent(
this,
'user',
`connected_wallet_${method}`,
'connected_wallet',
1
);
return shouldSkipLogin
? this.initWallet(connection)
: this.initWalletAndLogin(connection);
},
async navigateToMyDashboard() {
if (!this.getAddress) {
const isConnected = await this.connectWallet();
Expand Down
Loading

0 comments on commit 453ddeb

Please sign in to comment.