Skip to content

Commit

Permalink
feat: display a fixed banner to connect wallet on mobile (#295)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Majorfi
Majorfi authored Jul 25, 2023
1 parent b3f3780 commit c3abab0
Show file tree
Hide file tree
Showing 4 changed files with 121 additions and 50 deletions.
65 changes: 44 additions & 21 deletions apps/common/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@ import {cloneElement, Fragment, useEffect, useMemo, useState} from 'react';
import {usePublicClient} from 'wagmi';
import {Listbox, Transition} from '@headlessui/react';
import {useIsMounted} from '@react-hookz/web';
import {Button} from '@yearn-finance/web-lib/components/Button';
import {useWeb3} from '@yearn-finance/web-lib/contexts/useWeb3';
import {useChain} from '@yearn-finance/web-lib/hooks/useChain';
import {toSafeChainID} from '@yearn-finance/web-lib/hooks/useChainID';
import IconChevronBottom from '@yearn-finance/web-lib/icons/IconChevronBottom';
import IconWallet from '@yearn-finance/web-lib/icons/IconWallet';
import {truncateHex} from '@yearn-finance/web-lib/utils/address';
import {cl} from '@yearn-finance/web-lib/utils/cl';

import type {AnchorHTMLAttributes, DetailedHTMLProps, ReactElement} from 'react';

Expand Down Expand Up @@ -157,28 +159,49 @@ function WalletSelector(): ReactElement {
}, [ens, lensProtocolHandle, address, isActive, isMounted]);

return (
<div
onClick={(): void => {
if (isActive) {
onDesactivate();
} else if (!isActive && address) {
onSwitchChain(options?.defaultChainID || 1);
} else {
openLoginModal();
}
}}>
<p suppressHydrationWarning className={'yearn--header-nav-item text-sm'}>
{walletIdentity ? walletIdentity : (
<span>
<IconWallet
className={'yearn--header-nav-item mt-0.5 block h-4 w-4 md:hidden'} />
<span className={'relative hidden h-8 cursor-pointer items-center justify-center border border-transparent bg-neutral-900 px-2 text-xs font-normal text-neutral-0 transition-all hover:bg-neutral-800 md:flex'}>
{'Connect wallet'}
<>
<div
onClick={(): void => {
if (isActive) {
onDesactivate();
} else if (!isActive && address) {
onSwitchChain(options?.defaultChainID || 1);
} else {
openLoginModal();
}
}}>
<p suppressHydrationWarning className={'yearn--header-nav-item text-sm'}>
{walletIdentity ? walletIdentity : (
<span>
<IconWallet className={'yearn--header-nav-item mt-0.5 block h-4 w-4 md:hidden'} />
<span className={'relative hidden h-8 cursor-pointer items-center justify-center border border-transparent bg-neutral-900 px-2 text-xs font-normal text-neutral-0 transition-all hover:bg-neutral-800 md:flex'}>
{'Connect wallet'}
</span>
</span>
</span>
)}
</p>
</div>
)}
</p>
</div>
<div
onClick={(): void => {
if (isActive) {
onDesactivate();
} else if (!isActive && address) {
onSwitchChain(options?.defaultChainID || 1);
} else {
openLoginModal();
}
}}
className={cl('fixed inset-x-0 bottom-0 z-[87] border-t border-neutral-900 bg-neutral-0 md:hidden', walletIdentity ? 'hidden pointer-events-none' : '')}>
<div className={'flex flex-col items-center justify-center pb-6 pt-4 text-center'}>
{'You are not connected. Please connect to a wallet to continue.'}
<Button className={'mt-3 space-x-2'}>
<IconWallet className={'h-4 w-4'} />
<p>{'Connect wallet'}</p>
</Button>
</div>

</div>
</>
);
}

