Hugging Face's logo

Spaces:
playingapi
/
cobalt
Paused

App Files Community
cobalt
File size: 2,644 Bytes 
43a06dc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
 
<script lang="ts">
    import { t } from "$lib/i18n/translations";
    import { copyURL, openURL } from "$lib/download";

    import CopyIcon from "$components/misc/CopyIcon.svelte";
    import IconExternalLink from "@tabler/icons-svelte/IconExternalLink.svelte";

    export let type: "copy" | "open";
    export let name: string;
    export let address: string;
    export let title = "";

    let copied = false;

    $: if (copied) {
        setTimeout(() => {
            copied = false;
        }, 1500);
    }
</script>

<div class="wallet-holder">
    <button
        class="wallet"
        aria-label={$t(`donate.alt.${type}`, {
            value: name,
        })}
        on:click={() => {
            if (type === "copy") {
                copied = true;
                copyURL(address);
            } else {
                openURL(address);
            }
        }}
    >
        <div class="wallet-icon">
            {#if type === "copy"}
                <CopyIcon regularIcon={true} check={copied} />
            {:else}
                <IconExternalLink />
            {/if}
        </div>

        <div class="wallet-text">
            <div class="wallet-name">{name}</div>
            <span class="wallet-address">
                {#if title}
                    {title}
                {:else if type === "copy"}
                    {address}
                {:else}
                    {address.split("//", 2)[1]}
                {/if}
            </span>
        </div>
    </button>
</div>

<style>
    .wallet-holder {
        display: flex;
        gap: 6px;
        flex-direction: column;
        overflow: hidden;
    }

    .wallet-name {
        font-size: 13px;
        color: var(--gray);
        font-weight: 400;
    }

    .wallet {
        overflow: clip;
        justify-content: flex-start;
        align-items: center;
        text-align: start;
        line-break: anywhere;
        padding: 0;
        gap: 10px;
    }

    .wallet-icon {
        min-width: 42px;
        max-width: 42px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1.5px var(--button-stroke) solid;
        margin-left: 3px;
    }

    .wallet-text {
        display: flex;
        flex-direction: column;
        padding: 6px 0;
    }

    .wallet-icon :global(svg) {
        width: 18px;
        height: 18px;
        color: var(--secondary);
    }

    .wallet-text,
    .wallet-address {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .wallet-address {
        font-size: 14px;
    }
</style>