Page History

HTML

<link rel="stylesheet" href="/digital-building-blocks/sites/download/attachments/475267168/conformant-wallets-style

/* wallet badge */

.badge-header > span > img { width: 32px; height: 32px; max-width: 32px; max-height: 32px; }
.badge-body div > span > img { max-width: 16px; max-height: 16px; width: 16px; height: 16px; }
#same-devices_full > div > span:nth-child(2) > img { max-width: 5px; width: 5px; height: 15px; }
#cross-devices_full > div > span:nth-child(2) > img { max-width: 15px; } 


.wallet-capabilities_organization > p:first-child, .wallet-capabilities_organization p:last-child { display: none; }
.wallet-capabilities_organisation > p:first-child, .wallet-capabilities_organisation p:last-child { display: none; }
.wallet-capabilities_individual > p:first-child, .wallet-capabilities_individual p:last-child { display: none; }



.wallet-capabilities_organization .wallet-badge-container, .wallet-capabilities_organisation .wallet-badge-container {

background: linear-gradient(#fff, #fff) padding-box, #CCF0FC border-box;
border: 2px solid transparent;
box-shadow: 0px 4px 8px rgba( 0, 55, 100, 0.06);
border-radius: 27px 0px;
width: fit-content;
max-width: 180px;
min-width: 166px;
margin-top: -8px;
}

.wallet-capabilities_organization .badge-header, .wallet-capabilities_organisation .badge-header {

background: #CCF0FC;
padding: 20px 12px;
border-top-left-radius: 24px;
display: flex;
align-items: center;
gap: 10px;
color: #1D0D34;
font-size: 14px;
margin: -1.8px;

}


.wallet-capabilities_individual .wallet-badge-container, .wallet-capabilities_individual .wallet-badge-container {

background: linear-gradient(#fff, #fff) padding-box, #FFE6F2 border-box;
border: 2px solid transparent;
box-shadow: 0px 4px 8px rgba( 0, 55, 100, 0.06);
border-radius: 27px 0px;
width: fit-content;
max-width: 180px;
min-width: 166px;
margin-top: -8px;
}

.wallet-capabilities_individual .badge-header, .wallet-capabilities_individual .badge-header {

background: #FFE6F2;
padding: 20px 12px;
border-top-left-radius: 24px;
display: flex;
align-items: center;
gap: 10px;
color: #1D0D34;
font-size: 14px;
margin: -1.8px;

}



.badge-body { 
	
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 12px;

}

.badge-body div {
	
display: flex;
gap: 5px;
font-size: 15px;
color: #1D0D34;
}

/* Accordion */

#find-your-wallet .content-by-label > li { margin-top: 0!important;}
#previous-versions .collapse button { box-shadow: unset; border-radius: unset!important; background: none!important; border-bottom: 1px solid #BBB6C2; padding: 1rem 0; }
#previous-versions .collapse button:after { content: none; }
#previous-versions .collapse-icon { right: 11px; }
#previous-versions .collapse-panel { box-shadow: unset; padding: 20px 0; }

CSS Stylesheet

#main-content > p:nth-child(1) { display: none;}
#main-content > p:nth-child(2) { display: none;}
#main-content > p:nth-child(5) { display: none;}
#main-content > p:nth-child(6) { display: none; }

/*---WALLETS SECTION INTRODUCTION---*/
.wallets-introduction {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/bubble-backgroundupdate.png");
background-position: top right; background-repeat: no-repeat; background-size: contain;}




.wallets-introduction .outline .ico-arrow-south { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/ico-arrow-south-primary.svg") left no-repeat!important; }




.conformant-curve-top { z-index:1; margin-top:-1rem; position:relative;}
.conformant-curve-top > p > img { position:absolute; top:-1px; left:-1%; width: 102%;}
.conformant-wave-bottom { overflow: hidden; z-index:1; position:relative; height:10rem; background-color: #E5F7FE; }
.conformant-wave-bottom > p > img { position:absolute; bottom:0; left:-1%; width: 102%;}

.bg-gradient { background: linear-gradient(90deg, #00B3EF 0%, #004494 50%, #004494 65.57%, #FF0179 115.49%)!important;}

#info-wallets .col-6 { padding: 16px 12px 0; }
#info-wallets .card-content-info { padding: 5.5rem 0 0.5rem; }
#info-wallets .card-content-info p, #info-wallets .card-content-info h3 { color: white; }
#info-wallets .card-content-info img { position: relative; left: -14px; }
#info-wallets .heading-deco.terciary:after { background-color: white; }

.line-separator hr { border: none; border-bottom: 1px solid #e8e7eb; margin: 16px 0; }
.line-separator > p:first-child, .line-separator > p:last-child { display: none; }
.line-separator-header hr { margin-left: -40px; margin-right: -40px; margin-bottom: 24px;}
.line-separator-header > p:first-child, .line-separator-header > p:last-child { display: none; }

@media screen and ( max-width: 380px ) {
 	
	#find-your-wallet .content-by-label li { margin-left: 20px!important; max-width: 326px!important; min-width: 326px!important; }
 }

@media screen and (min-width: 381px ) and ( max-width: 550px  ) {
 	
	#find-your-wallet .content-by-label li { margin-left: 20px!important; max-width: 354px!important; min-width: 354px!important; }
 }
@media screen and ( max-width: 550px ) {
	#become-conformant .col-12 { padding: 0 3rem; }
 	#pick-your-wallet .content-by-label li { padding: 37px 25px!important; }
	.line-separator-header hr { margin-left: -25px; margin-right: -25px; }
	.tested-container > div:first-child > div, .tested-container > div:last-child > div { font-size: 12px!important; }
 	.wallet-category div, .card-wallet__footer p, .application-types span p { font-size: 13px!important; }
    #previous-versions { padding: 3rem 15px; } 
	#find-your-wallet .f-block-section  { align-items: flex-start!important; }
	#find-your-wallet h3 { font-size: 24px!important; }
}
@media screen and ( min-width: 551px ) and ( max-width: 767px ) {

	#find-your-wallet .content-by-label li { max-width: unset!important; width: 94%; }
}
@media screen and ( max-width: 767px ) {
	#find-your-wallet .content-by-label li { margin-left: 20px!important;}
	#find-your-wallet { padding: 3rem 20px; }
 	#find-your-wallet .s-block-section { padding-left: 10px!important; }
	.wallets-introduction { background: none!important; }
	#info-wallets .col-6 { padding: 16px 12px 2.5rem; }
	#info-wallets .card-content-info { padding: 2.5rem 0 0.5rem; }
	.bg-gradient { background: linear-gradient(90deg, #00B3EF 0%, #004494 50%, #004494 65.57%, #FF0179 115.49%)!important; }
   /* .conformant-curve-top { display: none; } */
 	/* .conformant-wave-bottom { display: none; } */
	.column-buttons { display: flex; flex-direction: column; gap: 24px; } 
	.mobile-view-intro { display: block!important; }
	.desktop-view-intro { display: none!important; }
}
@media screen and ( min-width: 768px ) {
	.desktop-view-intro { display: flex!important; }
	.mobile-view-intro { display: none!important; }
}
@media screen and ( max-width: 785px ) {
	#previous-versions .content-by-label li { width: 100%!important; }
}
.spc-btns { padding-left: 24px;}
@media screen and ( max-width: 973px ) {
	.spc-btns { display: block; padding-top: 24px; }
}
#list-wallet-cards { padding-top: 0.5rem; }

Div

class	section wallets-introduction

Div

class	container

Div

class	cols desktop-view-intro

Div

class	col-5

Html-bobswift

<h1 class="heading-deco terciary">Conformant Wallets</h1>
<p>Welcome to the EBSI conformant wallets page! Here, you will find information about the different types of digital wallets that are available and conformant with EBSI specifications. The three main types of wallets include Holder, Issuer, and Verifier wallets, each with their own unique capabilities.</p>
<p><a href="#become-conformant" class="btn secondary anchor-smooth-scroll"><span>Test your wallet</span><span class="ico-arrow-south"></span></a><span class="spc-btns"></span><a href="#find-your-wallet" class="btn secondary outline anchor-smooth-scroll"><span>Find your wallet</span><span class="ico-arrow-south"></span></a></p>

Div

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Conformant%20wallets.gif
alt	Conformant Wallets Illustration
class	img-fluid img-right

Div

class	cols mobile-view-intro

Div

class	col-5

Html-bobswift

<h1 class="heading-deco terciary">Wallets</h1>
<p>Welcome to the EBSI conformant wallets page! Here, you will find information about the different types of digital wallets that are available and conformant with EBSI specifications. The three main types of wallets include Holder, Issuer, and Verifier wallets, each with their own unique capabilities.</p>

Div

style	text-align: center;

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Conformant%20wallets.gif
alt	Conformant Wallets Illustration
class	img-fluid

HTML

<p class="column-buttons" ><a href="#become-conformant" class="btn secondary outline anchor-smooth-scroll"><span>Test your wallet</span><span class="ico-arrow-south"></span></a><a href="#find-your-wallet" class="btn secondary anchor-smooth-scroll"><span>Find your wallet</span><span class="ico-arrow-south"></span></a></p>

Div

class	conformant-curve-top bg-gradient

Html-bobswift
<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/shape-curve-simple-white.svg" alt="">

Div

id	info-wallets
class	section bg-gradient

Div

class	container

Div

class	cols

Div

class	col-6

Div

class	card

Div

class	card-content-info

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Wallet_v1_Flat%203.png?api=v2
alt	Digital wallet
width	80px
height	80px

Html-bobswift

<h3 class="heading-deco terciary">What is a digital wallet?</h3>
<p>A digital wallet in the context of EBSI is a type of online storage that lets you securely keep track of your digital assets and information, like digital certificates and digital identity information. It's like a traditional wallet but storing digital information.</p>

Div

class	col-6

Div

class	card

Div

class	card-content-info

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Digital%20wallet%20phone%20conformant_flat.png?api=v2
alt	Digital wallet
width	70px
style	margin-bottom:13px;
height	65px

Html-bobswift

<h3 class="heading-deco terciary">What is a conformant wallet?</h3>
<p>A conformant wallet is a type of wallet that has successfully passed the Conformance Test. The test verifies that the wallet meets certain standards for performance and functionality, whether it is a holder, issuer, or verifier wallet. 
The Conformance Test assesses the wallet's ability to handle credentials assigned by a mock issuer and return them to a mock verifier.</p>

Div

class	section bg-gradient conformant-wave-bottom

Html-bobswift
<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/shape-wave-white.svg" alt="">

Div

id	which-wallet
class	section

Div

class	container

Div

class	cols justify-content-between align-items-center

Div

class	col-6 wallet-types

HTML

<h2 class="heading-deco terciary">Which wallet do I need?</h2>
<p>Different wallets offer different functionalities. Under EBSI's Verifiable Credentials exchange framework, we distinguish three different types of functionalities, which an individual wallet may chose to offer alone, or in combination:</p>
<div>
<img style="width:35px;" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Number%3D01.svg"/>
<p><strong>Wallets for holders:</strong> Can request issuance of Verifiable Credentials (VCs) and receive them instantly or deferred.</p>
</div>
<div>
<img style="width:35px;" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Number%3D02.svg"/>
<p><strong>Wallet for issuer:</strong> these wallets allow organisations like universities or ministries to manage their accreditations on the blockchain ledger, and issue Verifiable Credentials to Holders.</p>
</div>
<div>
<img style="width:35px;" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Number%3D03.svg"/>
<p><strong>Wallet for Verifiers:</strong> these wallets allow organisations like companies (e.g. employer), or universties to verify the authenticity of a Verifiable Credential presented by a Holder.</p>
</div>

Div

class	col-5

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Digital%20Wallet_Isometric%201.png?api=v2
class	img-fluid

Div

id	find-your-wallet
class	section

Div

class	container

Div

class	cols find-your-wallet-header

Div

class	col-12

HTML
<h2 class="heading-deco terciary">Find your wallet</h2>

Div

class	cols find-your-wallet-body

Div

class	col-12

HTML

    <div id="type-of-wallet">
      <div class="f-block-section">
        <img
          src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/illu-num-1.png"
        />
        <h3>Select which type of wallet you need</h3>
      </div>
      <div class="s-block-section">
        <div id="organisation-card" class="card-wallet-cta">
          <div class="container-h-f">
            <div class="card-wallet-header">
              <img
                aria-hidden="true"
                src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/verifier-icon.png"
                alt=""
              />
            </div>
            <div class="card-wallet-body">
              <h4>Organisation wallet</h4>
              <p>A wallet that is controlled by an organisation,
				such as an issuer or verifier, and is used to provide 
				digital credentials or other services to users.
              </p>
            </div>
          </div>
          <div class="card-wallet-footer">
            <p>
              <strong>Select the capabilities you are interested in</strong>
            </p>
            <div id="org-tabs" class="tabs pick-type">
              <a href="#pick-your-wallet" class="tab anchor-smooth-scroll" data-type="accredit-authorise" data-index="0" >
                <p>Accredit & Authorise</p>
                <div class="box-checker"><div></div></div>
              </a>
              <a  data-type="issue" data-index="1" href="#pick-your-wallet" class="tab anchor-smooth-scroll">
                <p>Issue</p>
                <div class="box-checker"><div></div></div>
              </a>
              <a href="#pick-your-wallet" class="tab anchor-smooth-scroll" data-type="verify" data-index="2">
                <p>Verify</p>
                <div class="box-checker"><div></div></div>
              </a>
            </div>
          </div>
        </div>
        <div id="individual-card" class="card-wallet-cta">
          <div class="container-h-f">
            <div class="card-wallet-header">
              <img
                aria-hidden="true"
                src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/holder-icon.png"
                alt=""
              />
            </div>
            <div class="card-wallet-body">
              <h4>Individual wallet</h4>
              <p>A digital wallet that is used by natural persons
				 to store and manage their verifiable credentials.</p>
            </div>
          </div>
          <div class="card-wallet-footer">
            <p>
              <strong>Select the capabilities you are interested in</strong>
            </p>
            <div class="tabs pick-type">
              <a href="#pick-your-wallet" class="tab anchor-smooth-scroll" data-type="request-present-credentials" data-index="4" id="request-present_credentials" >
                <p>Request & present credentials</p>
                <div class="box-checker"><div></div></div>
             </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="pick-your-wallet">
      <div class="f-block-section">
        <img
          src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/illu-num-2.png"
        />
        <h3>Pick your wallet</h3>
      </div>
      <div class="s-block-section">

Div

id	loader-section

HTML
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/loader-low.gif" alt=""/>

Div

id	default-state-cards

HTML

<div class="default-state-container">
	<div><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/info-icon.png?version=1&modificationDate=1688642091828&api=v2"/></div>
	<div><p><strong>You need to select a type of wallet first,</strong> then the wallets will be automatically generated</p></div>
</div>

Div

id	no-results-cards

HTML

<div class="no-results-container"><img class="img-fluid" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/no-results-isometric.png"/>
<div><h4>No results found :(</h4><p>Sorry, there are no wallets that match your request at the moment.</p></div>
</div>

Div

id	list-wallet-cards

Div

class	cols card-conformant-wallets

Content by Label

showLabels	false
max	50
showSpace	false
sort	modified
reverse	true
excerptType	simple
cql	label = "walletsv3" and space = "EBSI"

HTML
</div> </div>

Div

id	previous-versions
class	section

Div

class	container

Div

class	cols

Div

class	col-12

HTML

<h2 class="heading-deco terciary">Previous versions - version 2</h2>
<p>Here is a list of wallets that have been tested and certified as conformant with a deprecated version of the EBSI specifications. Please note that while these wallets may still function in some capacity, they may not be able to take full advantage of all the features and benefits of the latest EBSI specifications. </p>

Div

class	cols

Div

HTML

<div class="collapse" id="accordionGroup" data-allow-multiple>

<!--FAQ 1-->
<div class="collapse-item">

<h3>
<button class="collapse-trigger" id="faq1" aria-expanded="false" aria-controls="sect1"> 
<span class="collapse-title h4">Conformant with versions 2<span class="collapse-icon"></span> </span> </button>
</h3>

<div class="collapse-panel" id="sect1" role="region" aria-labelledby="faq1" hidden="">
<p style="margin-bottom:40px;">Wallets conformant with WCT v2 which is focused on testing holder wallets.</p>

Content by Label

showLabels	false
max	30
showSpace	false
excerptType	simple
cql	label = "walletsv2"

HTML
<div class="loadmore-container"><a id="loadmore-cta" class="btn secondary outline"><span><strong>Load more</strong></span></a></div> </div> </div> <!----> </div>

Div

class	conformant-curve-top

Html-bobswift
<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/shape-curve-simple-white.svg" alt="">

Div

id	become-conformant

Div

class	container

Div

class	cols justify-content-center

Div

class	col-12

HTML

<h3>Do you want to become conformant ?</h3>
<p>Join the EBSI family and achieve wallet conformance today!</p>
<p><a class="btn secondary" href="https://hub.ebsi.eu/wallet-conformance" target="_blank"><span>Become conformant</span><span class="ico-external"></span></a></p>

CSS Stylesheet

#type-of-wallet .card-wallet-header > img { max-width: 80px; max-height: 80px; width: 80px; height: 80px; min-width: 80px; min-height: 80px; } 


/*
@media screen and ( max-width: 1185px ) {
	.content-coming-soon { flex-direction: column; gap: 16px; }
}

*/

#loader-section { position: relative; height: 10rem; width: 100%; display: flex; justify-content: center; align-items: center; }
#loader-section > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%); }

 @media screen and ( max-width: 768px ) {
	#find-your-wallet #type-of-wallet { margin-right: 20px; }
	#find-your-wallet .s-block-section { flex-direction: column; gap: 2.5rem!important;}
	#find-your-wallet .s-block-section > div { width: 100%!important; max-width: unset!important; }
}
@media screen and ( max-width: 1110px ) {
	#find-your-wallet .tabs { flex-direction: column;}
	#find-your-wallet .tabs > a { width: 100%; justify-content: space-between; }
}

/* --- */

/*Specific hack for Confluence*/
@media screen and (max-width: 340px) {
 .card-conformant-wallets .news-teaser-root > div > div > div { width: auto!important; margin:0!important;}
 .card-conformant-wallets .news-teaser-root > div > div > div > div > div > div { padding: 44px 8px 20px!important; }
 .card-wallet__header-title > h2 > a {font-size: 18px!important; line-height: 1; }
 .card-wallet__header-title > h2 { white-space: normal!important; max-width: 205px!important  }
}

@media screen and (max-width: 412px) {
	.card-conformant-wallets .news-teaser-root > div > div > div { width: auto!important;}
	.card-wallet__header-title > div > p {font-size: inherit!important;}
 	.card-wallet__header-title > h2 > a {font-size: 20px!important;}
	..card-wallet__header-title > h2 { white-space: nowrap!important;}
}


@media screen and (min-width: 905px) {
  .card-conformant-wallets .news-teaser-root > div > div > div  { margin: 0; } 
}

CSS Stylesheet

.container { max-width: 1217px!important; }
#find-your-wallet .container { max-width: 1217px!important; }
#find-your-wallet .find-your-wallet-body { }
#find-your-wallet .find-your-wallet-body > div.col-12 {padding-right: 0; }
#find-your-wallet .f-block-section { display: flex; align-items: center; gap: 13px; }
#find-your-wallet .f-block-section > img { width: 45px; height: 27px; }
#find-your-wallet .f-block-section > h3 { font-size: 32px; margin-bottom: 0; }
#find-your-wallet .s-block-section { display: flex; gap: 1.5rem; border-left: 2px solid #99E1F9; padding-left: 2.5rem; padding-bottom: 0.5rem; margin-top: 2.5rem; margin-bottom: 2rem;}
#find-your-wallet .s-block-section .card-wallet-cta { width: 50%; max-width: 576px; min-height: 388px; box-shadow: 0px 4px 20px rgb(0 55 100 / 10%); border-radius: 16px; background: white; padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;}
#find-your-wallet .s-block-section .card-wallet-cta .container-h-f { display: flex; flex-direction: column; justify-content: space-between; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-body p { margin-bottom: 0; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tabs { display: flex; gap: 24px; align-items: center; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tab { border: 1px solid #776E85; box-shadow: 0px 4px 20px rgb(0 55 100 / 10%); border-radius: 6px; padding: 10px 16px; display: flex; align-items: center; gap: 8px; cursor: pointer; text-decoration: none; }
#find-your-wallet .tab-container { display: flex; flex-direction: row; gap: 8px; align-items: center; }

#find-your-wallet .issue-cta { min-width: 93px; }
#find-your-wallet .verify-cta { min-width: 96px; }

#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tab p { margin-bottom: 0; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .box-checker {position: relative; border: 1.4px solid #8e8699; width: 16px; height: 16px; border-radius: 2px; min-width: 16px; max-width: 16px; min-height: 16px; max-height: 16px; }

/* Active */

#find-your-wallet .s-block-section .card-wallet-cta.activated { border: 1px solid #cd1d8b; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tab.activated { border: 1px solid #cd1d8b; background: #ffe6f2; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tab.activated .box-checker { border: 1.4px solid #cd1d8b; }
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tab.activated .box-checker:after { content: ''; background-image: url('https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/check-icon.png'); background-size: cover; position: relative; top: -7px; left: -2px; display: block; width: 25px; height: 25px;}
#find-your-wallet .s-block-section .card-wallet-cta .card-wallet-footer .tab.activated .box-checker > div { position: absolute; left:0; top:0; border-right: 2px solid #ffe6f2; width: 15px; height: 8px; }

/* Hover */
@media screen and ( min-width: 1024px ) {

#find-your-wallet .tab:hover { border: 1px solid #cd1d8b!important; }
#find-your-wallet .tab:hover .box-checker { border: 1.4px solid #cd1d8b!important; }
#find-your-wallet .tab:hover .box-checker:after { display: block; content: ''; background-image: url('https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/check-icon.png'); background-size: cover; position: relative; top: -7px; left: -3px; width: 25px; height: 25px; }
#find-your-wallet .tab:hover .box-checker > div { position: absolute; left:0; top:0; border-right:2px solid white; width: 15px; height: 8px; }

}

/* pick wallet */
#pick-your-wallet { margin-top: 2rem; }
#pick-your-wallet .s-block-section { gap: unset; padding-left: 3rem; margin-right: 15px;}
#pick-your-wallet .s-block-section > p:first-child, #pick-your-wallet .s-block-section > p:last-child, #default-state-cards > p:first-child, #default-state-cards > p:last-child { display: none; }
#pick-your-wallet #default-state-cards { width: 100%; border: 1px solid #E8E7EB; border-radius: 14px; }
#pick-your-wallet .default-state-container { display: flex; gap: 11px; padding: 40px 42px; align-items: flex-start; }
#pick-your-wallet .default-state-container > div p { margin-bottom: 0; }

#pick-your-wallet #no-results-cards { width: 100%; display: flex; justify-content: center; }
#pick-your-wallet #no-results-cards .no-results-container { display: flex; justify-content: center; align-items: center; text-align: center; }
#pick-your-wallet #no-results-cards .no-results-container > div { max-width: 424px; }
#pick-your-wallet .no-results-container > div > p { font-size: 18px; line-height: 28px; }
/* #pick-your-wallet .no-results-container > div > h4, #pick-your-wallet .no-results-container > div > p { color: #004494; } */


/* *********wallets rendering********** */

#find-your-wallet iframe { display: unset!important; width: unset!important; }
#find-your-wallet iframe+div { display: flex; flex-wrap: wrap; height: auto!important;}
#find-your-wallet iframe+div div { position: unset!important; }

/* content - by - label */
.smalltext > p:first-child, .smalltext > p:last-child { display: none; }
.wallet-container-info > p:first-child, .wallet-container-info > p:last-child { display: none; }
#pick-your-wallet .content-by-label { display: flex; flex-wrap: wrap; gap: 24px;}
#pick-your-wallet .content-by-label li > div:first-child { display: none; }
#pick-your-wallet .content-by-label li > .details > a { display: none; }
#pick-your-wallet .small-text p:first-child, #pick-your-wallet .small-text p:last-child { display: none; }
#pick-your-wallet .content-by-label li { max-width: 383px; min-width: 383px; overflow: initial; height: auto; padding: 40px 40px 40px 40px; background: #ffffff; box-shadow: 0px 4px 10px rgb(0 55 100 / 10%); border-radius: 16px;}
#pick-your-wallet .content-by-label .details { margin: 0; padding: 0; }

.wallet-category { display: flex; flex-wrap: wrap; gap: 8px;}
.wallet-category p { margin-bottom: 0; }
.wallet-category > p:first-child { display: none; }
.wallet-category > p:nth-child(2) { width: 100%; }
.wallet-category > p:last-child { display: none; }
.wallet-category div { display: flex; gap: 10px; align-items: center; justify-content: space-evenly; width: fit-content; padding: 0.2rem 1rem; border: 0.5px solid #A59EAE; border-radius: 6px;}
.wallet-category div > span:first-child { display: flex; justify-content: center; align-items: center; margin-top: 0.1rem; }
.wallet-category div > span:last-child { color: #4A3D5D;}

/* -- card new -- */

.card-wallet__header-title > div { padding-top: 0px; }
.card-wallet__header-title a { display: flex; gap: 10px; align-items: center; text-decoration: none!important; white-space: initial; }
.card-wallet__header + .card-wallet__info div > p:first-child { margin-bottom: 4px; }
.card-wallet__header + .card-wallet__info div > p:last-child { margin-bottom: 24px; }
.card-wallet__info div > p:last-child { margin-bottom: 0px; }
.card-wallet__info .wallet-type_individual > div:nth-child(3) { display: none!important; }
.card-wallet__info .wallet-type_organization > div:nth-child(2) { display: none!important; }
.card-wallet__info .wallet-type_organisation > div:nth-child(2) { display: none!important; }
.request-present_credentials a { font-size: 11px; }


.device_cross-same_disabled { display: none; }
.device_cross-same, .device_cross-same_full { }
.device_cross-same p, .device_cross-same_full p { margin-bottom: 0px; }
.device_cross-same > p:first-child, .device_cross-same > p:nth-child(3) { display: none; }
.device_cross-same_full > p:first-child, .device_cross-same_full > p:nth-child(3) { margin-bottom: 8px; }
.tested-container { display: flex;  gap: 6px; flex-wrap: wrap;}
.device_cross-same > .tested-container > div:first-child, .device_cross-same_full > .tested-container > div:first-child { border: 1px solid #D2CFD6; border-radius: 6px; height: 100%; padding: 4px 7px; min-width: 144px; background: white;}
.device_cross-same > .tested-container > div:first-child > div, .device_cross-same_full > .tested-container > div:first-child > div { color: #4A3D5D; font-size: 16px; display: flex; justify-content: space-between; gap: 3px;}
.device_cross-same > .tested-container > div:last-child, .device_cross-same_full > .tested-container > div:last-child { border: 1px solid #D2CFD6; border-radius: 6px; height: 100%; padding: 4px 7px; min-width: 144px; background: white;}
.device_cross-same > .tested-container > div:last-child > div, .device_cross-same_full > .tested-container > div:last-child > div { color: #4A3D5D; font-size: 16px; display: flex; justify-content: space-between; gap:3px;}
.device_cross-same > .tested-container > div:first-child span, .device_cross-same > .tested-container > div:last-child span { display: flex; align-items: center;}
.device_cross-same_full > .tested-container > div:first-child span, .device_cross-same_full > .tested-container > div:last-child span { display: flex; align-items: center;} 
#cross-devices_desktop { min-width: auto; }
#cross-devices_mobile { min-width: auto; }
#cross-devices_desktop > div > span:nth-child(2), #cross-devices_desktop > div > span:nth-child(3) { display: none; }
#cross-devices_mobile > div > span:nth-child(2), #cross-devices_mobile > div > span:nth-child(1) { display: none; }
#cross-devices_disabled { display: none; }

#same-devices_desktop { min-width: auto; }
#same-devices_mobile { min-width: auto; }
#same-devices_disabled { display: none; }
#same-devices_desktop > div > span:nth-child(2), #same-devices_desktop > div > span:nth-child(3) { display: none; }
#same-devices_mobile > div > span:nth-child(2), #same-devices_mobile > div > span:nth-child(1) { display: none; }


.use-cases_img { border: 2px solid #004494; border-top-left-radius: 24px; border-bottom-right-radius: 24px; padding: 0.2rem; display: flex; flex-direction: column; justify-content : end; align-items: center; min-width: 65px; min-height: 81px; max-width: 65px; max-height: 81px; line-height: 1; font-size: 8px; text-align: center; text-decoration: none; gap: 4px; color: #004494;}
#use-case_full > div { display: flex; gap: 1.25rem; }
#use-case_diploma > div, #use-case_ssi > div { display: flex; }
#use-case_diploma > div > div:nth-child(2), #use-case_diploma > div > div:nth-child(3) { display: none; }
#use-case_ssi > div > div:nth-child(1), #use-case_ssi > div > div:nth-child(3) { display: none; }
#use-case_social-security > div > div:nth-child(1), #use-case_social-security > div > div:nth-child(2) { display: none; }

.application-types, .application-types span { display: flex; align-items: center; gap: 8px;}
.application-types span p { margin-bottom: 0px; color: #4A3D5D;}
.application-types span { border: 1px solid #D2CFD6; border-radius: 4px; padding: 4px 8px; background: white;}
#type_mobile > div > span:nth-child(2), #type_mobile > div > span:nth-child(3) { display: none; }
#type_mobile-desktop > div > span:nth-child(3) { display: none; }

#type_mobile-web > div > span:nth-child(2) { display: none; }

#type_desktop > div > span:nth-child(1), #type_desktop > div > span:nth-child(3) { display: none; }
#type_desktop-mobile > div > span:nth-child(3) { display: none; }

#type_desktop-web > div > span:nth-child(1) { display: none; }

#type_web > div > span:nth-child(1), #type_web > div > span:nth-child(2) { display: none; }
#type_web-mobile > div > span:nth-child(2) { display: none; }

#type_web-desktop > div > span:nth-child(1) { display: none; }


.loadmore-container { display: flex; justify-content: center; padding-bottom: 36px; padding-top: 10px;}
#loadmore-cta { display: none; }

.card-wallet__header { display: flex; flex-direction: column;}
.card-wallet__header-logo p { margin-bottom: 18px;}
.card-wallet__header-title > h2 > a{font-weight: 600; font-size: 24px; line-height: 28px; color:#1D0D34; text-decoration: none!important;}
.card-wallet__header-title > h2 {line-height: 28px; white-space: nowrap;}
.card-wallet__header-title > p { margin: 0px; }
.card-wallet__header-title > a { margin-left: 11.5px; text-decoration: none!important;}
.card-wallet__header-title > a > img { width: 21px; height:21px; margin-bottom: 5px;}
.card-wallet__header .card-wallet__header-title { display: flex; max-width: fit-content; align-items: center}
.card-wallet__header .card-wallet__header-title > div > p {font-size : 24px; line-height: 1; color: #1d0d34; font-weight: 600; white-space: nowrap; margin-bottom: 0;}
.card-wallet__header .card-wallet__header-title > div:nth-child(2) {margin-top : 3px; padding-left: 11.5px;}
.card-wallet__header .card-wallet__header-title > div:nth-child(2) > p > span > img {width: 17px; height: 17px;}
.card-wallet__header .card-wallet__header-title > div:nth-child(2) > p > a > img { width: 21px; height: 21px; margin-top: 8px;}


.card-conformant-wallets .news-teaser-root > div > div > div { width:24.5rem; height: 100%; margin: 12px; background: #ffffff; border-radius: 16px; box-shadow: 0px 4px 10px rgba(0, 55, 100, 0.1); }
.card-conformant-wallets .news-teaser-root > div > div > div > div > div > div { padding: 44px 40px 40px 40px }
.card-conformant-wallets .news-teaser-root > div > div > div > div > div > div > div {margin: 0;}

.card-conformant-wallets > div > div > div > div:nth-child(n) > div > div > div > h2 { display: none;}



#service-disabled_banner { background: #FFE6F2; padding: 1rem;}
.service-disabled_container { display: flex!important; flex-direction: row; align-items: center; gap: 1.75rem;}
.service-disabled_content > p:nth-child(2) { margin-bottom: 4px; }
.service-disabled_img > p { margin: 0px; }
.service-disabled_content > p:nth-child(3) { width: 95%; }




/*Devices dynamic show*/
.full-activated > p > span:first-child:after{content: ' \007c'; margin-left: 8px;}
.de-activated {display: none;}
.phone-activated > p > span:last-child {display:none; }
.desktop-activated > p > span:first-child {display:none; } 


.specific-color {filter: invert(39%) sepia(98%) saturate(7114%) hue-rotate(310deg) brightness(85%) contrast(88%); margin-top: -18px; margin-bottom: 15px;}
.link-download {margin-right: 20px; margin-left:5px;}
.text-secondary span:after{  top:-15px; left:6px; background-size: 16px!important;}
.link-download span {padding-right:5px;}

.card-wallet__footer p {margin: 1.5rem 0 0 0;}


.card-wallet__body-devices { margin-top: 12px; margin-bottom: 1.5rem;}
.card-wallet__body-devices > div > p { font-weight: 600 }
.card-wallet__body-devices > div > p:first-child { display: none; }
.card-wallet__body-devices > div > p:nth-child(2) { margin-bottom: 8px; }
.card-wallet__body-devices:last-child > div > p:nth-child(2) img { width: 14px; height:14px;}
.card-wallet__body-devices div:last-child > div:last-child p { display: flex; position: relative; align-items: baseline; max-width: max-content; font-size: 14px; line-height: 20px; color: #776e85; }
.card-wallet__body-devices div:last-child > div:last-child > p > a { position: absolute; top: 2px; }
.card-wallet__body-devices div:last-child > div:first-child p { display: flex; align-items: center; width:200px; justify-content: space-between;}


.wallet-type { }
.wallet-type_individual > div:nth-child(2) > img { width: 21px; }
.wallet-type > p { color: #776e85; margin-bottom: 0px; }

.css">

Div

class	section wallets-introduction

Div

class	container

Div

class	cols desktop-view-intro

Div

class	col-5

Html-bobswift

<h1 class="heading-deco terciary">Conformant Wallets</h1>
<p>Welcome to the EBSI conformant wallets page! Here, you will find information about the different types of digital wallets that are available and conformant with EBSI specifications. The three main types of wallets include Holder, Issuer, and Verifier wallets, each with their own unique capabilities.</p>
<p><a href="#become-conformant" class="btn secondary anchor-smooth-scroll"><span>Test your wallet</span><span class="ico-arrow-south"></span></a><span class="spc-btns"></span><a href="#find-your-wallet" class="btn secondary outline anchor-smooth-scroll"><span>Find your wallet</span><span class="ico-arrow-south"></span></a></p>

Div

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Conformant%20wallets.gif
alt
class	img-fluid img-right

Div

class	cols mobile-view-intro

Div

class	col-5

Html-bobswift

<h1 class="heading-deco terciary">Wallets</h1>
<p>Welcome to the EBSI conformant wallets page! Here, you will find information about the different types of digital wallets that are available and conformant with EBSI specifications. The three main types of wallets include Holder, Issuer, and Verifier wallets, each with their own unique capabilities.</p>

Div

style	text-align: center;

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Conformant%20wallets.gif
class	img-fluid

HTML

<p class="column-buttons" ><a href="#become-conformant" class="btn secondary outline anchor-smooth-scroll"><span>Test your wallet</span><span class="ico-arrow-south"></span></a><a href="#find-your-wallet" class="btn secondary anchor-smooth-scroll"><span>Find your wallet</span><span class="ico-arrow-south"></span></a></p>

Div

class	conformant-curve-top bg-gradient

Html-bobswift
<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/shape-curve-simple-white.svg" alt="">

Div

id	info-wallets
class	section bg-gradient

Div

class	container

Div

class	cols

Div

class	col-6

Div

class	card

Div

class	card-content-info

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Wallet_v1_Flat%203.png?api=v2
alt	Digital wallet
width	80px
height	80px

Html-bobswift

<h3 class="heading-deco terciary">What is a digital wallet?</h3>
<p>A digital wallet in the context of EBSI is a type of online storage that lets you securely keep track of your digital assets and information, like digital certificates and digital identity information. It's like a traditional wallet but storing digital information.</p>

Div

class	col-6

Div

class	card

Div

class	card-content-info

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Digital%20wallet%20phone%20conformant_flat.png?api=v2
alt	Digital wallet
width	70px
style	margin-bottom:13px;
height	65px

Html-bobswift

<h3 class="heading-deco terciary">What is a conformant wallet?</h3>
<p>A conformant wallet is a type of wallet that has successfully passed the Conformance Test. The test verifies that the wallet meets certain standards for performance and functionality, whether it is a holder, issuer, or verifier wallet. 
The Conformance Test assesses the wallet's ability to handle credentials assigned by a mock issuer and return them to a mock verifier.</p>

Div

class	section bg-gradient conformant-wave-bottom

Html-bobswift
<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/shape-wave-white.svg" alt="">

Div

id	which-wallet
class	section

Div

class	container

Div

class	cols justify-content-between align-items-center

Div

class	col-6 wallet-types

HTML

<h2 class="heading-deco terciary">Which wallet do I need?</h2>
<p>Different wallets offer different functionalities. Under EBSI's Verifiable Credentials exchange framework, we distinguish three different types of functionalities, which an individual wallet may chose to offer alone, or in combination:</p>
<div>
	<p class="number-blue">01</p>
	<p><strong>Wallets for holders:</strong> Can request issuance of Verifiable Credentials (VCs) and receive them instantly or deferred.</p>
</div>
<div>
	<p class="number-blue">02</p>
	<p><strong>Wallet for issuer:</strong> these wallets allow organisations like universities or ministries to manage their accreditations on the blockchain ledger, and issue Verifiable Credentials to Holders.</p>
</div>
<div>
	<p class="number-blue">03</p>
	<p><strong>Wallet for Verifiers:</strong> these wallets allow organisations like companies (e.g. employer), or universties to verify the authenticity of a Verifiable Credential presented by a Holder.</p>
</div>

Div

class	col-5

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/Digital%20Wallet_Isometric%201.png?api=v2
class	img-fluid

Div

id	find-your-wallet
class	section

Div

class	container

Div

class	cols find-your-wallet-header

Div

class	col-12

HTML
<h2 class="heading-deco terciary">Find your wallet</h2>

Div

class	cols find-your-wallet-body

Div

class	col-12

HTML

 <div id="type-of-wallet">
	<div class="f-block-section">
		<p class="number-blue">01</p>
		<h3>Select which type of wallet you need</h3>
	</div>
	<div class="s-block-section">
		<div id="organisation-card" class="card-wallet-cta">
			<div class="container-h-f">
				<div class="card-wallet-header">
					<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/verifier-icon.png" alt="" />
				</div>
				<div class="card-wallet-body">
					<h4>Organisation wallet</h4>
					<p>A wallet that is controlled by an organisation, such as an issuer or verifier, and is used to provide digital credentials or other services to users.</p>
				</div>
			</div>
			<div class="card-wallet-footer">
				<p>
					<strong>Select the capabilities you are interested in</strong>
				</p>
				<div id="org-tabs" class="tabs pick-type">
					<a href="#pick-your-wallet" class="tab anchor-smooth-scroll" data-type="accredit-authorise" data-index="0">
						<p>Accredit & Authorise</p>
						<div class="box-checker"><div></div></div>
					</a>
					<a data-type="issue" data-index="1" href="#pick-your-wallet" class="tab anchor-smooth-scroll">
						<p>Issue</p>
						<div class="box-checker"><div></div></div>
					</a>
					<a href="#pick-your-wallet" class="tab anchor-smooth-scroll" data-type="verify" data-index="2">
						<p>Verify</p>
						<div class="box-checker"><div></div></div>
					</a>
				</div>
			</div>
		</div>
		<div id="individual-card" class="card-wallet-cta">
			<div class="container-h-f">
				<div class="card-wallet-header">
					<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/holder-icon.png" alt="" />
				</div>
				<div class="card-wallet-body">
					<h4>Individual wallet</h4>
					<p>A digital wallet that is used by natural persons to store and manage their verifiable credentials.</p>
				</div>
			</div>
			<div class="card-wallet-footer">
				<p>
					<strong>Select the capabilities you are interested in</strong>
				</p>
				<div class="tabs pick-type">
					<a href="#pick-your-wallet" class="tab anchor-smooth-scroll" data-type="request-present-credentials" data-index="4" id="request-present_credentials">
						<p>Request & present credentials</p>
						<div class="box-checker"><div></div></div>
					</a>
				</div>
			</div>
		</div>
	</div>
</div>
<div id="pick-your-wallet">
	<div class="f-block-section">
		<p class="number-blue">02</p>
		<h3>Pick your wallet</h3>
	</div>
	<div class="s-block-section">

Div

id	loader-section

HTML
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/loader-low.gif" alt=""/>

Div

id	default-state-cards

HTML

<div class="default-state-container">
	<div><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/info-icon.png?version=1&modificationDate=1688642091828&api=v2"/></div>
	<div><p><strong>You need to select a type of wallet first,</strong> then the wallets will be automatically generated</p></div>
</div>

Div

id	no-results-cards

HTML

<div class="no-results-container"><img class="img-fluid" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/475267168/no-results-isometric.png"/>
<div><h4>No results found :(</h4><p>Sorry, there are no wallets that match your request at the moment.</p></div>
</div>

Div

id	list-wallet-cards

Div

class	cols card-conformant-wallets

Content by Label

showLabels	false
max	100
showSpace	false
excerptType	simple
cql	label = "walletsv3" and space = "EBSI"

HTML
</div> </div>

Div

id	previous-versions
class	section

Div

class	container

Div

class	cols

Div

class	col-12

HTML

<h2 class="heading-deco terciary">Previous versions - version 2</h2>
<p>Here is a list of wallets that have been tested and certified as conformant with a deprecated version of the EBSI specifications. Please note that while these wallets may still function in some capacity, they may not be able to take full advantage of all the features and benefits of the latest EBSI specifications. </p>

Div

class	cols

Div

HTML

<div class="collapse" id="accordionGroup" data-allow-multiple>

<!--FAQ 1-->
<div class="collapse-item">

<h3>
<button class="collapse-trigger" id="faq1" aria-expanded="false" aria-controls="sect1"> 
<span class="collapse-title h4">Conformant with versions 2<span class="collapse-icon"></span> </span> </button>
</h3>

<div class="collapse-panel" id="sect1" role="region" aria-labelledby="faq1" hidden="">
<p style="margin-bottom:40px;">Wallets conformant with WCT v2 which is focused on testing holder wallets.</p>

Content by Label

showLabels	false
max	30
showSpace	false
excerptType	simple
cql	label = "walletsv2"

HTML
<div class="loadmore-container"><a id="loadmore-cta" class="btn secondary outline"><span><strong>Load more</strong></span></a></div> </div> </div> <!----> </div>

Div

class	conformant-curve-top

Html-bobswift
<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/468026266/shape-curve-simple-white.svg" alt="">

Div

id	become-conformant

Div

class	container

Div

class	cols justify-content-center

Div

class	col-12

HTML

<h3>Do you want to become conformant ?</h3>
<p>Join the EBSI family and achieve wallet conformance today!</p>
<p><a class="btn secondary" href="https://hub.ebsi.eu/wallet-conformance" target="_blank"><span>Become conformant</span><span class="ico-external"></span></a></p>

CSS Stylesheet

#previous-versions .line-separator-header hr { margin-left: -25px; margin-right: -25px; } #previous-versions .container { max-width: 1217px!important; } #previous-versions .content-by-label { display: flex; flex-wrap: wrap; gap: 40px;} #previous-versions .content-by-label li > div:first-child { display: none; } #previous-versions .content-by-label li > .details > a { display: none; } #previous-versions .small-text p:first-child, #pick-your-wallet .small-text p:last-child { display: none; } #previous-versions .content-by-label li { width: 31%; min-width: 340px; overflow: initial; height: auto; padding: 37px 25px; margin-top: -8px; background: #ffffff; box-shadow: 0px 4px 10px rgb(0 55 100 / 10%); border-radius: 16px; box-shadow: 0px 4px 20px rgba(0, 55, 100, 0.1); border: 0.96732px solid #E8E7EB; background: #F6F5F7;} #previous-versions .content-by-label .details { margin: 0; padding: 0; } #previous-versions a.btn.secondary { color: white!important; } #previous-versions .text-secondary { color: #cd1d8b!important; } #previous-versions #loadmore-cta { color: #cd1d8b!important; } /* last - section */ .conformant-curve-top > p > img { position:absolute; top:-1px; left:-1%; width: 102%;} .conformant-curve-top { z-index:1; margin-top:-1rem; position:relative;} .conformant-curve-top { background: linear-gradient(84.61deg, #00B3EF -13.37%, #004494 33.79%, #004494 65.57%, #FF0179 115.49%)!important; } #become-conformant { display: flex; align-items: center; text-align: center; height: 500px;} #become-conformant h3, #become-conformant p { color: white; } #sect1 { -webkit-animation : none!important; -moz-animation : none!important; }

HTML

<script>  

$(".smalltext")
  .contents()
  .filter(function () {
    return this.nodeType === 3
  })
  .remove()



const defSt = document.querySelector("#default-state-cards")
const noRes = document.querySelector("#no-results-cards")
const liCa = document.querySelector("#list-wallet-cards")
defSt.setAttribute("hidden", "")
noRes.setAttribute("hidden", "")
liCa.setAttribute("hidden", "")

window.addEventListener('load', function() {
	const loader = document.querySelector("#loader-section")
    loader.setAttribute("hidden","")
	loader.style.display = "none"
	defSt.removeAttribute("hidden")
	noRes.removeAttribute("hidden")
	liCa.removeAttribute("hidden")
})


document.addEventListener("DOMContentLoaded", function () {
	const tabs = document.querySelectorAll(".card-wallet-footer > .tabs > .tab")
	const defaultState = document.querySelector("#default-state-cards")
	const notFound = document.querySelector("#no-results-cards")
	const cardList = document.querySelector("#list-wallet-cards")
	const wallets = document.querySelectorAll(
		"#pick-your-wallet .wallet-container-info"
	  )

	try {
		const walletsSorted = walletsStructure(wallets)
		sortWallets(walletsSorted)
		walletsImpl(tabs, defaultState, notFound, cardList)
	} catch (error) {
		const errorContainer = document.querySelector("#pick-your-wallet > .s-block-section")
		errorContainer.innerHTML = `<h4 style="color: #CD1D8B"><strong>An error occurred while trying loading the wallets. Please try again later!</strong></h4>`
		console.error(error)
	}




})

const stateSection = (element, state) => {
  if (element) {
    element.style.display = state ? `${state}` : "none"
  }
}

const stateClassSwitcher = (elementFinder, action, classTrigger) => {
  const element = document.querySelector(`${elementFinder}`)
  if (action == "add") {
    element.classList.add(`${classTrigger}`)
  } else {
    element.classList.remove(`${classTrigger}`)
  }
}

const switchWalletRefs = () => {
  const tabs = document.querySelectorAll(".tab")
  tabs.forEach((tab) => {
    tab.classList.contains("activated")
      ? tab.setAttribute("href", "#pick-your-wallet")
      : tab.setAttribute("href", "#type-of-wallet")
  })
}

const walletsImpl = (tabs, defaultState, notFound, cardList) => {
  stateSection(defaultState, "block")
  stateSection(notFound, "none")
  stateSection(cardList, "none")

  tabs.forEach((tab) => {
    tab.classList.remove("activated")
    tab.addEventListener("click", function (e) {
      const parentId = this.closest("div").getAttribute("id")
      const thisId = this.getAttribute("id")
      stateSection(defaultState, "none")
      stateSection(cardList, "block")
      let counter = 0
      e.stopPropagation()
      this.classList.toggle("activated")
      switchWalletRefs()
      if (parentId == "org-tabs") {
        stateClassSwitcher("#organisation-card", "add", "activated")
        stateClassSwitcher("#individual-card", "remove", "activated")
        stateClassSwitcher(
          "#request-present_credentials",
          "remove",
          "activated"
        )
      }
      if (thisId == "request-present_credentials") {
        stateClassSwitcher("#organisation-card", "remove", "activated")
        stateClassSwitcher("#individual-card", "add", "activated")
        document.querySelectorAll("#org-tabs > a").forEach((tab) => {
          tab.classList.remove("activated")
        })
      }
      cardsSwitcher(counter, defaultState, notFound, cardList)
      e.preventDefault()
    })
  })
}

const cardsSwitcher = (counter, defaultState, notFound, cardList) => {
  const allWallets = document.querySelectorAll(
    "#pick-your-wallet .wallet-container-info"
  )

  let activeTabsTypes = document.querySelectorAll(
    "#type-of-wallet .tabs .tab.activated"
  )
  if (activeTabsTypes.length === 0) {
    stateClassSwitcher("#organisation-card", "remove", "activated")
    stateClassSwitcher("#individual-card", "remove", "activated")
  }
  let activeDataTypes = Array.from(activeTabsTypes).map((tab) => {
    return tab.getAttribute("data-type")
  })
  allWallets.forEach((wallet) => {
    const walletDataType = wallet.getAttribute("data-type")
    const dataTypeMatch = activeDataTypes.every((dataType) => {
      return walletDataType.includes(dataType)
    })
    if (dataTypeMatch) {
      counter++
      wallet.closest("li").style.display = "block"
    } else {
      wallet.closest("li").style.display = "none"
    }
    if (counter === 0) {
      stateSection(cardList, "none")
      stateSection(defaultState, "none")
      stateSection(notFound, "block")
    } else {
      if (activeTabsTypes.length === 0) {
        stateSection(defaultState, "block")
        stateSection(cardList, "none")
        stateSection(notFound, "none")
      } else {
        stateSection(cardList, "block")
        stateSection(notFound, "none")
        stateSection(defaultState, "none")
      }
    }
  })
}

const walletsStructure = (wallets) => {
  let dataWallet = ""
  const walletsSorted = []
  wallets.forEach((wallet, index) => {
    dataWallet =
      wallet.getAttribute("data-type") == "request-present-credentials"
        ? "a"
        : "b"

    walletsSorted.push({
      wallet,
      dataWallet,
      "data-type": wallet.getAttribute("data-type").split(",").length,
    })
  })
  return walletsSorted
}

const sortWallets = (walletsSorted) => {
  const finalizingWallets = []
  walletsSorted.sort(function (attrX, attrY) {
    if (attrX.dataWallet > attrY.dataWallet) return -1
    if (attrX.dataWallet < attrY.dataWallet) return 1

    if (attrX["data-type"] > attrY["data-type"]) return -1
    if (attrX["data-type"] < attrY["data-type"]) return 1
  })
  walletsSorted.forEach((obj) => {
    finalizingWallets.push(obj.wallet)
  })
  finalizingWallets.flat(1).forEach((wallet, index) => {
    let html = ""
    html = wallet
    const Uli = `#pick-your-wallet ul > li:nth-child(${
      index + 1
    }) > div.details > span`
    $(Uli).html(wallet)
  })
}






</script>

...

Page tree

Versions Compared

Old Version 195

New Version Current

Key