Expand Down
8 changes: 4 additions & 4 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
"@popperjs/core": "^2.11.8",
"@react-hookz/deep-equal": "^1.0.4",
"@sentry/nextjs": "^7.58.0",
"@wagmi/core": "^1.3.3",
"@yearn-finance/web-lib": "^0.20.94",
"@wagmi/core": "^1.3.8",
"@yearn-finance/web-lib": "^0.20.96",
"axios": "^1.4.0",
"dayjs": "^1.11.8",
"ethers": "5.7.2",
Expand All @@ -42,8 +42,8 @@
"swr": "^2.1.5",
"tailwindcss": "^3.3.2",
"telegraf": "^4.12.2",
"viem": "^1.2.5",
"wagmi": "^1.3.3",
"viem": "^1.4.1",
"wagmi": "^1.3.9",
"wido": "^0.2.8",
"zod": "^3.21.4"
},
Expand Down
4 changes: 2 additions & 2 deletions pages/ycrv/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ function HeaderPosition(): ReactElement {
<p className={'pb-2 text-lg text-neutral-900 md:pb-6 md:text-3xl'}>
{'Yearn has'}
</p>
<b className={'font-number text-4xl text-neutral-900 md:text-7xl'}>
<b className={'font-number text-3xl text-neutral-900 md:text-7xl'}>
<ValueAnimation
identifier={'veCRVTreasury'}
value={formatedYearnHas}
Expand Down Expand Up @@ -120,7 +120,7 @@ function ZapAndStats(): ReactElement {


return (
<div className={'col-span-12 grid w-full grid-cols-12 gap-4'}>
<div className={'col-span-12 grid w-full grid-cols-12 gap-4 overflow-x-hidden md:overflow-auto'}>
<div className={'col-span-12 md:col-span-8'}>
<CardZap className={'col-span-12 md:col-span-8'} />
</div>
Expand Down
94 changes: 71 additions & 23 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3001,10 +3001,10 @@
resolved "https://registry.yarnpkg.com/@wagmi/chains/-/chains-1.2.0.tgz#d59eaa70ec51a5fdcd113975926992acfb17ab12"
integrity sha512-dmDRipsE54JfyudOBkuhEexqQWcrZqxn/qiujG8SBzMh/az/AH5xlJSA+j1CPWTx9+QofSMF3B7A4gb6XRmSaQ==

"@wagmi/chains@1.5.0":
version "1.5.0"
resolved "https://registry.yarnpkg.com/@wagmi/chains/-/chains-1.5.0.tgz#0b23a1505704b4b07a46f41e1ec65a486aceb16b"
integrity sha512-JO5iqh7Km4GW/6XKKDYMq3YQ9wlOSGzzaTUQhALQ58KANxEZ70tZWhfTZAPD3fdgv4wheai7kyHDNgTW6X7fnw==
"@wagmi/chains@1.6.0":
version "1.6.0"
resolved "https://registry.yarnpkg.com/@wagmi/chains/-/chains-1.6.0.tgz#eb992ad28dbaaab729b5bcab3e5b461e8a035656"
integrity sha512-5FRlVxse5P4ZaHG3GTvxwVANSmYJas1eQrTBHhjxVtqXoorm0aLmCHbhmN8Xo1yu09PaWKlleEvfE98yH4AgIw==

"@wagmi/connectors@2.6.6":
version "2.6.6"
Expand All @@ -3022,12 +3022,12 @@
abitype "0.8.7"
eventemitter3 "^4.0.7"

"@wagmi/core@1.3.7", "@wagmi/core@^1.3.3":
version "1.3.7"
resolved "https://registry.yarnpkg.com/@wagmi/core/-/core-1.3.7.tgz#7bc00d172d206ffa171df0d5a813c3559d8824e3"
integrity sha512-ens31RwICdrbRanNYwlJs0DAw/LOqUPQm6qXsmEciOENT4w+7pC959LXU9xfaOADWVMekeLDmRqAGCszTNIXAg==
"@wagmi/core@1.3.8", "@wagmi/core@^1.3.8":
version "1.3.8"
resolved "https://registry.yarnpkg.com/@wagmi/core/-/core-1.3.8.tgz#e22eebd38fd7f6c84748ddfaad9f0a1e6d51107a"
integrity sha512-OYSxikoMizqVnpSkFTwGE7PwFaz2k0PXteSiI0W2Mtk4j4sZzRFdP+9AWeDB6AYm0yU3WvgN1IATx0EEBKUe3w==
dependencies:
"@wagmi/chains" "1.5.0"
"@wagmi/chains" "1.6.0"
"@wagmi/connectors" "2.6.6"
abitype "0.8.7"
eventemitter3 "^4.0.7"
Expand Down Expand Up @@ -3516,10 +3516,10 @@
resolved "https://registry.yarnpkg.com/@xtuc/long/-/long-4.2.2.tgz#d291c6a4e97989b5c61d9acf396ae4fe133a718d"
integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==

"@yearn-finance/web-lib@^0.20.94":
version "0.20.94"
resolved "https://registry.yarnpkg.com/@yearn-finance/web-lib/-/web-lib-0.20.94.tgz#dcfc20d26cea0cacb92e8f2f9e6865127be8930e"
integrity sha512-QZ1V6gbmTbuChEA9SKjwxUV7B9VnEkrr24XxcJA6+Y8pQMVoqdI2+7xnyYU+bNBQ3So6Oc/kQfKOnHYvgkfyyA==
"@yearn-finance/web-lib@^0.20.96":
version "0.20.96"
resolved "https://registry.yarnpkg.com/@yearn-finance/web-lib/-/web-lib-0.20.96.tgz#cd2368486ff51b1bbcb692872bab1b5a3916d3f5"
integrity sha512-HCOroqfIo9aX8qzl7BdBwWZdmONRhs2BspxqahZamVxHU+FyqsqrpmGhEsBYqsPHU8xib/R2iu3dVbuDYJANew==
dependencies:
"@babel/preset-typescript" "^7.22.5"
"@headlessui/react" "^1.7.15"
Expand All @@ -3535,7 +3535,7 @@
"@types/react-dom" "^18.2.7"
"@typescript-eslint/eslint-plugin" "^6.0.0"
"@typescript-eslint/parser" "^6.0.0"
"@wagmi/core" "^1.3.3"
"@wagmi/core" "^1.3.8"
axios "^1.4.0"
babel-loader "^9.1.3"
dayjs "^1.11.8"
Expand All @@ -3553,13 +3553,13 @@
react-hot-toast "2.4.1"
sass "^1.63.6"
sharp "^0.32.2"
tailwindcss "^3.3.2"
tailwindcss "^3.3.3"
ts-jest "^29.1.1"
ts-loader "^9.4.4"
tsup "^7.1.0"
typescript "^5.1.6"
viem "^1.2.5"
wagmi "^1.3.3"
viem "^1.3.0"
wagmi "^1.3.9"
zod "^3.21.4"

JSONStream@^1.3.5:
Expand All @@ -3580,6 +3580,11 @@ abitype@0.8.7:
resolved "https://registry.yarnpkg.com/abitype/-/abitype-0.8.7.tgz#e4b3f051febd08111f486c0cc6a98fa72d033622"
integrity sha512-wQ7hV8Yg/yKmGyFpqrNZufCxbszDe5es4AZGYPBitocfSqXtjrTG9JMWFcc4N30ukl2ve48aBTwt7NJxVQdU3w==

abitype@0.9.3:
version "0.9.3"
resolved "https://registry.yarnpkg.com/abitype/-/abitype-0.9.3.tgz#294d25288ee683d72baf4e1fed757034e3c8c277"
integrity sha512-dz4qCQLurx97FQhnb/EIYTk/ldQ+oafEDUqC0VVIeQS1Q48/YWt/9YNfMmp9SLFqN41ktxny3c8aYxHjmFIB/w==

abort-controller@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392"
Expand Down Expand Up @@ -8666,6 +8671,34 @@ tailwindcss@^3.3.2:
resolve "^1.22.2"
sucrase "^3.32.0"

tailwindcss@^3.3.3:
version "3.3.3"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.3.tgz#90da807393a2859189e48e9e7000e6880a736daf"
integrity sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==
dependencies:
"@alloc/quick-lru" "^5.2.0"
arg "^5.0.2"
chokidar "^3.5.3"
didyoumean "^1.2.2"
dlv "^1.1.3"
fast-glob "^3.2.12"
glob-parent "^6.0.2"
is-glob "^4.0.3"
jiti "^1.18.2"
lilconfig "^2.1.0"
micromatch "^4.0.5"
normalize-path "^3.0.0"
object-hash "^3.0.0"
picocolors "^1.0.0"
postcss "^8.4.23"
postcss-import "^15.1.0"
postcss-js "^4.0.1"
postcss-load-config "^4.0.1"
postcss-nested "^6.0.1"
postcss-selector-parser "^6.0.11"
resolve "^1.22.2"
sucrase "^3.32.0"

tapable@^2.1.1, tapable@^2.2.0:
version "2.2.1"
resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
Expand Down Expand Up @@ -9153,7 +9186,7 @@ victory-vendor@^36.6.8:
d3-time "^3.0.0"
d3-timer "^3.0.1"

viem@^1.0.0, viem@^1.2.5:
viem@^1.0.0:
version "1.2.12"
resolved "https://registry.yarnpkg.com/viem/-/viem-1.2.12.tgz#0342f52d05968bd1c2af5db0b9bc569926ae9151"
integrity sha512-TMhvqT2VaCaJyBfuNDyL1h8xPFyPDHeX6Qab66TjWscnNcTwkW0gojO4Uh+A4RuPzFxIlWSW+b5SjS8SJHlHpg==
Expand All @@ -9168,6 +9201,21 @@ viem@^1.0.0, viem@^1.2.5:
isomorphic-ws "5.0.0"
ws "8.12.0"

viem@^1.3.0, viem@^1.4.1:
version "1.4.1"
resolved "https://registry.yarnpkg.com/viem/-/viem-1.4.1.tgz#490f39b3f371bf58910b1b338c237e19066805cf"
integrity sha512-MtaoBHDSJDqa+QyXKG5d+S6EQSebRO0tzw6anSP4zC7AbC614vMeg9Y8LbkmEkWCw8swFYkort+H9l7GkWB0uA==
dependencies:
"@adraffy/ens-normalize" "1.9.0"
"@noble/curves" "1.0.0"
"@noble/hashes" "1.3.0"
"@scure/bip32" "1.3.0"
"@scure/bip39" "1.2.0"
"@wagmi/chains" "1.6.0"
abitype "0.9.3"
isomorphic-ws "5.0.0"
ws "8.12.0"

vite-node@0.32.4:
version "0.32.4"
resolved "https://registry.yarnpkg.com/vite-node/-/vite-node-0.32.4.tgz#7b3f94af5a87c631fbc380ba662914bafbd04d80"
Expand Down Expand Up @@ -9221,15 +9269,15 @@ vitest@^0.32.0:
vite-node "0.32.4"
why-is-node-running "^2.2.2"

wagmi@^1.3.3:
version "1.3.8"
resolved "https://registry.yarnpkg.com/wagmi/-/wagmi-1.3.8.tgz#544554fdab35ee32d93f107eb75b9d1924e22880"
integrity sha512-RCfcE+Q+yhyfq7j5u7KQRz2KXUMAMexu0Y2kr8z81t4fmDlU5C+OEVQ6NFoUzAzEsJpznpQjZgsfpHKeFm17hQ==
wagmi@^1.3.9:
version "1.3.9"
resolved "https://registry.yarnpkg.com/wagmi/-/wagmi-1.3.9.tgz#c21b0bc045e9888bd283accedcd9ef9606f04a70"
integrity sha512-BQbl+vWLNpLraXd/MWsl1P3I41l7DHrujx6qshIa1HDV7Mdh0GNrDuluRYBtuK2bBx9WM/Fjw45Ef2aKADan9A==
dependencies:
"@tanstack/query-sync-storage-persister" "^4.27.1"
"@tanstack/react-query" "^4.28.0"
"@tanstack/react-query-persist-client" "^4.28.0"
"@wagmi/core" "1.3.7"
"@wagmi/core" "1.3.8"
abitype "0.8.7"
use-sync-external-store "^1.2.0"

Expand Down

1 comment on commit c3abab0

@vercel
Copy link

@vercel vercel bot commented on c3abab0 Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

yearnfi – ./

ydraft.vercel.app
yearn.fi
yearn.finance
www.yearn.fi
vote.yearn.finance
y.finance
v2.yearn.finance
ybribe.com
www.y.finance
www.ybribe.com
yearnfi.yearn.farm
yearnfi-git-main.yearn.farm

Please sign in to comment.