Skip to content

Commit

Permalink
feat(frontend): add a link to learn more about ERC20 ICP on Ethereum (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
peterpeterparker authored Sep 26, 2023
1 parent 42db866 commit e2a4c6f
Show file tree
Hide file tree
Showing 5 changed files with 42 additions and 1 deletion.
3 changes: 2 additions & 1 deletion .env.example
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,5 @@ VITE_OISY_URL=https://oisy.com
VITE_OISY_ICON=https://oisy.com/favicons/icon-512x512.png
VITE_OISY_REPO_URL=https://github.com/dfinity/oisy-wallet
VITE_AIRDROP=false
VITE_ERC20_ICP_SYMBOL=ckICP
VITE_ERC20_ICP_SYMBOL=ckICP
VITE_ERC20_ICP_REPO_URL=https://github.com/dfinity/erc20-icp
29 changes: 29 additions & 0 deletions src/frontend/src/lib/components/core/Erc20Icp.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<script lang="ts">
import { ERC20_ICP_REPO_URL } from '$lib/constants/erc20-icp.constants';
import { IconInfo } from '@dfinity/gix-components';
</script>

<a
href={ERC20_ICP_REPO_URL}
rel="external noopener noreferrer"
target="_blank"
class="no-underline inline-block text-center pt-1 pb-3 font-bold text-xs md:text-base"
>
<IconInfo />
<span class="pl-1">Learn more about ERC20 ICP on Ethereum.</span>
</a>

<style lang="scss">
a {
color: var(--alpha-color, var(--color-misty-rose));
margin: 0 auto;
:global(svg) {
vertical-align: bottom;
@include media.min-width(medium) {
vertical-align: sub;
}
}
}
</style>
6 changes: 6 additions & 0 deletions src/frontend/src/lib/components/hero/Hero.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@
import Logo from '$lib/components/ui/Logo.svelte';
import { token } from '$lib/derived/token.derived';
import Balance from '$lib/components/hero/Balance.svelte';
import Erc20Icp from '$lib/components/core/Erc20Icp.svelte';
export let summary = false;
export let actions = true;
export let send = false;
export let erc20IcpLink = false;
let displayTokenSymbol = false;
$: displayTokenSymbol = summary && $erc20TokensInitialized;
Expand Down Expand Up @@ -42,6 +44,10 @@
<Actions {send} />
</div>
{/if}

{#if erc20IcpLink}
<Erc20Icp />
{/if}
</article>
</div>

Expand Down
2 changes: 2 additions & 0 deletions src/frontend/src/lib/constants/erc20-icp.constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,3 +8,5 @@ const ERC20_ICP_BURN_API = 'function burnToAccountId(uint256 _amount, bytes32 _t
export const ERC20_ICP_ABI = [...ERC20_ABI, ERC20_ICP_BURN_API];

export const ERC20_ICP_SYMBOL = import.meta.env.VITE_ERC20_ICP_SYMBOL;

export const ERC20_ICP_REPO_URL = import.meta.env.VITE_ERC20_ICP_REPO_URL;
3 changes: 3 additions & 0 deletions src/frontend/src/routes/(app)/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
import AirdropButton from '$lib/components/airdrop/AirdropButton.svelte';
import { airdropAvailable } from '$lib/derived/airdrop.derived';
import AirdropWorker from '$lib/components/airdrop/AirdropWorker.svelte';
import { isErc20Icp } from '$lib/utils/token.utils';
import { token } from '$lib/derived/token.derived';
let route: 'transactions' | 'tokens' | 'settings' = 'tokens';
$: route = isRouteSettings($page)
Expand All @@ -19,6 +21,7 @@
summary={route === 'transactions'}
send={route === 'transactions'}
actions={route !== 'settings'}
erc20IcpLink={isErc20Icp($token)}
/>

<main>
Expand Down

0 comments on commit e2a4c6f

Please sign in to comment.